네트워크

JSON Viewer

멍멍코 2023. 9. 6. 00:54

JSON Viewer


JSON Viewer는 JSON 데이터를 효과적으로 시각화하고, 이해하기 쉽게 구조화하여 보여주는 도구나 애플리케이션입니다. JSON은 자체로도 가독성이 높은 데이터 형식이지만, 복잡한 데이터 구조의 경우에는 JSON Viewer를 사용해 구조를 명확하게 파악하는 것이 도움이 됩니다.

JSON Viewer의 주요 기능과 특징은 다음과 같습니다

- 구조화된 표시: JSON Viewer는 중첩된 JSON 구조를 트리 형태로 표시하여, 데이터의 계층 구조를 쉽게 파악할 수 있게 합니다.
- 색상 하이라이팅: 다양한 데이터 타입(문자열, 숫자, 객체, 배열 등)을 색상으로 구분하여 표시해, 데이터 타입을 쉽게 구분할 수 있습니다.
- 축소/확장: 복잡한 JSON 데이터에서 특정 섹션만 집중적으로 보거나, 전체 구조를 축소하여 전체적인 구조를 파악할 수 있습니다.
- 검색 기능: 큰 JSON 데이터 내에서 특정 키나 값을 쉽게 찾을 수 있게 해줍니다.
- 포매팅 및 미니마이징: JSON 데이터를 예쁘게 포맷팅하거나, 최소한의 공간만 사용하도록 미니마이징할 수 있습니다.

JSON Viewer는 다양한 형태로 제공됩니다

- 웹 기반 도구: 웹 브라우저에서 접속하여 사용할 수 있는 온라인 도구. 예: jsonviewer.stack.hu.
- 브라우저 확장 프로그램: Chrome, Firefox 등의 웹 브라우저에 확장 프로그램 또는 애드온으로 설치하여 사용할 수 있습니다. 이렇게 되면, 웹 브라우저에서 직접 JSON 데이터를 볼 때 자동으로 포맷팅되어 표시될 수 있습니다.
- 데스크톱 애플리케이션: 로컬 머신에서 실행되는 독립형 애플리케이션으로, 큰 JSON 파일을 열어보거나 편집할 때 유용합니다.

이러한 JSON Viewer 도구를 사용하면, 개발자나 데이터 분석가는 JSON 데이터의 구조와 내용을 훨씬 더 쉽게 이해하고 작업할 수 있습니다.

 

Chrome JSON Viewer 확장 프로그램 설치

1. 아래 URL에 접속합니다.

https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko

 

JSONView

브라우저에서 JSON 문서를 보세요.

chrome.google.com

2. Chrome에 추가 버튼을 눌러주세요.

3. 확장 프로그램 추가 버튼을 눌러서 설치를 진행합니다.

JSON Viewer 확장 프로그램 작동 확인

1. 다음의 URL을 크롬 브라우저의 주소창에 입력하고 엽니다

https://jsonplaceholder.typicode.com/users

 

2. 위 URL을 방문하면 아래와 같은 JSON 데이터가 출력됩니다

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  },
  ...
]

JSON Viewer 확장 프로그램이 정상적으로 작동하고 있다면, 위 JSON 데이터가 구조화된 트리 형태로, 색상 하이라이팅과 함께 깔끔하게 표시되어야 합니다.

트리의 각 항목 옆에는 특정 섹션의 확장 및 축소를 위한 아이콘이 표시되며, 데이터의 구조를 쉽게 파악할 수 있게 됩니다.