[블록 코딩 개발] Blockly Getting Started와 설치 개요

* 공부한 내용을 일기장 처럼 작성한 글~

 

지난 시간에는 Blockly란 무엇인지, 어떠한 특징이 있는지에 대해서 알아보았다.

 

각설하고, Blockly를 활용해서 직접 나만의 툴을 개발해볼 것이다! 개발의 첫 스타트는 언제가 그렇듯 공식 Document의 Getting Started이다. 이 부분만 간단히 정리하고, Google에서 제공하는 Codelab 튜토리얼을 통해 직접 따라도 해보고, 변형 할 수 있으면 변형도 해보면 좋을 것 같다 ㅎㅎ

 

일단 원문인 Getting Started는 아래의 링크를 참조하자!

Get Started  |  Blockly  |  Google Developers

 

Document에서는 Blockly에 친숙한 사람과 HTML, JavaScript에 대해서 어느 정도 이해하는 개발자를 대상으로 하는 듯 하다. (나는 Blockly는 많이 써보지는 않았지만.. 대충 감은 온다...)

 

Getting Started를 모두 끝마친 후에는, Codelab을 통해 직접 구현해보기를 권장한다고 적혀있다.

 

1. 첫 시작은 언제나 개요부터

시작 전에, Overview를 살펴보자!

Fig. 1. Overview

Blockly는 웹 어플리케이션이며, 이를 사용하는 유저는 그저 블록을 갖다 놓으면 Blockly에서는 그에 알맞게 코드를 생성해주고, 우리가 Blockly로 만든 어떠한 어플리케이션에서는 유저가 작성한 코드를 지지고 볶아서 다양하게 프로그램을 구성할 수 있다고 적혀있다!

 

또한, 어플리케이션의 관점에서 살펴보면, 그저 Blockly는 코딩을 위한 수단, 즉 Textarea라고 쓰여져있는데, 이는 Blockly 자체는 Code Editor에 가깝다는 의미로 보인다.

 

마지막으로, Blockly는 서버의 도움 없이 100% Client Side에서 동작할 수 있다고 하며, 또한 외부 의존성 라이브러리(3rd party dependencies)의 도움도 필요하지 않다고 한다. 무엇보다 이 모든게 오픈 소스라서 말 그대로 소스를 씹고 뜯고 맛보고 즐길 수 있다.

 

2. Blockly는 어떻게 설치할 수 있을까?

Blockly를 설치할 수 있는 방법은 Document 상에서는 3가지를 정의하고 있다.

 

1) NPM

Document에서 가장 권장하는 방법이다. 왜냐하면 간단하게 최신 버전의 Blockly를 유지할 수 있고, 설치 또한 간편하기 때문이다. 또한 Blockly 상에서 사용할 수 있는 편의를 위한 다양한 Plugin들 또한 사용할 수 있다고 한다.

 

2) Unpkg

Unpkg란, NPM으로 관리하는 다양한 패키지들을 CDN을 통해 <script/> 형태로 간단히 임포트 할 수 있다. 주기적으로 업데이트를 해주지 않아도, CDN을 통해 항상 최신 버전으로 유지할 수 있다.

 

그러나 Document에서는 언제나 최신 버전으로 유지되기 때문에, 버전의 유지가 필요할 경우 권장하지는 않는 듯하다. 간단한 Demo를 만들거나, 혹은 간단히 무언가를 테스트해보고 싶을 때 사용하면 편리하다고 한다.

 

3) Github

마지막으로 직접 Blockly Github에서 소스파일을 직접 다운받아 정적파일로서 임포트하는 방식이다. 최신 버전으로 업데이트도 당연히 직접 수동으로 내려받아서 해주어야해서 조금 번거로운 감이 없지 않아 있을 수 있다.

 

그러나 수동으로 Blockly를 다운 받으면 안에 내장된 Demo 폴더 안에 동봉된 예제를 직접 확인해볼 수도 있고, Blockly Factory라는 내장된 툴(?)을 통해 손쉽게 블록의 형상을 정의할 수 있다. 나중에 이걸 통해서 커스텀 블록도 만들어보도록 하자!

 

3. 마무리

나중에는 NPM으로 직접 Blockly를 내려받고, Webpack을 통해서 만들어보는 것도 괜찮을 것 같다.

 

다음 포스팅에서는 본격적으로 Blockly를 설치하고 개발해볼건데, 흠.. Node.js로 직접 서버를 열어서 만들어보도록 할까... 고민 중이다..