개선 사항 - UniverseStop/FE GitHub Wiki
토큰 관리 개선, crypto-js 사용
-
필요성
- Token을 SessionStorage에 저장하는 경우, 보안성이 높지만 매번 재로그인을 해야한다는 점에서 사용자에게 불편함을 줄 수 있다.
-
개선방안
- Token 저장 위치를 변경하기로 했다.
- 토큰 암호화 후 Cookie에 저장 또는 NextAuth 사용
- crypto-js 사용해 암호화한 후 Cookie에 저장
- Cookie에 저장 시 인증된 상태 유지가 가능하다.
- 토큰 정보를 직접적으로 노출시키지 않아 사용자 정보를 보호할 수 있다.
- Token 저장 위치를 변경하기로 했다.
-
결과
- 인증 상태가 유지되어 사용자 경험이 향상되었다.
- Token 암호화로 정보가 노출되지 않아 보안성이 향상되었다.
SSR 구현, GetServerSideProps 적용
-
필요성
- seo
- 상세페이지의 제목, 내용 등과 같은 검색 엔진 노출은 사용자 수를 증가시킨다.
- 서비스, 마케팅적인 부분에서 SEO의 필요성은 꾸준히 증대되고 있어 웹 서비스 개발자에게는 반드시 고려해야 할 대상으로 여겨진다.
- 사용자 경험 향상
- pre-rendering과 hydration의 필요성 - 초기에는 SSR로 구현되지만 사용자-페이지간 상호작용이 있을 때에 CSR 방식으로 브라우저에서 처리되어야 한다.
- seo
-
개선방안
- GetServerSideProps의 hydration 기능 사용하여 SSR 구현하였다.
- GetStaticProps 보다 성능은 떨어지지만, 내용을 언제든 동적으로 수정할 수 있다.
-
결과
- hydration 과 react-query의 결합으로 SEO 에도 최적화되지만 state 변경시에도 새로고침없이 페이지에 변경사항이 반영된다.
- hydration 으로 서버에 정보를 직렬화 시켜주어 HTML 안에 모든 data가 다 만들어져 있다.
- 첫 로드 이후 반영되는 변경사항은 react-query의 사용으로 클라이언트 측에서 렌더링 처리된다.
title과 metaData
-
필요성
- seo
- title 요소는 검색 결과에서 페이지의 제목으로 표시되며, 사용자에게 페이지의 내용을 간략하게 소개한다.
- 메타 태그는 검색 엔진에 페이지의 설명, 키워드 및 기타 정보를 제공하는 데 사용된다.
- 검색 엔진은 웹 페이지의 타이틀과 메타 태그를 통해 페이지의 내용을 이해하고 순위를 매길 수 있다.
- 사용자 경험 향상
- 브라우저 탭의 제목은 사용자가 다른 탭 간에 웹 페이지를 식별하는 데 도움이 된다.
- title 과 메타 태그를 올바르게 설정하면 사용자에게 현재 페이지에 대한 명확한 정보를 제공할 수 있다.
- 소셜 미디어 공유
- 소셜 미디어에서 링크를 공유할 때, 제목과 메타 태그는 공유된 링크에 표시되는 정보를 제공한다
- 이를 통해 소셜 미디어 사용자들이 콘텐츠를 미리 파악할 수 있다
- seo
-
개선방안
- title과 meta태그를 이용해 각 페이지의 정보들을 넣어준다
-
결과
- _app.tsx 폴더에 웹 사이트 전체에 공용으로 사용될 타이틀을 넣고 디테일 페이지에는 GetServerSideProps로 가져온 정보들을 메타데이터에 넣어주었다.