JavaScript JSON

JSON 객체를 생성하고 사용하는 방법을 JavaScript로 간단히 설명하겠습니다. JSON 객체는 JavaScript에서 데이터를 구조화하고 교환하는 데 자주 사용됩니다.

1. JSON 객체 생성

// 1. JavaScript 객체로 JSON 생성
const person = {
  name: "John",
  age: 30,
  isStudent: false,
  skills: ["JavaScript", "React", "Node.js"],
  address: {
    city: "Seoul",
    country: "Korea"
  }
};

// 2. JSON 문자열로 생성
const personJSON = `{
  "name": "John",
  "age": 30,
  "isStudent": false,
  "skills": ["JavaScript", "React", "Node.js"],
  "address": {
    "city": "Seoul",
    "country": "Korea"
  }
}`;

2. JSON 객체 사용

1) JSON 문자열을 JavaScript 객체로 변환

const personObject = JSON.parse(personJSON);
console.log(personObject.name); // "John"
console.log(personObject.skills[0]); // "JavaScript"

2) JavaScript 객체를 JSON 문자열로 변환

const jsonString = JSON.stringify(person);
console.log(jsonString);
// 출력: {"name":"John","age":30,"isStudent":false,"skills":["JavaScript","React","Node.js"],"address":{"city":"Seoul","country":"Korea"}}

3. JSON 데이터 접근 및 수정

// 객체의 속성 접근
console.log(person.name); // "John"
console.log(person.address.city); // "Seoul"

// 속성 수정
person.age = 31;
person.skills.push("TypeScript");

console.log(person);
// {name: "John", age: 31, isStudent: false, skills: Array(4), address: {…}}

4. JSON 데이터를 활용한 API 호출 예제

Fetch를 사용해 JSON 데이터 가져오기

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json()) // JSON 문자열을 객체로 변환
  .then(data => {
    console.log(data.title); // 가져온 데이터의 제목 출력
  })
  .catch(error => console.error('Error:', error));

Fetch를 사용해 JSON 데이터 전송

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: "My Post",
    body: "This is a sample post",
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => {
    console.log(data); // 서버에서 반환된 데이터 출력
  })
  .catch(error => console.error('Error:', error));

요약

• JSON.parse(): JSON 문자열 → JavaScript 객체로 변환
• JSON.stringify(): JavaScript 객체 → JSON 문자열로 변환
• fetch API: JSON 데이터를 주고받을 때 사용

JSON은 데이터를 구조화하고 네트워크 간 데이터를 교환할 때 유용합니다!