지금까지 작성한 결과물을 동작을 확인해보고 회고록을 작성한다.
👀 결과물(캡쳐)
로그인 화면
초기 로그인된 적이 없기 때문에 로그인 페이지가 렌더링 된다.
(recoil의 상태값 loginInfo로 체크)
이후 db에 저장된 정보로 로그인을 처리하고 서버쪽으로 응답을 받는다.
여기서 일치한다면 서버쪽에선 세션에 정보를 저장한다.
이후 정상적으로 응답을 받았다는 메시지를 통해 recoil쪽에 로그인된 유저라는 흔적용으로 로그인ID를 등록한다.
loginInfo에 값이 생겼기 때문에 MyInfo페이지로 렌더링된다.
마이페이지
변경된 MyPage 컴포넌트에선 useEffect에 의해 rest api로 현재 세션에 담긴 유저의 정보를 달라고 요청한다.
세션이 아직 살아있는 상태라면 세션에 등록된 id정보를 통해 유저 테이블에서 조회 후 적절한 데이터를 json으로 제공한다.
다만, React에서 recoil의 상태값은 새로고침하는 순간 날라간다.
이점을 임시적으로 처리하기 위해 로그인 페이지 useEffect에서 세션에 로그인된 정보가 있다면 recoil에 강제로 값을 처리하고 MyPage로 넘어가도록 처리해주었다.
강제로 새로고침을 많이 하게되면 서버와의 통신도 많아지고 효율적이지 못한 동작이 될 수 있다.
로그아웃
로그아웃을 요청하는 rest api가 처리되면 서버측에서 세션에 담긴 로그인 정보를 destory처리한다.
이후 응답에 따라 recoil상태값을 비워서 다시 로그인페이지로 렌더링 될 수 있게 하였다.
🤔 작업 후기
가볍게 노드서버도 익혀보고 리액트도 붙여서 동작을 해보려고 만만하게 보고 시작했는데, github에 소스도 올리고 블로그에 지금까지 사용된 라이브러리나 소스코드를 정리하다 보니 시간이 많이 걸렸다.
의외로 서버쪽 처리하는 부분을 설정하는게 시간을 많이 잡아먹었는데, 노드에 대해서 하나도 모르고 접근하다보니 시간 낭비하는 작업이 좀 많았던 것 같다.
일단 로그인 세션처리야 서버측에서 알아서 해주니 어느정도 작업을 마치고부턴 큰 문제가 없었는데, recoil로 유저의 정보를 담다보니 효율적이 못하다는 생각이 들었다. redux나 recoil에 localstorage를 붙여보는 방법 등등을 연구해보고 추가 글을 작성해보아야 할 듯 하다.
아래는 작업 해 본 내용을 정리한 글이다.
https://myhappyman.tistory.com/301
https://myhappyman.tistory.com/302
https://myhappyman.tistory.com/303
아래는 github에 지금까지 작성한 소스 부분을 올려놨다.
중간중간 가볍게 유효성검사나 로직등을 수정할 수도 있다.
'WEB > React' 카테고리의 다른 글
| React - hook 파헤치기(useMemo) (0) | 2023.06.05 |
|---|---|
| React - typescript 버전으로 변경하면서 오류 해결 (0) | 2023.06.05 |
| React - Node JS와 로그인 연동 해보기03(뷰 추가) (0) | 2023.05.25 |
| React - Node JS와 로그인 연동 해보기02(서버 추가 설정) (0) | 2023.05.25 |
| React - Node JS와 로그인 연동 해보기01(server, client 작성하기) (0) | 2023.05.24 |