개선 사항 - UniverseStop/FE GitHub Wiki

토큰 관리 개선, crypto-js 사용

필요성
- Token을 SessionStorage에 저장하는 경우, 보안성이 높지만 매번 재로그인을 해야한다는 점에서 사용자에게 불편함을 줄 수 있다.
개선방안
- Token 저장 위치를 변경하기로 했다.
  - 토큰 암호화 후 Cookie에 저장 또는 NextAuth 사용
- crypto-js 사용해 암호화한 후 Cookie에 저장
  - Cookie에 저장 시 인증된 상태 유지가 가능하다.
  - 토큰 정보를 직접적으로 노출시키지 않아 사용자 정보를 보호할 수 있다.
결과
- 인증 상태가 유지되어 사용자 경험이 향상되었다.
- Token 암호화로 정보가 노출되지 않아 보안성이 향상되었다.

필요성
- seo
  - 상세페이지의 제목, 내용 등과 같은 검색 엔진 노출은 사용자 수를 증가시킨다.
  - 서비스, 마케팅적인 부분에서 SEO의 필요성은 꾸준히 증대되고 있어 웹 서비스 개발자에게는 반드시 고려해야 할 대상으로 여겨진다.
- 사용자 경험 향상
  - pre-rendering과 hydration의 필요성 - 초기에는 SSR로 구현되지만 사용자-페이지간 상호작용이 있을 때에 CSR 방식으로 브라우저에서 처리되어야 한다.
개선방안
- GetServerSideProps의 hydration 기능 사용하여 SSR 구현하였다.
- GetStaticProps 보다 성능은 떨어지지만, 내용을 언제든 동적으로 수정할 수 있다.
결과
- hydration 과 react-query의 결합으로 SEO 에도 최적화되지만 state 변경시에도 새로고침없이 페이지에 변경사항이 반영된다.
- hydration 으로 서버에 정보를 직렬화 시켜주어 HTML 안에 모든 data가 다 만들어져 있다.
- 첫 로드 이후 반영되는 변경사항은 react-query의 사용으로 클라이언트 측에서 렌더링 처리된다.

필요성
- seo
  - title 요소는 검색 결과에서 페이지의 제목으로 표시되며, 사용자에게 페이지의 내용을 간략하게 소개한다.
  - 메타 태그는 검색 엔진에 페이지의 설명, 키워드 및 기타 정보를 제공하는 데 사용된다.
  - 검색 엔진은 웹 페이지의 타이틀과 메타 태그를 통해 페이지의 내용을 이해하고 순위를 매길 수 있다.
- 사용자 경험 향상
  - 브라우저 탭의 제목은 사용자가 다른 탭 간에 웹 페이지를 식별하는 데 도움이 된다.
  - title 과 메타 태그를 올바르게 설정하면 사용자에게 현재 페이지에 대한 명확한 정보를 제공할 수 있다.
- 소셜 미디어 공유
  - 소셜 미디어에서 링크를 공유할 때, 제목과 메타 태그는 공유된 링크에 표시되는 정보를 제공한다
  - 이를 통해 소셜 미디어 사용자들이 콘텐츠를 미리 파악할 수 있다
개선방안
- title과 meta태그를 이용해 각 페이지의 정보들을 넣어준다
결과
- _app.tsx 폴더에 웹 사이트 전체에 공용으로 사용될 타이틀을 넣고 디테일 페이지에는 GetServerSideProps로 가져온 정보들을 메타데이터에 넣어주었다.