챗GPT가 알려주는 자바스크립트 JSON 메서드

JavaScript에서 JSON은 JavaScript Object Notation의 약자로, 데이터를 구조화하고 교환하는 데 사용하는 경량 데이터 포맷입니다. JavaScript는 JSON 데이터를 다루기 위해 JSON 객체와 함께 여러 유용한 메서드를 제공합니다. 이러한 메서드는 JSON 데이터를 문자열로 변환하거나, 문자열을 객체로 변환하는 작업을 수행합니다.

---

주요 JSON 메서드

JavaScript에서 JSON 객체에는 다음 두 가지 주요 메서드가 있습니다.

1. JSON.stringify()

• 역할: JavaScript 객체를 JSON 문자열로 변환합니다.
• 사용 예시:

  const obj = { name: "John", age: 30, city: "New York" };
  
  const jsonString = JSON.stringify(obj);
  console.log(jsonString); 
  // 출력: '{"name":"John","age":30,"city":"New York"}'

• 사용 이유:
  • 서버로 데이터를 전송하기 위해 객체를 문자열로 변환할 때 사용.
  • JSON 데이터로 저장하거나 로깅할 때 활용.

옵션 파라미터:

• replacer: 특정 속성만 포함하거나 필터링하는 함수.
• space: 가독성을 위해 JSON 문자열에 들여쓰기 추가.

const prettyJson = JSON.stringify(obj, null, 2); 
console.log(prettyJson);
/* 출력:
{
  "name": "John",
  "age": 30,
  "city": "New York"
}
*/

 

2. JSON.parse()

• 역할: JSON 문자열을 JavaScript 객체로 변환합니다.
• 사용 예시

  const jsonString = '{"name":"John","age":30,"city":"New York"}';
  
  const obj = JSON.parse(jsonString);
  console.log(obj);
  // 출력: { name: 'John', age: 30, city: 'New York' }

• 사용 이유:
  • 서버에서 받은 JSON 데이터를 JavaScript에서 사용 가능한 객체로 변환할 때 사용.
  • 파일이나 로컬 스토리지에서 불러온 JSON 데이터를 처리할 때 활용.

옵션 파라미터:

• reviver: 값을 변환하는 사용자 정의 함수.

const jsonString = '{"name":"John","age":30,"city":"New York"}';

const obj = JSON.parse(jsonString, (key, value) => {
    if (key === "age") {
        return value + 5; // age 값에 5 추가
    }
    return value;
});
console.log(obj); 
// 출력: { name: 'John', age: 35, city: 'New York' }

---

JSON 메서드 활용 사례

1. 서버와 데이터 교환

• JSON은 클라이언트와 서버 간 데이터 교환에 자주 사용됩니다.

const data = { id: 1, title: "Hello World" };

// 데이터를 JSON 문자열로 변환하여 서버로 전송
fetch('https://api.example.com/data', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
})
.then(response => response.json())
.then(result => console.log(result));

2. 로컬 스토리지 활용

• JSON 메서드는 브라우저의 로컬 스토리지에 데이터를 저장하거나 불러올 때 사용됩니다.

// 데이터 저장
const user = { name: "Jane", age: 25 };
localStorage.setItem('user', JSON.stringify(user));

// 데이터 불러오기
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser);
// 출력: { name: "Jane", age: 25 }

---

주의사항

1. JSON.stringify에서 순환 참조 오류
   • 객체가 자기 자신을 참조하는 경우, JSON.stringify는 오류를 발생시킵니다.

   const obj = {};
   obj.self = obj;
   JSON.stringify(obj); // TypeError: Converting circular structure to JSON

2. JSON.parse 보안 문제
   • 신뢰할 수 없는 JSON 문자열을 처리할 때는 주의해야 합니다. 악성 JSON 문자열은 코드 주입 공격으로 이어질 수 있습니다.

---

결론

JavaScript의 JSON 메서드는 **객체를 JSON 문자열로 변환(JSON.stringify)**하거나, **JSON 문자열을 객체로 변환(JSON.parse)**하는 간단하면서도 강력한 도구입니다. 서버와의 데이터 교환, 로컬 데이터 저장 등 다양한 상황에서 필수적으로 사용됩니다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON

JSON - JavaScript | MDN