JavaScript에서 보기 좋은 JSON을 다시 읽기 쉽게 만들기
출처: Dev.to
대부분의 JSON 직렬화 도구는 두 가지 옵션만 제공합니다:
컴팩트한 기계 출력:
{"a":{"b":{"c":"abc"}},"x":{"y":{"z":"xyz"}}}완전하게 확장된 “pretty‑print”:
{
"a": {
"b": {
"c": "abc"
}
},
"x": {
"y": {
"z": "xyz"
}
}
}첫 번째는 사람이 스캔하기 어렵고, 두 번째는 실제 데이터가 중첩될 때 지나치게 장황해집니다.
나는 그 사이 어딘가를 원했습니다.
아이디어
jsonfold 라는 작은 JavaScript 모듈을 만들었습니다. JavaScript의 JSON 직렬화기를 대체하는 것이 아니라, JSON.stringify() 결과 위에 가벼운 후처리 필터로 동작합니다.
포매터는 선택적으로:
- 작은 컨테이너를 한 줄에 다시 접음,
- 짧은 스칼라 시퀀스를 압축,
- 크거나 복잡한 구조는 펼쳐 둠
예시 출력:
{
"a": { "b": { "c": "abc" } },
"x": { "y": { "z": "xyz" } }
}왜 이런 접근법인가?
직렬화기를 새로 만들고 싶지는 않았습니다. JavaScript는 JSON.stringify() 라는 훌륭한 직렬화기를 이미 제공하며, replacer 콜백을 통한 사용자 정의 변환과 들여쓰기 옵션을 지원합니다.
포매터는 스트리밍 필터로 사용하거나, JSON.stringify() 와 비슷하게 동작하는 편리한 래퍼를 통해 사용할 수 있습니다.
import { stringify } from "@jsonfold/core";
const data = {
a: { b: { c: "abc" } },
x: { y: { z: "xyz" } }
};
console.log(stringify(data));즉, 더 컴팩트하고 가독성 좋은 출력을 만들면서도 표준 JavaScript 직렬화 파이프라인을 그대로 사용할 수 있다는 뜻입니다.
커스터마이징
포매터는 다음을 제어할 수 있습니다:
- 최대 라인 길이,
- 접기 깊이,
- 압축 강도,
- 배열/객체 제한
따라서 보수적인 포맷팅과 더 공격적인 압축 사이에서 선택할 수 있습니다.
전체 기사
Medium (유료벽 없음): A Streaming JSON Formatter for JavaScript that Works with JSON.stringify
최소 사용법
설치:
npm install @jsonfold/coreimport { dump } from "@jsonfold/core";
const data = {
meta: { version: 1, ok: true },
ids: [1, 2, 3, 4, 5],
items: [
{ id: 1, name: "alpha" },
{ id: 2, name: "beta" }
]
};
// compact 옵션: default, low, med, high, max
dump(data, process.stdout, {
compact: "default"
});GitHub 프로젝트
웹 사이트: https://jsonfold.dev/
저장소: https://github.com/yairlenga/jsonfold
JavaScript 구현은 javascript 디렉터리 아래에 있습니다.
앞으로 Python, Java, Perl, C 등 다른 구현에 대한 글도 다룰 예정이니 GitHub 프로젝트를 지켜보시거나 Medium의 글을 팔로우해 주세요.