[Next.js] ai에서 보낸 데이터 정제하여 받기

겪었던 문제 

• 프로젝트를 진행하며 api post요청을 하다가, 아래와 같이 스트림 메세지가 리턴되었었다.

data: 질
data: 문
data: 이나
data:  불
data: 편
data: 하
data: 신
data:  부분
data: 이
data:  있다
data: 면
data:  주
data: 저
data: 하지
data:  말
data: 고
data:  공유
data: 해
data:  주세요
data: .
data: [END]

• 전부 string으로 받아서, data를 삭제하고, END를 지웠지만 원하는 대로 정제가 되지 않았고, 정제하기 위한 방법을 찾아보았다.

찾은 방법

• 검색을 해보니 브라우저 환경에서는 axios의 response: stream 기능이 지원되지 않아 SSE 방식으로 오는 메세지를 정제할 수가 없는 것 같았다.
• 따라서, fetch를 사용해서 스트림 기능을 사용하려고 했다.

fetch를 쓰자니...

• 프로젝트에는 axiosInstance를 사용하여 액세스 토큰 인증을 수행하고 있었는데, fetch를 쓰니 토큰 자동인증이 안되어서 Zustand에 저장되어있는 getAccessToken을 함수를 통해 직접 Bearer ${token}을 등록해 주었다.
• 다른 방식으로 진행하는 프로젝트들은 부를 수 있는 다른 방법을 찾아야겠다...

개발 코드

const 함수이름 = async (
	session_id: number,
	formData: FormData,
	onChunk?: (chunk: string) => void,
) => {
	try {
		const accessToken = getAccessToken();
		const headers: Record<string, string> = {};

		if (accessToken) {
			headers.Authorization = `Bearer ${accessToken}`;
		}

		const response = await fetch(
			`주소`,
			{
				method: "POST",
				body: formData,
				headers,
			},
		);

		const reader = response.body?.getReader();
		if (!reader) {
			throw new Error("스트림을 읽을 수 없습니다.");
		}

		let fullContent = "";
		const decoder = new TextDecoder();

		while (true) {
			const { done, value } = await reader.read();
			if (done) break;

			const chunk = decoder.decode(value, { stream: true });
			const lines = chunk.split("\n");

			for (const line of lines) {
				if (line.startsWith("data: ")) {
					const data = line.slice(6);
					if (data === "[END]") {
						return fullContent;
					}
					if (data.trim()) {
						fullContent += data;
						if (onChunk) {
							onChunk(fullContent);
						}
					}
				}
			}
		}

		return fullContent;
	} catch (error) {
		console.error("스트림 처리 중 오류:", error);
		throw new Error("스트림 처리 실패");
	}
};

결과

• 잘 정제 되었다!