[감정 일기장] 웹 스토리지 이용하기

🌟 웹 스토리지를 활용한 감정 일기장 프로젝트 🚀

웹 애플리케이션을 만들다 보면 데이터를 어디에 저장할지 고민하게 된다. 🧐
백엔드 서버를 구축하고 데이터베이스를 연동하면 좋겠지만, 가벼운 프로젝트라면 웹 스토리지(Web Storage) 만으로도 충분히 해결할 수 있다! 😆

이번에는 로컬 스토리지(localStorage) 를 이용해 감정 일기장 프로젝트 데이터를 저장하는 방법을 정리해보려고 한다. 📖✨

---

📌 웹 스토리지란?

웹 스토리지는 브라우저에서 데이터를 저장하는 방법 중 하나로, 데이터베이스처럼 사용할 수 있는 저장소라고 생각하면 된다! 🤓
별도의 프로그램이나 라이브러리 설치 없이 자바스크립트 내장 함수만으로 접근 가능하다. 🙌

웹 스토리지의 종류
📍 로컬 스토리지(localStorage) : 브라우저를 닫아도 데이터가 유지됨.
📍 세션 스토리지(sessionStorage) : 브라우저를 닫으면 데이터가 사라짐.

이 프로젝트에서는 로컬 스토리지(localStorage) 를 사용하여 감정 일기 데이터를 저장하고 관리할 예정이다! 📝

---

🔧 웹 스토리지 사용법

1️⃣ 데이터 저장하기

localStorage.setItem("person", JSON.stringify({ name: "silver" }));

객체 형태의 값들은 문자열(JSON) 로 변환해서 저장해야 한다. 💡

2️⃣ 데이터 불러오기

console.log(JSON.parse(localStorage.getItem("person")));

주의할 점 ⚠️
🚨 JSON.parse(undefined) 를 실행하면 오류 발생!
🚨 반드시 값이 null 또는 undefined가 아닌지 체크하고 사용하자!

3️⃣ 데이터 삭제하기

localStorage.removeItem("test");

이렇게 하면 해당 키에 저장된 데이터가 삭제된다! 🔥

---

🏗 로컬 스토리지를 활용한 감정 일기장 구현

기존의 reducer 코드를 변형하여 로컬 스토리지에 데이터를 저장하는 기능을 추가했다.

function reducer(state, action) {
  let nextState; 

  switch(action.type) {
    case "INIT":
      return action.data;
    case "CREATE": 
      nextState = [action.data, ...state];
      break;
    case "UPDATE": 
      nextState = state.map((item) => 
        String(item.id) === String(action.data.id) ? action.data : item
      );
      break;
    case "DELETE": 
      nextState = state.filter((item) => 
        String(item.id) !== String(action.id)
      );
      break;
    default:
      return state; 
  }

  // 🛠 변경된 데이터를 로컬 스토리지에 저장!
  localStorage.setItem("diary", JSON.stringify(nextState));
  return nextState;
}

✅ reducer 함수에서 데이터가 변경될 때마다 localStorage에 반영하도록 했다!

---

🎯새로고침해도 데이터가 유지되지 않는 문제 해결하기

처음에는 새로고침할 때마다 "존재하지 않는 일기입니다." 라는 경고창이 뜨면서 데이터가 제대로 불러와지지 않는 문제가 발생했다. ❌

이 문제의 원인은 useEffect에서 로컬 스토리지에서 데이터를 불러오는 작업이 완료되기 전에 커스텀 훅이 먼저 실행되었기 때문이다.
즉, data의 초깃값이 [](빈 배열)로 설정된 상태에서 컴포넌트가 먼저 렌더링되면서, 존재하는 일기임에도 불구하고 찾을 수 없다는 오류가 발생한 것이다.

 

📌 해결 방법
이를 해결하기 위해 isLoading이라는 새로운 state를 만들어 데이터 로딩이 완료될 때까지 UI를 조정했다.

const [isLoading, setIsLoading] = useState(true);

그리고 useEffect 내부에서 데이터가 정상적으로 로드되면 isLoading을 false로 변경하도록 수정했다.

useEffect(() => {
  const storedData = localStorage.getItem("diary");
  if (!storedData) {
    setIsLoading(false);
    return;
  }
  const parsedData = JSON.parse(storedData);
  if (!Array.isArray(parsedData)) {
    setIsLoading(false);
    return;
  }

  let maxId = 0;
  parsedData.forEach((item) => {
    if (Number(item.id) > maxId) {
      maxId = Number(item.id);
    }
  });

  idRef.current = maxId + 1;

  dispatch({
    type: "INIT",
    data: parsedData,
  });

  setIsLoading(false);
}, []);

마지막으로, isLoading이 true일 때는 "데이터 로딩 중입니다..." 문구를 출력하여 로딩이 완료된 후에만 화면이 렌더링되도록 했다. ✅

if (isLoading) {
  return <div>데이터 로딩중입니다...</div>;
}

✨ 이렇게 수정한 덕분에 새로고침을 해도 데이터가 사라지지 않고, 존재하는 일기를 정상적으로 불러올 수 있게 되었다! 🚀

---

🎨 결과 화면 예시

 

💾 일기를 저장하면 새로고침해도 데이터가 유지됨
📝 일기 수정 & 삭제 기능도 정상적으로 동작
🚀 데이터가 변경될 때마다 localStorage에 자동 저장

---

📌 마무리

이번에 로컬 스토리지를 활용한 감정 일기장 프로젝트를 개선해봤다!
✨ 로컬 스토리지를 활용하면 간단한 데이터 저장이 가능하고,
✨ 새로고침해도 데이터가 유지되는 장점이 있다!