JSON 구조를 그래프로 보자! JSON Crack
구글을 돌아다니다 재미있고 JSON 사용에 좋아보이는 사이트 하나 발견해서 포스팅하게 되었습니다.
JSON을 입력하면 그 구조를 트리 그래프로 한눈에 확인이 가능한 유용한 사이트입니다.
JSON Crack - Crack your data into pieces
Simple visualization tool for your JSON data. No forced structure, paste your JSON and view it instantly.
jsoncrack.com
이렇게 json을 입력하면 그 구조를 트리로 확인할 수 있는 사이트입니다.
개발자는 json을 사용하기에 편하지만, 기확자나 IT 관련 다른 직업은 json으로 데이터를 보는게 익숙하지 않을 수 있습니다. 개발자라면 이런 다른 직종과 함께 소통하기 위해서 이해하기 쉬운 자료를 준비해야 하죠.
JSON Crack라면 이러한 고민을 해결해 줄 수 있을 것 같습니다.
JSON Crack의 기능
JSON Crack 에디터에 들어가면 다음과 같은 화면을 볼 수 있습니다.
좌측 사이드 메뉴를 보면 다음과 같은 기능이 있습니다.
대부분의 기능을 몇번 만져보면 익숙하지만, 맨 밑의 공유 기능은 특별한 기능이 있었습니다.
일반 링크 공유가 가능하지만 iframe을 이용한 임베드 공유가 있어서, 이걸 이용하여 자신의 웹사이트, 블로그 등에 json 데이터를 공유 할 수 있습니다.
우측 상단에는 다운로드 버튼과 노트 검색 기능이 있습니다.
다운로드 버튼을 누르면 트리 이미지를 이미지로 저장할 수 있습니다.
여기서 몇가지 배경색을 정할 수 있습니다.
JSON Crack의 에디터에 대한 이야기
JSON Crack의 에디터를 보면 뭔가 익숙한 느낌을 받을 수 있습니다. 이것은 VS Code와 같은 에디터라고 합니다.
그래서 VS Code에서 사용되는 단축키를 사용할 수 있습니다.
만약 VS Code를 잘 사용하시는 분이시라면, JSON Crack 사용에 불편함이 별로 없으실 것 같습니다.
이 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
Rich IntelliSense, Validation TypeScript, JavaScript, CSS, LESS, SCSS, JSON, HTML Basic Syntax Colorization XML, PHP, C#, C++, Razor, Markdown, Diff, Java, VB, CoffeeScript, Handlebars, Batch, Pug, F#, Lua, Powershell, Python, Ruby, SASS, R, Objective-C Co
microsoft.github.io
https://github.com/microsoft/monaco-editor
GitHub - microsoft/monaco-editor: A browser based code editor
A browser based code editor. Contribute to microsoft/monaco-editor development by creating an account on GitHub.
github.com