-
세션 스토리지 에러 (ReferenceError: sessionStorage is not defined)개발공부/Next.js 2024. 1. 8. 14:36
export function getSession(key: string) { // Next.js는 클라이언트 사이드 렌더 전에 서버 사이드 렌더를 수행하기 때문에 window 객체의 존재 여부 확인 후 접근할 수 있도록 함. const token = typeof window !== "undefined" ? sessionStorage.getItem(key) : null; return token && token.trim() !== "" ? token : ""; }
요즘 지인들과 Next.js 사용해서 프로젝트 진행중인데, 발생했던 문제를 기록해두면 좋을 거 같아 글을 쓴다.
문제 발생
초반에는 Cookie에 토큰 정보를 저장했었는데 팀원들과 논의한 결과 보안측에서 장점이 있는 세션 스토리지(Session Storage)로 변경하기로 결정했다.
(저장소에 대한 내용은 아래 글에서 다뤘었다.)
https://hani-develop-history.tistory.com/55
브라우저 저장소의 차이점
프론트엔드 개발자는 언제 어떤 저장소를 사용해야 하는지 판단 할 수 있어야 한다. 이를 위해서는 브라우저 저장소의 종류 및 특징을 정확하게 알고 있어야 해서 오늘은 이를 공부하고자 한다!
hani-develop-history.tistory.com
해당 부분을 내가 담당하기로 해서 저장소를 Cookie => Session Storage로 변경했는데 세션 스토리지를 찾을 수 없다는 에러가 발생했다.
내가 알기론 세션 스토리지는 브라우저에서 제공하는 기능이라서 안되는게 이상한데... 이런 상황이 발생해서 굉장히 당황스러웠다.
export function getSession(key: string) { if (key.trim() === "") return ""; // key 값이 없는 경우 빈 문자열 return return sessionStorage.getItem(key); }
문제 원인
원인은 바로..! Next.js 특징을 생각해보지 않았기 때문이다.
Next.js에서 SSR는 페이지를 서버에서 미리 렌더링하여 HTML을 생성한 후, 클라이언트에게 전달한다.
그래서 SSR의 전역 객체인 window, document와 같은 클라이언트 측의 DOM 객체에 접근할 수 없다.
즉, 페이지가 클라이언트에 로드될 때 까지 세션 스토리지에 접근이 불가능하다.
문제 해결
해당 문제를 해결하기 위해서는 조건문이 필요하다는 사실을 알게 되어 아래와 같이 코드를 수정하였더니 문제가 해결되었다!
export function getSession(key: string) { // Next.js는 클라이언트 사이드 렌더 전에 서버 사이드 렌더를 수행하기 때문에 window 객체의 존재 여부 확인 후 접근할 수 있도록 함. const token = typeof window !== "undefined" ? sessionStorage.getItem(key) : null; return token && token.trim() !== "" ? token : ""; }
경험
기존에 React 프로젝트에서 잘 사용하던 친구들이 Next.js의 특징 때문에 사용할 수 없는 경우가 있을 수도 있으니
앞으로 사전 조사를 더욱 꼼곰하게 해야겠다.
728x90'개발공부 > Next.js' 카테고리의 다른 글
[Next.js, Node.js] 토큰 암호화 (crypto-js) (0) 2024.02.22 [Next.js] NextAuth 사용해 카카오톡 로그인 구현 (0) 2024.02.21 [Next.js] Hydration failed 에러 해결 (Unhandled Runtime Error) (0) 2024.02.17 Next.js에서 카카오 지도 사용하기 (0) 2024.01.25 Next.js (0) 2023.11.30