AI가 만든 앱 코드를 열면 'fetch', 'axios', 'GET', 'POST', 'JSON' 같은 단어가 수시로 등장합니다. 이것들이 모두 API와 JSON 이야기입니다. 메뉴판 비유로 5분 만에 정리해 드리겠습니다.
API = 식당의 메뉴판
API(Application Programming Interface, 응용 프로그램 인터페이스)는 두 프로그램이 서로 소통하는 약속입니다. 식당에서 손님은 주방에 직접 들어가지 않고 메뉴판을 보고 주문합니다. API는 이 메뉴판과 같습니다. '이렇게 요청하면 이런 결과를 드립니다'라는 약속이 적혀 있습니다.
REST API의 네 가지 동사
REST(Representational State Transfer)는 현재 가장 널리 쓰이는 API 설계 방식입니다. HTTP 메서드(method)라 불리는 네 가지 동사로 모든 작업을 표현합니다.
| 메서드 | 하는 일 | 식당 비유 | 예시 |
|---|---|---|---|
| GET | 데이터 조회 | 메뉴판 보기 | GET /users — 사용자 목록 가져오기 |
| POST | 데이터 생성 | 새 주문하기 | POST /users — 신규 사용자 등록 |
| PUT / PATCH | 데이터 수정 | 주문 변경하기 | PUT /users/1 — 1번 사용자 정보 수정 |
| DELETE | 데이터 삭제 | 주문 취소하기 | DELETE /users/1 — 1번 사용자 삭제 |
JSON — API가 데이터를 주고받는 형식
API 요청과 응답에 담기는 데이터는 거의 항상 JSON(JavaScript Object Notation, 자바스크립트 객체 표기법) 형식을 씁니다. 사람도 읽을 수 있고 컴퓨터도 쉽게 처리할 수 있는 텍스트 형식입니다.
JSON 예시 — 사용자 한 명의 데이터
{
"id": 42,
"name": "김바이브",
"email": "[email protected]",
"isPremium": true,
"skills": ["React", "Supabase", "Cursor"],
"address": {
"city": "서울",
"district": "강남구"
}
}실제 API 호출 코드
JavaScript에서 API를 호출할 때 fetch 함수를 가장 많이 씁니다. AI가 자주 생성하는 패턴이니 한 번 보고 익혀 두세요.
GET 요청 — 사용자 목록 가져오기
// 서버에서 사용자 목록을 가져오는 GET 요청
const response = await fetch('https://api.leanx.kr/users');
const users = await response.json(); // JSON 텍스트를 JS 객체로 변환
console.log(users); // [{id:1, name:'김바이브'}, ...]
// POST 요청 — 새 사용자 등록
const newUser = await fetch('https://api.leanx.kr/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: '이코딩', email: '[email protected]' }),
});
const created = await newUser.json();크롬 확장 프로그램 'JSON Formatter' 또는 'JSON Viewer'를 설치하면, 브라우저에서 JSON 응답을 볼 때 색상과 들여쓰기가 예쁘게 정렬됩니다. API 응답을 육안으로 검토할 때 아주 편리합니다.
API 키(API key)가 필요한 서비스(OpenAI, 카카오맵 등)를 호출할 때, 키를 fetch URL이나 코드에 직접 쓰면 GitHub에 올라가는 순간 노출됩니다. 반드시 환경변수로 관리하세요. (7강에서 자세히 다룹니다.)
바이브코딩할 때: AI에게 API 연동을 요청할 때 '어떤 메서드(GET/POST/PUT/DELETE)를 써야 하나요?'라고 물으면 AI가 올바른 방향을 알려줍니다. 또한 API가 어떤 JSON 구조를 돌려주는지 확인하고, 그 구조를 AI에게 붙여 넣으면 훨씬 정확한 코드를 만들어 줍니다.