[221018] 오늘의 배움(TIL) - 피플(Piece Plan) 프로젝트 회고

🔸 피플(Piece Plan) 프로젝트 회고

🔹 개발 프로세스

💡 진행 기간

: 10/18

◾ JWT를 사용한 인가 구현

◾ 회원가입 기능 구현

◾ heroku를 이용한 배포 시도

◾ 기타 CSS 수정

◾ 자잘한 오류 수정

🔹 참여한 작업

◾ JWT를 사용한 인가 구현

• 로그인 시 전송하는 http POST 요청을 통해 JWT를 발급하고, 발급한 JWT를 response 객체 header의 쿠키에 담아서 클라이언트에 전송하는 방식으로 구현
• 만약 로그인을 하지 않은 사용자가 수동으로 url의 path를 수정하여 접근을 시도하면, 로그인 페이지로 이동하게끔 route 설정

◾ 회원가입 기능 구현

• 로그인 기능 구현과 유사하게 http POST 요청을 통해 사용자가 입력한 데이터를 전달하되, 서버 쪽에서는 model의 user 데이터와 전달 받은 데이터를 비교하여 중복되는 데이터가 있는지 판단
• 중복되는 데이터가 존재한다면 response 객체의 body에 false 값을 전달하고, 클라이언트에서는 전달 받은 false 값에 따라 중복된 사용자가 있다는 알림을 발생시킴

◾ 기타 CSS 수정

◾ 자잘한 오류 수정

🔹 이슈 해결

• 생성한 쿠키가 정상적으로 http 요청/응답 헤더에 저장되지 않는 이슈
  : 서버와 클라이언트의 http 요청/응답 헤더에 각각 credentials 관련 옵션을 추가해야 생성한 쿠키를 전달하여 참조할 수 있음

💡 해결 방법

: 서버와 클라이언트의 http 요청/응답 헤더에 각각 credentials 관련 옵션을 추가해야 생성한 쿠키를 전달하여 참조할 수 있음

// 클라이언트
const { data: isSuccess } = await axios.post('/login', { id, password }, { withCredentials: true });
// 서버
res.setHeader('Access-Control-Allow-Credentials', 'true');

💡 느낀 점

: 쿠키를 제대로 사용하려면 보안 때문에 credentials 관련 옵션을 설정해야 한다는 사실을 처음 알게 되어 흥미로운 동시에 몇 시간 동안 고뇌에 빠뜨린 주범이 겨우 코드 한 줄이라는 사실에 허무하기도 했음

: 확실히 JWT와 Node.js에 대한 기술 검토 후에 기능을 구현하려고 하니 어떻게 구현해야 할지 갈피가 잡히는 느낌이어서 신기하고 뿌듯했음

: Node.js도 처음에는 사용이 막막했지만 계속해서 접하고 사용하니 익숙해진 듯, 모르는 건 대부분 어려운 개념이 아니라 낯선 개념이라는 사실을 다시 한 번 체감하게 됨