[Init] API 초기세팅 #33
[Init] API 초기세팅 #33
Conversation
|
🚀 Storybook 배포가 완료되었습니다! 🔗 https://6779addaee273bbd1faef48a-vtomkfegvq.chromatic.com/ |
src/apis/index.ts
Outdated
| const cachedToken: string | null = null; | ||
|
|
||
| const getAccessToken = (): string | null => { | ||
| if (!cachedToken) { | ||
| const user = localStorage.getItem('user'); | ||
|
|
||
| if (user) { | ||
| try { | ||
| const userObj = JSON.parse(user); | ||
| return userObj.accessToken || null; | ||
| } catch (error) { | ||
| console.error('유저의 토큰 정보를 가져올 수 없습니다', error); | ||
| return null; | ||
| } | ||
| } | ||
| } | ||
| return cachedToken; | ||
| }; |
There was a problem hiding this comment.
p2: cachedToken 을 17번 라인에서 null 로 초기화하고, 이후에 갱신해주는 부분이 없는데요.
이렇게 되면 매번 cachedToken가 null 이라서 로컬스토리지에서 토큰을 조회하는 식인데 혹시 의도하신 부분일까요?!
만약 맞다면 const cachedToken: string | null = null; 여기에서 타입을 문자열로 정해두신 부분을 수정하시는게 맞을 것 같습니다! (캐시토큰이 갱신되지 않아서 항상 null 이니까!)
호옥시 아니라면 아래처럼 토큰 갱신이 필요할 것 같은데 어떻게 생각하시나용?!
if (user) {
try {
const userObj = JSON.parse(user);
cachedToken = userObj.accessToken || null;
return cachedToken;
} catch (error) {
console.error('유저의 토큰 정보를 가져올 수 없습니다', error);
return null;
}| // REST API 요청 유틸리티 함수들 | ||
| export function get<T>(...args: Parameters<typeof instance.get>) { | ||
| return instance.get<T>(...args).then((res) => res.data); | ||
| } | ||
|
|
||
| export function post<T>(...args: Parameters<typeof instance.post>) { | ||
| return instance.post<T>(...args).then((res) => res.data); | ||
| } | ||
|
|
||
| export function put<T>(...args: Parameters<typeof instance.put>) { | ||
| return instance.put<T>(...args).then((res) => res.data); | ||
| } | ||
|
|
||
| export function patch<T>(...args: Parameters<typeof instance.patch>) { | ||
| return instance.patch<T>(...args).then((res) => res.data); | ||
| } | ||
|
|
||
| export function del<T>(...args: Parameters<typeof instance.delete>) { | ||
| return instance.delete<T>(...args).then((res) => res.data); | ||
| } |
There was a problem hiding this comment.
p5: 와 이렇게 하면 데이터 반환도 일정하고.. 너무 좋겠네요!!!! 역시 코드보면서 배워가는게 많아서 너무 좋아요!!
src/apis/index.ts
Outdated
| const httpStatus = error.response?.status; // HTTP 상태 코드 | ||
| const customStatus = error.response?.data?.status; // 응답의 상태 코드 | ||
|
|
||
| if (httpStatus === 401 && customStatus === 401001) { |
There was a problem hiding this comment.
p2: 백엔드 노션에서 주워왔는데용 보니까 customStatus 앞에 알파벳 E 가 붙는거 같기두 해서요!
(ㅎㅎㅎ.. 아닌가 그냥 E 노션에서 헷갈리지말라고 붙인건가 ? 흐음 혹시 몰라서 사진이랑 같이 리뷰 남깁니다! )
| // 일반적인 에러 처리 | ||
| return Promise.reject( | ||
| new ApiError( | ||
| httpStatus || 500, // 상태 코드 없으면 500 | ||
| error.response?.data?.message || '알 수 없는 오류가 발생했습니다.', // 에러 메세지 없으면 메세지 출력 | ||
| ), | ||
| ); | ||
| }, |
There was a problem hiding this comment.
p5: 일반 에러까지 인터셉터로 받는거 너무 아름답다... 짱이야 채현이
|
🚀 Storybook 배포가 완료되었습니다! 🔗 https://6779addaee273bbd1faef48a-hujpdxypug.chromatic.com/ |
| }); | ||
|
|
||
| // 응답 인터셉터 | ||
| // TODO: 리프레시 로직 추가하기 -> 찬영언니 로그인 작업할 때 구현해줘!! |
src/main.tsx
Outdated
| <App /> | ||
| <QueryClientProvider client={queryClient}> | ||
| <App /> | ||
| <div style={{ fontSize: '16px' }}> |
|
🚀 Storybook 배포가 완료되었습니다! 🔗 https://6779addaee273bbd1faef48a-hragtqxeff.chromatic.com/ |
📑 이슈 번호
✨️ 작업 내용
💙 코멘트
📸 구현 결과
생략하겠습니다.