JavaScript Academy · 강의

JSON으로 객체 저장하기

객체를 직렬화하여 저장하고 다시 가져옵니다.

JSON으로 객체 저장하기은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

저장소에는 문자열만 저장됨

웹 저장소는 문자열을 저장하므로 객체를 직접 저장할 수 없습니다. 객체를 저장하면 쓸모없는 텍스트 "[object Object]"가 됩니다. 해결 방법은 JSON을 사용하는 것입니다.

localStorage.setItem("user", { name: "Ada" });
console.log(localStorage.getItem("user")); // "[object Object]"

JSON.stringify로 직렬화하기

저장하기 전에 JSON.stringify로 객체를 JSON 문자열로 변환하십시오.

const user = { name: "Ada", age: 36 };
localStorage.setItem("user", JSON.stringify(user));

JSON.parse로 역직렬화하기

읽을 때는 JSON.parse로 문자열을 다시 객체로 변환하십시오.

const raw = localStorage.getItem("user");
const user = JSON.parse(raw);
console.log(user.name); // "Ada"

왕복 변환

전체 패턴은 저장할 때 문자열화하고 읽을 때 구문 분석하는 것입니다. 객체와 배열 모두에 적용할 수 있습니다.

localStorage.setItem("nums", JSON.stringify([1, 2, 3]));
const nums = JSON.parse(localStorage.getItem("nums"));
console.log(nums[0]); // 1

null 상황 처리하기

JSON.parse(null)은 null을 반환하며 오류를 발생시키지 않습니다. 하지만 데이터가 없을 때 구문 분석하면 예상하지 못한 결과가 생길 수 있으므로 대체 기본값을 제공하십시오.

const raw = localStorage.getItem("settings");
const settings = raw ? JSON.parse(raw) : {};

손상된 데이터에 대비하기

저장된 JSON의 형식이 잘못되면 JSON.parse가 SyntaxError를 발생시킵니다. 하나의 잘못된 항목 때문에 앱 전체가 중단되지 않도록 try/catch로 감싸십시오.

function readJSON(key, fallback) {
  try { return JSON.parse(localStorage.getItem(key)) ?? fallback; }
  catch { return fallback; }
}

재사용 가능한 저장 도우미

문자열화 단계를 도우미로 감싸서 절대 빼먹지 않도록 하십시오.

function saveJSON(key, value) {
  localStorage.setItem(key, JSON.stringify(value));
}
saveJSON("cart", [{ id: 1, qty: 2 }]);

JSON에서 제외되는 값

JSON은 함수, undefined, Date 객체(문자열로 변환됨), Map, Set을 표현할 수 없습니다. 이에 맞게 설계하십시오. 날짜는 ISO 문자열로 저장하고 읽을 때 다시 생성하십시오.

const obj = { fn: () => 1, when: new Date() };
console.log(JSON.stringify(obj)); // {"when":"2026-..."}

날짜 복원하기

날짜는 문자열로 직렬화되므로 Date 메서드가 필요하다면 구문 분석한 후 다시 날짜로 변환하십시오.

const data = JSON.parse(localStorage.getItem("event"));
data.when = new Date(data.when);

중첩 데이터 업데이트하기

저장된 객체의 일부를 변경하려면 객체를 읽고, 복사본을 수정한 다음, 다시 저장하십시오. 저장소에는 부분 업데이트 API가 없습니다.

const cart = JSON.parse(localStorage.getItem("cart")) || [];
cart.push({ id: 9, qty: 1 });
localStorage.setItem("cart", JSON.stringify(cart));

저장된 형태 버전 관리

앱 데이터의 형태는 시간이 지나면서 바뀝니다. version 필드를 저장하면 형식이 변경될 때 이전 데이터를 마이그레이션하거나 삭제할 수 있습니다.

saveJSON("prefs", { version: 2, theme: "dark" });

빠른 확인

웹 저장소에 객체 저장하기

정리

저장소에는 문자열만 저장되므로 저장하기 전에 객체를 JSON.stringify로 변환하고, 읽을 때는 JSON.parse를 사용하십시오. 구문 분석을 try/catch로 보호하고 기본값을 제공하십시오. JSON은 함수와 undefined를 제외하며 날짜는 문자열로 변환한다는 점을 기억하십시오. 중첩 데이터는 읽기-수정-쓰기 방식으로 업데이트하고 저장된 형태의 버전 관리도 고려하십시오.

자주 묻는 질문

“JSON으로 객체 저장하기” 강의는 무료인가요?

네 — “JSON으로 객체 저장하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“JSON으로 객체 저장하기”에서 뭘 배우나요?

객체를 직렬화하여 저장하고 다시 가져옵니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“JSON으로 객체 저장하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기