JavaScript로 JSON 데이터 다루기 JSON.parse와 JSON.stringify 완벽 가이드

안녕하세요, 코딩하는곰입니다! 오늘은 현대 웹 개발의 핵심 데이터 형식인 JSON을 JavaScript에서 어떻게 효과적으로 다루는지, 그 기본이 되는 두 가지 핵심 메서드 JSON.parse()와 JSON.stringify()에 대해 깊이 있게 파헤쳐보려고 합니다. API 통신, 설정 파일 관리, 상태 저장 등 다양한 곳에서 JSON은 필수 불가결한 존재가 되었죠. 이 포스팅을 통해 JSON 처리의 기초를 탄탄히 다지고, 실무에서 마주칠 수 있는 다양한 상황에 자신감 있게 대처하는 법을 배워보세요. 20년 넘게 JavaScript와 함께한 경험을 바탕으로, 초보자도 이해하기 쉽게, 고급 개발자도 새롭게 배울 점이 있는 내용으로 준비했습니다. 함께 JSON의 매력적인 세계로 빠져볼까요?

JSON(JavaScript Object Notation)은 경량의 데이터 교환 형식으로, 사람이 읽고 쓰기 쉽고 기계가 파싱하고 생성하기도 쉽습니다. JavaScript 객체 문법을 기반으로 하지만, 텍스트 형식이므로 언어 독립적입니다. 이는 JSON이 다양한 프로그래밍 언어와 플랫폼 사이에서 데이터를 주고받는 데 이상적인 표준이 된 이유입니다. 웹 개발에서 JSON은 클라이언트와 서버 간 통신의 사실상 표준 포맷이며, 설정 파일(예: package.json, tsconfig.json), NoSQL 데이터베이스 문서, 애플리케이션 상태 관리 등 수많은 영역에서 활용됩니다. JSON의 기본 구조는 키-값 쌍의 집합인 객체({})와 값의 순서 있는 목록인 배열([])로 구성됩니다. 값으로는 문자열, 숫자, 불리언, null, 객체, 배열이 올 수 있습니다. 함수, Date 객체, 정규 표현식, undefined 등은 기본 JSON 사양에 포함되지 않습니다. 이러한 한계를 이해하는 것이 JSON.stringify()와 JSON.parse()를 올바르게 사용하는 첫걸음입니다. JSON의 성공은 그 단순함과 보편성에 있습니다. XML에 비해 훨씬 간결하고 직관적인 문법은 개발자 생산성을 높이고, 데이터 전송량을 줄여 네트워크 성능을 향상시킵니다. 또한 JavaScript 생태계와의 완벽한 통합은 프론트엔드 개발을 혁신적으로 변화시켰습니다. 오늘날 JSON은 웹의 혈관을 흐르는 데이터의 주요 형태라 해도 과언이 아닙니다. 따라서 JSON을 다루는 기술은 모든 JavaScript 개발자에게 필수적인 코어 스킬입니다. 이 기술의 핵심에는 데이터를 문자열로 변환하는 JSON.stringify()와 문자열을 다시 데이터로 변환하는 JSON.parse()가 자리 잡고 있습니다. 이 두 메서드는 마치 데이터 세계의 인코더와 디코더처럼 상호 보완적으로 작동하며, 우리가 JSON 데이터를 자유자재로 활용할 수 있게 해줍니다. 이번 섹션에서는 JSON의 본질과 그 중요성을 되짚어보며, 앞으로 배울 구체적인 메서드들이 어떤 큰 그림 속에서 역할을 하는지 이해하는 시간을 가졌습니다.

🎮 게임 개발에 관심이 있다면, (React 마스터 클래스) 20년 경력의 코딩하는곰이 알려주는 코드 리팩토링 핵심 전략를 참고해보세요.

이제 본격적으로 JSON 데이터를 JavaScript 객체로 변환하는 마법의 열쇠, JSON.parse()에 대해 자세히 알아보겠습니다. 이 메서드는 유효한 JSON 문자열을 인자로 받아 해당 문자열을 설명하는 JavaScript 값이나 객체로 변환합니다. 가장 기본적인 사용법은 간단합니다. 네트워크 요청(fetch, axios 등)을 통해 받은 JSON 형식의 응답 문자열을 실제로 사용 가능한 JavaScript 객체로 만들 때, 또는 localStorage에 문자열로 저장된 객체를 읽어올 때 JSON.parse()는 반드시 필요한 과정입니다. JSON.parse()의 진가는 두 번째 매개변수인 reviver 함수에 있습니다. 이 함수는 변환 과정 중 각 키-값 쌍에 대해 호출되어, 원본 값을 변환하거나 필터링할 수 있는 기회를 제공합니다. 이를 통해 날짜 문자열을 Date 객체로 변환하거나, 특정 키를 제외하는 등 세밀한 제어가 가능해집니다. 또한, JSON.parse()는 엄격한 JSON 문법을 요구합니다. 문자열은 반드시 큰따옴표(")로 감싸야 하며, 마지막에 쉼표를 허용하지 않는 등 작은 실수도 SyntaxError를 발생시킵니다. 이런 에러를 방지하기 위해 try...catch 블록으로 감싸는 것은 좋은 습관입니다. 고급 활용법으로는 reviver 함수를 이용한 데이터 정제, 중첩된 객체의 특정 경로 값 추출, JSON 문자열의 유효성 검사 등이 있습니다. 또한, 큰 JSON 데이터를 스트리밍 방식으로 파싱해야 하는 성능-critical한 상황에서는 JSON.parse()의 대안을 고려해야 할 수도 있습니다. 하지만 대부분의 경우, JSON.parse()는 매우 빠르고 효율적으로 작동합니다. 아래는 JSON.parse()의 다양한 사용 예제입니다.

// 기본 사용법
const jsonString = '{"name": "곰", "age": 30, "city": "Seoul"}';
const parsedObj = JSON.parse(jsonString);
console.log(parsedObj.name); // "곰"
// reviver 함수 활용: 날짜 문자열 변환
const jsonWithDate = '{"event": "회의", "date": "2023-10-27T10:00:00Z"}';
const parsedWithDate = JSON.parse(jsonWithDate, (key, value) => {
  if (key === 'date') {
    return new Date(value); // Date 객체로 변환
  }
  return value; // 다른 키는 그대로 반환
});
console.log(parsedWithDate.date instanceof Date); // true
console.log(parsedWithDate.date.getFullYear()); // 2023
// reviver 함수 활용: 특정 키 필터링
const jsonToFilter = '{"publicData": "공개정보", "secretKey": "비밀번호123"}';
const filteredObj = JSON.parse(jsonToFilter, (key, value) => {
  if (key === 'secretKey') {
    return undefined; // 해당 키-값 쌍 제거
  }
  return value;
});
console.log(filteredObj); // { publicData: '공개정보' }
// 에러 처리
const malformedJson = '{name: "곰"}'; // 키에 따옴표 없음 -> 오류!
try {
  const result = JSON.parse(malformedJson);
} catch (error) {
  console.error('JSON 파싱 오류:', error.message);
  // 적절한 오류 처리 또는 기본값 반환 로직
}

JSON.parse()를 마스터하면 외부에서 들어오는 모든 JSON 형식 데이터를 안전하고 효율적으로 JavaScript 세계로 끌어들일 수 있습니다. 이는 데이터 중심 애플리케이션 개발의 토대를 마련하는 중요한 단계입니다.

기억력과 집중력을 향상시키고 싶다면, 다양한 모드로 구성된 스도쿠 저니를 활용해보세요.

반대 방향의 변환, 즉 JavaScript 값이나 객체를 JSON 문자열로 직렬화하는 작업은 JSON.stringify()가 담당합니다. 이 메서드는 클라이언트에서 서버로 데이터를 보낼 때, 객체를 localStorage나 쿠키에 저장할 때, 혹은 복잡한 객체 상태를 로깅하거나 디버깅할 때 필수적입니다. JSON.stringify()의 첫 번째 매개변수는 변환할 값입니다. 두 번째 매개변수인 replacer는 JSON.parse()의 reviver와 유사한 역할을 하지만 방향이 반대입니다. 함수 형태로 제공하면 변환 과정에서 각 키-값 쌍을 필터링하거나 변형할 수 있고, 배열 형태로 제공하면 포함시킬 키의 화이트리스트를 지정할 수 있습니다. 이는 객체에서 불필요하거나 민감한 속성을 제거하여 문자열 크기를 줄이거나 보안을 강화하는 데 유용합니다. 세 번째 매개변수 space는 가독성을 위해 결과 문자열에 들여쓰기 공백이나 특정 문자열을 삽입합니다. 이는 개발 중 디버깅이나 설정 파일 생성 시 매우 편리합니다. JSON.stringify()가 직면하는 주요 도전 과제는 “JSON-safe”하지 않은 값들을如何处理하는가 입니다. 함수, Symbol, undefined는 객체 내에 있을 때 완전히 생략되며, 배열 내에 있을 경우 null로 변환됩니다. Date 객체는 toJSON() 메서드를 호출해 ISO 형식의 문자열로 변환됩니다. 순환 참조(객체가 자기 자신을 참조하는 경우)가 발견되면 TypeError가 발생합니다. 이러한 동작을 이해하지 못하면 예기치 않은 데이터 손실이나 런타임 오류를 맞이할 수 있습니다. toJSON() 메서드를 객체에 정의하여 JSON.stringify()의 직렬화 방식을 커스터마이즈할 수 있는 것도 강력한 기능입니다. 아래 예제를 통해 JSON.stringify()의 다양한 측면을 살펴보겠습니다.

// 기본 사용법
const obj = { name: "곰", age: 30, city: "Seoul" };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // '{"name":"곰","age":30,"city":"Seoul"}'
// replacer 함수: 특정 속성 제외 또는 변환
const user = { username: "codingBear", password: "secret123", level: 99 };
const safeJson = JSON.stringify(user, (key, value) => {
  if (key === 'password') {
    return undefined; // 비밀번호 필드 제거
  }
  if (key === 'level' && value > 50) {
    return 'MASTER'; // 값 변환
  }
  return value;
});
console.log(safeJson); // '{"username":"codingBear","level":"MASTER"}'
// replacer 배열: 포함할 키 지정
const data = { id: 1, title: "JSON 가이드", content: "많은 내용", author: "곰" };
const partialJson = JSON.stringify(data, ['id', 'title']);
console.log(partialJson); // '{"id":1,"title":"JSON 가이드"}'
// space 매개변수로 가독성 높이기
const complexObj = { users: [{ name: "홍길동", age: 25 }, { name: "김철수", age: 30 }], meta: { version: 1 } };
const prettyJson = JSON.stringify(complexObj, null, 2); // 2칸 들여쓰기
console.log(prettyJson);
// 출력:
// {
//   "users": [
//     {
//       "name": "홍길동",
//       "age": 25
//     },
//     {
//       "name": "김철수",
//       "age": 30
//     }
//   ],
//   "meta": {
//     "version": 1
//   }
// }
// JSON-safe하지 않은 값들
const trickyObj = {
  func: function() {}, // 생략됨
  sym: Symbol('id'), // 생략됨
  undef: undefined, // 생략됨
  date: new Date(), // 문자열로 변환됨
  arr: [1, undefined, function() {}] // [1, null, null]
};
console.log(JSON.stringify(trickyObj));
// '{"date":"2023-10-27T02:30:15.123Z","arr":[1,null,null]}'
// toJSON() 메서드 커스터마이징
const customObj = {
  name: "특별한 객체",
  secret: 42,
  toJSON() {
    return { name: this.name, computed: this.secret * 2 }; // 직렬화 형태 정의
  }
};
console.log(JSON.stringify(customObj)); // '{"name":"특별한 객체","computed":84}'

JSON.stringify()를 능숙하게 다루면 데이터를 필요한 형태로 정제하여 외부 시스템과 안전하게 교환하거나, 효율적으로 저장할 수 있습니다. replacer와 space 옵션, 그리고 toJSON() 메서드를 활용하면 JSON 출력을 완벽히 제어할 수 있는 힘을 얻을 수 있습니다.

📣 지금 화제가 되고 있는 문화행사는 바로, 2025 양촌곶감축제를 참고해보세요.

지금까지 JavaScript에서 JSON 데이터를 다루는 두 기둥, JSON.parse()와 JSON.stringify()에 대해 상세히 알아보았습니다. JSON.parse()는 외부에서 들어온 문자열 데이터를 안전하게 객체로 되살리는 해독기 역할을, JSON.stringify()는 내부 객체를 외부로 보낼 수 있는 문자열로 압축하는 부호화기 역할을 한다는 점을 다시 한번 상기해보세요. 이 두 메서드의 reviver와 replacer, space와 같은 고급 옵션들을 이해하고 활용하면, 단순한 변환을 넘어

디자인을 해치지 않으면서도 브랜드 이미지를 강조하고 싶다면, 로고 삽입이 가능한 QR 코드 생성기를 활용해보는 것이 좋습니다.