내가 온라인 JSON 포매터 사용을 중단한 이유 (그리고 직접 만든 이유)

Source: Dev.to

The “Oh No” Moment 😱

당신은 새벽 2시에 프로덕션 이슈를 디버깅하고 있습니다. 로그에서 거대한 압축된 JSON 블록을 복사해 구글에 “JSON Prettifier”를 검색하고, 첫 번째 결과에 데이터를 붙여넣습니다.
포맷이 완벽히 정리됩니다. 버그를 찾았습니다. 좋습니다.

하지만 5초 뒤, 갑자기 깨달음이 옵니다:

“잠깐… 방금 고객의 PII(개인 식별 정보)나 프로덕션 API 키를 어디선가 알 수 없는 서버에 보낸 건가?”

대부분의 무료 온라인 도구는 블랙박스입니다. 입력값을 로그에 남기고 있는지, 데이터베이스에 저장하고 있는지, 혹은 AI 모델을 학습시키는 데 사용하고 있는지 알 수 없습니다.

The Solution: Go Local (or Client‑Side) 🛡️

• 100 % 오프라인에서 작동 (데이터가 절대 머신을 떠나지 않음).
• Diff Checker 포함 (2,000줄짜리 JSON을 눈으로 비교하는 것은 불가능합니다).
• JWT를 안전하게 디코딩 (인증 토큰을 클라우드에 전송하지 않음).

Introducing JSON AIO (All‑In‑One) 🚀

Try it here:
(페이지가 로드된 뒤에는 인터넷을 끊어도 완벽히 동작합니다.)

Under the Hood 🛠️

• Engine: @monaco-editor/react 로 VS Code와 같은 느낌 제공 (미니맵, 구문 강조, 오류 감지).
• Architecture: 백엔드 제로. 모든 작업이 표준 Web API(JSON.parse, navigator.clipboard, localStorage)를 사용합니다.
• Styling: Tailwind CSS와 완전한 다크/라이트 모드 토글 제공.
• PWA: 서비스 워커가 추가되어 도크에 설치해 네이티브 앱처럼 사용할 수 있습니다.

Key Features

“Privacy Shield” JWT Decoder

대부분의 JWT 도구는 토큰을 디코딩하기 위해 백엔드가 필요합니다. 이 도구는 jwt-decode 라이브러리를 브라우저에서 직접 사용합니다. 프로덕션 토큰을 안심하고 붙여넣으세요—네트워크 요청을 전혀 발생시키지 않습니다.

Diff Checker

통합된 Monaco Diff Editor가 JSON 파일을 나란히 비교해 주며, Git처럼 변경 사항을 초록/빨강 색으로 강조합니다.

“Smart” Converter

JSON이 문자열 안에 문자열화된 로그 파일("{\"id\": 1...}")을 마주했나요? Converter 탭이 자동으로 이스케이프를 해제하고 재포맷합니다.

Open Source & Free

한 번 사용해보고 의견을 알려 주세요!

Live Tool: