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 등 설정 파일의 문법 오류 확인

🔧 사용 방법

  1. JSON 데이터 입력: 왼쪽 입력 영역에 JSON 데이터를 직접 입력하거나 붙여넣기
  2. Format (포맷팅): 압축된 JSON을 읽기 쉽게 들여쓰기와 줄바꿈 적용
  3. Validate (유효성 검사): JSON 문법이 올바른지 자동으로 검사하고 오류 위치 표시
  4. Minify (압축): 불필요한 공백과 줄바꿈을 제거하여 파일 크기 최소화
  5. Convert (변환): JSON을 YAML이나 XML 형식으로 변환
  6. 결과 복사: 오른쪽 출력 영역에서 처리된 결과를 클립보드에 복사

📚 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은 순수 데이터 형식이므로 실행 가능한 코드를 포함할 수 없습니다