❗️문제

• 우리는 로그인 기능을 JWT를 이용해 구현했다.

  JWT(JSON WEB TOKEN)란 웹에서 사용되는 JSON 형식의 토큰에 대한 표준 규격으로, 주로 사용자의 인증 또는 인가 정보를 서버와 클라이언트간에 안전하게 주고 받기 위해 사용된다.

• 로그인 인증 방식에서 localhost와 문제가 발생했다.

  auth 페이지에서 알맞는 이메일과 비밀번호를 전송한다면, JWT를 cookie에 담아서 보내는 형식으로 설정했다.

  • 'api.xxx.xxx/xxx'에 데이터를 요청했을 때 해당 페이지에 JWT가 와있다면 데이터를 보여주고 없다면 401 ERROR를 출력하게 설정했다.
  • 이때, cookie의 세팅에 Same-site:none, Secure:true로 설정함으로써 http에서는 쿠키를 가져올 수 없게 했다.

  하지만 localhost:3000/은 https가 아닌 http 사이트로 해당 쿠키를 가져오지 못하기 때문에 인증정보를 받지 못해서 local 환경에서 api를 요청하면 401 ERROR가 발생했다.

  🔍 해결 방안

• MSW(Mock Service Worker) 도입

  MSW란, API Mocking 라이브러리로, 서버향의 네트워크 요청을 가로채서 모의 응답(Mocked response)을 보내주는 역할을 합니다. 따라서, Mock Service Worker(MSW) 라이브러리를 통하면, Mock 서버를 구축하지 않아도 API를 네트워크 수준에서 Mocking 할 수 있습니다.
  참조 : Mocking으로 생산성까지 챙기는 FE 개발

  • 즉 정리하자면, 기존의 API서버에 요청은 보내지만, local 서버에서는 지정해둔 Mock Data를 브라우저에서 API 요청을 가로챈 뒤 보내주는 것이다.

😩 여기서 문제가 발생한다.

• 지난 게시물에서 우리는 SEO를 위해서 NEXT.JS의 SSG 랜더링 방식을 선택했다. 하지만 MSW를 도입해서 작업을 하는데 MSW가 API요청을 가로채기 전에 pre-rendering에 의해 이미 데이터를 요청 받아 출력했기 때문에 MSW가 작동하지 않았던 것이다.

• 앞으로 Back-end와 Front-end에서 작업속도를 올리기 위해서는 MSW를 계속 사용하기로 약속된 상태에서 이러한 문제를 직면해서 어떻게 해야할지 팀원과 이야기를 나눴다.

• 그 결과 우리는 그동안 작업했던 Next.Js를 포기하고 React.Js로 migration한 뒤 CSR 방식을 사용하기로 했다.

🙁 Migration 했을 때 문제점은 없을까?

• Next.Js에서 React.Js로 옮기기로 했을 때 가장 신경쓰였던 부분이 있었다. 우리는 왜? Next를 선택했지? 해당 질문의 답은 전 게시물에 있다.

  스터디니까 SEO가 꼭 필요하지 않나요? 그러면 저희 SSR이나 SSG를 사용해보는게 어떨까요?!

• 맞다. 우리는 SEO에 도움이 되는 SSR 또는 SSG를 선택했었다. 하지만 CSR을 선택하면 SEO를 포기해야하나...라고 생각했고, 해당 부분에 대해서 검색을 했다.

• 검색 결과 우리는 해답을 찾을 수 있었는데, AWS의 S3를 이용해 배포를 하고, Cloud Front의 Ramda@Edge를 이용하면 CSR에서 부족한 SEO 최적화를 도와준다는 글을 읽었다. 해당 부분은 추후에 공부를 한 뒤에 남길 예정이다.

🥲 Next 안녕...