20211020-TIL

노강표 Noh Gang Pyo ·2021년 10월 20일

클론코딩 3일차

회원가입,로그인,로그아웃,로그인체크까지의 기능을 끝냈다. 팀원들에게도 이해한 내용을 코드를보며 설명해드렸고 이해하는데 별 무리가 없으셨었다. 로그인은 jwt토큰 기반으로 api요청을 보낼때마다 헤더에 포함시켜 서버에서 이를 확인하고 api응답을 전송해주는 방식이다. 리덕스의 특성상 페이지에서 새로고침을 하게되면 값이 날아가게되는데, 이떄 유저의 로그인 정보도 또한 사라진다. 따라서 새로고침을 할떄마다 브라우저에 session storage에 저장된 토큰을 헤더에포함시켜 요청을보내면 서버에서 이를 확인후 사용자의 정보를 보내주고 이를 다시 리덕스에 저장하여 새로고침이 되어도 로그인이 유지되는것처럼 구성하였다. 이 요청의 위치는 새로고침시 렌더링되는 최상단의 컴포넌트에 해당하는 app컴포넌트에 리액트에서 제공하는 훅중 하나인 useEffect를 활용하여 새로고침이 될떄마다 서버에 로그인정보를 요구하는 식으로 구성하였다. 세션에 토큰을 담거나 지우거나 가져오는 단계가 생각보다 간단하여 쉽게 이해할 수있었다. 회원가입을 하고 로그인을했을시, 응답status로 200값을 주는데도불구하고 이메일이 등록되어있지않은 문제가 발생했었는데, 백엔드 담당자분과 코드를공유하며 문제를 찾아나가다가 내쪽에서 api명세서대로 키값을 전송해주지않아 제대로 값이 전달되지않았었다... api명세서를 참고하여 작성하지 않은 내잘못이였다. 그렇게해서 문제를 해결하니 정상적으로 유저의 정보가 들어왔었다. 팀원분들의 담당 기능중 장바구니에 담긴 목록의 총 합계를 계산하여 페이지에 보여주는 로직을 서버단에 맞기지않고 프론트에서 처리하여 연습겸 해서 팀원들과 함꼐 고민을 해보았으나...결국 서버단에서 총합계를 받아오는걸로해서 자체적으로 해결하지는 못했다. 그런데 충분히 리덕스를 이해하는데 도움이되었고, 논리구조를 좀더 생각해볼수있었다.

profile
FE developer 🙂

0개의 댓글