로컬state를 만들어 서버 부하 줄이기

챗봇을 개발하면서 assistant api를 사용했다. 

 

노출되는 api-key로 인해 프록시 서버를 만들어 openai 의 api를 사용했다. 

 

기존에는 질문을 던지고 대답을 받으면 다시 메시지리스트를 refetch하여 사용했는데 그럼 메시지 답변을 주고 받을 때마다 refetch가 일어나 성능상 좋지 못할 것 같았다. 

 

따라서 useEffect로 localMessageList를 만들어 저장한 뒤 챗봇 탭이 (gpt로 치면 채팅방) 변경될 때에만 refetch 로 메시지 리스트를 가져오게 변경했다. 따라서 탭이 변경되지 않는다면 서버 부하가 훨~씬 줄어들게 된다. 

	useEffect(() => {
		if (!isAnswerLoading && streamingAnswer) {
			const userMessage: LocalMessagesListDataType = {
				id: String(Math.random()),
				created_at: Math.floor(Date.now() / 1000),
				role: 'user',
				content: [{ text: { value: query } }],
				attachments: [],
			};
			const assistantMessage: LocalMessagesListDataType = {
				id: String(Math.random()),
				created_at: Math.floor(Date.now() / 1000),
				role: 'assistant',
				content: [{ text: { value: streamingAnswer } }],
				attachments: [{ file_id: streamingFileId }],
			};
			setLocalMessageList(prev => [...prev, userMessage, assistantMessage]);
			clearStreamingAnswer();
			clearQuery();
		}
	}, [isAnswerLoading, streamingAnswer, streamingFileId, clearStreamingAnswer, query, setQuery]);