JSON 포맷터

사용 방법

1. 왼쪽 입력란에 JSON을 붙여 넣거나 ‘파일 열기’로 .json 파일을 불러와요. 입력하는 동안 문법을 바로 검사하고 오른쪽 트리 보기도 함께 바뀌어요.
2. 들여쓰기(공백 2칸, 4칸, 탭)를 고르고 ‘정렬’을 누르면 읽기 쉬운 여러 줄로, ‘압축’을 누르면 한 줄로 바뀌어요. ‘키 정렬’을 체크하면 모든 객체의 키가 순서대로 정렬돼요.
3. 문법 오류가 있으면 몇 번째 줄, 몇 번째 열인지 표시해요. ‘오류 위치로’를 누르면 문제가 된 문자가 선택돼요. 다 되면 ‘복사’로 가져가세요.

사용 예시

마지막 쉼표: {, "name": "Pockez",, "tags": ["json", "tool"],, } 네 줄을 입력하면 ‘4번째 줄 1번째 열: 마지막 항목 뒤에 쉼표가 있어요’라고 표시돼요. 오류는 }를 읽은 위치를 가리키지만 지워야 할 것은 3번째 줄 끝의 쉼표예요.

큰 정수 보존: {"orderId":9007199254740993,"price":1.50}을 JavaScript의 JSON.parse로 읽으면 9007199254740992, 가격은 1.5가 돼요. 이 도구로 정렬하면 9007199254740993과 1.50이 그대로 남고 ‘안전 범위를 넘는 큰 정수 1개’라는 안내가 나와요.

키 정렬: {"name":"Alice","age":30,"tags":["a","b"]}를 ‘키 정렬’ 체크, 공백 2칸으로 정렬하면 키 순서가 age, name, tags가 되고 tags 배열 안의 a, b 순서는 그대로예요.

결과 해석

• ‘올바른 JSON이에요’는 데이터 전체가 JSON 표준(RFC 8259)을 따른다는 뜻이며, 어떤 프로그래밍 언어에서도 읽을 수 있어요.
• 오류의 줄과 열은 파서가 처음으로 이해하지 못한 위치예요. 실제로 고칠 곳은 보통 그 바로 앞이며, 예를 들어 쉼표가 빠지면 다음 키의 시작 위치가 표시돼요.
• 트리 보기에서 { 3 }은 필드가 3개인 객체, [ 2 ]는 요소가 2개인 배열이에요. 점선 밑줄이 있는 숫자는 큰 정수이며 마우스를 올리면 설명이 나와요.
• 큰 정수 안내는 데이터가 틀렸다는 뜻이 아니에요. 받는 쪽이 JavaScript처럼 배정밀도 부동소수점으로 읽으면 값이 달라지므로 문자열로 보내거나 BigInt로 처리하는 것을 권해요.

원리와 계산 방법

• RFC 8259와 ECMA-404 문법에 따라 한 글자씩 읽는 자체 파서를 사용하며, 첫 오류에서 멈추고 위치를 알려 줘요. 브라우저 내장 JSON.parse에 의존하지 않아 어느 브라우저에서나 오류 위치와 설명이 같아요.
• 정렬과 압축은 공백과 줄바꿈만 다시 배치해요. 문자열은 원래 이스케이프 표기를 유지하고(\u00e9는 \u00e9 그대로), 숫자도 원래 표기를 유지하며(1.50, 1e400 그대로), 객체 키의 원래 순서와 중복 키도 남아요.
• 키 정렬은 UTF-16 코드 단위 순서(JavaScript 기본 정렬과 같음)로 모든 객체를 재귀적으로 정렬해요. 같은 키는 원래 앞뒤 순서를 유지하고 배열 순서는 바꾸지 않아요.
• 절댓값이 2^53−1(9007199254740991)을 넘는 정수는 큰 정수로 표시해요. 소수점이나 지수가 있는 숫자는 해당하지 않아요.

한계와 주의점

• 표준 JSON만 받아요. 주석, 마지막 쉼표, 작은따옴표, NaN, undefined 같은 JSON5나 JavaScript 문법은 오류로 처리돼요.
• 한 번에 첫 번째 오류만 알려 줘요. 고치면 자동으로 다음 오류를 검사해요.
• 중첩이 1000단계를 넘으면 브라우저가 멈추지 않도록 분석을 중단하고 알려 줘요.
• 수십 MB의 큰 파일은 브라우저가 느려질 수 있어요. 트리는 처음 두 단계만 펼치며 ‘모두 펼치기’는 모든 노드를 만들기 때문에 큰 파일은 필요한 부분만 펼치세요.

자주 묻는 질문

💬 답을 찾지 못했나요? 이 도구의 문제를 신고하거나 의견을 보내 주세요