우선 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 으로 접속하면, 다음과 같은 실행 화면을 볼 수 있다.
해당 내용을 바탕으로 진행했지만… http://0.0.0.0:8601 접속 시에 실행 화면을 볼 수가 없습니다…
노드8, 노드10, 노드12를 모두 설치하여 테스트했습니다.
혹시 해당 예제를 진행하기 위해서는 파이썬이 설치되어 있어야 하는 건가요??
scratch-blocks는 건너 뛰세요. scratch-blocks를 설치시 closure 라이브러리가 필요합니다. 그래도 에러나 난다면 에러 로그를 보여주시면 도움이 되겠습니다.
scratch-blocks 블록 부분을 건너뛰었더니 컴파일은 성공했습니다.
하지만 http://0.0.0.0:8601 으로 접속하면 아래와 같은 메세지가 나옵니다.
“사이트에 연결할 수 없음
http://0.0.0.0:8601/의 웹페이지가 일시적으로 다운되었거나 새 웹 주소로 완전히 이동했을 수 있습니다.”
확인 부탁드립니다~~ ㅠㅠ
scratch-blocks에서 npm install을 하면 아래와 같은 에러가 발생합니다.
WindowsError: [Error 2]
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! scratch-blocks@0.1.0 prepublish: `python build.py && webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the scratch-blocks@0.1.0 prepublish script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\oo_ri\AppData\Roaming\npm-cache\_logs\2019-05-01T10_37_50_925Z-debug.log
해당 에러에 대한 해결 방법을 알고 계신가요?? 확인 부탁드립니다 ㅠㅠ
scratch-blocks은 건너뛰었더니 컴파일까지 성공했습니다.
하지만 http://0.0.0.0:8601으로 접속하면 아래와 같은 메세지를 보여줍니다.
“사이트에 연결할 수 없음
http://0.0.0.0:8601/의 웹페이지가 일시적으로 다운되었거나 새 웹 주소로 완전히 이동했을 수 있습니다.
ERR_ADDRESS_INVALID”
추가적으로 설치하거나 설정해야하는 부분이 있나요?? 확인 부탁드리비낟.
npm start는 하신거죠? 메시지 나오는 것을 확인해보세요. 에러가 없으면 접속이 되야 합니다.
네… npm start 를 실행했습니다… 다음은 실행 후의 문구 일부 입니다.
C:\Users\oo_ri\scratch\scratch-gui>npm start
> scratch-gui@0.1.0 start C:\Users\oo_ri\scratch\scratch-gui
> webpack-dev-server
i ｢wds｣: Project is running at http://0.0.0.0:8601/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Users\oo_ri\scratch\scratch-gui\build
(node:15208) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
i ｢wdm｣: Hash: 611850ecc70f2040aada
Version: webpack 4.30.0
Child
Hash: 611850ecc70f2040aada
Time: 20639ms
Built at: 2019-05-01 22:20:40
…(생략)…
｢wdm｣: Compiled successfully.
위와 같이 컴파일 완료 후에 http://0.0.0.0:8601로 접속했습니다.
웹브라우져를 어떤 것을 사용하시나요? 서버는 정상적으로 실행된 것으로 보입니다.
크롬 최신 버전을 사용하고 있습니다. 그리고 노드JS 12 버전을 사용했습니다. 다시 환경 세팅 관련 프로그램들을 다 지우고 다시 해볼 예정입니다. ㅠㅠ
저도 결과가 궁금하네요. 해보신 후 결과를 알려주시면 감사하겠습니다.
다시 시도했습니다. 안 됩니다…
진행 순서를 하나하나 말씀드리겠습니다.
1. Node.js 설치(10.15.3 LTS, https://nodejs.org/en/)
2. GIT 설치(64-bit Git for Windows Setup, 2.21.0, https://git-scm.com/download/win)
3. Git CMD(Deprecated) 실행
4. 폴더 생성 및 이동(C:\Users\user\scratch)
5. $ git clone https://github.com/T2SPA/scratch-gui 입력
6. $ git clone https://github.com/T2SPA/scratch-vm 입력
7. $ cd scratch-vm
$ npm install
$ npm link
8. $ cd ../scratch-gui
$ npm install
$ npm link scratch-vm
9. scratch-gui 파일 이동 후, 아래 문구 입력
$ npm start
10. 아래와 같은 문구 출력
C:\Users\user\scratch\scratch-gui>npm start
> scratch-gui@0.1.0 start C:\Users\user\scratch\scratch-gui
> webpack-dev-server
i ｢wds｣: Project is running at http://0.0.0.0:8601/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Users\user\scratch\scratch-gui\build
(node:8856) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
i ｢wdm｣: Hash: 64b3acf714c097574cbd
Version: webpack 4.30.0
Child
Hash: 64b3acf714c097574cbd
Time: 23656ms
Built at: 2019-05-08 13:44:09
…(생략)…
｢wdm｣: Compiled successfully.
이후, 커서가 깜박이면서 대기 중…
11. 크롬을 실행하여 http://0.0.0.0:8601 으로 접속
12. 아래와 같은 문구 출력
사이트에 연결할 수 없음
http://0.0.0.0:8601/의 웹페이지가 일시적으로 다운되었거나 새 웹 주소로 완전히 이동했을 수 있습니다.
ERR_ADDRESS_INVALID
혹시 제가 잘 못 진행했거나 설정을 변경해야 하는 부분이 있으면 알려주시면 감사하겠습니다… ㅠㅠ
실행은 맞게 된듯 합니다. 저 주소 대신에 http://localhost:8601 혹은 http://127.0.0.1:8601 로 접속해보시기 바랍니다.
해결했습니다~~ 바쁘실텐데 답변주셔서 감사합니다 ㅠㅠ 다음 페이지 진행하겠습니다 ㅎㅎ
해결되셨다니 다행이네요. 댓글이 고픈 블로그인데 관심주셔서 감사합니다. ^^ 질문이나 고쳐야 될 부분 언제라도 말씀해주세요~
아닙니다 ^^ 제가 오히려 많이 배우고 있습니다~~
진행하면서 몇 가지 궁금한게 있는데 그건 관련 페이지에 댓글을 남기도록 하겠습니다~~
바쁘신 와중에 도와주셔서 정말 감사합니다 ㅠㅠㅋㅋ
안녕하세요 올려주신 블로그 내용을 보고 따라하면서 샘플을 만들어보고 있는데 좋은 자료 올려주셔서 감사합니다^^ 하나 여쭤보고 싶은게 있는데 스크래치를 돌려보고 빌드하니 lib.min.js, gui.js가 나오더라구요. 이 파일을 가지고 다른 화면에서 넣어서 원하는 타이밍에 스크래치를 보여줬다가 숨겼다가 해보고 싶은데 어떤 방식으로 해야 될지 잘몰라서요 window밑에 window.gui 이런식으로도 접근해보고 window.WrappedGui 로도 접근해봤는데 객체가 없어서 어떤 객체에 접근해서 조작해야 이런방식이 될수 있을지 여쭤보고자 합니다ㅎ 혹시 조언해주실수 있다면 감사하겠습니다.
결국 scratch 3.0을 로딩하는건 build 된 후에 index.html입니다. 실행해보면 body에 embed되는 것으로 나옵니다(다른 div에는 넣을 수가 없습니다). 굳이 숨기거나 크기를 조정하고 싶으시다면, iframe을 이용해서 스크래치의 index.html 파일을 iframe 안에서 로딩하고, 이를 css를 이용해서 숨기거나 보이거나 하면 될듯도 합니다.
감사합니다. 저도 여러방면으로 찾아봤는데 스크래치가 body에 강제로 붙어버려서 더이상 방법이 없는거 같아서 아마 iframe으로 처리해야 되는게 맞을거 같네요ㅎ 도움주셔서 감사합니다^^
해보니..권한문제와 웹팩을 다시 설치해야되는 문제도 발생하네요.
권한문제는 sudo 를 앞에 붙여주면 실행 해결은 됩니다.
그리고 웹팩을 아래처럼 날리고 다시 설치해주면 됩니다.
저는 개발환경이 맥이거든요.
npm remove webpack -g
npm i webpack –save-dev
좋은 포스팅 감사드립니다.
혹시, build한 scratch를 wordpress로 만든 웹페이지에 탑재하고 싶은데, 어떻게 하면 되는지 아시나요..?
wordpress에서 특정 페이지에 들어가면 scratch 구동 화면으로 전환되게 하고 싶습니다..
흠… 릴리즈를 하게 되면, html 형태로 나오게 되니.. 그걸 웹서버에 올리셔서 index.html을 불러오도록 하면 될듯 한데요…
답변 감사합니다..!
제가 웹쪽은 처음이라.. ㅜ
위에서 instruction 주신대로 따라하게 되면 어디에 index.html이 있는지 아시나요..?
cmd 창에서 np, start를 하면 scratch_gui\build에서 파일을 가져온다고 하는것 같은데.. build폴더가 따로 생성이 되지 않아서요..
https://ahnbk.com/?p=439 요 포스트를 보시면, 말씀하신 파일을 생성하실수 있을겁니다.
안녕하세요 병규님 다름이 아니라 막히는 부분이 있어서 질문드립니다 ..!
이제 https://github.com/llk/scratch-gui, https://github.com/llk/scratch-vm, https://github.com/llk/scratch-blocks 를 Fork하여 자신의 Repository 로다 .
이제 Scratch의 소스를 받아 온다. 임의의 디렉토리를 생성하고 (여기선 ~ / Developer / scratch) 이동 한 후 다음과 같이 입력한다.
라고 적으셨는데 이걸 어디에 입력해야되는지 잘 몰라가지고 질문드려요 ..
이 부분에서 어떤 프로그램으로 입력해야되는지 알수있을까요?
개발환경울 구축하는 단계이니, 사용하시는 운영체제에 따라서 다릅니다. 전 macOS에서 진행하였습니다.
안녕하세요. 제가 꼭 필요했던 Scratch 하드웨어 연동 관련하여 이렇게 자세하게 설명해주셔서 감사합니다! 아직 블로그를 전부다 확인하지는 못했지만, 조금씩 블로그 따라서 진행해보도록 하겠습니다! 감사합니다 🙂
예전에 작성해놓고.. 방치중인 포스트입니다만… 도움이 되실듯 하다니 감사드립니다.
혹시 시도해보시고, 궁금하시거나 안되는 부분은 언제라도 질문 남겨주세요..