jQuery JSON

✅ JSON 데이터 처리

JSON (JavaScript Object Notation)은 자바스크립트 객체 문법을 기반으로 하는 데이터 형식입니다.
주로 서버와 클라이언트 간의 데이터 교환에 사용되며, 구조가 간단하고 가독성이 뛰어나 널리 사용됩니다.

📦 1. JSON의 기본 구조

{
  "name": "Alice",
  "age": 25,
  "isStudent": false,
  "skills": ["HTML", "CSS", "JavaScript"]
}
  

• 쌍따옴표(" ")로 감싼 키-값 쌍
• 문자열, 숫자, 불리언, 배열, 객체 등 다양한 자료형을 포함 가능

🔁 2. JSON.stringify() – 객체 ➝ JSON 문자열

const user = {
  name: "Bob",
  age: 30
};

const jsonString = JSON.stringify(user);
console.log(jsonString);
// 출력: {"name":"Bob","age":30}
  

• 서버에 데이터를 전송할 때 자주 사용됩니다.
• undefined, 함수 등은 직렬화되지 않습니다.

🔃 3. JSON.parse() – JSON 문자열 ➝ 객체

const jsonString = '{"name":"Charlie","age":22}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // Charlie
  

• 문자열이 올바른 JSON 형식이어야 파싱됩니다.
• AJAX 또는 fetch로 받은 데이터를 사용할 때 주로 활용됩니다.

🌐 4. JSON 데이터 통신 예시

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then(response => response.json())
  .then(data => {
    console.log("이름:", data.name);
  });
  

위 코드는 REST API에서 JSON 데이터를 받아오는 실전 예제입니다.
response.json()은 내부적으로 JSON.parse()를 호출합니다.

🚫 5. JSON과 관련된 주의사항

• JSON의 키는 항상 쌍따옴표로 감싸야 합니다.
• 객체 내부에 함수나 Symbol을 포함하면 직렬화되지 않습니다.
• JSON.parse()는 try-catch로 감싸서 예외 처리하세요.

🔗 요약

• JSON.stringify(): 객체 ➝ JSON 문자열
• JSON.parse(): JSON 문자열 ➝ 객체
• AJAX / fetch와 함께 사용됨