{ } JSON Formatter
Format, validate, minify, and convert JSON
Input JSON
1
📖 JSON이란?
🔤 JSON (JavaScript Object Notation)
JSON은 경량의 데이터 교환 형식으로, 사람이 읽고 쓰기 쉬우며 기계가 파싱하고 생성하기에도 용이합니다. 웹 애플리케이션에서 서버와 클라이언트 간 데이터를 주고받을 때 가장 널리 사용되는 형식입니다.
JSON 예시:
{
"name": "홍길동",
"age": 30,
"email": "hong@example.com",
"skills": ["JavaScript", "Python", "Java"]
}💡 JSON Formatter 사용 사례
- API 응답 데이터 확인: REST API에서 받은 JSON 데이터를 읽기 쉽게 포맷팅하여 구조 파악
- JSON 유효성 검증: JSON 파일이나 문자열이 올바른 형식인지 검사하고 오류 위치 확인
- 압축된 JSON 가독성 개선: 공백이 제거된(minified) JSON을 들여쓰기가 적용된 형태로 변환
- 데이터 형식 변환: JSON을 YAML이나 XML 형식으로 변환하여 다양한 시스템에서 활용
- 디버깅: 웹 개발 시 네트워크 요청/응답 데이터를 분석하여 오류 찾기
- 설정 파일 작성: package.json, tsconfig.json 등 설정 파일의 문법 오류 확인
🔧 사용 방법
- JSON 데이터 입력: 왼쪽 입력 영역에 JSON 데이터를 직접 입력하거나 붙여넣기
- Format (포맷팅): 압축된 JSON을 읽기 쉽게 들여쓰기와 줄바꿈 적용
- Validate (유효성 검사): JSON 문법이 올바른지 자동으로 검사하고 오류 위치 표시
- Minify (압축): 불필요한 공백과 줄바꿈을 제거하여 파일 크기 최소화
- Convert (변환): JSON을 YAML이나 XML 형식으로 변환
- 결과 복사: 오른쪽 출력 영역에서 처리된 결과를 클립보드에 복사
📚 JSON 기본 문법
데이터 타입:
- 문자열(String):
"안녕하세요"- 큰따옴표로 감싸야 함 - 숫자(Number):
42,3.14- 따옴표 없이 사용 - 불린(Boolean):
true,false- 소문자로 작성 - 배열(Array):
["apple", "banana", "cherry"]- 대괄호 사용 - 객체(Object):
{"key": "value"}- 중괄호 사용 - null:
null- 값이 없음을 나타냄
기본 규칙:
- 키(key)는 반드시 큰따옴표("")로 감싸야 합니다
- 문자열 값도 큰따옴표("")를 사용합니다 (작은따옴표 불가)
- 마지막 요소 뒤에는 쉼표(,)를 붙이지 않습니다
- 주석(comment)을 사용할 수 없습니다
✅ 일반적인 JSON 오류와 해결 방법
❌ 잘못된 예시:
{
name: "홍길동", // 키에 따옴표 없음
'age': 30, // 작은따옴표 사용
"skills": ["JS", "Python",] // 마지막 쉼표
}✅ 올바른 예시:
{
"name": "홍길동",
"age": 30,
"skills": ["JS", "Python"]
}자주 발생하는 오류:
- Unexpected token: 잘못된 문법이나 쉼표 누락/중복
- Invalid character: 따옴표나 괄호가 제대로 닫히지 않음
- Unexpected end of JSON input: JSON 구조가 완전하지 않음
- Unexpected string: 키에 따옴표가 없거나 쉼표 누락
❓ 자주 묻는 질문 (FAQ)
Q: JSON과 JavaScript 객체의 차이는 무엇인가요?
A: JSON은 데이터 교환을 위한 텍스트 형식이며, JavaScript 객체는 프로그래밍 언어의 데이터 구조입니다. JSON은 키에 반드시 큰따옴표를 사용해야 하고 주석을 쓸 수 없지만, JavaScript 객체는 더 유연합니다.
Q: JSON 파일을 최적화하려면 어떻게 해야 하나요?
A: Minify 기능을 사용하여 불필요한 공백과 줄바꿈을 제거하면 파일 크기를 줄일 수 있습니다. 이는 네트워크 전송 시 대역폭을 절약하고 로딩 속도를 개선합니다.
Q: JSON에 날짜(Date)를 저장하는 방법은?
A: JSON은 날짜 타입을 직접 지원하지 않습니다. ISO 8601 형식의 문자열("2025-01-02T10:30:00Z")이나 Unix timestamp(숫자)로 저장하는 것이 일반적입니다.
Q: JSON과 XML의 차이는 무엇인가요?
A: JSON은 더 가볍고 읽기 쉬우며 JavaScript와의 호환성이 좋습니다. XML은 더 복잡한 구조와 메타데이터를 표현할 수 있지만 파일 크기가 크고 파싱이 느립니다. 현대 웹 개발에서는 JSON이 더 선호됩니다.
Q: JSON에서 함수나 undefined를 사용할 수 있나요?
A: 아니요. JSON은 순수한 데이터 형식이므로 함수, undefined, Symbol 등은 지원하지 않습니다. 이러한 값들은 JSON.stringify() 시 무시됩니다.
💡 JSON 작성 팁과 모범 사례
- 일관된 들여쓰기: 2칸 또는 4칸 공백을 일관되게 사용하여 가독성 향상
- 의미 있는 키 이름: camelCase나 snake_case를 일관되게 사용
- 중첩 깊이 제한: 3-4단계 이상 중첩되지 않도록 구조 설계
- 배열과 객체 구분: 순서가 중요하면 배열, 키-값 매핑이면 객체 사용
- null vs 빈 값: 값이 없음은 null, 빈 문자열은 "", 빈 배열은 []로 명확히 구분
- 유효성 검사: 프로덕션 배포 전 JSON Schema로 데이터 구조 검증
- 보안: 민감한 정보(비밀번호, API 키)를 JSON 파일에 직접 저장하지 않기
⚠️ 주의사항
- 큰 JSON 파일(수 MB 이상)은 브라우저 성능에 영향을 줄 수 있습니다
- 민감한 데이터가 포함된 JSON은 암호화하여 전송하세요
- UTF-8 인코딩을 사용하여 한글 등 다국어 문자가 깨지지 않도록 하세요
- JSON은 순수 데이터 형식이므로 실행 가능한 코드를 포함할 수 없습니다
📖 관련 블로그 글
💻 개발·기술
Git 협업 완벽 가이드: 브랜치 전략부터 실전 명령어까지
Git Flow, GitHub Flow, 트렁크 기반 개발 등 협업 브랜치 전략과 merge/rebase 차이, 충돌 해결, 유용한 실전 명령어까지 모두 정리했습니다.
💻 개발·기술
웹 성능 최적화 완벽 가이드: 느린 사이트를 빠르게 만드는 모든 것
로딩 속도, Core Web Vitals, 이미지 최적화, 코드 분할, 캐싱까지. 웹 성능을 측정하고 개선하는 실전 전략을 모두 담았습니다.
💻 개발·기술
CSV 완벽 가이드: 데이터 교환의 표준 형식
CSV의 기초부터 파싱, 인코딩 처리까지. 엑셀과 데이터베이스 간 데이터 교환을 완벽히 이해하세요.
💻 개발·기술
Base64와 URL 인코딩 완벽 정리: 원리부터 실무까지
데이터 인코딩의 기본 개념, Base64 인코딩/디코딩, URL 인코딩의 차이와 활용법을 정리했습니다.
💻 개발·기술
JSON 완벽 정리: 개발자가 알아야 할 모든 것
JSON의 기본 문법부터 실무 활용법, 흔한 실수와 디버깅 팁까지. 웹 개발자를 위한 JSON 완벽 가이드.