[5주차/조이] 워크북 제출합니다.#54
Conversation
|
시험이 오늘 끝나서 미션은 내일 스터디 전까지 꼭 다 끝내서 제출하겠습니다..! 죄송합니다 ㅠㅠ |
- useCustomFetch: useRef로 fetchFn 참조 관리, 의존성 배열을 []로 변경 → useCallback 누락 시 발생하는 무한 재렌더 방지 - axiosInstance(mission02, 03): refreshPromise 모듈 스코프 공유 → Refresh Token Rotation 환경에서 동시 401 시 중복 갱신 호출 방지
qkrdmsthff
left a comment
qkrdmsthff
left a comment
There was a problem hiding this comment.
LGTM 조이 수고하셨습니다!! 이번주도 화이팅
| import axios from 'axios'; | ||
| import type { MovieResponse, MovieDetail, Credits } from '../types/movie'; | ||
|
|
||
| const BASE_URL = 'https://api.themoviedb.org/3'; |
There was a problem hiding this comment.
baseURL 을 하드코딩 하는 것보다 .env 파일에 넣어서 관리하는 것이배포 환경이 바뀔 때에 따라 유연하게 대처할 수 있어요!
| } catch { | ||
| localStorage.removeItem('accessToken'); | ||
| localStorage.removeItem('refreshToken'); | ||
| window.location.href = '/login'; |
There was a problem hiding this comment.
현재 SPA 의 장점을 무시하고 window.location.href 를 사용해서 페이지를 이동하고 있습니다! react-route-dom 의 useNavigate 훅을 사용해 보는 것을 권장합니다!
| localStorage.removeItem('accessToken'); | ||
| localStorage.removeItem('refreshToken'); | ||
| window.location.href = '/login'; | ||
| return Promise.reject(error); |
There was a problem hiding this comment.
return Promise.reject(error) 를 할 때,
리프레시 실패 원인을 넘길지 원래의 401 에러(error)를 넘길지 결정하면 좋습니당!! 보통은 인증 실패임을 알리기 위해 원래 에러를 넘기는 지금 방식도 괜찮은 거 같습니다 ㅎㅎ
| try { | ||
| if (!refreshPromise) { | ||
| const stored = localStorage.getItem('refreshToken'); | ||
| const refreshToken = stored ? (JSON.parse(stored) as string) : null; |
There was a problem hiding this comment.
현재 localStorage 에서 값을 읽어올 때 JSON.parse 를 사용하고 있는데, 이 부분에서 두 가지 개선 방향을 제안드립니다!
안정성 확보 : 사용자가 브라우저 콘솔에서 값을 조작하거나 데이터가 오염되었을 경우 JSON.parse 에서 런타임 에러가 발생해 앱이 멈출 수 있습니다! 이를 방지하기 위해 try-catch 로 감싸는 것을 추천합니다!
저장 방식 단순화 : 토큰은 객체가 아닌 단순 문자열인 경우가 많습니다. JSON.stringify 없이 순수 문자열로 저장하고 getItem 으로 바로 읽어오면 따옴표 처리나 파싱 에러 걱정 없이 더 간결하게 관리할 수 있습니다!
5 participants
✅ 워크북 체크리스트
✅ 컨벤션 체크리스트
📌 주안점