• 로그인은 JWT 방식을 활용했습니다.
  • 지급 받은 Refresh Token 과 Access Token 을 어디에 저장할 지 고민하던 중 Refresh Token은 local storage에, Access Token은 Redux를 이용하여 store에 저장하여 사용했습니다.
  • Access Token의 경우 탈취의 위험이 있기 때문에 브라우저 저장소가 아닌 store에 저장하기로 했습니다.
  • 브라우저를 새로고침 할 때마다 값이 초기화되는 불편함이 있지만, Refresh Token을 이용해 재발급을 받으면 됩니다. 이 경우 매번 Refresh Token과 Access Token이 재발급되어 갱신된다는 장점이 있다고 봤습니다.

    • 참고 자료 : JWT는 어디에 저장해야할까? - localStorage vs cookie (velog.io)

      Refresh Token의 경우 로컬 스토리지 - 세션 스토리지 - 쿠키 사이에서 많은 고민을 했다. 사용하기 편한 것은 스토리지에 저장하는 것인데 두 스토리지 모두 XSS 공격에 취약한 단점이 있기 때문에 쿠키에 저장하기로 결정했다.

  • 추가로 토큰을 쿠키에 담아서 백엔드에서 처리하는 경우 기존의 API 내용을 고쳐야 해서 바쁜 일정에 고치기 힘든 부분이었기에 local storage를 사용했습니다.
    • 참고 자료 : 🍪 프론트에서 안전하게 로그인 처리하기 (ft. React) (velog.io)
  • 구현 참고 자료 : [React17]React에서 JWT 인증 구현하기 - JIN Dev (5xjin.github.io)

My page

1. My Wish

   • 사용자가 생성했던 위시를 확인할 수 있는 공간입니다.
   • 해당 위시의 완료 여부, 위시 Title, 축하해주신 분의 수와 각 참여자의 프로필, 카테고리 아이콘 등의 필요 정보만을 담고 있는 카드들을 볼 수 있습니다.
   • 자세한 사항을 보고 싶으면 해당 카드를 눌러서 해당 위시 카드를 눌러서 상세 정보를 확인할 수 있습니다.

2. Joined Wish

   • 사용자가 다른 위시에 참여한 내용을 확인할 수 있는 공간입니다.
   • 보낸 선물탭을 선택하면 해당 위시에 참여한 선물 이름과 결제한 금액, 결제 시각을 확인할 수 있습니다.
   • 보낸 축하 카드 탭을 선택할 시 해당 위시에 참여할 때 작성한 카드를 다시 확인할 수 있습니다.

3. Friends

   • 해당 화면에서는 자신의 일촌을 확인하고 삭제할 수 있습니다.
   • 또한 사용자에게 일촌 신청을 한 사람을 확인 후 승락/거부 여부를 선택할 수 있습니다.
   • 일촌의 위시 중에 진행 중인 위시가 있으면 확인할 수 있으며, 간단한 정보를 확인 후 해당 위시 카드를 선택하여 자세한 내용을 확인할 수 있습니다.