TIL - Next.js에서 Blockly 라이브러리를 사용해 블록 코딩 구현하기

공모전에서 Blockly 라이브러리를 활용해야 해서 해당 라이브러리를 활용해서 블록 코딩을 구현하는 방법을 정리해보았다. 그 과정에서 필수 개념과 주의사항을 이해하게 되었다.

주요 발견

1. Blockly란?

• 시각적 블록 코딩 라이브러리: Blockly는 구글에서 개발한 시각적 프로그래밍 라이브러리로, 사용자가 블록을 조합하여 코드를 생성할 수 있게 도와준다.
• 활용 분야: 교육용 프로그래밍 도구나 노코드(No-Code) 플랫폼에서 주로 사용된다.
• 언어 변환 가능: 생성된 블록은 JavaScript, Python 등 다양한 프로그래밍 언어로 변환될 수 있다.
• 커스텀 블록 정의: 개발자가 직접 블록을 정의하여 원하는 기능을 추가할 수 있다.

2. Next.js에서 Blockly 사용하기

• 클라이언트 컴포넌트로 선언: Next.js 13 이상에서는 'use client' 지시문을 사용하여 Blockly를 사용하는 컴포넌트를 클라이언트 컴포넌트로 명시적으로 선언할 수 있다.
• 서버 사이드 렌더링(SSR) 고려: Blockly는 브라우저 환경에서 동작하므로, SSR 시 주의가 필요하다.

구현 단계

2.1 설치 및 초기 설정

npm install blockly

 

• 패키지 설치: 프로젝트에 Blockly 패키지를 설치한다.
• 사용 방법 계획: Next.js 환경에서 어떻게 Blockly를 적용할지 설계한다.

2.2 컴포넌트에서 Blockly 구현하기

'use client'; // 클라이언트 컴포넌트로 선언

import { useEffect, useRef } from 'react';
import Blockly from 'blockly';

export default function BlocklyComponent() {
  const blocklyDiv = useRef(null);
  const toolbox = useRef(null);

  useEffect(() => {
    const workspace = Blockly.inject(blocklyDiv.current, {
      toolbox: toolbox.current,
    });

    // 기본 블록 정의 (커스텀 블록 추가 가능)
    Blockly.Blocks['text_print'] = {
      init: function () {
        this.appendValueInput('TEXT')
          .setCheck(null)
          .appendField('print');
        this.setPreviousStatement(true, null);
        this.setNextStatement(true, null);
        this.setColour(160);
        this.setTooltip('');
        this.setHelpUrl('');
      },
    };

    // 블록을 JavaScript 코드로 변환
    workspace.addChangeListener(() => {
      const code = Blockly.JavaScript.workspaceToCode(workspace);
      console.log(code);
    });
  }, []);

  return (
    <div>
      <div ref={blocklyDiv} style={{ height: '480px', width: '600px' }}></div>
      <xml ref={toolbox} style={{ display: 'none' }}>
        <block type="text_print"></block>
      </xml>
    </div>
  );
}

 

• 클라이언트 컴포넌트 선언: 파일 최상단에 'use client' 지시문을 추가하여 클라이언트 컴포넌트로 선언한다.
• 워크스페이스 생성: Blockly.inject()를 통해 블록을 배치할 수 있는 워크스페이스를 생성한다.
• 기본 블록 정의: Blockly.Blocks를 사용하여 블록을 정의한다.
• 코드 변환 및 출력: 워크스페이스의 블록이 변경될 때마다 JavaScript 코드로 변환하여 콘솔에 출력한다.

2.3 필수로 알아야 할 개념

• Blockly 워크스페이스: 블록을 조합하고 코드를 생성할 수 있는 작업 공간.
• 툴박스(Toolbox): 사용 가능한 블록들이 모여 있는 영역으로, <xml> 태그로 정의한다.
• 커스텀 블록: 원하는 기능을 가진 블록을 직접 정의할 수 있다.
• 코드 생성: 블록 조합을 실제 프로그래밍 언어 코드로 변환할 수 있다.
• 클라이언트 컴포넌트: Next.js에서 'use client' 지시문을 사용하여 클라이언트 사이드 렌더링을 명시적으로 지정할 수 있다.

2.4 커스텀 블록 추가 예시

Blockly.Blocks['math_number'] = {
  init: function () {
    this.appendDummyInput()
      .appendField(new Blockly.FieldNumber(0), 'NUM');
    this.setOutput(true, 'Number');
    this.setColour(230);
    this.setTooltip('');
    this.setHelpUrl('');
  },
};

• 숫자 입력 블록 정의: math_number 블록을 정의하여 숫자 입력 기능을 추가한다.

2.5 주의사항

• 클라이언트 컴포넌트 사용: Blockly를 사용하는 컴포넌트는 반드시 클라이언트 컴포넌트로 선언해야 한다.
• 서버 컴포넌트와의 상호작용: 클라이언트 컴포넌트와 서버 컴포넌트 간의 데이터 흐름을 고려해야 한다.
• 의존성 관리: 다양한 블록과 기능을 추가할 경우 의존성을 효율적으로 관리하여 성능 저하를 방지한다.

결론

이번 학습을 통해 Next.js에서 Blockly를 사용하여 블록 코딩을 구현하는 방법을 배웠다. 특히, Next.js 13 이상에서 'use client' 지시문을 사용하여 클라이언트 컴포넌트를 선언하는 방법과 SSR 환경에서 클라이언트 사이드 전용 라이브러리를 사용하는 방법과 주의사항을 명확히 이해하게 되었다.