2023-02-13 월요일

📅 오늘 한 일

---

1. 담당 파트 UI 구현 완료

2. 소소하게 기능 구현 중

✏️ 무엇을 배웠나

---

1. 데이터 흐름을 신경 쓰자

중간 피드백을 통해서 데이터 흐름을 조금 더 명확하게 할 필요가 있다는 걸 깨달았다. 내일 오전에 팀원들과 데이터 흐름을 명확하게 텍스트로 정리하기로 했다. 여러 데이터가 참조되는 기능이 몇 있는데 그 기능들을 수월하게 구현하려면 먼저 데이터가 어디서 나오고 어디로 들어가는지 정리해두는 게 도움이 되겠다.

2. 모코봇 예외처리

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 메서드를 사용해서 예외처리를 했을 때보다 코드가 훨씬 보기 좋고 한 눈에 봐도 비동기로 작동하는 부분이 어느 부분인지 볼 수 있어서 좋다.

🥵 무엇이 어려웠나

---

1. 옵션 버튼을 누르면 해당 값을 상태에 저장하기

1. 사용자가 선택할 수 있는 여러 개의 버튼이 있고, 중복 선택이 가능하다.
2. 클릭하면 선택이 되고 다시 클릭하면 선택이 해제된다.
3. 최종적으로 유저가 선택한 버튼들의 값을 문자열로 상태에 저장한다.

일단 유저가 선택한 버튼을 상태에 저장하는 것까지는 됐다. 문제는 선택을 해제하려고 다시 버튼을 클릭했을 때 해당 값이 상태에서 빠져야 하는데 중복으로 추가되고 있다는 점.

버튼 클릭 핸들링 함수 로직에 문제가 있는 것 같은데 아직 뭐가 문제인지 모르겠다. 배열이 아니라 객체로 바꾸고 불린값을 갖는 속성을 추가해 true일 때는 상태에 저장되고, false일 때는 상태에서 제외되야 하는데 무조건 true로 찍혀서 저장되는 걸 보니 로직에 문제가 있는 게 확실한 것 같은데...

내일 맑은 정신으로 다시 보면 보이겠지 뭐.