JSON 포맷은 기계가 생략한 줄바꿈과 들여쓰기를 넣어서, 4만 자짜리 한 줄을 모양이 보이는 문서로 바꾸는 일입니다. 대부분의 편집기와 터미널에서 명령 하나로 됩니다. 실제로 정할 것은 들여쓰기를 얼마나 할지, 그리고 이 작업을 하려고 데이터를 웹사이트에 붙여 넣을지뿐입니다.
먼저 결론
- 터미널에서:
jq . file.json또는python3 -m json.tool file.json. - VS Code에서: 파일을 열고 Shift+Alt+F(Mac은 Shift+Option+F)를 누릅니다.
- 브라우저에서: JSON 뷰어가 내장된 Firefox에서
.jsonURL을 열고 Pretty Print를 누릅니다. - 휴대폰에서: 텍스트를 웹사이트에 붙여 넣지 말고, Beautify 명령이 있는 JSON 앱을 씁니다.
- 포맷이 아예 안 될 때: 아직 올바른 JSON이 아닙니다. 그것부터 고치세요. 포맷터의 오류 메시지가 위치를 알려 줍니다.
포맷이 바꾸는 것과 바꾸지 않는 것
프리티 프린트는 토큰 사이의 공백, 즉 문자열 밖에 있는 공백, 탭, 줄바꿈만 더하거나 뺍니다. 제대로 된 포맷터는 값을 절대 건드리지 않습니다. 그래서 아래 두 문서는 같은 문서입니다.
{"id":7,"tags":["a","b"],"owner":{"name":"Ana"}}
{
"id": 7,
"tags": [
"a",
"b"
],
"owner": {
"name": "Ana"
}
}
압축(minify)은 그 반대로, 생략할 수 있는 공백과 줄바꿈을 모두 없앱니다. 네트워크로 보내거나, 한 줄만 받는 설정 칸에 붙여 넣을 때 씁니다. 어느 방향이든 데이터의 의미는 바뀌지 않습니다. 직접 쓰지 않은 파일도 안심하고 다시 포맷할 수 있는 이유입니다.
대부분의 도구에서 포맷 옆에 있는 두 가지 작업은 무해하더라도 변경에 해당합니다. 모든 객체를 알파벳순으로 다시 정렬하는 키 정렬과, 문서 전체를 문자열 하나로 만드는 이스케이프입니다. 부수 효과로 일어나게 두지 말고 의도해서 하세요.
터미널에서
설치해 둘 만한 도구는 jq입니다.
jq . data.json # pretty, 2-space indent
jq --indent 4 . data.json # 4 spaces
jq --tab . data.json # tabs
jq -c . data.json # minified, one line
jq -S . data.json # keys sorted A–Z
파일을 제자리에서 포맷하려면 임시 파일에 쓴 뒤 다시 옮깁니다. jq . data.json > data.json은 jq가 읽기 전에 파일을 비워 버립니다.
jq . data.json > tmp.json && mv tmp.json data.json
Python에는 포맷터가 들어 있어서 Python 3이 있는 컴퓨터라면 어디서든 됩니다.
python3 -m json.tool data.json
python3 -m json.tool --indent 4 --sort-keys data.json
python3 -m json.tool --compact data.json
실제 데이터에서 차이가 나는 점이 있습니다. json.tool은 정수가 아닌 숫자를 Python float로 읽기 때문에 1.10 같은 값이 1.1로 출력됩니다. jq 1.7 이후 버전은 숫자 리터럴을 쓴 그대로 유지합니다. 파일에 가격, 버전 번호, 앞자리 숫자가 중요한 ID가 있다면 출력을 확인하세요.
편집기에서
VS Code: Shift+Alt+F는 문서 전체를 포맷하고, 명령 팔레트의 Format Selection은 일부만 포맷합니다. [json] 파일을 자주 편집한다면 "editor.formatOnSave": true를 설정해 두세요. 들여쓰기는 편집기의 탭 크기 설정을 따릅니다.
Sublime Text, Notepad++, JetBrains IDE는 모두 JSON을 포맷할 수 있습니다. 기본 기능(JetBrains: Code → Reformat Code)이거나 한 줄로 설치하는 플러그인(Notepad++: JSON Viewer 또는 JSTool)입니다.
Prettier는 프로젝트 전체의 JSON을 같은 모양으로 맞추고 싶을 때 알맞은 도구입니다. npx prettier --write "**/*.json"을 실행합니다.
브라우저에서
Firefox는 모든 JSON 응답을 자동으로 포맷하고, 접을 수 있는 JSON 탭, Raw Data 탭, Pretty Print 버튼을 제공합니다. 아무것도 설치하지 않고 API 응답을 읽는 가장 빠른 방법입니다.
Chrome과 Edge는 최근 버전에서 원본 JSON 위에 Pretty-print 체크박스를 보여 줍니다. 그 이상(접기, 키로 검색)은 확장 프로그램이 필요합니다.
온라인 포맷터 문제
이 주제로 검색하면 첫 페이지가 큰 텍스트 상자가 있는 웹사이트로 가득합니다. 잘 동작합니다. 문제는 거기에 무엇을 붙여 넣느냐입니다.
액세스 토큰이 든 API 응답, 데이터베이스 비밀번호가 든 설정 파일, 고객 데이터 내보내기. 이런 것들이 일상적으로 포맷터에 붙여 넣어지는데, 그 텍스트가 브라우저 안에만 머무는지 서버로 전송되어 기록되는지는 페이지에서 확인할 방법이 없습니다. '공유' 문서를 추측하기 쉬운 URL에 저장하다가 적발된 사이트도 있습니다.
규칙은 간단합니다. 공개 채팅에 붙여 넣지 못할 내용이라면 로컬에서 포맷하세요. 위에서 소개한 방법은 모두 내 컴퓨터에서 실행됩니다.
들여쓰기 고르기
- 공백 2칸이 사실상의 기본값입니다. jq, Prettier, 대부분의 JavaScript 도구, 대부분의 API 문서가 그렇습니다.
- 공백 4칸은 넓은 화면에서 깊게 중첩된 문서를 읽기에 좋고, Python의 관례이기도 합니다.
- 탭은 읽는 사람이 각자 너비를 고를 수 있고, 파일도 조금 작아집니다.
어느 쪽도 틀리지 않았습니다. 프로젝트마다 하나를 정하고 포맷터로 강제하세요. 그러면 diff에 공백 변경이 아니라 데이터 변경이 나타납니다.
iPhone과 iPad에서
휴대폰은 JSON을 읽기가 가장 어려운 곳입니다. iOS가 .json 파일을 줄바꿈 없는 일반 텍스트로 보여 주기 때문입니다. 여는 방법은 여기에 정리했습니다. 포맷은 그다음 단계입니다.
Smart Json에서 Beautify는 일관된 들여쓰기로 문서를 다시 포맷하고, Minify는 한 줄로 줄이며, Sort keys A–Z는 모든 객체를 다시 정렬합니다. 세 가지 모두 실행 취소가 됩니다. 텍스트를 파싱할 수 없으면 반쯤만 유효한 문서를 포맷하지 않고, 배너가 문제를 줄과 열 번호와 함께 알려 줍니다. Fix는 흔한 원인인 주석, 끝의 쉼표, 작은따옴표, 따옴표 없는 키를 고쳐 줍니다.
iPhone과 iPad에서 Beautify, Minify, Sort keys를 오프라인으로 사용하고, JSON이 깨졌을 때는 알기 쉬운 말로 오류를 알려 줍니다. 웹사이트에 아무것도 붙여 넣지 않습니다.
기능포맷이 실패할 때
포맷터는 올바른 JSON이 아니면 거부하며, 오류는 보통 위치로 나옵니다. line 1, column 3,912 같은 식입니다. 압축된 문서는 한 줄이므로 열 번호가 단서입니다. 흔한 원인은 끝의 쉼표, 작은따옴표, 주석, 따옴표 없는 값입니다. 흔한 오류는 모두 여기에서 설명합니다. 각 메시지가 무슨 뜻인지도 함께 있습니다.