JSON 포매터
JSON 데이터를 포맷하고 검증하여 읽기 쉽고 디버깅하기 편리하게 만듭니다. 압축, 정렬, 구문 강조를 지원합니다.
JSON 포매터 사용 방법
사용 단계
- 왼쪽 입력 상자에 JSON 데이터를 붙여넣으세요.
- "포맷" 버튼을 클릭하여 JSON 데이터를 읽기 쉬운 형태로 정렬하세요.
- "압축" 버튼을 클릭하여 JSON 데이터를 한 줄로 압축하세요.
- "자동 수정" 버튼을 클릭하여 일반적인 JSON 구문 오류를 자동으로 수정하세요.
- "복사" 버튼을 클릭하여 결과를 클립보드에 복사하세요.
- "지우기" 버튼을 클릭하여 입력 및 출력 영역을 모두 지우세요.
- "출력 이스케이프" 토글을 사용하여 프로그램 코드에 삽입할 수 있도록 출력을 이스케이프하세요.
- "다크 모드" 토글을 사용하여 화면 테마를 전환하세요.
출력 이스케이프 예제
출력 이스케이프를 활성화하면 프로그램 코드에 직접 삽입할 수 있도록 JSON 문자열이 이스케이프됩니다. 예를 들어:
일반 출력::
{
"message": "Hello \"World\"",
"newline": "Line 1\nLine 2"
}
이스케이프된 출력::
{\n \"message\": \"Hello \\\"World\\\"\",\n \"newline\": \"Line 1\\nLine 2\"\n}
주요 기능
- 자동 포맷: 적절한 들여쓰기와 줄 바꿈으로 JSON 데이터를 정렬합니다.
- 구문 검증: JSON 데이터의 구문 오류를 확인하고 오류 메시지를 제공합니다.
- 구문 강조: JSON 키-값 쌍과 데이터 타입을 다른 색상으로 표시합니다.
- 압축 기능: 포맷된 JSON을 간결한 한 줄 형태로 변환하여 데이터 크기를 줄입니다.
- 자동 수정: 따옴표 없는 키, 후행 쉼표 등 일반적인 JSON 구문 오류를 자동으로 수정합니다.
- 출력 이스케이프: 프로그램 코드에 직접 삽입할 수 있도록 JSON 문자열을 이스케이프합니다.
- 로컬 처리: 모든 데이터 처리는 브라우저에서 수행되며 서버로 업로드되지 않습니다.
- 실시간 처리: 입력이 변경되면 자동으로 처리되고 결과가 업데이트됩니다.
JSON이란?
JSON(JavaScript Object Notation)은 사람이 읽고 쓰기 쉽고 기계가 파싱하고 생성하기 쉬운 경량 데이터 교환 형식입니다. JSON은 JavaScript 언어의 서브셋을 기반으로 하지만 대부분의 프로그래밍 언어에서 파싱과 생성을 지원하는 완전히 언어 독립적인 텍스트 형식입니다. JSON은 2000년대 초 Douglas Crockford가 제안했으며 ECMA-404와 RFC 8259로 표준화되었습니다.
JSON 구문 규칙
- 데이터는 키/값 쌍으로 표현됩니다
- 데이터는 쉼표로 구분됩니다
- 중괄호 {}는 객체를 나타냅니다
- 대괄호 []는 배열을 나타냅니다
- 키는 큰따옴표로 묶인 문자열이어야 합니다
- 값은 문자열, 숫자, 객체, 배열, 불린 또는 null이 될 수 있습니다
JSON 데이터 타입
| 타입 | 설명 | 예제 |
|---|---|---|
| 문자열 | 큰따옴표로 묶인 유니코드 문자 시퀀스 | "Hello World" |
| 숫자 | 정수 또는 부동소수점 숫자, 비수치 값은 지원하지 않음 | 42, 3.14 |
| 객체 | 키/값 쌍의 순서 없는 컬렉션 | {"name": "John"} |
| 배열 | 값의 순서가 있는 컬렉션 | [1, 2, 3] |
| 불린 | true 또는 false | true |
| null | 빈 값 | null |
JSON 포맷팅 알고리즘
JSON 포맷팅 프로세스는 주로 파싱과 재생성의 두 단계로 이루어집니다. 먼저 파서가 JSON 문자열을 읽어 메모리 표현을 구축한 다음, 포매터가 특정 들여쓰기와 줄 바꿈으로 문자열을 재생성합니다. 다음은 단순화된 포맷팅 프로세스입니다:
// Simplified JSON formatting implementation
function formatJSON(jsonStr, indentSize = 2) {
try {
// Step 1: Parse JSON string to JavaScript object
const obj = JSON.parse(jsonStr);
// Step 2: Convert object back to string with indentation
return JSON.stringify(obj, null, indentSize);
} catch (e) {
// Handle invalid JSON
throw new Error("Invalid JSON: " + e.message);
}
}
// Usage example
const uglyJson = '{"name":"John","age":30,"city":"New York"}';
const prettyJson = formatJSON(uglyJson);
console.log(prettyJson);
/*
Output:
{
"name": "John",
"age": 30,
"city": "New York"
}
*/JSON과 XML 비교
| 특징 | JSON | XML |
|---|---|---|
| 구문 | 간결하며 중괄호와 대괄호를 사용 | 더 복잡하며 태그와 속성을 사용 |
| 파일 크기 | 일반적으로 XML보다 작음 | 일반적으로 JSON보다 큼 |
| 파싱 속도 | 더 빠름 | 더 느림 |
| 데이터 타입 | 기본 데이터 타입 지원 | 모든 데이터가 텍스트 |
| 네임스페이스 | 지원 안 함 | 지원 |
| 주석 | 지원 안 함 | 지원 |
| 사용 편의성 | 개발자 친화적 | 더 구조적이고 엄격함 |
일반적인 문제 및 해결 방법
문제: JSON 파싱 오류 - 쉼표 또는 괄호 누락
해결: 객체와 배열의 모든 닫는 괄호를 확인하고 각 키/값 쌍 뒤에 쉼표가 있는지 확인하세요(마지막 항목 제외).
문제: JSON 파싱 오류 - 유효하지 않은 키 값
해결: 모든 키가 큰따옴표로 묶여 있는지 확인하세요. 작은따옴표나 따옴표 없는 키 이름은 지원되지 않습니다.
문제: JSON 데이터 크기 문제
해결: 큰 JSON 데이터의 경우 전송 시 압축된 버전을 사용하고 클라이언트에서 표시를 위해 포맷하는 것을 고려하세요.
JSON에 대한 자세한 공식 정보는 다음 리소스를 참조하세요: JSON.org | RFC 8259 | Wikipedia: JSON