✨[ADD] API Templates with react-query

[ding-co]

📃 변경사항

• apis 폴더 안 구조 변경
• local-storage 폴더 생성
• react-query 폴더 생성 및 세팅
• react-query 및 devtools 코드에 추가

📌 중점적으로 볼 부분

• apis/Base.ts - 부모 API 클래스
• apis/Auth.ts - 자식 Auth API 클래스
• apis/models - API 데이터 모델 인터페이스
• apis/responses - API 응답 인터페이스
• local-storage - Auth 관련 local-storage 이용한 클래스
• react-query - queryKeys를 저장하는 constants, queryClient 기본 세팅
• pages/index.tsx - userInfo API에 대한 기본적인 useQuery 및 useMutation 예시

✔ 테스트 체크리스트

• [x]

🎇 스크린샷

💫 기타사항

[Dongkyuuuu]

BaseAPI class 의 post, put, get, delete 메서드 내부에서 try-catch 로 감싸셨는데 공통적으로 에러 처리를 할 수 있는 장점도 있지만 저는 보통 여기서는 그냥 에러를 터지게 하고 사용하는 곳에서 핸들링 하는 걸 선호합니다!

react-query 의 onError 나 error-boundary 로 상황에 맞게 처리하기 편했어서요 개인적인 생각입니다!

react-query를 사용하시면서 반복되는 에러처리가 발생했을 것 같은데 이런 처리들은 어떻게 하셨는지 궁금합니다!

[numeru]

BaseAPI class 의 post, put, get, delete 메서드 내부에서 try-catch 로 감싸셨는데 공통적으로 에러 처리를 할 수 있는 장점도 있지만 저는 보통 여기서는 그냥 에러를 터지게 하고 사용하는 곳에서 핸들링 하는 걸 선호합니다! react-query 의 onError 나 error-boundary 로 상황에 맞게 처리하기 편했어서요 개인적인 생각입니다!

react-query를 사용하시면서 반복되는 에러처리가 발생했을 것 같은데 이런 처리들은 어떻게 하셨는지 궁금합니다!

제가 에러 처리를 아주 깊게 안해봐서 그런걸 수도 있긴 한데 공통적인 에러 처리 로직이 있긴 했지만 여기선 BaseAPI 와 같이 모든 요청에 쓰이는 메서드 내부에서 에러 처리를 하기엔 조금씩 다른 부분이 생기더라구요!

기본적으로 onError 에서 에러 안내 모달 띄워주는 것 + 각 api 와 status code 에 따른 추가 에러 처리를 개별로 하고 get api 에서 난 에러의 경우 에러 UI 가 있으면 error-boundary 를 이용해서 선언적으로 추가해주었습니다!

정말 모든 api 에서 처리해야 할 공통 로직이 있다면 QueryClient 에서 전역 설정을 하면 될 것 같네요