[💌 FEATURE REQUEST] API 에러 처리를 위한 axios와 ErrorBoundary, Suspense 로직을 생성한다

[JengYoung]

멈춰! 🖐🏻 잠시 체크 들어갑니다~

• [X] 다음 페이지에서 중복되지 않음을 확인했어요. 🙆🏻
• [X] 다른 분들께서 허락해주신다면, 제가 구현해보고 싶어요! 🙆🏻‍♀️

배경 및 설명

슬슬 API 로직을 위한 처리를 해야겠다

다음 주부터 본격적으로 백엔드에서도 API 명세에 따라 로직을 생성한다고 한다. 이를 좀 더 여유롭게 적용하기 위해, 미리 axios의 interceptor을 정의해주고, 인스턴스를 생성하려 한다.

또한 React18버전으로 세팅되어 있으므로, React.Suspense를 활용해주려 한다.

기대결과

• [x] axios instance를 정의해야 한다.
• [x] axios의 interceptor 정의를 해주어야 한다.
• [x] 특정 에러 처리를 위한 ErrorBoundary가 작동되어야 한다.
• [x] Suspense로직이 프로미스의 반환된 결과에 따라 정상적으로 동작되어야 한다.

대안 제시

ErrorBoundary를 어떻게 제어해야 할까

일단 에러바운더리에 대한 내용에 대해 미숙한 감이 있다. 기존에 연습할 때는 Next.js 13 Beta 설명에 따라 에러 페이지 자체로 리다이렉트 시켜줬었는데, 이는 UX가 중단된다는 점이 굉장히 아프다. 왜냐하면, 우리는 유저가 페이지를 계속해서 그려나갈 건데, 이를 리다이렉트 되는 순간 데이터가 날아갈 위험이 반드시 존재하기 때문이다.

따라서 최대한 페이지 이동을 하지 않는 선에서 에러 바운더리를 설정해줘야 할 것 같다. 이것이 기술적으로 지원되는지 우선적으로 탐구하자.

확인 결과, 기술적으로 지원이 된다. 다만 조건이 있다. ErrorBoundary 안에 위치한 컴포넌트가 마치 pending되는 것과 같은 상태를 가져야 한다는 것이다. 이것만 주의하면 쉽게 다룰 수 있다.

이 개념이 엄청 모호해서 약 반나절을 헤맨 듯하다. 하지만 부딪힌 만큼 내 땅이다. 이제 숨은 원리까지 완벽히 이해했다. 🙆🏻

참고자료

원리에 대해 잘 서술되어 있는 자료. 이걸 깨닫기 전에 봤으면 어땠을까. 위 글을 읽고 난 후 추가적으로 콴다쪽에서도 참고한 글을 썼더라.