JavaScript JSON과 AJAX

🌐 JSON과 AJAX 완전 정복

웹 애플리케이션에서는 서버와 클라이언트 간의 데이터 통신이 매우 중요합니다. 이때 가장 자주 사용되는 두 가지 기술이 바로 JSON과 AJAX입니다. 이 강좌에서는 그 기본 개념부터 실전 사용 예제까지 차근차근 설명드릴게요.

📌 1. JSON이란?

JSON (JavaScript Object Notation)은 데이터를 주고받을 때 많이 사용하는 경량 데이터 포맷입니다. 자바스크립트 객체 형식과 매우 유사하며, 문자열 형식으로 데이터를 표현합니다.

✔ 예시

{
  "name": "철수",
  "age": 25,
  "hobbies": ["축구", "독서"]
}

✔ 자바스크립트에서 JSON 다루기

• JSON.stringify(obj) : 객체 → JSON 문자열
• JSON.parse(json) : JSON 문자열 → 객체

const user = { name: "영희", age: 30 };
const jsonStr = JSON.stringify(user); // 객체 → JSON
console.log(jsonStr); // {"name":"영희","age":30}

const parsed = JSON.parse(jsonStr);  // JSON → 객체
console.log(parsed.name); // "영희"

📌 2. AJAX란?

AJAX (Asynchronous JavaScript and XML)은 웹 페이지를 새로고침하지 않고도 비동기적으로 서버와 데이터를 주고받을 수 있는 기술입니다. 오늘날에는 XML보다 JSON과 함께 사용되는 경우가 더 많습니다.

✔ 예시: XMLHttpRequest

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/users", true);

xhr.onload = function () {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};

xhr.send();

하지만, fetch API를 사용하면 더 간결하고 직관적으로 AJAX를 구현할 수 있습니다.

✔ 예시: fetch로 AJAX

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json())
  .then(data => {
    console.log("결과:", data);
  })
  .catch(error => {
    console.error("에러:", error);
  });

✔ POST 요청 보내기 (fetch)

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    title: "제목",
    body: "내용",
    userId: 1
  })
})
.then(response => response.json())
.then(data => {
  console.log("생성된 데이터:", data);
});

📚 3. 정리

• JSON은 데이터를 직렬화/역직렬화할 수 있는 경량 포맷입니다.
• AJAX는 웹 페이지를 새로 고치지 않고 서버와 데이터를 주고받는 기술입니다.
• fetch API를 사용하면 AJAX를 간편하게 구현할 수 있습니다.

이제 JSON과 AJAX의 기본기를 다졌다면, 실제로 API를 연결해서 정보를 가져오는 작은 프로젝트를 만들어보는 걸 추천드려요!