ChatGPT에서 Stream으로 받는 JSON을 즉시 보여주는 방법

🚀 incomplete-json-parser 모듈 소개

최근에 ChatGPT API를 사용하면서 JSON 데이터를 스트림으로 받아 처리하는 과정에서 불편함을 느꼈습니다. JSON 데이터가 완전히 수신되기 전까지는 파싱(Parsing)할 수 없어 사용자에게 지루한 로딩 화면만 보여줄 수밖에 없었죠. 이런 문제를 해결하기 위해 incomplete-json-parser라는 모듈을 개발했습니다.

이 모듈은 JavaScript와 TypeScript 프로젝트에서 사용할 수 있으며, 스트림(Stream)으로 받은 JSON 데이터를 버퍼(Buffer)에 저장하고 파싱 가능한 부분까지 추출하여 사용할 수 있도록 도와줍니다. 모듈의 GitHub 저장소는 다음 링크에서 확인할 수 있습니다:

https://github.com/1000ship/incomplete-json-parser

✨ 모듈 사용 방법

incomplete-json-parser 모듈을 사용하는 방법은 매우 간단합니다. 먼저 모듈을 설치해야 합니다:

npm install incomplete-json-parser

그 다음, 프로젝트에서 모듈을 import합니다:

import { IncompleteJsonParser } from 'incomplete-json-parser';

이제 IncompleteJsonParser 클래스의 인스턴스를 생성하고, 스트림으로 받은 JSON 데이터를 write() 메서드를 사용하여 버퍼에 쓸 수 있습니다:

const parser = new IncompleteJsonParser();
parser.write('{"name": "John", "age": 30, "city": "New');
parser.write(' York", "hobbies": ["reading", "gaming"');
// parser.write(']}'); // 마무리 짓지 않아도 돼요!

JSON 데이터가 완전히 수신되기 전이라도 getObjects() 메서드를 호출하여 파싱 가능한 부분까지 추출할 수 있습니다:

const result = parser.getObjects();
console.log(result);
// Output: { name: 'John', age: 30, city: 'New York', hobbies: ['reading', 'gaming'] }

🌟 장점 및 활용 예시

incomplete-json-parser 모듈을 사용하면 스트리밍 JSON 데이터를 더 빠르고 효율적으로 처리할 수 있습니다. 특히 ChatGPT API처럼 JSON 응답을 스트림으로 받는 경우, 이 모듈을 활용하면 사용자 경험을 크게 향상시킬 수 있습니다.

예를 들어, Optional Chaining을 사용하여 데이터가 준비되는 대로 화면에 표시할 수 있습니다:

const data = parser.getObjects();
console.log(data?.address?.zipCode);

이렇게 하면 사용자는 데이터가 로드되는 동안 지루한 로딩 화면을 보는 대신, 데이터의 일부를 먼저 볼 수 있게 됩니다.

🙌 마치며

incomplete-json-parser 모듈은 스트리밍 JSON 데이터를 처리할 때 매우 유용한 도구입니다. 이 모듈을 사용하면 불완전한 JSON 데이터도 파싱하여 활용할 수 있어, 지루한 로딩화면만 보여주지않고 데이터가 준비되는대로 즉시 보여주어 사용자 경험을 향상시킬 수 있을거에요.

이 모듈이 여러분의 프로젝트에 도움이 되기를 바라며, 사용 중 궁금한 점이나 제안 사항이 있다면 언제든 GitHub 저장소에 이슈를 남겨주세요. 함께 발전해 나가는 오픈 소스 커뮤니티를 만들어 가요! 😄

Happy coding! ✨