02. Axios와 JSON: 데이터 택배 받고 언박싱하기 (Unboxing)

"서버에서 온 데이터는 '그림의 떡'입니다. Axios라는 전문 택배 기사가 배달해준 상자를 열어(Parsing), 알맹이를 꺼내야 사용할 수 있습니다."

1. Axios: 가장 친절한 데이터 택배 기사 🚚

우리가 날씨 실습에서 썼던 fetch는 기본 도구라 조금 불친절합니다. 반면, 실무 표준인 Axios는 다음과 같은 이유로 사랑받습니다.

자동 언박싱: fetch는 직접 "포장 뜯어줘!"(response.json())라고 두 번 일해야 하지만, Axios는 도착과 동시에 JSON을 객체로 변환해 response.data에 담아줍니다.
직관적인 에러 처리: 주소가 틀리거나 서버가 죽었을 때(404, 500 에러), 바로 catch 블록으로 던져줘서 대처하기 쉽습니다.

2. [실전] 실제 날씨 데이터 받아오기 (Code)

우리가 실습했던 서울 날씨 API 주소를 활용하여 현재 기온(단일)과 시간대별 기온(목록)을 동시에 가져오는 실무 스타일의 코드입니다.

import axios from 'axios'; // Axios 라이브러리 불러오기

async function getWeatherData() {
    const url = "https://api.open-meteo.com/v1/forecast?latitude=37.5&longitude=126.9&current_weather=true&hourly=temperature_2m";

    try {
        // 1. 데이터 요청 (배달과 언박싱이 한 번에!)
        const response = await axios.get(url);

        // 2. 현재 날씨 (단일 객체 - Object)
        const currentTemp = response.data.current_weather.temperature;
        console.log(`현재 서울 온도: ${currentTemp}도`);

        // 3. 시간대별 날씨 (목록 - Array)
        const hourlyTemps = response.data.hourly.temperature_2m;
        console.log(`오늘 자정 온도: ${hourlyTemps[0]}도`);
        console.log(`내일 이 시간 온도: ${hourlyTemps[24]}도`);

    } catch (error) {
        console.error("데이터를 가져오는 중 오류가 발생했습니다.", error);
    }
}

3. Structure: 껍질 벗기기 연습 (점 vs 대괄호)

포장이 뜯긴 데이터에서 알맹이를 꺼낼 때는 데이터의 '모양'을 먼저 확인해야 합니다.

규칙 1. 딕셔너리 (Object) → 점(`.`) 사용

이름표가 붙은 상자에서 특정 항목을 꺼낼 때 씁니다.

데이터 모양: { "city": "Seoul", "temp": 15 }
꺼내는 법: data.city → "Seoul"

규칙 2. 리스트 (Array) → 대괄호(`[ ]`) 사용

번호가 매겨진 사물함에서 순서대로 꺼낼 때 씁니다.

데이터 모양: [15.5, 14.2, 13.8]
꺼내는 법: data[0] → 15.5

4. Why JSON? 기계들의 만국 공용어 📦

웹 서비스는 Python(백엔드)과 JavaScript(프론트엔드)라는 서로 다른 언어가 협업합니다. 이 둘은 직접 대화할 수 없어서 JSON이라는 텍스트 형식을 주고받습니다.

직렬화 (Serialization): 파이썬의 딕셔너리를 전송 가능한 문자열(String)로 변환하여 박스에 담는 것.
파싱 (Parsing): 도착한 문자열을 자바스크립트가 읽을 수 있는 객체(Object)로 조립하는 것.

단계	상태 (Type)	React 사용 가능?
1. 배달 중	`String` (텍스트)	❌ 불가 (글자일 뿐임)
2. Axios 수령	변환 완료 (Object)	⭕️ 가능 (`data.temp`)

5. Syntax: 닮았지만 다른 1%의 함정 ⚠️

파이썬 문법과 99% 비슷하지만, 통신 규약인 JSON에서는 아래 규칙을 엄격히 지켜야 합니다.

구분	Python (서버)	JSON (통신 표준)
따옴표	`'` 또는 `"`	오직 `"` (쌍따옴표)
참/거짓	`True`	`true` (소문자)
없음	`None`	`null`

6. AI Insight: AI는 JSON을 좋아해 🤖

최신 기술인 AI 에이전트는 사람이 하는 말을 이해한 뒤, 내부적으로 JSON 목록을 훑으며 판단합니다.

질문: "추우니까 따뜻한 메뉴 추천해줘."
AI의 사고: 날씨 API에서 hourly.temperature_2m 리스트를 확인 → 기온이 5도 이하임을 파악 → 메뉴 API에서 category: "hot"인 음식을 JSON으로 필터링.

우리가 API를 통해 깨끗한 JSON 목록을 제공할수록, AI 에이전트는 더 똑똑한 비서가 됩니다.