Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
Tags
- BFS
- 아키텍처
- Study
- 자바스크립트
- next.js
- typescript
- Docker
- error
- 알고리즘
- Solid
- svgr
- 타입
- type
- javascript
- 타입스크립트
- 프론트엔드
- DFS
- 다이나믹프로그래밍
- DAILY
- Primitive
- 리액트
- Component
- jest
- react
- SVG
- nextjs
- docker-compose
- 백준
- test
- Unit Test
Archives
- Today
- Total
`프론트엔드 개발자` 개형이의 벽돌집
Next js에서 sessionStorage is not defined 문제 해결 방법 본문
개발 중에 발견한 문제에 대한 해결책을 간단하게 적어두려 한다.
우선 Next Js는 SSR이라는 점을 꼭 기억해야 한다!!
무턱대고 sessionStorage 혹은 localStorage (그 외 window 함수..)를 사용하려고 하면 다음과 같은 에러메시지를 발견할 것이다.
ReferenceError: sessionStorage is not defined
발생하는 이유를 간략하게 설명한다면...
CSR (Client Side Rendering) 작업에 익숙한 경우 서버에서 localStorage에 액세스할 수 없는 경우가 발생할 수 있다. 이는 localStorage가 `window` 객체에 정의되어 있지 않고 Next.js가 클라이언트 사이드 렌더 전에 서버 사이드 렌더를 수행하기 때문이다.
따라서 이러한 문제를 해결하기 위해서는 window 객체의 존재 유무를 살피고 window 함수에 접근한다면 에러메시지가 발생하지 않을 것이다.
// 이와 같이 접근할 경우 에러메시지가 발생한다.
const accessToken = sessionStorage.getItem('accessToken');
// window 객체가 존재하는지 확인하고 접근할 경우 정상적으로 접근된다.
const accessToken = typeof window !== 'undefined' ? sessionStorage.getItem('accessToken') : null;
그리고 위 방법 이외에도 useEffect에서 window 객체에 접근하면 에러가 발생하지 않는다. 간단하게 설명하자면 useEffect는 클라이언트 사이드의 함수이기 때문이다.
따라서 두가지 방법중 상황에 맞게 선택하여 사용하면 될 듯 하다...!

Next.js 를 사용한 개발이 미숙하다보니 아직은 좀 더 익숙해져야 할 것 같다.
강해지고싶다...!!
'Next.js' 카테고리의 다른 글
[Storybook] 스토리북 환경에서 svg 파일 사용하기 (feat. svgr) (0) | 2024.02.14 |
---|---|
[next-pwa] Manifest doesn't have a maskable icon 해결하기 (1) | 2023.12.05 |
Next.js 와 Svg, Material UI SvgIcon 다루는 방법 알아보기 (0) | 2023.08.02 |
Next.js getServerSideProps에서 발생한 500 - Internal Server Error 해결하기 (0) | 2022.07.11 |
Comments