블록의 구성

이 문서에서는 블록의 다양한 부분을 살펴봅니다.

연결

연결은 블록이 연결할 수 있는 위치와 연결할 수 있는 블록의 종류를 정의합니다.

핵심 용어: 연결이란 용어는 일반적으로 두 항목 간의 관계를 의미합니다. Blockly에서는 일반적으로 플러그나 소켓과 같은 커넥터를 의미합니다. 따라서 두 블록을 연결할 때는 연결을 서로 맞춥니다.

연결에는 다음과 같은 네 가지 유형이 있습니다.

연결 유형	이미지
출력 연결
입력 연결
이전 연결
다음 연결

출력 연결과 입력 연결은 서로 연결할 수 있으며 다음 연결과 이전 연결은 서로 연결할 수 있습니다. 연결 검사를 사용하여 연결을 추가로 제한할 수 있습니다.

맞춤 렌더러를 사용하여 연결의 도형을 맞춤설정할 수 있습니다.

최상위 연결

블록에는 사용이 선택사항인 세 가지 연결이 있습니다.

블록에는 블록의 앞쪽 가장자리에 암형 퍼즐 커넥터로 표시되는 단일 출력 연결이 있을 수 있습니다. 출력 연결은 블록의 값 (표현식)을 다른 블록에 전달합니다. 출력 연결이 있는 블록을 값 블록이라고 합니다.

블록에는 상단에 이전 연결 (노치로 표시됨)이 있고 하단에 다음 연결 (탭으로 표시됨)이 있을 수 있습니다. 이를 통해 블록을 세로로 쌓아서 문장 시퀀스를 나타낼 수 있습니다. 출력 연결이 없는 블록을 문 블록이라고 하며 일반적으로 이전 연결과 다음 연결이 모두 있습니다.

자세한 내용은 최상위 연결을 참고하세요.

필드

필드는 블록 내의 대부분의 UI 요소를 정의합니다. 여기에는 문자열 라벨, 드롭다운, 체크박스, 이미지, 문자열 및 숫자와 같은 리터럴 데이터를 위한 입력이 포함됩니다. 예를 들어 이 루프 블록은 라벨 필드, 드롭다운 필드, 숫자 필드를 사용합니다.

Blockly는 텍스트 입력, 색상 선택 도구, 이미지를 비롯한 여러 기본 제공 필드를 제공합니다. 자체 필드를 만들 수도 있습니다.

자세한 내용은 필드를 참고하세요.

입력

입력은 필드 및 연결의 컨테이너입니다. 블록은 벽돌처럼 하나 이상의 행에 입력을 렌더링하여 빌드됩니다.

핵심 용어: 입력이라는 용어는 Blockly에서 여러 의미를 갖습니다. 가장 일반적인 의미는 여기에 설명된 것과 같습니다. 필드 및 연결의 컨테이너입니다. 드물게는 값을 입력하거나 입력된 값을 참조하는 것을 의미합니다.

입력에는 4가지 유형이 있으며, 모두 필드(라벨 포함)를 포함할 수 있고 그중 두 가지는 단일 연결을 포함합니다. 맞춤 렌더링을 지원하는 맞춤 입력을 만들 수도 있습니다.

입력 유형	연결 유형	이미지
더미 입력	없음
행 끝 입력	없음
값 입력	입력 연결
명세서 입력	다음 연결

일련의 예를 통해 이러한 입력을 소개합니다. 블록을 구성하는 입력, 연결, 필드를 정의하는 방법에 관한 자세한 내용은 JSON의 블록 구조 및 JavaScript의 블록 구조를 참고하세요.

더미 입력

더미 입력은 필드의 컨테이너일 뿐 연결은 없습니다. 예를 들어 다음 숫자 블록에는 단일 숫자 필드가 포함된 더미 입력이 하나 있습니다.

더 복잡한 예로 두 숫자를 더하는 블록을 생각해 보겠습니다. 이는 3개의 필드 (숫자, 라벨, 숫자)가 있는 단일 더미 입력에서 빌드할 수 있습니다.

또는 각각 하나의 필드가 있는 더미 입력 3개:

행 끝 입력

Blockly는 휴리스틱을 사용하여 모든 입력을 단일 행에 렌더링할지 아니면 각 입력을 자체 행에 렌더링할지 결정합니다. 입력이 새 행을 시작하도록 하려면 이전 입력으로 행 끝 입력을 사용합니다.

더미 입력과 마찬가지로 행 끝 입력은 필드를 포함할 수 있지만 연결은 없습니다. 예를 들어 다음은 필드가 두 개인 행 끝 입력과 필드가 하나인 더미 입력으로 빌드된 추가 블록입니다. 행 끝 입력은 더미 입력이 새 행에 렌더링되도록 강제합니다.

값 입력

필드에서 허용할 수 있는 항목은 제한적입니다. 예를 들어 숫자 필드는 숫자만 허용합니다. 하지만 두 변수를 더하려면 어떻게 해야 하나요? 아니면 프로시저 호출의 결과를 다른 계산의 결과에 추가하나요? 이 문제를 해결하려면 필드 대신 입력 연결을 사용하세요. 이를 통해 사용자는 값 블록을 입력 값으로 사용할 수 있습니다.

값 입력은 0개 이상의 필드를 포함하며 입력 연결로 끝납니다. 다음 블록은 더하기 블록의 숫자 필드를 입력 연결로 바꿉니다. 두 개의 값 입력으로 구성되며, 첫 번째에는 필드가 없고 두 번째에는 라벨 필드가 포함됩니다. 두 연결 모두 입력 연결로 끝납니다.

문 입력

마지막 입력 유형은 0개 이상의 필드를 포함하고 다음 연결로 끝나는 문 입력입니다. 다음 연결을 사용하면 블록 내에 문 블록 스택을 중첩할 수 있습니다. 예를 들어 다음 반복 블록을 살펴보세요. 이 블록의 두 번째 행은 단일 라벨 필드와 다음 연결이 있는 문 입력으로 구성됩니다.

문 입력은 항상 자체 행에 렌더링됩니다. 이는 첫 번째 행에 값 입력과 다음 두 행에 문 입력이 있는 다음 if-then-else 블록에서 확인할 수 있습니다.

인라인 입력과 외부 입력 비교

입력은 인라인 또는 외부로 렌더링될 수 있습니다. 값 입력의 커넥터가 블록 내부 (인라인) 또는 외부 가장자리 (외부)에 렌더링되는지 여부와 입력이 동일한 행에 렌더링되는지 또는 다른 행에 렌더링되는지 여부를 제어합니다.

맞춤 블록을 만들 때 사용할 블록을 지정하거나 Blockly에서 결정하도록 할 수 있습니다. 자세한 내용은 인라인 입력과 외부 입력 비교를 참고하세요.

시작해 볼까요?

입력, 필드, 연결에 관해 알아보는 가장 좋은 방법은 Blockly 개발자 도구에서 블록을 구성하고 inputs 드롭다운 (automatic, external, inline)에 대해 다양한 설정을 선택하는 것입니다.

아이콘

블록에는 입력, 연결, 필드 외에도 하나 이상의 아이콘이 있을 수 있습니다. 경고 표시, 블록 수준 주석 입력, 뮤테이터 UI 표시와 같은 다양한 용도로 사용할 수 있습니다. 예를 들어 다음은 댓글 아이콘과 연결된 편집기가 있는 블록입니다.

자세한 내용은 아이콘을 참고하세요.

블록 및 JavaScript 객체

블록, 입력란, 연결, 필드, 아이콘은 모두 JavaScript 객체입니다.

Blockly 구성요소	기본 클래스	서브클래스
차단	Block	BlockSvg
입력	Input	DummyInput
		EndRowInput
		ValueInput
		StatementInput
		맞춤 입력
연결	Connection	RenderedConnection
필드	Field	FieldTextInput
		FieldNumber
		FieldLabel
		맞춤 입력란
		등
아이콘	Icon	CommentIcon
		MutatorIcon
		WarningIcon
		맞춤 아이콘

블록의 객체는 나무 모양의 객체를 형성합니다. 블록의 그래픽 표현이 이 트리에 어떻게 대응하는지 이해하면 블록을 프로그래매틱 방식으로 조작하는 코드를 작성할 때 유용합니다. 예를 들어 controls_for 블록은 다음과 같습니다.

다음 JavaScript 객체 트리에 해당합니다.

// <Object> means an instance of an Object.
{                                   // Block
  nextConnection: <Connection>,     // ConnectionType NEXT_STATEMENT
  outputConnection: null,
  previousConnection: <Connection>, // ConnectionType PREVIOUS_STATEMENT
  inputList: [                      // Array of Inputs in block
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [                   // Array of fields in Input
        <FieldLabel>,               // 'count with'
        <FieldVariable>,            // i
        <FieldLabel>,               // 'from'
      ],
    },
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [
        <FieldLabel>,               // 'to'
      ],
    },
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [
        <FieldLabel>,               // 'by'
      ],
    },
    {                               // StatementInput
      connection: <Connection>,     // ConnectionType NEXT_STATEMENT
      fieldRow: [
        <FieldLabel>,               // 'do'
      ],
    },
  ]
}