ReferenceError: localStorage is not defined// localStorage는 서버에서는 사용할 수 없다.

 

 

토이 프로젝트를 만들면서 로컬스토리지 기능을 만들고 싶어졌다. 

그래서 구글링, 유튜브, 도서를 통해서 이것저것 시도 해보다가 도서관에서 '스무디 한 잔 마시며 끝내는 리액트 + TDD'을 빌렸다. 

왜냐면 여기에 로컬 스토리지 기능에 관한 부분이 있기 때문에!!

 

---

책에 나온 예제 코드는 아래와 같다. 

const addToDo = (toDo: string) : void => {
  if(toDo){
    const newList = [...toDoList, toDo];
    localStorage.setItem('ToDoList', JSON.stringify(newList));
    setToDoList(newList);
  }
}

const deleteToDo = (index:number) : void => {
  let list = [...toDoList];
  list.splice(index,1);
  localStorage.setItem('ToDoList', JSON.stringify(list));
  setToDoList(newList);
}

useEffect(()=> {
  const list = localStorage.getItem('ToDoList');
  if(list){
    setToDoList(JSON.parse(list));
  }
},[])

---

유저가 입력한 데이터와, 삭제할 쪽에는 localStorage.setItem()을 사용하고,

데이터를 렌더링 할 때는 localStorage.getItem()을 사용하였다.

 

그래서 나도 나의 토이 프로젝트에 그대로 적용하는데 문제가 발생했다. 

 

 

에러 코드

localStorage is not defined

 

이 에러코드를 접하고서, localStorage는 내장 메소드 인데 왜??? 못 찾는거지라고 생각했다. 

그리고 구글링을 통해서 알게 되었다. 

 

localStorage는 서버에서는 사용할 수 없다. 

 

지금 생각해보면 이름부터 localStorage!!

 

나의 식단 관리 앱은 서버 쪽에서 데이터를 추가하고, 삭제하고, 업데이트 한다. 

그래서 위의 예시를 보고 무작정 코드를 추가했는데 그러면 안되는 것이었다. 

 

 

if (typeof window !== 'undefined') {
  console.log('You are on the browser')
  // 👉️ can use localStorage here
} else {
  console.log('You are on the server')
  // 👉️ can't use localStorage
}

 

 

코드를 다른 쪽에 적용해봐야겠다. 

 

오늘의 배운점 localStorage는 서버에서는 사용할 수 없다. 

 

참고)

https://bobbyhadz.com/blog/javascript-referenceerror-localstorage-is-not-defined

Solve - localStorage is not defined Error in JavaScript | bobbyhadz