github 소셜 로그인을 지원하다보니 현재 유저의 로그인 여부를 보여주는데 문제가 되었다. 같은 세션인 백엔드(localhost:8000)에서는 current api 가 성공적으로 데이터를 보여주지만… react 즉 프론트(localhost:3000) 쪽에서는 보여지지 않는다. 세션이 다르기 때문이다….
안아아아돼애애애애!
세션이 다르더라도 JWT 토큰 처럼 브라우저가 해당 유저임을 인증만 한다면 로그인 여부를 전달해 줄 수 있다. 혹은 백엔드에서 해당 화면을 그려주면 되는 문제였다..
SSR vs CSR
방법을 찾다가 SSR 방식을 이용해서 구현하기로 하였다.. CSR 쪽으로 하기엔 SEO 최적화하는게 어려울 것 같아서다. 방법이 있다곤 했지만, 그보다는 SSR이 더 좋아보였다. SSR에서는 서버에서 화면을 그리고 넘겨주는 방식으로 백엔드에서 요청을 하면 화면을 그려줄 render 서버가 필요했다. 이 Next.js가 좋다는 이야기를 듣고 React → Next.js 로 전환하기로 하였다. (Next.js로 두고 나중에 express로 확장 가능하다.)
사실 마이그레이션이 크게 어렵지는 않았다. 내 경우 일단 다른 폴더에 next.js를 만들고, 원래 작업폴더에 내용을 옮기고 삭제하기를 반복했다. next를 설치하는데 오류가 있어서 각각 아래와 같이 진행했다.
# next install
npm i -g next
# Cannot find module 'babel-plugin-styled-components' Error
# ''안에 해당하는 값을 넣으면 된다.
npm install --save-dev babel-plugin-styled-components