codestates / codestates/BanThing

[Error Handling] ReferenceError: localStorage is not defined

Open
#153 0 comments 0 reactions 1 assignee Claimed by @slight-snow View on GitHub
client error solved
Dominant language
TypeScript
Stars
0
Forks
2
PR merge metrics
No merged PRs in 30d

Description

### 어떤 에러인가요?
- 로그인을 하면 accessToken 이 `localStorage.setItem('accessToken', accessToken);` 를 통해
localStorage 에 'accessToken' 이라는 key 값에 저장이 됩니다.
- My Page 에서 `const accessToken = localStorage.getItem('accessToken');` 를 통해
localStorage 에 저장되어있는 accessToken 을 호출하여 user 의 정보를 받아오려고 했습니다.
- Landing Page, Main Page 와 같은 다른 페이지에서 My Page 로 이동할 때는 정상적으로 작동하였으나,
My Page 에서 새로고침을 했을 경우에는 아래와 같은 ReferenceError 가 나타났습니다.

```javascript
const accessToken = localStorage.getItem('accessToken');
```

### 에러 핸들링 방법
- 검색을 통해 window 의 type 이 `undefined` 가 아니며, localStorage 가 존재할 경우에
저 코드가 작동하도록 조건문을 만들어주면 된다는 것을 알게 됐습니다.
```javascript
if (typeof window !== 'undefined' && window.localStorage) {
const accessToken = localStorage.getItem('accessToken');
}
```
- 위와 같이 작성하니 새로고침을 해도 ReferenceError 없이 정상적으로 잘 작동했습니다 :)

### 에러 핸들링을 위해 참고한 레퍼런스 링크
[Reddit](https://www.reddit.com/r/nextjs/comments/ncy648/referenceerror_localstorage_is_not_defined/)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.