15. AJAX와 데이터 처리-3

#3 JSON 데이터 처리

JSON(JavaScript Object Notation)은 데이터 교환 형식으로, JavaScript에서 객체를 만들 때 사용하는 표현식과 유사하다. 대부분의 프로그래밍 언어에서 지원되며, 가벼우면서도 읽기 쉽고 쓰기 쉽다는 장점이 있다.

 

JSON 데이터는 문자열로 표현되며, 객체와 배열을 포함한 여러 가지 데이터 타입을 지원한다. JavaScript에서는 JSON 데이터를 다루기 위해 JSON 객체를 제공한다.

 

JSON 객체

JSON 객체는 JSON 데이터를 다루기 위한 메서드를 제공한다. 다음은 JSON 객체의 주요 메서드다.

 

JSON.stringify()

JavaScript 객체를 JSON 문자열로 변환한다. 예를 들어, 다음과 같은 JavaScript 객체를 JSON 문자열로 변환할 수 있다.

const person = {
  name: "Alice",
  age: 30,
  hobbies: ["reading", "traveling"]
};

const json = JSON.stringify(person);

console.log(json);
// 출력: {"name":"Alice","age":30,"hobbies":["reading","traveling"]}

JSON.parse()

JSON 문자열을 JavaScript 객체로 변환한다. 예를 들어, 다음과 같은 JSON 문자열을 JavaScript 객체로 변환할 수 있다.

const json = '{"name":"Alice","age":30,"hobbies":["reading","traveling"]}';

const person = JSON.parse(json);

console.log(person);
// 출력: {name: "Alice", age: 30, hobbies: Array(2)}

Axios를 이용한 JSON 데이터 처리

Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, Node.js와 브라우저에서 모두 사용할 수 있다. Axios를 이용하면 간단하게 서버와 데이터를 주고받을 수 있다.

Axios를 이용하여 JSON 데이터를 주고받는 예제를 살펴보자.

axios.get('/api/persons')
  .then(response => {
    const persons = response.data;
    console.log(persons);
  })
  .catch(error => {
    console.error(error);
  });

const newPerson = {
  name: "Bob",
  age: 25,
  hobbies: ["coding", "playing games"]
};

axios.post('/api/persons', newPerson)
  .then(response => {
    const person = response.data;
    console.log(person);
  })
  .catch(error => {
    console.error(error);
  });

Axios.get() 메서드를 이용하여 /api/persons 경로에 GET 요청을 보내면, 서버는 JSON 데이터를 응답한다. 이 데이터는 response 객체의 data 속성에 담겨 있다. 이 데이터를 이용하여 적절한 처리를 할 수 있다.

Axios.post() 메서드를 이용하여 /api/persons 경로에 POST 요청을 보내면, 서버는 새로운 데이터를 추가하고, 이에 대한 응답으로 JSON 데이터를 보낸다. 이 데이터는 response 객체의 data 속성에 담겨 있다. 이 데이터를 이용하여 적절한 처리를 할 수 있다.