자바스크립트에서의 JSON 데이터 처리 성능 향상 기법

10 Sep 2023

javascript

JSON은 많은 웹 애플리케이션에서 데이터 교환과 저장을 위한 표준 형식으로 사용됩니다. 하지만 대량의 JSON 데이터를 처리할 때 성능 이슈가 발생할 수 있습니다. 이번 블로그 포스트에서는 자바스크립트에서 JSON 데이터 처리 성능을 향상시키기 위한 몇 가지 기법을 알아보겠습니다.

1. JSON.stringify 메서드의 성능 최적화

JSON.stringify 메서드는 JavaScript 객체를 JSON 문자열로 변환하는 데 사용됩니다. 그러나 대량의 데이터를 처리할 때, JSON.stringify 메서드의 성능 저하가 발생할 수 있습니다.

JSON.stringify 메서드의 성능을 향상시키기 위해 다음과 같은 방법을 고려해 볼 수 있습니다:

Replacer 함수 사용: JSON.stringify 메서드는 두 번째 인자로 replacer 함수를 받을 수 있습니다. 이 함수를 사용하면 원하는 속성만 직렬화할 수 있으므로, 필요한 데이터만 처리하여 성능을 향상시킬 수 있습니다.

 const data = {
   name: 'John',
   age: 30,
   address: '123 Main St',
   // ...
 };

  const jsonString = JSON.stringify(data, (key, value) => {
    // 필요한 데이터만 직렬화
    if (key === 'name' || key === 'age') {
      return value;
    }
  });

Space 인자 제거: JSON.stringify 메서드의 세 번째 인자로 space 값을 전달할 수 있습니다. space 값이 존재하면 결과 JSON 문자열에 들여쓰기와 줄바꿈이 포함되어 성능을 저하시킬 수 있습니다. 따라서, 대량의 데이터를 처리할 때는 space 값을 전달하지 않는 것이 좋습니다.
```
 const data = {...}; // 대량의 JSON 데이터

 const jsonString = JSON.stringify(data, null, 2); // 들여쓰기와 줄바꿈 제거
```

2. JSON.parse 메서드의 성능 최적화

JSON.parse 메서드는 JSON 문자열을 JavaScript 객체로 변환하는 데 사용됩니다. 대량의 JSON 데이터를 처리할 때, JSON.parse 메서드의 성능 저하가 발생할 수 있습니다.

JSON.parse 메서드의 성능을 향상시키기 위해 다음과 같은 방법을 고려해 볼 수 있습니다:

Reviver 함수 사용: JSON.parse 메서드는 두 번째 인자로 reviver 함수를 받을 수 있습니다. 이 함수를 사용하여 JSON에서 변환되는 값의 특정 부분을 사용자 정의로 처리할 수 있습니다. 필요한 데이터만 처리해서 성능을 향상시킬 수 있습니다.

```javascript const jsonString = ‘{“name”:”John”,”age”:30,”address”:”123 Main St”}’;

const data = JSON.parse(jsonString, (key, value) => { // 필요한 데이터만 처리 if (key === ‘name’ || key === ‘age’) { return value; } return value; });

원시 값 사용: 대량의 JSON 데이터를 처리할 때, 파싱된 결과를 객체로 다루는 대신 필요한 데이터를 추출하여 원시 값으로 바로 사용하는 것이 성능을 향상시킬 수 있습니다.

 const jsonString = '[1, 2, 3, 4, 5]';

 const dataArray = JSON.parse(jsonString); // 원시 값으로 바로 파싱

 // 각각의 원소에 대한 처리
 for (const data of dataArray) {
   console.log(data);
 }

3. 웹 워커 사용

대량의 JSON 데이터를 처리하는 경우, 메인 스레드에서 이 작업을 처리하면 브라우저가 느려질 수 있습니다. 이럴 때 웹 워커를 사용하여 백그라운드 스레드에서 JSON 데이터를 처리할 수 있습니다.

웹 워커를 사용하면 JSON 데이터를 비동기적으로 처리하고 메인 스레드가 블로킹되지 않으므로 웹 애플리케이션의 반응성을 향상시킬 수 있습니다.

// main.js

const worker = new Worker('worker.js');

// 웹 워커에서의 메시지 수신
worker.onmessage = event => {
  const result = event.data;
  // 처리된 결과 사용
};

// 대량의 JSON 데이터 전송
worker.postMessage({ json: bigJsonData });

// worker.js

// 웹 워커에서의 메시지 수신
self.onmessage = event => {
  const json = event.data.json;
  // JSON 데이터 처리
  
  // 처리된 결과 전송
  self.postMessage(result);
};

참고사항: 웹 워커는 브라우저에 따라 지원 여부가 다를 수 있으므로, 지원 여부를 먼저 확인하고 사용하는 것이 좋습니다.

마무리

이 블로그 포스트에서는 자바스크립트에서의 JSON 데이터 처리 성능을 향상시키기 위한 몇 가지 기법을 알아보았습니다. JSON.stringify 메서드와 JSON.parse 메서드를 최적화하거나 웹 워커를 사용하여 대량의 JSON 데이터를 효율적으로 처리할 수 있습니다. 이러한 기법들을 적절히 활용하여 웹 애플리케이션의 성능을 향상시키는데 도움이 되길 바랍니다.

더 많은 성능 최적화 기법에 대해 알고 싶다면, 공식 자바스크립트 문서와 다른 유용한 자료들을 참고해보세요.