JSON5: JSON보다 더 쉽게, 더 유연하게

JSON은 오늘날 웹 개발에서 가장 널리 사용되는 데이터 교환 형식 중 하나로, 기계 간 통신에 매우 효율적입니다. 하지만 사람이 직접 작성하고 유지보수하기에는 JSON의 제한적인 문법이 때로는 불편함을 초래합니다. 이를 해결하기 위해 JSON5가 등장했습니다. JSON5는 JSON의 확장판으로, 사람이 작성하고 유지보수하기 쉽게 설계되었습니다. 이번 블로그에서는 JSON5의 개념과 주요 특징, 사용 방법을 살펴보겠습니다.

반응형

---

JSON5란 무엇인가요?

JSON5는 2012년에 시작된 프로젝트로, JSON을 확장하여 사람이 쉽게 작성하고 유지보수할 수 있도록 설계된 데이터 형식입니다. JSON5는 JSON의 상위 집합으로, ECMAScript 5.1(ES5)의 일부 구문을 차용하여 더 유연한 문법을 제공합니다. 이를 통해 JSON5 파일은 항상 유효한 JSON 파일이며 동시에 ES5 코드로도 사용할 수 있습니다.

JSON5는 기계 간 통신보다는 사람이 작성하는 설정 파일이나 구성 파일에 적합하며, Chromium, Next.js, Babel 등 주요 프로젝트에서 채택되고 있습니다. 또한 Apple의 macOS 및 iOS 플랫폼에서도 기본적으로 지원됩니다.

---

JSON5의 주요 특징

JSON5는 JSON과 달리 여러 가지 유연한 문법적 기능을 제공합니다. 주요 특징은 다음과 같습니다:

1. 객체

• 객체 키의 확장성: 객체 키는 ES5의 IdentifierName으로 작성 가능합니다. 이는 작은따옴표나 큰따옴표 없이도 객체 키를 작성할 수 있음을 의미합니다.
• 후행 쉼표 허용: 마지막 요소 뒤에 쉼표를 허용하여 배열 및 객체를 더 쉽게 수정할 수 있습니다.

2. 배열

• 배열에서도 후행 쉼표를 허용하여 가독성을 높이고 유지보수를 용이하게 합니다.

3. 문자열

• 단일 인용부호 지원: 문자열을 작은따옴표(')로 감쌀 수 있습니다.
• 다중 줄 문자열: 줄바꿈 문자를 이스케이프하여 문자열을 여러 줄에 걸쳐 작성할 수 있습니다.
• 문자 이스케이프: 문자열에 다양한 이스케이프 문자를 포함할 수 있습니다.

4. 숫자

• 16진수 지원: 숫자를 16진수로 표현할 수 있습니다.
• 소수점의 유연성: 선행 및 후행 소수점을 허용합니다.
• IEEE 754 지원: 양의 무한대, 음의 무한대, NaN을 사용할 수 있습니다.
• 명시적 플러스 기호: 숫자가 +로 시작할 수 있습니다.

5. 주석

• 단일 줄(//) 및 다중 줄(/* */) 주석을 허용하여 설명을 쉽게 추가할 수 있습니다.

6. 공백

• JSON보다 더 많은 종류의 공백 문자를 허용합니다.

---

JSON5 사용 방법

JSON5를 사용하려면 Node.js 환경에서 간단히 설치하고 사용할 수 있습니다. 또한 브라우저에서도 사용할 수 있습니다.

설치

Node.js 환경에서는 다음 명령어를 사용해 JSON5 패키지를 설치할 수 있습니다:

npm install json5

JSON5 파싱 및 문자열화

JSON5는 JSON API와 호환되는 API를 제공합니다.

JSON5.parse()

JSON5 문자열을 JavaScript 객체로 변환합니다:

const JSON5 = require('json5');

const json5String = `{
  // 주석
  unquoted: '이런 식으로 작성할 수 있습니다.',
  singleQuotes: '작은따옴표도 지원합니다.',
  trailingComma: '마지막에 쉼표도 허용됩니다.',
}`;

const parsed = JSON5.parse(json5String);
console.log(parsed);

JSON5.stringify()

JavaScript 객체를 JSON5 문자열로 변환합니다:

const obj = {
  unquoted: "값",
  trailingComma: "마지막 쉼표 허용",
};

const json5String = JSON5.stringify(obj, null, 2);
console.log(json5String);

Node.js에서 JSON5 파일 직접 로드

Node.js에서 JSON5 파일을 require()로 바로 로드하려면 다음과 같이 설정합니다:

require('json5/lib/register');
const config = require('./config.json5');
console.log(config);

브라우저에서 사용

브라우저에서는 UMD 또는 ESM 형식의 스크립트를 로드하여 사용할 수 있습니다:

  const json5String = `{
    key: 'value',
    trailingComma: '허용됩니다.',
  }`;
  const parsed = JSON5.parse(json5String);
  console.log(parsed);

---

728x90

마무리

JSON5는 JSON보다 더 읽고 쓰기 쉬운 데이터 형식으로, 설정 파일과 같이 사람이 작성하는 데이터에 이상적입니다. 객체 키에 따옴표를 생략하거나, 주석을 추가하거나, 다중 줄 문자열을 사용하는 등 다양한 유연성을 제공하며, JSON의 단점을 보완합니다. 이제 JSON5를 활용해 더 편리하게 데이터를 관리해 보세요!

https://github.com/json5

JSON5