중간 피드백을 통해서 데이터 흐름을 조금 더 명확하게 할 필요가 있다는 걸 깨달았다. 내일 오전에 팀원들과 데이터 흐름을 명확하게 텍스트로 정리하기로 했다. 여러 데이터가 참조되는 기능이 몇 있는데 그 기능들을 수월하게 구현하려면 먼저 데이터가 어디서 나오고 어디로 들어가는지 정리해두는 게 도움이 되겠다.
try {
const response = await axios.post(ENDPOINT, requestData, {
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${API_KEY}`,
},
});
setResponse(response.data.choices[0].text);
setIsDone(true);
} catch (error) {
setIsError(true);
console.error(error);
} finally {
setIsLoading(false);
}
openAI api를 안정적으로 쓰기 위해 api 통신 부분을 await를 사용해 프로미스가 반환될 때까지 대기하게 만들어서 동기 코드처럼 작동하도록 했다. 그리고 try / catch 구문을 사용해서 api 통신 상태에 따라 예외 처리를 하도록 했다.
then 메서드를 사용해서 예외처리를 했을 때보다 코드가 훨씬 보기 좋고 한 눈에 봐도 비동기로 작동하는 부분이 어느 부분인지 볼 수 있어서 좋다.
일단 유저가 선택한 버튼을 상태에 저장하는 것까지는 됐다. 문제는 선택을 해제하려고 다시 버튼을 클릭했을 때 해당 값이 상태에서 빠져야 하는데 중복으로 추가되고 있다는 점.
버튼 클릭 핸들링 함수 로직에 문제가 있는 것 같은데 아직 뭐가 문제인지 모르겠다. 배열이 아니라 객체로 바꾸고 불린값을 갖는 속성을 추가해 true일 때는 상태에 저장되고, false일 때는 상태에서 제외되야 하는데 무조건 true로 찍혀서 저장되는 걸 보니 로직에 문제가 있는 게 확실한 것 같은데...
내일 맑은 정신으로 다시 보면 보이겠지 뭐.