JavaScript에서 사람이 쉽게 읽을 수 있도록 JSON 형식 지정

Noah Rousseau
2024년 6월 27일 목요일 오후 9:05:01
JavaScript

JSON을 사람이 더 쉽게 읽을 수 있도록 만들기

JSON 작업은 특히 API 및 데이터 저장소를 다룰 때 개발자의 일반적인 작업입니다. 그러나 원시 JSON은 형식이 부족하여 읽고 이해하기 어려울 수 있습니다. JSON의 접근성을 높이려는 경우 적절한 들여쓰기와 공백을 적용하는 것이 중요합니다.

이 기사에서는 JavaScript를 사용하여 JSON을 예쁘게 인쇄하는 다양한 방법을 살펴보겠습니다. 기본적인 들여쓰기 및 공백 기술뿐만 아니라 색상 및 글꼴 스타일을 사용하여 가독성을 높이는 방법도 다룰 것입니다. 이 가이드는 원시 JSON을 인간 친화적인 형식으로 변환하는 데 도움이 됩니다.

명령 설명
JSON.stringify(json, null, 2) JavaScript 개체를 공백 2칸 들여쓰기가 포함된 JSON 문자열로 변환합니다.
.replace(/(".*?"|null|true|false|\d+)/g, ...) 정규식을 사용하여 사용자 정의 형식화를 위한 특정 JSON 요소를 식별합니다.
http.createServer(...).listen() 지정된 포트에서 수신 대기하는 Node.js의 HTTP 서버를 만듭니다.
res.writeHead(200, { 'Content-Type': 'application/json' }) 콘텐츠 유형이 JSON임을 나타내도록 HTTP 응답 헤더를 설정합니다.
res.end() 응답을 클라이언트에 다시 보내고 모든 응답 헤더와 본문이 전송되었음을 알립니다.
document.body.innerHTML 문서에 있는 body 요소의 HTML 콘텐츠를 설정하거나 가져옵니다.

JSON 형식 지정 스크립트에 대한 자세한 설명

첫 번째 스크립트는 들여쓰기를 추가하고 색상 코딩을 적용하여 JSON을 예쁘게 인쇄하도록 설계된 프런트엔드 JavaScript 솔루션입니다. 스크립트는 다음과 같은 함수로 시작됩니다. , JSON 객체를 입력으로 사용합니다. 이 함수 내에서 JSON 객체는 다음을 사용하여 2칸 들여쓰기가 있는 문자열로 변환됩니다. 방법. 이렇게 하면 필요한 공백을 추가하여 JSON을 더 쉽게 읽을 수 있습니다. 가독성을 더욱 높이기 위해 스크립트는 다음을 사용합니다. 문자열, 숫자, 부울 및 null 값과 같은 특정 JSON 요소와 일치하는 정규식을 사용하는 메서드입니다. 일치하는 각 요소는 해당 클래스로 태그를 지정하면 CSS가 각 데이터 유형에 서로 다른 색상을 적용할 수 있습니다. 그런 다음 형식이 지정된 JSON 문자열이 다음을 사용하여 문서 본문에 삽입됩니다. .

두 번째 스크립트는 Node.js를 사용하여 JSON을 예쁘게 인쇄하는 백엔드 솔루션입니다. 이 스크립트는 다음을 사용하여 HTTP 서버를 생성합니다. , 다음을 사용하여 지정된 포트에서 들어오는 요청을 수신합니다. . 요청을 받으면 서버는 가독성을 위해 형식이 지정된 JSON 개체로 응답합니다. JSON 객체는 다음을 사용하여 들여쓰기가 있는 문자열로 변환됩니다. . 응답 헤더는 콘텐츠 유형이 JSON임을 나타내도록 설정됩니다. res.writeHead(200, { 'Content-Type': 'application/json' }). 마지막으로 예쁘게 인쇄된 JSON 문자열은 다음을 사용하여 클라이언트로 전송됩니다. . 이 스크립트를 사용하면 개발자는 서버 주소로 이동하기만 하면 브라우저에서 올바른 형식의 JSON 출력을 빠르게 볼 수 있습니다.

가독성을 높이기 위해 JavaScript를 사용하여 JSON 형식 지정

프론트엔드 자바스크립트

// Function to pretty-print JSON with indentation and colors
function prettyPrintJSON(json) {
  // Convert JSON object to string with 2-space indentation
  const jsonString = JSON.stringify(json, null, 2);
  // Replace specific characters for color coding
  return jsonString.replace(/(".*?"|null|true|false|\d+)/g, match => {
    let cls = "number";
    if (/^".*"$/.test(match)) {
      cls = "string";
    } else if (/true|false/.test(match)) {
      cls = "boolean";
    } else if (/null/.test(match)) {
      cls = "null";
    }
    return `<span class="${cls}">${match}</span>`;
  });
}
// JSON data
const jsonData = {
  "name": "John",
  "age": 30,
  "city": "New York",
  "isStudent": false
};
// Display formatted JSON
document.body.innerHTML = `<pre>${prettyPrintJSON(jsonData)}</pre>`;

Pretty-Print JSON에 대한 백엔드 접근 방식

Node.js를 사용한 백엔드

const http = require('http');
const url = require('url');
// Function to pretty-print JSON
function prettyPrintJSON(json) {
  return JSON.stringify(json, null, 2);
}
// Create HTTP server
http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'application/json' });
  // Sample JSON data
  const jsonData = {
    name: "John",
    age: 30,
    city: "New York",
    isStudent: false
  };
  // Send pretty-printed JSON
  res.end(prettyPrintJSON(jsonData));
}).listen(3000, () => {
  console.log('Server running at http://localhost:3000');
});

추가 도구를 사용하여 JSON 가독성 향상

이전 솔루션은 JSON을 예쁘게 인쇄하기 위한 프런트엔드 및 백엔드 JavaScript 방법에 중점을 두었지만 JSON 가독성을 더욱 향상시킬 수 있는 다른 도구와 기술이 있습니다. 널리 사용되는 접근 방식 중 하나는 브라우저 확장 프로그램이나 온라인 도구를 사용하는 것입니다. JSONView 또는 JSON Formatter와 같은 확장 기능은 브라우저에서 자동으로 JSON 형식을 지정하고 들여쓰기 및 색상 코딩을 추가하여 가독성을 향상시킬 수 있습니다. 이러한 도구는 API와 자주 상호 작용하고 추가 코드를 작성하지 않고도 JSON 데이터를 빠르게 구문 분석하고 이해해야 하는 개발자에게 특히 유용합니다.

또 다른 유용한 방법은 JSON을 포함한 다양한 프로그래밍 언어에 대한 구문 강조를 처리하도록 설계된 Highlight.js 또는 Prism.js와 같은 라이브러리를 활용하는 것입니다. 이러한 라이브러리는 웹 애플리케이션에 통합되어 JSON 데이터의 형식을 동적으로 지정하고 강조 표시할 수 있습니다. 사용하여 을 사용하면 사전 정의된 테마를 JSON 문자열에 적용하여 다양한 데이터 유형을 더 쉽게 구별할 수 있습니다. 또한 이러한 라이브러리를 개발 워크플로우에 통합하면 시간을 절약하고 다양한 프로젝트에서 JSON 형식의 일관성을 보장할 수 있습니다.

  1. 프리티 프린팅 JSON이란 무엇인가요?
  2. JSON을 예쁘게 인쇄한다는 것은 사람이 읽기 쉽도록 JSON 데이터를 들여쓰기와 공백으로 형식화하는 것을 의미합니다.
  3. JSON 형식이 중요한 이유는 무엇입니까?
  4. 적절한 JSON 형식은 가독성을 높이고 개발자가 데이터의 구조와 내용을 빠르게 이해하는 데 도움이 됩니다.
  5. 이것은 방법?
  6. 그만큼 메소드는 JavaScript 객체를 JSON 문자열로 변환합니다.
  7. 어떻게 예쁘게 인쇄하는 데 도움이 되나요?
  8. 통과하여 세 번째 인수(들여쓰기 수준)를 사용하면 JSON 문자열의 형식을 들여쓰기로 지정할 수 있습니다.
  9. 하이라이트.js란 무엇인가요?
  10. 하이라이트.js는 JSON 데이터의 형식을 지정하고 강조하는 데 사용할 수 있는 구문 강조용 라이브러리입니다.
  11. 브라우저 확장을 사용하여 JSON 형식을 지정할 수 있나요?
  12. 예, JSONView 또는 JSON Formatter와 같은 확장 프로그램은 브라우저에서 자동으로 JSON 형식을 지정할 수 있습니다.
  13. 의 목적은 무엇입니까? JSON 형식의 메소드?
  14. 그만큼 정규식을 사용하는 메소드를 사용하여 다양한 JSON 요소에 색상 코딩을 추가할 수 있습니다.
  15. JSON을 예쁘게 인쇄하는 일반적인 사용 사례는 무엇인가요?
  16. 예쁜 인쇄 JSON은 일반적으로 디버깅할 때 또는 기술 지식이 없는 이해관계자에게 JSON 데이터를 제공할 때 사용됩니다.
  17. Node.js에서 JSON을 예쁘게 인쇄하려면 어떻게 해야 하나요?
  18. Node.js에서 HTTP 서버를 생성하고 사용할 수 있습니다. JSON 응답 형식을 지정합니다.

데이터의 가독성과 사용성을 향상하려면 JSON을 예쁘게 인쇄하는 것이 필수적입니다. 개발자는 JavaScript를 사용하여 들여쓰기, 공백 및 색상 코딩을 적용하여 JSON을 더욱 인간 친화적으로 만들 수 있습니다. 또한 브라우저 확장 기능과 구문 강조 라이브러리를 활용하면 서식 지정을 더욱 향상할 수 있습니다. 이러한 기술은 JSON 데이터의 더 나은 디버깅 및 표시에 총체적으로 도움을 주어 데이터 처리의 명확성과 효율성을 보장합니다.