codestates / codestates/Subllet

[ERR] localStorage 저장 데이터는 반드시 JSON으로

Open
#121 0 comments 0 reactions 1 assignee Claimed by @namooni View on GitHub
ERR
Dominant language
JavaScript
Stars
0
Forks
0
PR merge metrics
No merged PRs in 30d

Description

### 어떤 에러인가요?
- localStorage와 redux store에서 관리하는 state와의 데이터를 주고 받을때,
객체가 JSON 형식인지, 일반 객체 형식인지에 따라 Browser가 render될 때 발생하는 오류

### 에러 메시지
```shell
Error: A cross-origin error was thrown. React doesn't have access to the actual error
object in development. See https://reactjs.org/link/crossorigin-error for more information.
```

### 에러 핸들링 방법
- 처음에는 CORS 에러인줄 알았으나, 이미 server에서 middleware를 통해
CORS 설정을 해줬기 때문에 무엇이 문제인지 갈피를 잡지 못했다.
서칭 결과, 이 에러는 localStorage에 저장되는 데이터는 JSON 형태로 담겨야 하므로
undefined이거나 null, 또는 stringified 되지 않은 형태로 들어가면 발생한다는데,
내 코드에서는 undefined이거나 null일때는 에러가 뜨지 않고,
특정 컴포넌트가 재 렌더링 될 때 발생했다.
때문에 마지막 대목인 "stringified 되지 않은 형태" 를 생각해보니,
이런, localStorage에 setItem 해줄 때 데이터 값을 stringify하지 않았다.
때문에 해당 컴포넌트를 렌더링 할 때 localStorage에 일반 객체 형태로 저장되고,
에러가 발생한 것이다.
해당 데이터를 JSON.stringify해주니 정상적으로 작동됐다.
피곤하다보니 집중력도 떨어지고 컴포넌트가 많아지다보니 사소한 부분을 놓치게 됐다.
정신을 똑바로 차리자!

```js
useEffect(() => {
window.localStorage.setItem("isLogin", state.isLogin);
}, [state.isLogin]);
// 기존 코드. state.isLogin을 그대로 보내주고 있다.

useEffect(() => {
window.localStorage.setItem("isLogin", JSON.stringify(state.isLogin));
}, [state.isLogin]);
// 수정한 코드. JSON.stringify해줘서 보내줬다.
```

### 에러 핸들링을 위해 참고한 레퍼런스 링크
링크

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.