연구 설문조사: Blockly 사용 경험을 알려주세요
설문조사 시작
코드 생성
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
코드 생성은 작업공간의 블록을 실행 가능한 코드 문자열로 변환하는 프로세스입니다.
코드 생성은 매우 중요합니다. 블록이 산술식 평가, 미로에서 캐릭터 이동, 온라인 상점 구성과 같은 작업을 실제로 실행할 수 있도록 하기 때문입니다.
Blockly는 블록을 직접 '실행'하지 않습니다. 대신 코드 문자열을 생성한 후 실행합니다.
코드 생성기
코드를 생성하려면 코드 생성기 인스턴스를 사용합니다.
다음 코드 스니펫은 워크스페이스의 블록에 관한 JavaScript 코드를 생성하는 방법을 보여줍니다.
// javascriptGenerator is a code generator that makes JavaScript strings.
import {javascriptGenerator} from 'blockly/javascript';
const code = javascriptGenerator.workspaceToCode(myWorkspace);
Blockly에서 제공하는 다양한 코드 생성기와 액세스 방법에 관한 자세한 내용은 언어 코드 생성기를 참고하세요.
블록 코드 생성기
각 블록에는 생성하는 코드를 정의하는 연결된 블록 코드 생성기가 있습니다. 생성하려는 각 언어에 대해 블록 코드 생성기를 정의해야 합니다.
이 코드 스니펫은 '앞으로 이동' 블록의 JavaScript 블록 코드 생성기를 정의합니다.
javascriptGenerator.forBlock['my_custom_block'] = function(block, generator) {
const steps = block.getFieldValue('FIELD_NAME');
// moveForward is a function you would have to define yourself and provide
// within your execution context.
return `moveForward(${steps});\n`;
}
블록 코드 생성기를 정의하는 방법에 관한 자세한 내용은 블록 코드 생성기를 참고하세요.
실행
코드를 생성한 후에는 코드를 실행하는 방법을 알아야 합니다.
실행 방법을 결정하는 것은 애플리케이션에 따라 다르며 Blockly의 범위를 벗어납니다.
코드를 실행하는 방법에 관한 자세한 내용은 코드 생성 및 실행을 참고하세요.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2025-07-25(UTC)
[null,null,["최종 업데이트: 2025-07-25(UTC)"],[[["\u003cp\u003eCode generation transforms visual blocks into executable code strings, enabling actions like calculations and character movements within applications.\u003c/p\u003e\n"],["\u003cp\u003eBlockly utilizes code generators to produce code in various languages like JavaScript, requiring separate generators for each target language.\u003c/p\u003e\n"],["\u003cp\u003eEvery block possesses a block-code generator that dictates the specific code it produces for a given language, customizable to your application's needs.\u003c/p\u003e\n"],["\u003cp\u003eWhile Blockly handles code generation, executing the generated code is application-specific and necessitates your own implementation based on the environment.\u003c/p\u003e\n"]]],["Code generation converts blocks into executable code strings. Blockly utilizes code generator instances, like `javascriptGenerator`, to transform a workspace's blocks into code. Each block requires a block-code generator, defining its code output, demonstrated in the example with a \"move forward\" block. After code generation, the code must be executed, but this execution process is application-specific and not part of Blockly's core functionality.\n"],null,["# Generate code\n\nCode generation is the process of turning the blocks on a workspace into a\nstring of code that can be executed.\n\nCode generation is extremely important, because it is what allows your blocks to\nactually *do* things, like evaluate arithmetic expressions, move a character\nthrough a maze, or configure an online shop!\n\nBlockly doesn't \"run\" blocks directly. Instead you generate code strings, and\nthen execute those.\n\nCode generators\n---------------\n\nTo generate code, you use a code generator instance.\n\nThis code snippet shows how to generate JavaScript code for the blocks in a\nworkspace: \n\n // javascriptGenerator is a code generator that makes JavaScript strings.\n import {javascriptGenerator} from 'blockly/javascript';\n\n const code = javascriptGenerator.workspaceToCode(myWorkspace);\n\nFor more information about the different code generators that Blockly provides\nand how to access them, see [Language code generators](/blockly/guides/create-custom-blocks/code-generation/overview#language_code_generators).\n\nBlock-code generators\n---------------------\n\nEach block has an associated block-code generator that defines what code it\ngenerates. A block-code generator has to be defined for each individual language\nyou want to generate.\n\nThis code snippets defines a JavaScript block-code generator for a \"move\nforward\" block: \n\n javascriptGenerator.forBlock['my_custom_block'] = function(block, generator) {\n const steps = block.getFieldValue('FIELD_NAME');\n // moveForward is a function you would have to define yourself and provide\n // within your execution context.\n return `moveForward(${steps});\\n`;\n }\n\nFor more information about how to define your block-code generators, see\n[Block-code generators](/blockly/guides/create-custom-blocks/code-generation/overview#block-code_generators).\n\nExecution\n---------\n\nAfter you've generated the code, you need to figure out how to execute it.\nDeciding how to execute it is very application-specific, and outside the scope\nof Blockly.\n\nFor more information about ways to execute code, see\n[Generate and run code](/blockly/guides/create-custom-blocks/code-generation/overview#generate_and_run_code)."]]