API 에러 처리를 위한 axios와 ErrorBoundary, Suspense 로직을 생성한다

[JengYoung]

💌 설명

다음을 모두 구현했다.

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

AsyncBoundary

AsyncBoundary를 통해 좀 더 선언적이면서도 쉽게 ErrorBoundary와 Suspense 처리가 가능하도록 했다. 이는 다음 글을 참고했다.

API 객체

어떻게 보면 참 더 정의를 빡세게 할까 싶었는데, 그건 너무 오버엔지니어링 같아, 이정도 선에서 타입하려 한다. RESTAPI를 프로미스의 형태로 지원하는 객체이다.

이는 axios를 기반으로 고려되었지만, 추후 다음과 같은 문제를 고려해서 확장성 있게 설계한 것이다.

현재 모든 예제들이 fetch를 사용하는 것으로 볼 때, axios가 과연 완벽히 의존성이 없다고 할 수 있을까?

언젠가는 axios보다 더 나은 비동기 통신 라이브러리가 생길 수 있으니... 나아가 쉽게 인스턴스를 끼워넣을 수 있도록 데코레이터 패턴 식(?)으로 설계했다.

📎 관련 이슈

closes #36

💡 논의해볼 사항

react-query의 경우 아직 고민 중이다.

이 역시 만약 내가 SWR 등으로 바꾼다면 어떻게 될까. 그렇다면 결과적으로 하나하나 모든 로직을 바꿔야 하는데, APIFetcher라는 객체를 하나 만들지는 고민 중이다.

그런데... 너무 오버엔지니어링일 것 같다는 느낌이 든다. 😭 역시 개발과 리소스는 이분법적으로 해석할 수는 없는 듯. 하더라도 굉장히 단순하게 만들 듯하다. fetcher와 params를 apply하는 정도...?

📝 참고자료

다음 글

⚠️ 잠깐! 한 번 체크해주세요.

• [x] 베이스가 제대로 적용되었나요?
• [x] 코드의 변경사항은 원하는 대로 잘 되었는지 다시 한 번 살펴봐요!