JSON 구조를 그래프로 보자! JSON Crack

구글을 돌아다니다 재미있고 JSON 사용에 좋아보이는 사이트 하나 발견해서 포스팅하게 되었습니다.

 

JSON을 입력하면 그 구조를 트리 그래프로 한눈에 확인이 가능한 유용한 사이트입니다.

https://jsoncrack.com/

JSON Crack - Crack your data into pieces

 

 

Screen using JSON Crack

 

이렇게 json을 입력하면 그 구조를 트리로 확인할 수 있는 사이트입니다.

개발자는 json을 사용하기에 편하지만, 기확자나 IT 관련 다른 직업은 json으로 데이터를 보는게 익숙하지 않을 수 있습니다. 개발자라면 이런 다른 직종과 함께 소통하기 위해서 이해하기 쉬운 자료를 준비해야 하죠.

JSON Crack라면 이러한 고민을 해결해 줄 수 있을 것 같습니다.

 

 

JSON Crack의 기능

JSON Crack 에디터에 들어가면 다음과 같은 화면을 볼 수 있습니다.

Screenshot of JSON Crack

 

좌측 사이드 메뉴를 보면 다음과 같은 기능이 있습니다.

Features of JSON Crack

대부분의 기능을 몇번 만져보면 익숙하지만, 맨 밑의 공유 기능은 특별한 기능이 있었습니다.

일반 링크 공유가 가능하지만 iframe을 이용한 임베드 공유가 있어서, 이걸 이용하여 자신의 웹사이트, 블로그 등에 json 데이터를 공유 할 수 있습니다.

iframe을 이용한 임베드 공유

 

우측 상단에는 다운로드 버튼과 노트 검색 기능이 있습니다.

다운로드 버튼을 누르면 트리 이미지를 이미지로 저장할 수 있습니다.

여기서 몇가지 배경색을 정할 수 있습니다.

다운로드 이미지

이미지를 다운로드 한 모습

---

JSON Crack의 에디터에 대한 이야기

JSON Crack의 에디터를 보면 뭔가 익숙한 느낌을 받을 수 있습니다. 이것은 VS Code와 같은 에디터라고 합니다.

그래서 VS Code에서 사용되는 단축키를 사용할 수 있습니다.

만약 VS Code를 잘 사용하시는 분이시라면, JSON Crack 사용에 불편함이 별로 없으실 것 같습니다.

VS Code와 흡사한 모습

이 VS Code 에디터는 마이크로소프트에서 만든 "모나코 에디터"를 활용해서 만들었다고 합니다.

Monaco Editor는 VS Code를 구동하는 코드 편집기입니다.

MIT 라이선스이고 Edge, Chrome, Firefox, Safari 및 Opera를 지원한다고 하네요.

 

아래와 같이 npm으로 설치가 가능합니다.

npm install monaco-editor@0.34.0

아직은 정식 릴리즈 버전이 아니지만, 코드 에디터를 만들 일이 생긴다면 직접 에디터를 만들 일은 줄었네요.

 

 

https://microsoft.github.io/monaco-editor/

Monaco Editor

https://github.com/microsoft/monaco-editor

GitHub - microsoft/monaco-editor: A browser based code editor