feat(app): 회원 가입 완료시 JWT 토큰을 쿠키로 저장하고 인증이 필요한 요청에 Bearer 헤더를 설정하도록 합니다.

[innocarpe]

📌 이슈 링크

• close 🌟 FEATURE: [4 Week] 로그인/회원가입 등 유저 기능을 개발합니다. #127

📖 작업 배경

• 아티클 쪽 개발이 어느정도 끝나서, 인증과 관련된 개발을 시작합니다.
• 일단 JWT 토큰 핸들링을 먼저 한 뒤에 피쳐 개발을 해야 할 것 같아 이 작업만 분리해 진행해 봅니다.

🛠️ 구현 내용

• RegisterService 에 에러 시의 로깅이 따로 없었어서 간단하게 추가했습니다.
• JWT 토큰을 쿠키에 저장하도록 js-cookie 의존성을 workspace 에 추가하고 jwtUtils 라는 파일을 작성합니다.
• useRegister 훅에서 회원 가입이 완료될 때 얻을 수 있는 JWT 토큰을 쿠키에 저장하도록 합니다.
• 인증이 필요한 통신을 위해 authApi 라는 것을 만들어 두었었는데 이걸 통해 요청을 할 때 JWT 쿠키가 있는지 확인해 Bearer 헤더를 설정해 주도록 합니다.

💡 참고사항

• JWT 토큰 저장을 서비스 단에서할 지 custom hook 에서 할지 고민이었는데 서비스는 순수하게 네트워크 통신 쪽만 담당하도록 계속 유지하는게 좋을 듯 해서 hook 단에서 처리를 하도록 해보았어요.
• JWT 토큰을 최대한 안전하게 처리하고 싶지만, 저는 CSR로 구현했고 쿠키를 다시 읽을 수는 있어야 해서, secure 와 sameSite 정도의 설정만 할 수 있었습니다. CSR 기반일 때 현 상태에서 더 좋은 구현은 없을지 궁금하네요..!