JavaScript JSON 파서

이 글은 Tan Li Hau가 작성한 JSON Parser with JavaScript를 번역한 글입니다.

• 문법 이해하기
• 파서 구현하기
• 예상치 못한 입력 처리하기
  • 예상치 못한 토큰
  • 예상치 못한 문자열의 끝
• 조금 더 나아가기
  • 에러 코드와 표준 에러 메시지
  • 무엇이 잘못되었는지 더 잘 보여주기
  • 에러 복구를 위한 제안
• 요약

유효한 JSON 문자열을 가져와 객체(또는 선택한 언어가 사용하는 모든 것, 딕셔너리, 맵 등)로 변환하는 함수를 작성합니다. 입력 예제:

fakeParseJSON('{ "data": { "fish": "cake", "array": [1,2,3], "children": [ { "something": "else" }, { "candy": "cane" }, { "sponge": "bob" } ] } } ')

const fakeParseJSON = JSON.parse;

• Babel로 커스텀 JavaScript 구문 만들기
• 커스텀 Babel 변환 작성을 위한 단계별 가이드
• JavaScript로 AST 다루기

문법 이해하기

• 왼쪽에 구문 다이어그램 (또는 철도 다이어그램)

이미지 출처: https://www.json.org/img/object.png

• 오른쪽에 Backus–Naur 표기법의 변형인, McKeeman 표기법

json
  element

value
  object
  array
  string
  number
  "true"
  "false"
  "null"

object
  '{' ws '}'
  '{' members '}'

이미지 출처: https://www.json.org/img/object.png

• whitespace → } → 종료, 또는
• whitespace → string → whitespace → : → value → } → 종료

• → } → 종료, 또는
• → , → whitespace → ... → value

• → } → 종료

파서 구현하기

function fakeParseJSON(str) {
  let i = 0;
  // TODO
}

function fakeParseJSON(str) {
  if (str[i] === '{') {
    i ++;
    skipWhitespace();

    // 만약 `}` 가 아니라면
    // string -> whitespace -> ':' -> value -> ... 경로를 가게 됩니다.
    while (str[i] !== '}') {
        const key = parseString();
        skipWhitespace();
        eatColon();
        const value = parseValue();
    }
  }
}

function fakeParseJSON(str) {
  let i = 0;
  function parseObject() {
    if (str[i] === '{') {
      i++;
      skipWhitespace();

      let initial = true;
      // '}' 가 아니라면
      // string -> whitespace -> ':' -> value -> ... 경로를 따라갑니다.
      while (str[i] !== '}') {
        if (!initial) {
          eatComma();
          skipWhitespace();
        }
        const key = parseString();
        skipWhitespace();
        eatColon();
        const value = parseValue();
        initial = false;
      }
      // '}'의 다음 문자로 이동합니다.
      i++;
    }
  }
}

• 문법을 기반으로 코드를 파싱하고 반환 값을 사용할 때 parseSomething 을 사용합니다.
• 어떤 문자가 존재할 것으로 예상하지만, 그 문자를 사용하지 않을 때 eatSomething을 사용합니다.
• 어떤 문자의 존재 여부가 상관없을 때 skipSomething 을 사용합니다.

function fakeParseJSON(str) {
  // ...
  function eatComma() {
    if (str[i] !== ',') {
      throw new Error('Expected ",".');
    }
    i++;
  }

  function eatColon() {
    if (str[i] !== ':') {
      throw new Error('Expected ":".');
    }
    i++;
  }
}

function fakeParseJSON(str) {
  let i = 0;
  function parseObject() {
    if (str[i] === '{') {
      i++;
      skipWhitespace();

      const result = {};

      let initial = true;
      // '}' 가 아니라면
      // string -> whitespace -> ':' -> value -> ... 경로를 따라갑니다.
      while (str[i] !== '}') {
        if (!initial) {
          eatComma();
          skipWhitespace();
        }
        const key = parseString();
        skipWhitespace();
        eatColon();
        const value = parseValue();
        result[key] = value;
        initial = false;
      }
      // '}' 다음 문자로 이동합니다.
      i++;

      return result;
    }
  }
}

이미지 출처: https://www.json.org/img/array.png

function fakeParseJSON(str) {
  // ...
  function parseArray() {
    if (str[i] === '[') {
      i++;
      skipWhitespace();

      const result = [];
      let initial = true;
      while (str[i] !== ']') {
        if (!initial) {
          eatComma();
        }
        const value = parseValue();
        result.push(value);
        initial = false;
      }
      // ']' 다음 문자로 이동합니다.
      i++;
      return result;
    }
  }
}

이미지 출처: https://www.json.org/img/value.png

function fakeParseJSON(str) {
  // ...
  function parseValue() {
    skipWhitespace();
    const value =
      parseString() ??
      parseNumber() ??
      parseObject() ??
      parseArray() ??
      parseKeyword('true', true) ??
      parseKeyword('false', false) ??
      parseKeyword('null', null);
    skipWhitespace();
    return value;
  }
}

function fakeParseJSON(str) {
  // ...
  function parseKeyword(name, value) {
    if (str.slice(i, i + name.length) === name) {
      i += name.length;
      return value;
    }
  }
}

function fakeParseJSON(str) {
  let i = 0;
  return parseValue();

  // ...
}

예상치 못한 입력 처리하기

• 예상치 못한 토큰
• 예상치 못한 문자열의 끝

예상치 못한 토큰

예상치 못한 문자열의 끝

function fakeParseJSON(str) {
  // ...
  function parseObject() {
    // ...
    while(str[i] !== '}') {

function fakeParseJSON(str) {
  // ...
  function parseObject() {
    // ...
    while (i < str.length && str[i] !== '}') {
      // ...
    }
    checkUnexpectedEndOfInput();

    // '}' 의 다음 문자로 이동
    i++;

    return result;
  }
}

조금 더 나아가기

Unexpected token "a"

에러 코드와 표준 에러 메시지

// 이것보단
Unexpected token "a"
Unexpected end of input

// 이렇게 보여주세요
JSON_ERROR_001 Unexpected token "a"
JSON_ERROR_002 Unexpected end of input

무엇이 잘못되었는지 더 잘 보여주기

// 이것보단
Unexpected token "a" at position 5

// 이렇게 보여주세요
{ "b"a
      ^
JSON_ERROR_001 Unexpected token "a"

function fakeParseJSON(str) {
  // ...
  function printCodeSnippet() {
    const from = Math.max(0, i - 10);
    const trimmed = from > 0;
    const padding = (trimmed ? 3 : 0) + (i - from);
    const snippet = [
      (trimmed ? '...' : '') + str.slice(from, i + 1),
      ' '.repeat(padding) + '^',
      ' '.repeat(padding) + message,
    ].join('\n');
    console.log(snippet);
  }
}

에러 복구를 위한 제안

// 이것보단
Unexpected token "a" at position 5

// 이렇게 보여주세요
{ "b"a
      ^
JSON_ERROR_001 Unexpected token "a".
Expecting a ":" over here, eg:
{ "b": "bar" }
      ^
You can learn more about valid JSON string in http://goo.gl/xxxxx

fakeParseJSON('"Lorem ipsum');

// 이것보단
Expecting a `"` over here, eg:
"Foo Bar"
        ^

// 이렇게 보여주세요
Expecting a `"` over here, eg:
"Lorem ipsum"
            ^

• 의미 있는 에러 메시지
• 실패 지점의 에러를 가리키는 코드 스니펫
• 에러 복구를 위한 제공

요약

• Babel 파서
• Svelte 파서

1. <a name="footnote_ast">AST</a>: Abstract Syntax Tree의 약자로 소스 코드를 분석해 트리 형태로 나타낸 데이터 구조이다.