JSON.stringify로 빠르게 코드 파악하기

내가 작성한 코드가 아닌 전혀 배경 지식이 없는 코드를 파악할 일이 많아졌다. 아무런 배경 지식없이 방대한 코드를 이해하는 것은 매우 힘든 일이다.

이때 데이터가 어떻게 형성되는지를 머리에서만 연산하는 것보다 시각적으로, 특히 직관적으로 표현하면 훨씬 문제에 접근하기 용이해진다.

console.log에서 쉽게 확인하기

보통 console.log를 많이 활용한다.

하지만 다음과 같은 복잡한 데이터가 있다고 생각해보자.

const complexData = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    country: 'XYZ',
  },
  hobbies: ['reading', 'coding', 'traveling'],
  skills: {
    programming: ['JavaScript', 'Python', 'Java'],
    languages: ['English', 'Spanish'],
  },
  projects: [
    {
      title: 'Project A',
      description: 'Lorem ipsum...',
      contributors: ['Alice', 'Bob'],
    },
  ],
}

이렇게 복잡한 데이터는 다음과 같이 값을 출력한다.

전체 데이터 구조를 파악하기에는 어려움이 있다.

JSON.stringify 활용하기

JSON.stringify을 활용해서 좀 더 가독성을 높이자.

JSON.stringify는 JavaScript 값을 JSON 문자열로 변환해준다.

여기서 JSON.stringify(복잡한 데이터, null, 2)을 활용할 수 있다. 순서대로 value, replacer, space이다.

그러면 다음과 같이 값을 출력한다.

훨씬 직관적으로 데이터를 빠르게 파악할 수 있다.

화면에 그려내기

계속 콘솔값을 확인하는 것도 귀찮다. 아예 화면에 그려내자.

하지만 단순히 JSON.stringify만 사용하면 가독성이 나쁘다.

<div>{JSON.stringify(complexData, null, 2)}</div>

whiteSpace 이해하기

스타일을 추가하자.

여기서 우리에게 필요한 것은 break-spaces 속성이다.

다음과 같이 변경하자.

<div style={{ whiteSpace: 'break-spaces' }}>{JSON.stringify(complexData, null, 2)}</div>

한눈에 보기 쉽게 화면에 그려졌다..! 🧐

참고 문서

• JSON.stringify()
• white-space