노 - 첫걸음

이전 블로그 항목에서 프로그래밍 언어 로고를 소개했습니다. 초등학교에서 일할 때 로고를 사용하여 프로그래밍을 아이들에게 소개했습니다. 그러나 나는 단지 타이핑하는 것이 어린 아이들에게 장벽이라는 것을 알아차렸고, 그래서 완전한 그래픽 인터페이스를 가진 일종의 로고 라이트인 Nugo를 만들었습니다. 주로 터치 스크린 인터페이스가 있는 태블릿에서 실행되도록 설계되었습니다.

나는 Nugo에 상당히 만족합니다. 하지만 두 가지 주요 관심사가 있습니다. 하나는 전적으로 바닐라 JavaScript로 만들어졌습니다. 확장 가능하도록 최선을 다했지만 코드를 유지 관리하기가 점점 더 어려워졌습니다. 둘째, 시스템은 변수나 수학적 표현을 허용하지 않고 상수만 허용합니다. 사용하기 쉽지만 변수의 부족은 매우 제한적입니다.

그리고 그것이 저를 이 최신 프로젝트인 Rho로 이끌었습니다. Rho에 대한 제 비전은 여러 면에서 제가 Nugo에서 했던 것과 비슷하지만 위에서 언급한 두 가지 문제를 해결하는 것입니다. 우선, 이 새로운 프로젝트는 React에서 생성되고 있습니다. 둘째, 인터페이스는 변수를 사용하고 더 복잡한 표현식을 작성할 수 있도록 합니다.

마지막 부분부터 시작하겠습니다. 함수와 변수를 사용하여 표현식을 작성하는 인터페이스입니다. 이것은 기능이 매우 유연하기 때문에 기능을 구성하여 수행됩니다. 함수는 단순히 상수 값을 반환할 수 있습니다. 변수의 값을 얻거나 설정할 수 있습니다. 덧셈과 같은 연산으로 작용할 수 있습니다. 그리고 함수에 대한 인수를 함수 자체로 허용함으로써 기본적으로 모든 표현식을 작성할 수 있습니다.

인터페이스는 사용자가 구성하려는 표현식의 구조에 대해 생각하도록 강요합니다. 예를 들어 다음 표현식을 고려하십시오. x = x + 5. 해당 표현식은 어떻게 평가됩니까? 먼저 x의 값이 검색됩니다. 그러면 해당 값에 5가 추가됩니다. 마지막으로 결과 합계가 x에 저장됩니다.

컴퓨터가 표현식을 분해하는 방식을 도표로 만들어 보겠습니다.

=
|___
|   |
x   +
    |___
    |   |
    x   5

이 트리 구조는 Rho에 입력할 때 표현식에 대해 생각하고 싶은 방식입니다.

표현식 구성의 기초는 사용 가능한 모든 기능을 나열하는 간단한 드롭다운 메뉴일 수 있습니다. 또는 경우에 따라 특정 위치에서 의미가 있는 기능만 포함하는 목록일 수도 있습니다. 예를 들어, 위의 표현식을 입력하는 단계를 고려하십시오.

첫 번째 단계는 할당 기능을 선택하는 것입니다. 그러면 초기 기능 선택 메뉴가 할당 기능으로 대체됩니다. 왼쪽에서 대부분의 기능은 의미가 없습니다. 사실, 거기에 가야 할 유일한 것은 할당될 변수입니다. 오른쪽에는 전체 기능 선택 메뉴가 있습니다. 그리고 그 사이에 등호(또는 할당을 위한 다른 기호).
[variable input] = [function selector]또는[variable input] <- [function selector]
왼쪽에서 "x"를 입력하고 리턴을 누르십시오. 오른쪽에서 추가를 선택합니다. 이제 인터페이스는 x <- ( [function selector] + [function selector] ) 와 같습니다. 덧셈의 ​​왼쪽에서 "변수 가져오기"를 선택하고 "x"를 입력합니다. 오른쪽에서 "상수"를 선택하고 5를 입력합니다.

그게 바로 아이디어입니다. 다음 포스트에서는 이것을 React에서 어떻게 구현했는지 알아보겠습니다.