연구 설문조사: Blockly 사용 경험을 알려주세요

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

직렬화

직렬화는 나중에 작업공간에 다시 로드할 수 있도록 작업공간의 상태를 저장합니다. 여기에는 저장하려는 블록, 변수 또는 플러그인의 상태를 직렬화하는 작업이 포함됩니다. 저장해야 하는 모든 데이터를 손쉬운 저장을 위해 텍스트 기반 형식으로 변환한 다음 나중에 완전한 기능을 갖춘 작업공간에 다시 로드할 수 있습니다.

Blockly는 이 데이터에 JSON과 XML의 두 가지 형식을 제공합니다. 새 프로젝트에는 JSON 시스템을 사용하는 것이 좋으며 XML을 사용하는 이전 프로젝트는 업그레이드하는 것이 좋습니다. XML 시스템은 기존 저장 형식입니다. 삭제되지는 않지만 새 기능은 수신되지 않습니다.

JSON 시스템

JSON 직렬화 시스템은 여러 직렬화기로 구성됩니다. 블록 및 변수를 위한 내장 serializer가 있으며 추가 serializer를 등록할 수도 있습니다. 각 직렬화기는 특정 플러그인 또는 시스템의 상태를 직렬화 및 역직렬화합니다.

저장 및 로드

작업공간

workspaces 네임스페이스에서 save 및 load 메서드를 호출하여 전체 워크스페이스의 상태를 직렬화 또는 역직렬화할 수 있습니다.

const state = Blockly.serialization.workspaces.save(myWorkspace);
Blockly.serialization.workspaces.load(state, myWorkspace);

이러한 호출은 워크스페이스에 등록된 개별 시스템(serializer로 표현됨) 전체를 직렬화 또는 역직렬화합니다.

개별 블록

blocks 네임스페이스에서 save 및 append 메서드를 호출하여 개별 블록을 직렬화 또는 역직렬화할 수 있습니다.

const blockJson = Blockly.serialization.blocks.save(myBlock);
const duplicateBlock =
    Blockly.serialization.blocks.append(blockJson, myWorkspace);

개별 시스템

연결된 직렬화를 생성하고 save 및 load 메서드를 호출하여 개별 시스템 (예: 블록, 변수, 플러그인 등)을 직렬화 또는 역직렬화할 수 있습니다.

// Saves only the variables information for the workspace.
const serializer = new Blockly.serialization.variables.VariableSerializer();
const state = serializer.save(myWorkspace);
serializer.load(state, myWorkspace);

역직렬화 순서

JSON 시스템에는 명시적인 역직렬화 순서가 있으므로 저장 내에 상태가 중복되는 것을 더 쉽게 방지할 수 있습니다.

Blockly.serialization.workspaces.load가 호출되면 직렬화 도구에 우선순위 순으로 역직렬화할 상태가 제공됩니다. 이에 대해서는 직렬화 도구 섹션에서 자세히 설명하며, 직렬화 도구가 다른 시스템의 상태에 종속될 수 있도록 하는 것이 목적입니다.

내장된 직렬라이저의 역직렬화 순서는 다음과 같습니다.

변수 모델이 역직렬화됩니다.
프로시저 모델이 역직렬화됩니다.
블록이 역직렬화됩니다. 개별 최상위 블록은 임의의 순서로 역직렬화됩니다.
1. 유형이 역직렬화됩니다. 이렇게 하면 블록을 구성하고 init 메서드를 트리거하며 확장 프로그램을 혼합합니다.
2. 속성이 역직렬화됩니다. 여기에는 모든 블록에 적용할 수 있는 속성이 포함됩니다. 예: x, y, 접힘, 사용 중지됨, 데이터
3. 추가 상태가 역직렬화됩니다. 자세한 내용은 확장 프로그램 및 변형자 문서를 참고하세요.
4. 블록이 상위 요소에 연결됩니다 (있는 경우).
5. 아이콘이 역직렬화됩니다. 개별 아이콘은 임의의 순서로 역직렬화됩니다.
6. 필드가 역직렬화됩니다. 개별 필드는 임의의 순서로 역직렬화됩니다.
7. 입력 블록이 역직렬화됩니다. 여기에는 값 입력과 문이 연결된 블록이 포함됩니다. 개별 입력은 임의의 순서로 역직렬화됩니다.
8. 다음 블록이 역직렬화됩니다.

추가 상태를 저장해야 하는 경우

블록의 경우 순서가 더 높은 항목에 종속되는 순서가 더 낮은 항목이 있는 경우 해당 데이터를 복제하여 추가 상태에 추가해야 합니다.

예를 들어 다음 블록이 연결된 경우에만 존재하는 필드가 있는 경우 필드의 상태가 역직렬화되기 전에 필드가 블록에 추가될 수 있도록 해당 다음 블록에 관한 정보를 추가해야 합니다.

그러나 필드에 특정 값이 있는 경우에만 존재하는 입력이 있는 경우 필드에 대한 정보를 추가 상태에 추가할 필요가 없습니다. 필드의 상태가 먼저 역직렬화되고 이 상태가 되면 블록에 입력을 추가할 수 있기 때문입니다. 일반적으로 입력을 추가하는 작업은 검사기에 의해 트리거됩니다.

상태 복제에 관한 규칙에서는 블록 스택, 아이콘, 필드 및 입력 블록이 임의의 순서로 역직렬화된다는 것도 고려해야 합니다. 예를 들어 다른 필드 A에 특정 값이 있는 경우에만 존재하는 필드 B가 하나 있는 경우 B가 A보다 먼저 역직렬화되는 경우 추가 상태에 A에 관한 정보를 추가해야 합니다.

블록 후크

블록에 직렬화를 추가하는 방법에 관한 자세한 내용은 확장 프로그램 및 변형자 문서를 참고하세요.

필드 후크

필드를 직렬화하는 방법에 관한 자세한 내용은 커스텀 필드 문서를 참고하세요.

직렬화 도구 후크

JSON 시스템을 사용하면 일부 상태를 직렬화 및 역직렬화하는 직렬화 도구를 등록할 수 있습니다. Blockly의 내장 직렬화기는 블록 및 변수에 관한 정보를 직렬화하지만 다른 정보를 직렬화하려면 자체 직렬화기를 추가해야 합니다. 예를 들어 워크스페이스 수준 주석은 기본적으로 JSON 시스템에서 직렬화되지 않습니다. 직렬화하려면 추가 직렬라이저를 등록해야 합니다.

추가 직렬화기는 플러그인의 상태를 직렬화 및 역직렬화하는 데 자주 사용됩니다.

Blockly.serialization.registry.register(
    'workspace-comments',  // Name
    {
      save: saveFn,      // Save function
      load: loadFn,      // Load function
      clear: clearFn,    // Clear function
      priority: 10,      // Priority
    });

직렬 변환기를 등록할 때는 다음과 같은 몇 가지 항목을 제공해야 합니다.

데이터도 저장되는 serializer의 이름.
직렬화 도구와 연결된 플러그인/시스템의 상태를 save하는 함수입니다.
상태를 clear하는 함수입니다.
상태를 load하는 함수입니다.
priority: 역직렬화 순서를 결정하는 데 사용됩니다.

serializer의 우선순위는 내장된 우선순위를 기준으로 설정할 수 있습니다.

Blockly.serialization.workspaces.save가 호출되면 각 직렬화 도구의 save 함수가 호출되고 데이터가 최종 JSON 출력에 추가됩니다.

{
  "blocks": { ... },
  "workspaceComments": [ // Provided by workspace-comments serializer
    {
      "x": 239,
      "y": 31,
      "text": "Add 2 + 2"
    },
    // etc...
  ]
}

Blockly.serialization.workspaces.load가 호출되면 각 직렬화가 우선순위에 따라 트리거됩니다. 양수 우선순위 값이 더 많은 Serializer가 양수 우선순위 값이 더 낮은 serializer보다 먼저 트리거됩니다.

직렬화가 트리거되면 다음 두 가지 작업이 실행됩니다.

제공된 clear 함수가 호출됩니다. 이렇게 하면 추가 상태가 로드되기 전에 플러그인/시스템 상태가 정리됩니다. 예를 들어 Workspace-Comments 직렬화 도구는 워크스페이스에서 기존의 모든 댓글을 삭제합니다.
제공된 load 함수가 호출됩니다.

XML 시스템

XML 시스템을 사용하면 작업공간을 XML 노드로 직렬화할 수 있습니다. 이것은 Blockly의 원래 직렬화 시스템이었습니다. 이제 이 앱은 아이스박스 처리되어 새로운 기능을 받지 못합니다. 따라서 가능하면 JSON 시스템을 사용하는 것이 좋습니다.

API

XML 시스템의 API에 관한 자세한 내용은 참조 문서를 참고하세요.

블록 후크

블록에 추가 직렬화를 추가하는 방법에 관한 자세한 내용은 확장 프로그램 및 변형자 문서를 참고하세요.

필드 후크

필드를 직렬화하는 방법에 관한 자세한 내용은 커스텀 필드 문서를 참고하세요.

JSON과 XML 중 선택

XML보다 JSON 직렬기를 사용하는 것이 좋습니다. JSON 시스템을 사용하면 작업공간의 상태를 JavaScript 객체로 직렬화할 수 있습니다. 이렇게 하면 다음과 같은 이점이 있습니다.

JSON은 쉽게 압축하거나 다른 형식으로 변환할 수 있습니다.
JSON은 프로그래매틱 방식으로 쉽게 사용할 수 있습니다.
JSON은 데이터를 확장하고 추가하기 쉽습니다.

또한 XML 시스템은 더 이상 업데이트를 수신하지 않으며 JSON serializer에 비해 이미 기능이 부족합니다. 예를 들어 자체 JSON 직렬화를 등록하여 추가한 플러그인 또는 맞춤설정의 데이터와 같은 추가 데이터를 쉽게 저장하고 로드할 수 있습니다. XML 시스템에서는 불가능합니다.

이전에 XML 직렬화를 사용한 경우 업그레이드 방법에 관한 자세한 내용은 이전 가이드를 참고하세요.