개발

JSON 뷰어 구현 노트

February 27, 2025

JSON 뷰어
직접 만든 JSON 뷰어
그래서 어떻게 만듦?

요즘 작업에 필요한 유틸리티 사이트들의 기능을 직접 내 블로그에 올려두는 작업을 하고있다.

서버단 자원사용하는것도아니고 자바스크립트로 클라단에서 처리할 수 있는기능이면 굳이 다른 사이트가서 쓸 이유도 없으니까말이다.

JSON 뷰어

이번에 만들어본건 JSON 뷰어 기능이다.

우리가 일반적으로 API 디버깅을 할때 대부분의 데이터는 JSON 형태로 주고받는데, 이때 이 JSON 데이터가 구분없는 문자열로 주르르륵 나오는 경우가 대다수이다.

은근히 엔터나 네스팅 처리도 다 자원을 쓰기때문에 흡사 최적화(Minify)작업을 다 끝내고 결과를 보내기 때문이다.

상단 박스의 회색글씨가 JSON 데이터

나만해도 내가 만든 시스템에서 로그데이터를 쉽게 분석할 수 있게 각종 정보를 JSON으로 인코딩해 화면에 출력해두면 고객이나 개발자가 그 데이터를 긁어서 에러 로그를 빠르게 분석할 수 있게 위 사진처럼 제공하고있다.

하지만 이렇게 나온 문자열은 '보기 좋은'형태는 아니기 때문에 이를 이쁙 보기위해서는 아래와 같은 사이트에 가서 JSON 구조 데이터를 보기 좋게 전환해서 사용하기 마련이다.

Online JSON Viewer and Formatter

JSON Viewer and Formatter - Convert JSON Strings to a Friendly Readable Format

https://jsonviewer.stack.hu/

위 사이트에서 JSON Viewer를 작동시킨 예시

뭐 이런 사이트 들어가서 매번 이용하는것도 좋지만 나는 내 사이트에 위 기능을 구현해두고 쉽게쉽게 필요에 따라 쓰고 싶어졌을 뿐이다.

직접 만든 JSON 뷰어

JSON 뷰어

JSON 데이터를 입력하면 보기좋게 보여주는 온라인 뷰어입니다.

https://erulabo.com/json-viewer

거두절미하고 내가 만든 JSON 뷰어에 대해서 간략하게 적어보자 한다.

일단 여느 사이트가 그렇듯 JSON 데이터를 넣을 수 있는 공간을 둔다.

나같은 경우에는 데이터가 입력되는 즉시 바로 데이터 분석 및 구조화 작업을 실시해 하단에 바로 그 결과가 보이게 처리해두었다.

내가 직접 만든 JSON 뷰어

그리고 그 뷰어는 highlight.js를 이용해 내가 블로그에서 사용하는 코드뷰 형식으로 보이게하며 구조화된 코드도 클립보드에 복사할 수 있는 복사 버튼도 만들어 넣었다.

사용방법은 굳이 설명할 필요가 있나 싶을정도로 직관적이게 만들었다.

JSON 데이터 복사 -> 붙여넣기하면 나머진 자동으로 변환되어 아래에 결과창이 보이는 심플한 UX이다.

그래서 어떻게 만듦?

이것도 그렇게 특이한 부분은 없다.

document.addEventListener('DOMContentLoaded', function() {
    const input = document.querySelector('.wrap_jsonviewer .grp_upper_input .form-control');
    const resultDiv = document.getElementById('result');

    input.addEventListener('input', function() {
        const value = input.value.trim();
        if (!value) {
            resultDiv.innerHTML = '';
            return;
        }
        try {
            const parsed = JSON.parse(value);
            const formatted = JSON.stringify(parsed, null, 4);
            // 결과가 올바른 JSON이면, <pre><code>에 넣고 복사 버튼 추가 (이미 구현된 window.ctcCode 함수 사용)
            // resultDiv.innerHTML = `<pre><code>${formatted}</code></pre><button class="btn" onclick="window.ctcCode(this)">복사</button>`;
            const highlightedCode = hljs.highlightAuto(formatted, ['json']).value;
            resultDiv.innerHTML = `<pre><code class="hljs">${highlightedCode}</code><span class="hljs-ctc" onclick="ctcCode(this)">Copy</span></pre>`;
        } catch(e) {
            resultDiv.innerHTML = '<div class="txt_exception" style="color:#e0a846;">유효한 JSON 값이 아닙니다!</div>';
        }
    });
});Copy