[5주차/엠버] 워크북 제출합니다.#52
Conversation
| const ACCESS_TOKEN_KEYS = ['accessToken', 'access_token', 'token']; | ||
| const REFRESH_TOKEN_KEYS = ['refreshToken', 'refresh_token']; | ||
|
|
||
| function getValueByCandidates(params: URLSearchParams, candidates: string[]) { |
There was a problem hiding this comment.
input 컴포넌트를 따로 분리해서 사용한 점이 깔끔하고 좋아 보이네요!
There was a problem hiding this comment.
/auth/signin ↔ /auth/signup 간 이동 시 errorMessage / successMessage state가 초기화되지 않아 이전 폼의 메시지가 남을 수 있습니다.
이유:
두 경로 모두 AuthPage 컴포넌트를 렌더링하기 때문에 경로가 바뀌어도 React는 컴포넌트를 새로 마운트하지 않고 기존 인스턴스를 재사용합니다. 따라서 useState로 관리하는 메시지 상태가 경로 전환 시 초기화되지 않습니다.
-
/auth/signup 에서 이미 가입된 이메일로 회원가입 시도
→ errorMessage = "이미 사용 중인 이메일입니다." -
로그인 링크 클릭 → /auth/signin 이동
→ 로그인 폼 위에 "이미 사용 중인 이메일입니다." 가 그대로 표시됨
수정 예시
useEffect(() => {
setErrorMessage('');
setSuccessMessage('');
}, [location.pathname]);경로가 바뀌는 시점에 메시지를 초기화해 이전 폼의 메시지가 남아있지 않도록 합니다!
관련 사이트 첨부합니다.
https://react.dev/learn/preserving-and-resetting-state
(여기에서는 권장 사항으로 key를 사용하라고 되어있네요!!)
| import { setAuthTokens } from '../../utils/authToken'; | ||
|
|
||
| const ACCESS_TOKEN_KEYS = ['accessToken', 'access_token', 'token']; | ||
| const REFRESH_TOKEN_KEYS = ['refreshToken', 'refresh_token']; |
There was a problem hiding this comment.
토큰 키 이름을 상수 배열로 처리해서 서버가 키 이름을 바꿔도 어느정도 유연하게 대응할 수 있다는 점이 매우 좋은 것 같습니다 !! 저도 적용해봐야겠어요 👍🏻
qkrdmsthff
left a comment
qkrdmsthff
left a comment
There was a problem hiding this comment.
LGTM 엠버 ~~ 수고하셨고 코드리뷰 반영해 주세요!
| export function signup(payload: SignupRequest) { | ||
| return postJson<SignupResponseData>('/auth/signup', payload); | ||
| } | ||
|
|
||
| export function signin(payload: SigninRequest) { | ||
| return postJson<SigninResponseData>('/auth/signin', payload); | ||
| } | ||
|
|
||
| export function signout() { | ||
| return postJson<null>('/auth/signout', {}); | ||
| } |
There was a problem hiding this comment.
현재는 postJson 를 사용하시고 계신데, 이를 사용하신 이유가 있을까요?
실제 서비스에서는 GET, PUT, DELETE 등의 다양한 메서드를 필요로 합니다! apiClient 인스턴스를 직접 사용하시거나, 더 범용적인 request 유틸리티로 확장해 보는 것을 추천합니다.
5 participants
✅ 워크북 체크리스트
✅ 컨벤션 체크리스트
📌 주안점
스터디 전까지 완료하겠습니다...!