JSON 이해

1. 도입 (왜 배워야 하는가)

JSON(JavaScript Object Notation)은 웹 애플리케이션에서 데이터를 교환하는 가장 널리 사용되는 형식 중 하나입니다. JSON은 사람과 기계 모두가 읽기 쉬운 형식으로 데이터를 저장하고 전송하는 데 뛰어난 장점을 가지고 있습니다. 예를 들어, 서버와 클라이언트 간의 데이터 전송에서 JSON 형식이 일반적으로 사용되기 때문에 이를 이해하지 못하면 데이터 처리 및 API와의 상호작용에서 큰 어려움을 겪을 수 있습니다.

JSON을 모르면 웹 애플리케이션의 데이터 전송 방식이나 RESTful API의 기본 개념을 이해하지 못하게 되어, 실무에서 협업이나 문제 해결에 어려움을 겪을 수 있습니다. 따라서 JSON의 이해는 현대 웹 개발에서 필수적입니다.

2. 핵심 개념 설명

JSON은 키-값 쌍으로 이루어진 데이터를 표현하는 형식입니다. 이는 마치 우리의 일상에서 물건을 정리할 때 사용하는 서랍과 같습니다. 서랍에는 여러 종류의 물건이 들어있고, 각 물건은 이름과 그에 대한 내용으로 구분할 수 있습니다.

관련 용어 정리

3. 기본 코드 예제

가장 기본적인 JSON 객체를 만드는 예제를 살펴보겠습니다.

// JSON 객체 생성
const person = {
    "name": "홍길동",  // 이름
    "age": 30,        // 나이
    "isStudent": false // 학생 여부
};

// JSON 객체 출력
console.log(person);

실행 결과

{ name: '홍길동', age: 30, isStudent: false }

코드 한 줄씩 동작 설명

1. const person = {...}: person이라는 이름의 상수를 선언하고, 중괄호 {}로 감싼 JSON 객체를 할당합니다.
2. "name": "홍길동": name이라는 키에 "홍길동"이라는 값을 할당합니다.
3. "age": 30: age라는 키에 30이라는 값을 할당합니다.
4. "isStudent": false: isStudent라는 키에 false라는 값을 할당합니다.
5. console.log(person): person 객체를 콘솔에 출력하여 객체의 내용을 확인합니다.

4. 실전 활용 예제

예제 1: 쇼핑몰에서 장바구니 구현 시

const cart = [
    { "id": 1, "item": "티셔츠", "price": 20000, "quantity": 2 },
    { "id": 2, "item": "바지", "price": 30000, "quantity": 1 }
];

// 장바구니의 총합 계산
const totalPrice = cart.reduce((total, product) => total + product.price * product.quantity, 0);
console.log(총합: ${totalPrice}원);

상황 설명

쇼핑몰에서 장바구니에 담긴 상품의 정보를 JSON 배열로 저장하고, 이를 통해 총합을 계산하는 코드입니다.

예제 2: API로부터 데이터 가져오기

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data));

상황 설명

서버로부터 JSON 형식의 데이터를 가져오고 이를 JavaScript 객체로 변환하여 콘솔에 출력하는 예제입니다. RESTful API를 활용하는 경우 매우 자주 사용됩니다.

5. 흔한 실수와 주의사항

실수 1: 잘못된 JSON 형식

// 잘못된 JSON
const invalidJson = {
    name: "홍길동", // 키는 반드시 따옴표로 감싸야 함
    age: 30
};

• 올바른 코드

const validJson = {
    "name": "홍길동",
    "age": 30
};

실수 2: 배열과 객체 혼동

// 배열을 객체처럼 접근하려고 할 때
const data = [1, 2, 3];
console.log(data.name); // undefined

• 올바른 코드

console.log(data[0]); // 1

6. 정리

• JSON은 데이터 전송 및 저장에 사용되는 경량의 데이터 형식입니다.
• 키-값 쌍으로 구성되며 객체와 배열로 표현됩니다.
• 실무에서는 API 응답 데이터 처리 및 장바구니 같은 데이터 구조에 자주 사용됩니다.
• JSON 형식의 정의를 철저히 이해하고, 올바른 문법을 사용하는 것이 중요합니다.

다음에 학습하면 좋은 주제: AJAX와 Fetch API를 통해 비동기적으로 데이터를 요청하는 방법.