JSON 포매터는 JSON 데이터를 보기 좋게 정리하고, 압축하며, 유효성을 검증하는 개발자 도구입니다. 📝 기본 사용법 • 입력창에 JSON 데이터를 붙여넣거나 입력합니다 • '포맷팅' 버튼을 클릭하여 들여쓰기를 적용합니다 • '압축' 버튼으로 불필요한 공백을 제거합니다 • '검증' 버튼으로 JSON 문법 오류를 확인합니다 🔧 주요 기능 • 포맷팅: JSON을 읽기 쉽게 들여쓰기합니다 (2칸/4칸/8칸 선택 가능) • 압축: 공백과 줄바꿈을 제거하여 파일 크기를 줄입니다 • 검증: JSON 구문 오류를 실시간으로 감지합니다 • 복사: 결과를 클립보드에 복사합니다 • 다운로드: JSON 파일로 저장합니다 ⚙️ 들여쓰기 설정 오른쪽 상단의 드롭다운에서 들여쓰기 크기를 선택할 수 있습니다: • 2칸 (권장): 표준 JSON 스타일 • 4칸: JavaScript/TypeScript 스타일 • 8칸: 넓은 들여쓰기 🎯 샘플 기능 '샘플' 버튼을 클릭하면 예제 JSON 데이터가 자동으로 입력됩니다. 💡 활용 팁 API 응답 데이터 확인, 설정 파일 정리, JSON 구조 분석, 데이터 디버깅 등에 활용하세요.

JSON (JavaScript Object Notation)은 데이터를 저장하고 교환하기 위한 경량 텍스트 형식입니다. 📚 JSON의 역사 JSON은 2001년 더글라스 크록포드(Douglas Crockford)가 처음 규정했습니다. JavaScript 객체 표기법에서 파생되었지만, 현재는 언어 독립적인 데이터 형식으로 널리 사용됩니다. 2013년 ECMA-404 표준으로 공식화되었으며, 2017년에는 RFC 8259로 인터넷 표준이 되었습니다. 🔑 JSON의 주요 특징 1. **간결성**: XML보다 간단하고 읽기 쉬운 구조 2. **언어 독립성**: 거의 모든 프로그래밍 언어에서 지원 3. **경량**: 최소한의 문법으로 데이터 표현 4. **자체 설명적**: 데이터 구조가 명확하게 드러남 📦 JSON 데이터 타입 • 문자열 (String): "hello" • 숫자 (Number): 42, 3.14 • 불리언 (Boolean): true, false • null: null • 객체 (Object): {"key": "value"} • 배열 (Array): [1, 2, 3] 🌐 JSON의 활용 • REST API 데이터 교환 • 웹 서버와 클라이언트 간 통신 • 설정 파일 (package.json, tsconfig.json 등) • NoSQL 데이터베이스 (MongoDB 등) • 로그 데이터 저장 ⚠️ JSON 문법 규칙 • 키는 반드시 큰따옴표로 감싸야 함 (작은따옴표 불가) • 문자열은 큰따옴표만 사용 • 마지막 요소 뒤에 쉼표 금지 • 주석 사용 불가 • 함수나 날짜 객체 사용 불가 💻 JSON vs XML JSON은 XML보다 30% 이상 작은 크기를 가지며, 파싱 속도도 빠릅니다. 이러한 이유로 현대 웹 개발에서는 JSON이 사실상 표준 데이터 형식이 되었습니다.

JSON을 효과적으로 다루기 위한 개발 팁과 베스트 프랙티스를 소개합니다. 🎨 포맷팅 베스트 프랙티스 1. **일관된 들여쓰기**: 프로젝트 전체에서 동일한 들여쓰기 사용 (보통 2칸 권장) 2. **키 순서 정렬**: 알파벳 순서로 정렬하면 읽기 쉬움 3. **중첩 깊이 제한**: 3-4단계 이상 중첩은 구조 재설계 고려 4. **의미 있는 키 이름**: camelCase 또는 snake_case 일관성 유지 🔍 검증 및 디버깅 • **Strict Mode**: 모든 키를 큰따옴표로 감싸기 • **타입 일관성**: 동일한 필드는 항상 같은 타입 사용 • **null vs undefined**: JSON은 undefined를 지원하지 않음, null 사용 • **특수문자 이스케이프**: \n (줄바꿈), \t (탭), \\ (백슬래시), \" (큰따옴표) ⚡ 성능 최적화 1. **압축 전송**: 프로덕션에서는 압축된 JSON 사용 2. **불필요한 데이터 제거**: 클라이언트에 필요한 데이터만 전송 3. **캐싱**: 자주 사용되는 JSON은 캐싱 활용 4. **스트리밍**: 대용량 JSON은 스트리밍 파서 사용 🛡️ 보안 고려사항 • **JSON.parse() 사용**: eval() 절대 사용 금지 • **입력 검증**: 외부 JSON은 항상 검증 후 사용 • **민감 정보 주의**: 비밀번호, API 키 등 평문 저장 금지 • **크기 제한**: DOS 공격 방지를 위한 최대 크기 설정 📱 API 설계 팁 • **RESTful 규칙**: 일관된 JSON 응답 구조 유지 • **에러 형식**: 통일된 에러 응답 포맷 사용 • **버전 관리**: API 버전에 따른 JSON 스키마 관리 • **페이지네이션**: 대량 데이터는 페이징 처리 🔧 유용한 도구 • **VS Code**: JSON 자동 포맷팅 (Alt+Shift+F) • **jq**: 명령줄 JSON 프로세서 • **JSON Schema**: JSON 구조 검증 도구 • **Postman**: API JSON 응답 테스트 💡 실전 활용 예제 • package.json: npm 패키지 설정 • tsconfig.json: TypeScript 컴파일러 설정 • .eslintrc.json: ESLint 린터 설정 • manifest.json: 웹 앱 매니페스트 • i18n/*.json: 다국어 번역 파일 🚀 고급 기법 • **JSON Pointer**: 특정 값 참조 (RFC 6901) • **JSON Patch**: 부분 업데이트 (RFC 6902) • **JSON Merge Patch**: 병합 업데이트 (RFC 7396) • **JSON Schema**: 구조 검증 및 문서화 ⚠️ 흔한 실수 1. 싱글 쿼트 사용: ❌ {'key': 'value'} → ✅ {"key": "value"} 2. 후행 쉼표: ❌ {"a": 1, "b": 2,} → ✅ {"a": 1, "b": 2} 3. undefined 사용: ❌ {"key": undefined} → ✅ {"key": null} 4. 주석 추가: ❌ {"key": "value" /* 주석 */} → ✅ JSON은 주석 미지원 🌟 프로 팁 JSON은 "JavaScript Object Notation"이지만, JavaScript 객체와 완전히 같지 않습니다. JSON은 데이터 교환 형식이며, JavaScript 객체는 프로그래밍 언어의 데이터 구조입니다. 혼동하지 마세요!