블록의 구성

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

연결

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

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

연결에는 네 가지 유형이 있습니다.

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

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

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

최상위 연결

블록에는 사용이 선택사항인 연결이 3개 있습니다.

블록에는 하나의 출력 연결이 있을 수 있으며, 이는 블록의 앞쪽 가장자리에 있는 수형 직소 커넥터로 표시됩니다. 출력 연결은 블록의 값 (표현식)을 다른 블록에 전달합니다. 출력 연결이 있는 블록을 값 블록이라고 합니다.

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

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

필드

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

Blockly는 텍스트 입력, 색상 선택기, 이미지 등 다양한 기본 제공 필드를 제공합니다. 필드를 직접 만들 수도 있습니다.

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

입력

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

핵심 용어: Blockly에서 입력이라는 용어는 여러 의미를 갖습니다. 가장 일반적인 의미는 필드와 연결을 위한 컨테이너인 여기에서 설명하는 의미입니다. 덜 일반적으로는 값을 입력한다는 의미이거나 입력된 값을 의미합니다.

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

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

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

더미 입력

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

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

또는 각각 필드가 하나인 더미 입력 3개

행 끝 입력

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

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

값 입력

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

값 입력에는 0개 이상의 필드가 포함되어 있으며 입력 연결로 끝납니다. 다음 블록은 더하기 블록의 숫자 필드를 입력 연결로 대체합니다. 두 개의 값 입력에서 빌드됩니다. 첫 번째 값 입력에는 필드가 포함되지 않고 두 번째 값 입력에는 라벨 필드가 포함됩니다. 둘 다 입력 연결로 끝납니다.

명세서 입력

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

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

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

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

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

시작해 볼까요?

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

아이콘

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

자세한 내용은 Icons을 참고하세요.

블록 및 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'
      ],
    },
  ]
}