JSON 포맷팅과 유효성 검사: 개발자를 위한 빠른 참조 가이드

Code on screen

JSON (JavaScript Object Notation)은 웹 API의 공용어입니다. 설계 자체는 단순하지만, 쉼표 하나가 빠지거나 중괄호가 맞지 않으면 애플리케이션이 조용히 망가질 수 있습니다. JSON을 자신 있게 다루기 위한 모든 것을 여기에 정리했습니다.

90초로 배우는 JSON 문법

JSON에는 정확히 여섯 가지 값 타입이 있습니다:

{
  "string": "hello world",
  "number": 42,
  "boolean": true,
  "null_value": null,
  "array": [1, 2, 3],
  "object": { "nested": "value" }
}

자주 실수하는 규칙들:

키는 반드시 큰따옴표로 감싼 문자열이어야 합니다 — {name: "Alice"}는 유효한 JSON이 아닙니다
후행 쉼표 금지 — [1, 2, 3,]은 유효하지 않습니다
주석 금지 — JSON에는 //나 /* */ 문법이 없습니다
문자열은 반드시 큰따옴표를 사용해야 합니다 — 작은따옴표는 허용되지 않습니다
숫자에 선행 0을 붙일 수 없습니다 — 007은 유효하지 않습니다

가장 흔한 JSON 오류

1. 후행 쉼표

// Invalid
{ "a": 1, "b": 2, }

// Valid
{ "a": 1, "b": 2 }

2. 작은따옴표로 감싼 문자열

// Invalid
{ 'name': 'Alice' }

// Valid
{ "name": "Alice" }

3. 따옴표 없는 키

// Invalid
{ name: "Alice" }

// Valid
{ "name": "Alice" }

4. Undefined 또는 NaN 값 — 이 JavaScript 값들은 JSON에 존재하지 않습니다. 대신 null을 사용하세요.

포맷팅 vs. 압축(minifying)

보기 좋게 출력된 JSON (포맷됨)은 가독성을 위해 들여쓰기와 줄 바꿈을 사용합니다:

{
  "user": {
    "id": 1,
    "name": "Alice"
  }
}

압축된 JSON은 모든 공백을 제거합니다:

{"user":{"id":1,"name":"Alice"}}

설정 파일과 소스 코드에는 포맷된 JSON을 사용하세요. API 응답과 저장소에는 페이로드 크기를 줄이기 위해 압축된 JSON을 사용하세요. 저희 JSON Formatter를 사용하면 클릭 한 번으로 두 형식을 전환할 수 있습니다.

JSON Schema 유효성 검사

JSON Schema를 사용하면 JSON 문서의 예상 구조를 정의하고 데이터를 검증할 수 있습니다. API 계약과 설정 파일 검증에 필수적입니다.

간단한 스키마 예시:

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "required": ["name", "age"],
  "properties": {
    "name": { "type": "string" },
    "age": { "type": "integer", "minimum": 0 }
  }
}

이 스키마는 name이나 age가 없거나, age가 음수인 객체를 모두 거부합니다. JSON Schema Validator를 사용하면 스키마와 데이터를 붙여넣어 실시간으로 검증할 수 있습니다.

JSON에서 TypeScript 타입 생성하기

API로부터 JSON 응답을 받고 TypeScript 인터페이스가 필요하다면, JSON을 저희 JSON to TypeScript 변환기에 붙여넣으세요. 데이터 구조에서 타입을 자동으로 추론합니다:

입력:

{ "id": 1, "name": "Alice", "active": true, "tags": ["admin"] }

출력:

interface Root {
  id: number;
  name: string;
  active: boolean;
  tags: string[];
}

JSONPath: 중첩 데이터 쿼리하기

JSONPath는 JSON에서 XPath가 XML에서 하는 역할과 같습니다 — 중첩된 구조에서 값을 추출하는 쿼리 언어입니다. 기본 문법:

표현식	의미
`$.store.book`	`store` 안의 `book` 키
`$.store.book[0]`	첫 번째 책
`$.store.book[*].title`	모든 책의 제목
`$..price`	문서 어디에서나 나타나는 모든 `price` 값

JSON Path Finder를 사용하면 렌더링된 JSON 트리에서 원하는 값을 클릭하면 경로가 자동으로 복사됩니다.