[이상달] sprint11#247
Hidden character warning
Conversation
There was a problem hiding this comment.
쿠키 기반 인증 시스템을 구현하다보니 페이지 리디렉션을 서버에서 처리해줄 수 있을 것 같아서 next 미들웨어를 사용해봤습니다.
pages/api/auth/login.ts
Outdated
There was a problem hiding this comment.
next.js 서버를 이용한 인증을 구현해보고 싶어서 api 핸들러로 로그인, 회원가입, 로그아웃 함수들을 만들어 사용했습니다.
그런데 실제로는 토큰을 웹 스토리지에서만 관리하는 경우가 많다고 들어서, 이렇게 토큰을 쿠키로 저장하는 방식도 쓰이는 편인지 궁금합니다.
There was a problem hiding this comment.
일반적으로, 인증 인가와 관련된 부분은 백엔드 파트와 조율된 방식에 맞춰서 작성하는 편입니다.
지금처럼 여러가지 방식을 경험하기위해 코드를 작성해보는 시도는 아주 좋습니다 👍
addiescode-sj
left a comment
addiescode-sj
left a comment
There was a problem hiding this comment.
기존 리액트 앱을 마이그레이션하며 작업하기 쉽지 않았을텐데, 고생 많으셨습니다 👍
한번에 보기엔 변경사항이 많아서,
보면서 설계/개선점에 대한 피드백과 궁금해하셨던 질문에 대한 답변 위주로 리뷰 드려봤어요!
보시고 더 궁금한 점 생기면 코멘트 달아주세요!
주요 리뷰 포인트
- 이미지 관련 Props type 분리하고 재사용하기
- loading에 관련된 옵션 타입 좁히기
- 페이지/ 콘텐츠 특성에 맞는 data fetching & 캐싱 전략 적용해보기
- useMutation 콜백과 mutate 함수 콜백을 사용 목적에 따라 구분해 활용하기
- layout별 컴포넌트 분리하기
- 토큰 관리 방식에 대한 피드백
components/Form/LoginForm.tsx
Outdated
| err.response?.data?.message || | ||
| "로그인에 실패했습니다. 이메일과 비밀번호를 확인해주세요." | ||
| ); | ||
| } else { | ||
| alert("알 수 없는 에러가 발생했습니다."); | ||
| } |
There was a problem hiding this comment.
useMutation의 onError는 컴포넌트 생명 주기와 무관하게 항상 실행됩니다.
따라서, 여기서 사용하는 콜백함수들은 mutation 과정에 필수적이면서도 UI 종속적이지 않은, 좀 더 전역적인 처리를 할때 쓰는걸 권장합니다 (쿼리 즉시 무효화와 같은 작업).
이렇게 사용자 피드백을 주는 처리의 경우 컴포넌트 생명 주기에 맞추어 처리해주는게 좋겠죠?
해당 콜백을 사용하기보다는 mutation.mutate 콜백에서 처리해줍시다 :)
pages/api/auth/login.ts
Outdated
There was a problem hiding this comment.
일반적으로, 인증 인가와 관련된 부분은 백엔드 파트와 조율된 방식에 맞춰서 작성하는 편입니다.
지금처럼 여러가지 방식을 경험하기위해 코드를 작성해보는 시도는 아주 좋습니다 👍
4 participants
요구사항
기본
심화
주요 변경사항
배포 링크
https://panda-fesd.vercel.app/
스크린샷
로그인, 회원가입 (리액트 훅 폼)
로그인/로그아웃
로그인
로그아웃
멘토에게