JSON Formatter & Validator 실전 가이드

"이 API 응답... 대체 어디가 어딘지 모르겠어요."

한 줄로 압축된 JSON 응답을 받아본 적 있나요? 3,000자짜리 중첩 객체에서 특정 필드를 찾는 건 악몽입니다.

JSON Formatter는 이 문제를 해결합니다. 그리고 Validator는 "왜 파싱이 안 되지?"라는 질문에 답합니다.

---

JSON 30초 복습

데이터 타입

{
  "string": "텍스트",
  "number": 42,
  "boolean": true,
  "null": null,
  "array": [1, 2, 3],
  "object": {"nested": "value"}
}

핵심 규칙 (자주 틀리는 것)

---

Minified vs Prettified

실제로 받는 API 응답 (Minified)

{"users":[{"id":1,"name":"김개발","email":"kim@dev.com","profile":{"avatar":"https://cdn.example.com/1.jpg","bio":"풀스택 개발자"}}],"pagination":{"total":150,"page":1,"limit":10}}

이걸 읽을 수 있나요?

Formatter 적용 후 (Prettified)

{
  "users": [
    {
      "id": 1,
      "name": "김개발",
      "email": "kim@dev.com",
      "profile": {
        "avatar": "https://cdn.example.com/1.jpg",
        "bio": "풀스택 개발자"
      }
    }
  ],
  "pagination": {
    "total": 150,
    "page": 1,
    "limit": 10
  }
}

구조가 보입니다. users[0].profile.bio가 어디 있는지 즉시 파악됩니다.

---

흔한 JSON 오류 5가지

1. Trailing Comma (마지막 쉼표)

가장 흔한 실수입니다. JavaScript에서는 허용되지만 JSON에서는 오류입니다.

// ❌ 오류: Unexpected token }
{
  "name": "김개발",
  "age": 30,
}

// ✅ 수정
{
  "name": "김개발",
  "age": 30
}

2. 작은따옴표

// ❌ 오류: Unexpected token '
{'name': '김개발'}

// ✅ 수정
{"name": "김개발"}

3. 따옴표 없는 키

// ❌ 오류: Unexpected token n
{name: "김개발"}

// ✅ 수정
{"name": "김개발"}

4. 이스케이프 안 된 문자

// ❌ 오류: 줄바꿈, 탭 등
{"message": "안녕하세요
반갑습니다"}

// ✅ 수정
{"message": "안녕하세요\n반갑습니다"}

5. 잘못된 숫자 형식

// ❌ 오류
{"value": 007}       // 앞에 0
{"hex": 0xFF}        // 16진수

// ✅ 수정
{"value": 7}
{"hex": "0xFF"}      // 문자열로

---

실전: 코드에서 포맷팅

JavaScript

// API 응답 디버깅
fetch('/api/users')
  .then(res => res.json())
  .then(data => {
    // 콘솔에서 읽기 쉽게
    console.log(JSON.stringify(data, null, 2));
  });

JSON.stringify(data, null, 2)의 세 번째 인자:

• 2: 2칸 들여쓰기
• 4: 4칸 들여쓰기
• '\t': 탭 들여쓰기

특정 필드만 추출

const user = {
  id: 1,
  name: "김개발",
  password: "secret123",
  email: "kim@dev.com"
};

// password 제외하고 출력
console.log(JSON.stringify(user, ['id', 'name', 'email'], 2));

출력:

{
  "id": 1,
  "name": "김개발",
  "email": "kim@dev.com"
}

---

커맨드라인에서 JSON 다루기

jq - JSON 처리의 스위스 아미 나이프

# 설치
brew install jq      # macOS
apt install jq       # Ubuntu

# 포맷팅
cat response.json | jq .

# 특정 필드 추출
cat response.json | jq '.users[0].name'

# 배열 필터링
cat response.json | jq '.users[] | select(.age > 30)'

# 필드 선택해서 새 객체
cat response.json | jq '.users[] | {name, email}'

Python

# 파일 검증 + 포맷팅
python -m json.tool data.json

# 파이프로 처리
curl https://api.example.com/users | python -m json.tool

Node.js

# 파일이 유효한 JSON인지 확인
node -e "require('./data.json')"

---

JSON Schema로 구조 검증

단순 문법 검사를 넘어서, 데이터 구조와 타입을 검증할 수 있습니다.

Schema 정의

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "required": ["name", "email"],
  "properties": {
    "name": {
      "type": "string",
      "minLength": 2,
      "maxLength": 50
    },
    "email": {
      "type": "string",
      "format": "email"
    },
    "age": {
      "type": "integer",
      "minimum": 0,
      "maximum": 150
    }
  }
}

JavaScript에서 검증 (ajv)

import Ajv from 'ajv';
import addFormats from 'ajv-formats';

const ajv = new Ajv();
addFormats(ajv);

const validate = ajv.compile(schema);

const data = {
  name: "김개발",
  email: "invalid-email",
  age: -5
};

if (!validate(data)) {
  console.log(validate.errors);
  // [
  //   { keyword: 'format', message: 'must match format "email"' },
  //   { keyword: 'minimum', message: 'must be >= 0' }
  // ]
}

---

IDE/에디터 설정

VSCode

# 자동 포맷팅 단축키
Windows/Linux: Shift + Alt + F
Mac: Shift + Option + F

# 저장 시 자동 포맷 (settings.json)
"[json]": {
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

JetBrains (IntelliJ, WebStorm)

# 자동 포맷팅
Windows/Linux: Ctrl + Alt + L
Mac: Cmd + Option + L

---

FAQ

Q: JSON에 주석을 쓰고 싶어요

A: 표준 JSON은 주석을 지원하지 않습니다. 대안:

1. JSONC (JSON with Comments): VSCode 설정 파일 등에서 사용
2. JSON5: 주석, trailing comma, 작은따옴표 허용
3. 별도 필드: "_comment": "설명"

{
  "_comment": "이 설정은 개발 환경용입니다",
  "debug": true
}

Q: 대용량 JSON 파일이 열리지 않아요

A: 일반 에디터는 수십MB 파일에서 멈춥니다. 대안:

• jq: 스트리밍 처리
• fx: 터미널 인터랙티브 뷰어 (npm i -g fx)
• 온라인 도구: 대용량 JSON 전용 뷰어

Q: API 응답 전체를 로깅하면 안 되나요?

A: 프로덕션에서는 위험합니다.

// ❌ 민감 정보 노출 가능
console.log(JSON.stringify(apiResponse));

// ✅ 민감 필드 마스킹
const sanitize = (obj) => JSON.stringify(obj, (key, val) =>
  ['password', 'token', 'secret'].includes(key) ? '***' : val
);

---

정리

---

관련 도구