getInitialProps 문제
일단 어제 밤에 안 되던 getInitialProps의 문제를 고쳤다!!
프론트서버쪽에선 실행이 안 되던게 아니었다!
처음 서버쪽에서 실행될 땐 redux-devtools에 잡히지 않았다. 그래서 내가 실행이 안 되는 줄 알고 있었다. console.log를 찍어보니깐 서버에서 실행될 땐 vsCode 콘솔에만 찍히더라. 그래서 로그를 찍어가며 다시 제대로 되게 바꾸었다!! 하지만 필요한 정보들이 더 있는 것들은 useEffect에서 하도록 조율을 하였다.
redux-logger 같은 미들웨어를 넣어서 로그가 제대로 나오게 해야하나라는 생각이 들었다.
그리고 역시 나의 실수인 코드가... 먼저 실행하는 값을 당연히 위에 적어놨어야 했는데 코드를 짜다가 꼬였는지 순서가 뒤바껴 있어서 에러가 났었다... 삽질 삽질
jwt 인증 방식 생각
처음엔 jwt를 로그인을 유지할거면 localStorage 유지 안 할거면 sessionStroage에 저장하여 관리하다가. 서버 사이드렌더링 할 때는 두 개의 스토리지에 접근할 수가 없는 것이다!! 당연하지... 둘다 웹스토리지니깐... 하하핳 그래서 어떻게해야할까 하다가 쿠키에 하자!!고 생각했다. 쿠키에 넣으면 서버에서도 접근이 가능했다. ctx.req.headers에 cookie가 들어있다. 그렇게 하고...
localStorage에 저장하는 것은 더 비추천한다는 글들을 많이 보았기 때문에 바꾸고도 싶었고 ㅎㅎ XSS 공격에 취약하는 말이 많았기 때문이다.
그래서 일단 쿠키에 저장하는게 여러모로 좋을거 같아서 쿠키에 jwt 저장하는 걸로 결정.
그리고 로그인 하고 나면 jwt를 반환해주는데 그거를 jwt-decode를 사용하여 유저 번호, 아이디 정도의 중요하진 않은 정보를 받아오고 있는데 이게 안전한 것인지 모르겠다. 그렇게 안전할거 같진 않은데 좀 더 찾아봐야겠다.
쿠키에 어떻게 저장하는지 몰라서 react-cookie 같은 라이브러리르 깔려다가 그냥 document.cookie를 사용해서 저장하기로 했다.
블로그들을 참고하여 쿠키에 jwt 저장, 삭제, 조회 하는 함수들을 만들었다.
그리고 jwt의 인증이 필요한 민감한 정보 조회, 수정과 돈에 관련 된 내용들은 jwt인증을 받기위해 header의 authorization에 jwt를 담아서 보내기로 하였다. 좀 귀찮아서 axios의 defaults에 담에서 모든 요청에 jwt를 담아 보내고 백엔드에서 있는건 비교하고 필요없는건 알아서 처리할 줄 알았는데 authorization이 있는 순간 우리는 인증이 필요한 요청이 되는 것 같다. 해봤는데 계속 에러가 뜨더라. 그래서 하나하나 필요한거에는 넣고 필요 없는 것에는 빼야지 라고 생각했다.
WebSocket 해보기
우리 프로젝트에 유저들간의 채팅 기능이 있으면 좋을 거 같아서 웹소켓에 대해 공부를 조금 했다. medium 블로그의 영어로 된 글을 보고 웹소켓을 통한 간단한 채팅 앱을 만들어봤다. react와 nodejs를 통해 만드는 글이었는데, 완전히 이해는 아니지만 어느정도 이해 할 수 있었다. 대학교 네트워크 시간에 과제로 소켓을 사용해서 채팅, 계산기 같은걸 만드는 과제를 했었는데 그 땐 아예 이해를 못 하고 그냥 어떻게 어떻게 했엇는데 지금은 조금이라도 이해 되는 것 같아 더 좋다. 좀 더 공부해서 제대로 이해해봐야겠다.
