이번 주 과제에서는 저번 과제에 타입스크립트를 도입하는 작업과 백엔드에서 제공하는 API를 사용하는 작업을 진행하도록 하겠습니다.
저번 과제에서는 회원가입만 진행했지만 이번에는 회원가입과 로그인(JWT 이용)을 모두 구현해주셔야 합니다.
마지막으로 로그인 후 로그인 여부에 따른 권한까지 확인해주시면 됩니다.
아래 필수 요구 사항을 모두 구현하는 것을 최우선으로 해주시고, 시간이 허락한다면 선택 요구사항을 구현해주시면 됩니다.
디자인은 저번에 진행했던 디자인으로 그대로 진행하시면 됩니다. 기능에 명세되어있지 않은 부분의 디자인은 구현해도되고, 하지않아도 됩니다.
3월 2일(목) ~ 3월 6일(수) 오후 6시
- 위 레포를 자신의 레포지토리로 fork해 갑니다.
- 이슈단위로 브랜치를 나누어 작업합니다.
- 기능 내 세부 기능이 완료될 때마다 커밋을 진행합니다.
- 작업이 모두 완료된 후 메인 레포지토리에 pull request를 전송합니다.
- 프론트 서버와 백엔드 서버를 꼭 따로따로 동시에 돌려주세요.
-
프론트 :
cd ./frontnpm run start -
백엔드
cd ./backnode app.js
- 3차 미션에서 작업한 내용에 타입스크립트를 적용시킵니다.
- API 명세서를 참고해서 백엔드에서 제공하는 API를 적용시킵니다.
- 로그인은 JWT로 구현합니다. 로그인 후 서버에서 제공받은 accessToken과 refreshToken을 localStoarge에 저장해주세요. (테스트하기 쉽게 accessToken 만료시간은 5분 refreshToken 만료시간은 10분으로 설정해두었습니다.)
- 저장한 accessToken과 refreshToken을 이용해서 로그인 여부 권한 테스트를 진행해주시면 됩니다.
- 회원가입
POSThttp://localhost:8000/auth/signup- Request fields : email(이메일), pw(비밀번호), comparePw(비밀번호 확인)
- 로그인
POSThttp://localhost:8000/auth/login- Request fields : email, pw
- Response fields : accessToken, refreshToken, userInfo
- 로그인 여부 권한 테스트
-
Request headers
Name Description Authorization Bearer access-token refresh-token refreshToken - Authorization 헤더에 access-token을 포함할 때 Bearer을 꼭 붙여주세요!
- response되는 error 메시지를 통해서 어떤 오류가 발생했는지 확인할 수 있습니다.
-
회원가입
Status Description 200 회원가입 성공 400 유효하지 않은 이메일or패스워드, 일치하지 않는 패스워드, 이미 존재하는 이메일 500 서버 에러 -
로그인
Status Description 200 로그인 성공 400 유효하지 않은 이메일or패스워드, 이미 존재하는 이메일 406 존재하지 않는 유저, 일치하지 않는 패스워드 500 서버 에러 -
로그인 여부 권한 테스트
Status Description 200 accesstoken를 통해 권한 확인 성공 or (refreshToken 권한 확인 and accessToken 재발급) 401 헤더에 accessToken or refreshToken이 없을 경우 403 accessToken과 refreshToken 모두 만료된 경우 500 서버 에러
- Protected Router 로직을 도입합니다.