JSON 포맷터

JSON(JavaScript Object Notation)은 데이터를 저장하고 전송하는 데 사용되는 경량 텍스트 기반 데이터 교환 형식입니다. 2001년 더글라스 크락포드(Douglas Crockford)가 표준화했으며, 현재 웹 개발에서 가장 널리 사용되는 데이터 형식입니다.

JSON은 사람이 읽고 쓰기 쉽고, 기계가 파싱하고 생성하기 쉬운 구조를 가지고 있습니다. JavaScript에서 유래했지만, 거의 모든 프로그래밍 언어에서 지원합니다. REST API, 설정 파일, NoSQL 데이터베이스(MongoDB 등) 등 다양한 곳에서 사용됩니다.

뚝딱공방의 JSON 포맷터는 JSON 데이터를 보기 좋게 정리하고, 문법 오류를 찾아주며, 트리 뷰로 구조를 시각화합니다. 모든 처리는 브라우저에서 이루어져 데이터가 외부로 전송되지 않습니다.

JSON은 두 가지 기본 구조로 이루어져 있습니다.

객체 (Object): 중괄호 {}로 감싸고, "키": 값 형태의 쌍을 쉼표로 구분합니다. {"name": "홍길동", "age": 30}

배열 (Array): 대괄호 []로 감싸고, 값을 쉼표로 구분합니다. ["사과", "바나나", "오렌지"]

지원하는 데이터 타입은 6가지입니다.

• 문자열 (String): 큰따옴표로 감싼 텍스트 — "안녕하세요"
• 숫자 (Number): 정수 또는 소수 — 42, 3.14
• 불리언 (Boolean): 참/거짓 — true, false
• null: 값이 없음을 나타냄 — null
• 객체 (Object): 중첩된 키-값 쌍 — {"city": "서울"}
• 배열 (Array): 순서가 있는 값의 목록 — [1, 2, 3]

JSON을 작성할 때 반드시 지켜야 하는 규칙들입니다. 이 규칙을 어기면 파싱 에러가 발생합니다.

필수 규칙

• 키(key)는 반드시 큰따옴표("")로 감싸야 합니다 — 작은따옴표 불가
• 문자열 값도 반드시 큰따옴표로 감싸야 합니다
• 마지막 항목 뒤에 쉼표(trailing comma)를 넣으면 안 됩니다
• 주석을 사용할 수 없습니다 — // 또는 /* */ 불가
• undefined, NaN, Infinity는 사용할 수 없습니다

올바른 예시 {"name": "홍길동", "age": 30}

잘못된 예시 {name: "홍길동", age: 30} → 키에 따옴표 없음 {'name': '홍길동'} → 작은따옴표 사용 {"name": "홍길동", "age": 30,} → trailing comma {"name": "홍길동" /* 이름 */} → 주석 사용

데이터 교환 형식으로 JSON 외에도 XML과 YAML이 있습니다. 각 형식의 특징을 비교합니다.

JSON

• 장점: 경량, 파싱 속도 빠름, 대부분의 API에서 사용
• 단점: 주석 불가, 날짜/바이너리 타입 없음
• 용도: REST API, 설정 파일, NoSQL DB

XML (eXtensible Markup Language)

• 장점: 네임스페이스 지원, 스키마 검증, 주석 가능
• 단점: 장황함(태그가 많아 파일 크기 큼), 파싱이 복잡
• 용도: SOAP API, RSS, 레거시 시스템

YAML (YAML Ain't Markup Language)

• 장점: 가독성 최고, 주석 지원, 앵커/별칭으로 중복 제거
• 단점: 들여쓰기에 민감, 파싱 속도 느림
• 용도: 설정 파일(Docker, Kubernetes), CI/CD 파이프라인

현재 웹 API의 90% 이상이 JSON을 사용하며, 가장 범용적인 데이터 형식입니다.

1. JSON 데이터를 입력창에 붙여넣거나 직접 입력합니다.

   • "샘플" 버튼을 클릭하면 예시 데이터가 자동으로 입력됩니다.

2. 도구 모음에서 원하는 기능을 선택합니다.

   • 포맷: 보기 좋게 들여쓰기 정리
   • 축소: 공백 제거로 최소 크기로 변환
   • 복사: 결과를 클립보드에 복사
   • 지우기: 입력 내용 전체 삭제

3. 들여쓰기 단위를 선택합니다 (2칸 또는 4칸).

4. 뷰 모드를 전환합니다.

   • 포맷 뷰: 일반 텍스트 형태로 표시
   • 트리 뷰: 접기/펼치기가 가능한 계층 구조로 표시

5. 문법 오류가 있으면 입력창 아래에 빨간색 에러 메시지가 표시됩니다.