오늘도 앱을 열었는데 이전에 수정하지 않은 에러가 있었다.
그것은 바로
// api.js
// 서버와 통신시 필요한 api를 함수로 미리 정의해둔 뒤
// handleRequest라는 에러를 핸들링하는 함수로 감싸서 react query에 넘긴다.
// 이때 handleRequest에 api 함수를 콜백함수로 넘기다보니 그 과정에서 문제가 생겼다.
const handleRequest = async request => {
try {
const response = await request();
return response.data;
} catch (err) {
if (
(err.response.status === 401 &&
err.response.data.detail === TOKEN_INVALID_OR_EXPIRED_MESSAGE) ||
err.response.data.detail === TOKEN_INVALID_TYPE_MESSAGE
) {
//...
fetchTodos: (accessToken, userId) => {
return handleRequest(() =>
axios.get(`${API_PATH.todos}?user_id=${userId}`, metadata()),
);
},
fetchTodos를 보면 handleRequest에 인자로 axios.get()을 바로 넘긴다. 이러면 axios.get()은 프로미스 객체를 리턴하기 때문에 const response = await request();에서 문제가 생겼다. 이 부분을 간단하게 해결하고 나니 갑자기 다른 에러가 발생했다.
TypeError: Cannot read property 'id' of undefined
라고 한다. id 속성이 존재하지 않는다니..? 하고 디버거를 켜고 에러 재현을 위해 앱을 다시 리로딩했는데 처음 보는 화면이 나왔었다.

URL을 보면 로컬IP의 8081포트이고, 갑자기 프로젝트를 어떤 걸로 열 것인지 물어본다. 그래서 development build 선택하니 앱 화면으로 이동했고, 다시 아까와 같은 에러가 발생했다.