Chrome에서 JSON 파일을 편집하는 7가지 도구

JSON 형식은 Javascript에서 파생되었으며 서버와 웹 애플리케이션 간에 데이터를 전송하는 데 자주 사용됩니다. 이는 프로그래머가 다양한 도구를 사용하여 손댈 수 있는 XML의 대안입니다. 하지만 브라우저를 사용하여 JSON 파일로 작업하려면 어떻게 해야 할까요? 프로그래머가 JSON 파일을 편집하는 데 도움을 주기 위한 여러 가지 Google Chrome용 웹 앱과 확장 프로그램이 있습니다.

1. JSON 편집기 온라인

사용 가능: 웹 애플리케이션

JSON Editor Online은 JSON을 보고, 편집하고, 서식을 지정하는 도구입니다. 이 Chrome 앱은 브라우저 내에서 텍스트 편집기를 열어 다른 애플리케이션으로 전환하지 않고도 코드를 편집할 수 있습니다. 앱은 두 개의 텍스트 상자를 나란히 표시합니다. 왼쪽 필드에는 코드가 있는 그대로 표시되고, 오른쪽 필드에는 텍스트가 더 읽기 쉬운 형식으로 표시됩니다.

앱은 로컬 파일과 URL을 모두 열 수 있습니다. 소스 코드는 어떻게 만들어졌는지 알고 싶은 사람들을 위해 제공됩니다. 최대 512MB의 파일을 열 수 있는데, 이는 언뜻 보기에는 별로 없어 보일 수 있지만 엄청난 양의 데이터를 포함할 수 있습니다. 매우 큰 파일의 경우 이러한 도구를 확인하여 지연 없이 빠르게 볼 수 있습니다 .

JSON 편집기는 단순한 편집기 그 이상입니다. 포맷터, 파서, 심지어 수리 보조자이기도 합니다. 이는 확실히 모든 소프트웨어 개발자의 툴킷에 포함될 자격이 있습니다.

2. JSON 포맷터

사용 가능: Chrome 확장 프로그램

JSON 포맷터 Chrome 확장 프로그램은 JSON 코드를 눈으로 더 쉽게 읽을 수 있게 해주는 오픈 소스 도구입니다. JSON 및 JSONP 형식을 모두 지원하며 구문 강조, 축소 가능한 트리, 들여쓰기 가이드 및 클릭 가능한 URL을 제공합니다. 유효한 JSON 페이지와 로컬 파일에서도 작동합니다.

이 확장은 인터넷을 통해 제공되는 JSON 파일에서도 작동합니다. 그러나 JSON 데이터가 HTML 부분에 원시로 제공되는 경우 HTML 사이트의 스타일과 충돌하는 경우가 있습니다. 이는 공식 JSON 웹사이트의 예제 페이지 에서 배경색이 사라지는 현상이 자주 발생합니다 .

그러나 이것은 확장 기능이므로 쉽게 끄거나 시크릿 페이지 작업을 비활성화할 수 있습니다. 게다가 오픈 소스이므로 소스 코드를 조작하여 더 많은 작업을 수행할 수 있습니다.

3. JSON뷰

사용 가능: Chrome 확장 프로그램

Google Chrome용 JSONView는 Firefox 애드온 으로 시작되었습니다 . JSON 경로 또는 값을 복사할 수 있는 컨텍스트 메뉴 옵션이 완비되어 있습니다. 테마를 사용자 정의하기 위한 내장 스타일 편집기도 있습니다.

다른 개발자가 만든 확장 기능인 JSONVue는 JSONLint를 사용하여 JSON 문서의 유효성을 검사하는 JSONView의 기능을 확장합니다 .

JSONView는 또한 JSON 파일에 예쁜 인쇄를 적용합니다. 이렇게 하면 JSON 키에 굵은 글씨가 추가되어 굵은 글씨가 아닌 대괄호와 콜론에 대해 더 쉽게 읽을 수 있습니다.

4. JSON 꾸미기 및 편집기

사용 가능: Chrome 확장 프로그램

JSON Beautifier & Editor는 Chrome 브라우저를 데이터 편집, 처리, 분석을 위한 JSON 도구로 바꿔줍니다. 키와 값을 변경할 수 있을 뿐만 아니라 다운로드 가능한 JSON 출력 파일에 변경 사항을 저장할 수도 있습니다.

아마도 JSON Beautifier & Editor의 가장 큰 기능은 JSON 파일에 공백을 추가하고 제거하는 기능일 것입니다. 또한 코딩하는 동안 몇 가지 사항을 변경할 경우를 대비하여 개체를 정렬하는 방법도 있습니다.

전체적으로 이 확장 프로그램은 일반 JSON Chrome 확장 프로그램이 수행할 수 있는 작업을 확장하여 웹 브라우저를 JSON 파일용 오프라인 텍스트 편집기로 전환합니다.

5. 코드 아름답게 JSON 편집기

사용 가능: 웹 애플리케이션

Code Beautify JSON 편집기는 Code Beautify의 코드 미화 앱 제품군에서 사용할 수 있는 다른 많은 도구 중 하나일 뿐입니다. JSON 편집기에 초점을 맞추면 웹 브라우저에서 JSON 파일을 보는 몇 가지 다른 방법을 찾을 수 있습니다.

이 앱은 압축된 JSON을 볼 때 텍스트 보기와 독립적이라는 점을 제외하면 대부분 예쁜 텍스트 보기인 코드 보기를 제공합니다. 한편, 폼 보기에는 축소된 각 줄 내부의 각 배열 크기가 표시됩니다. 객체의 경우 내부에 몇 개의 키가 있는지 표시됩니다.

이 확장 기능을 유용하게 만드는 또 다른 점은 편집된 JSON 파일과 원본 JSON 파일의 크기를 표시한다는 것입니다. 파일 크기가 매우 특정한 프로젝트에서 작업하는 경우 이 작업에 적합한 도구가 될 수 있습니다.

6. 튜토리얼 포인트 온라인 JSON 편집기

사용 가능: 웹 애플리케이션

Tutorials Point의 온라인 JSON 편집기는 보기에도 편한 훌륭한 JSON 편집 도구입니다. 시각적 요소를 전환할 수 있어 깊게 중첩된 JSON 코드에서 공백을 시각화하는 데 도움이 됩니다. 게다가 테마도 변경 가능합니다.

아마도 이 편집기의 가장 큰 매력은 튜토리얼 라이브러리에 대한 액세스도 제공한다는 점일 것입니다. 이는 주로 온라인 리소스에 의존하면서 새로운 프로그래밍 언어를 배우려는 사람들 에게 편리한 도구입니다.

다른 모든 온라인 JSON 편집 도구와 마찬가지로 이 편집기를 사용하면 브라우저를 통해 편집된 JSON을 다운로드할 수 있습니다. 이렇게 하면 이를 사용하여 JSON 코드로 수행해야 하는 거의 모든 작업을 수행할 수 있습니다.

7. Dan’s Tools의 JSON 편집기

사용 가능: 웹 애플리케이션

Dan’s Tools의 JSON 편집기는 깔끔하고 미니멀한 디자인을 갖춘 무료 온라인 JSON 편집기입니다. 기능이 부족한 점은 URL을 입력하자마자 빠른 로딩으로 보완됩니다.

빠르게 편집할 수 있는 내용이 필요한 경우에 충분합니다. 다만, 일부 브라우저에서는 광고 차단 확장 프로그램을 사용 중일 때 화면 하단에 ‘파일 불러오기’ 기능이 나타나는 경우가 있어 불편할 수 있습니다.

이 앱의 개발자인 Clean CSS(Dan’s Tools라고도 함)에는 JSON을 CSV, XML, TSV, 심지어 HTML과 같은 다른 형식으로 변환하는 다른 도구도 있습니다.

JSON 파일에 편리하게 액세스

모든 이미지와 스크린샷: Terenz Jomar Dela Cruz