Tag: 개발환경

Posted on

Scratch 3.0 개발 환경 구축 (renew)

기존 Scratch 3.0 개발 환경 구축 (https://ahnbk.com/?p=366) 포스팅이 있는데, 이번 macOS 카탈리나에서 새로 개발 환경을 구축하면서 약간 달리지는 부분에 대해 새로 간단히 정리합니다.

  • Node.js 설치

macOS에선 기존과 마찬가지로 homebrew를 먼저 설치하고, 이를 이용하여 설치하는 것이 간편함. 현재 LTS 버전은 12.6.1이지만, scratch의 경우 여전히 10버전까지만 지원함. 따라서 다음과 같이 입력하여 설치.

$ brew install node@10
  • Scratch 소스 받아오기

개발에 사용될 임의의 디렉토리를 하나 만들고, Scratch 각 파트별로 소스 clone.

$ mkdir scratch_dev
$ cd scratch_dev
$ git clone https://github.com/LLK/scratch-gui.git
$ git clone https://github.com/LLK/scratch-vm.git
$ git clone https://github.com/LLK/scratch-l10n.git

사용자가 직접 Interaction 할 수 있는 GUI ( scratch-gui), Scratch의 실행 (Back-end)을 담당 (scratch-vm), 한글 관련 작업 (scratch-l10n).

  • 빌드하기

[scratch-l10n]

$ cd scratch-l10n
$ npm install
$ npm run-script build
$ npm link

[scratch-vm]

$ cd scratch-vm
$ npm install
$ nom link

[scratch-gui]

$ cd scratch-gui
$ npm install
$ npm link scratch-l10n scratch-vm

빌드 완료

  • 실행
$ cd scratch-gui
$ npm start

사파리를 띄우고, http://0.0.0.0:8601로 접속.

끝! 여전히 잘됨..^^

Posted on

Scratch 3.0 개발 환경 구축

우선 Node.js를 설치하여야 한다. macOS의 경우 homebrew를 사용하면 쉽게 설치가 가능하다. 권장 버전은 Node 8이나 현재 LTS 버전은 Node 10이므로, 둘 중 아무거나 사용해도 무방하다. (테스트 해봤는데 별 이상은 없다.)

  • Update: BLE 통신을 위한 noble 모듈은 Node 10을 지원하지 않는다. 따라서 Node 8로 설치해야함.
  • Node10도 상관없음.

homebrew의 설치 방법은 https://brew.sh을 참조하면 된다. 명령 한줄로 쉽게 설치가 가능하다. 설치가 완료되면 Node 10을 설치한다. 

$ brew install node@8
or
$ brew install node@10

윈도우10의 경우, 설치파일을 이용하여 설치한다. 또 Git도 설치하여야 한다 (macOS에는 기본 포함). Git (https://git-scm.com/download/win), Node.js (https://nodejs.org/en/)를 설치한다.

Ubuntu or Linux의 경우, 해당되는 패키지 매니저를 사용하여 설치하도록 한다.

아래의 설명에서 디렉토리의 경로는 macOS를 기준으로 설명하나, 다른 OS에서도 유사하므로 감안하여 사용하도록 한다.

Scratch는 크게 세개의 파트로 구성되어 있다. 사용자가 직접 Interaction 할 수 있는 GUI를 제공하는 scratch-gui, Scratch의 실행 (Back-end)을 담당하는 scratch-vm, Scratch의 블럭 디자인 및 블럭간의 연결, 관리 등을 담당하는 scratch-blocks이다.

실제론 위 세개의 Repository를 자신의 Repository로 Fork하여 사용하는 것을 권장하고 있다. 위와 같이 공식 Repository를 Clone하여 사용하는 경우, 개발자가 수정한 다음 commit 및 push가 불가능 하므로 (승인없이는), github의 계정을 생성하고 위 Repository를 Fork하여 사용하도록 한다.

  • scratch-blocks는 사용자가 수정할만한 요소가 없다. 따라서 이 설치 과정에서 scratch-blocks는 건너뛰어도 됨.

이제 https://github.com/llk/scratch-gui, https://github.com/llk/scratch-vm, https://github.com/llk/scratch-blocks를 Fork 하여 자신의 Repository로 가져온다.

이제 Scratch의 소스를 받아온다. 임의의 디렉토리를 생성하고 (여기선 ~/Developer/scratch) 이동한 후 다음과 같이 입력한다.

$ mkdir -p ~/Developer/scratch
$ cd ~/Developer/scratch

$ git clone https://github.com/byeongkyu/scratch-gui
$ git clone https://github.com/byeongkyu/scratch-vm
$ git clone https://github.com/byeongkyu/scratch-blocks (안해도됨)

이제 각각의 프로젝트에 필요한 모듈을 설치한다. 

$ cd scratch-vm
$ npm install
$ npm link

--- 이과정은 무시 ---
$ cd ../scratch-blocks
$ npm install
$ npm link
--- 이과정은 무시 ---

$ cd ../scratch-gui
$ npm install
$ npm link scratch-vm

참고로 npm link 명령은 local (현재 PC)에 저장된 모듈을 사용하겠다는 의미이다. 따라서 scratch-gui에서 scratch-blocks와 scratch-vm은 온라인에서 받아오는게 아닌 우리가 받아서 저장한 것을 사용한다. 실제 위 명령을 실행하고 난 다음의 결과 메시지가 다음과 같이 보인다.

$ npm link scratch-vm scratch-blocks
/Users/byeongkyu/Developer/scratch/scratch-gui/node_modules/scratch-blocks -> /usr/local/lib/node_modules/scratch-blocks -> /Users/byeongkyu/Developer/scratch/scratch-blocks
/Users/byeongkyu/Developer/scratch/scratch-gui/node_modules/scratch-vm -> /usr/local/lib/node_modules/scratch-vm -> /Users/byeongkyu/Developer/scratch/scratch-vm

위까지 실행 완료하고 에러가 없다면, 다음과 같이 입력하여 실행해본다.

$ cd ~/Developer/scratch/scratch-gui
$ npm start

이제 사파리나 크롬 등을 실행하여 http://0.0.0.0:8601 으로 접속하면, 다음과 같은 실행 화면을 볼 수 있다.