dev) 2.5 ~ 2.6 로그인/로그아웃 구현

이틀에 걸쳐 로그인 구현을 마쳤다.

 

내가 구상한 로그인 로직은 이러하다.

 

1. 회원가입과 동일하게 form을 통하여 input값을 받는다.

2. axios의 post를 통하여 id , password를 보낸다.

3. JWT 토큰을 백으로부터 발급 받는다.

4. JWT 토큰을 프론트단에서 보관한다.

5. 토큰이 있으면 로그인 상태, 토큰이 없다면 비로그인 상태

 

 

---

 

 

이 중 3번까지는 쉽게 완료가 되었으나 4번이 어려웠다...

JWT 토큰을 보관하기 위하여

 

local storage / session / cookie

 

3가지의 방법이 있었으나,

이미 팀원분이 local storage에 상품을 담는 방법을 어느 정도 구현을 하시고 계셔서 같이 local storage에 jwt토큰을 저장하기로 하였다.

 

이에 따라 두가지 단점이 존재 하긴 했는데

 

1) local storage는 JavaScript로 접근이 너무 쉽다

- 따라서 refresh token을 이용하여 보안을 강화하여야 하는데 이는 우선 로그인 로그아웃 구현 완료 후 추가로 고민해보기로 한다.

 

2) local storage를 장바구니와 함께 쓰는 문제

- 장바구니의 부분 삭제에서는 local storage의 아이템을 삭제하면 되므로 문제가 없겠지만, 전체 삭제가 걱정 된다. item의 key값이 accessToken인 것만 삭제하지 않고 전체를 삭제하는 방법이 뭐가 있을지 고민해 봐야 할 것 같은데 한번 구상해 보면

 

1. 장바구니의 상품에 체크 박스를 달고 클릭 또는 모두 선택으로 삭제를 하게 한다.

2. 모두 삭제 버튼을 전체 삭제로 두는데 일정 key 값을 갖는 것 들만 삭제 하게 한다.

 

두 방법을 한번 내일 고민해보도록 해야겠다. (어쩌면 토큰을 다른데 옮겨야 할지도...)

 

로그인 로직

 

1) useState를 통해 작성 값을 저장 (사진에서는 짤려서 보이지 않지만 email, password를 state로 설정해 두었다.)

2) 버튼을 onClick 하면 새로고침 방지 후 onSubmit 함수 실행

3) then catch문을 이용하여 post로 formdata를 구조 분해 하여 보내면 백에서 response로 토큰을 받고 그 토큰을 headers에Authorization으로 저장

4) alert 후 navigate로 메인이동

 

 

* alert은 사실 좋은 방향성은 아니지만 우선은 프로젝트 완료 전까지 console.log 대용 정도로 사용 후 최종으로 어떤 로직을 넣을지 고민

 

 

---

 

 

로그아웃은 사실 간단하다.

 

로그아웃 로직

 

removeItem으로 accessToken의 key를 가진 JWT토큰을 삭제하는 것으로 구현 완료

 

 

 

오늘의 느낀 점

1. 처음부터 구글링을 하는 것이 아닌 공부한 지식으로 로직을 먼저 생각하고 코딩을 하는 것이 실력에도, 실제 코드에도 훨씬 도움이 된다.

2. 이론상 맞는 로직이라면 문법이 틀리지 않는 한 정확하다.

 

이 느낀 점은 특히 프로젝트 전반적으로 느낀 점인데 처음부터 코드는 잘 써지지 않았지만 컴퓨터적 지식을 습득하는 것은 무언가 즐거웠다.

따라서 앞으로 남은 과정 + 프로젝트에서도 CS를 이해하고 있다면 충분히 실력향상을 이룰 수 있을 것이고

정말 기본이 제일 중요하다는 점을 다시 한번 느끼게 되었다.