외부 API 사용하기
내 앱에서 다른 서비스의 데이터 가져오기
⏱ 예상 ~5분
01 · 읽기
실제 앱은 대부분 혼자 존재하지 않아요. 다른 서비스와 대화하며 데이터를 가져와요. 날씨 앱은 날씨 API를 호출하고, 소셜 앱은 인증 API를 호출하고, 이커머스 앱은 결제 API를 호출해요.
API(Application Programming Interface)는 웹 페이지 대신 데이터를 반환하는 URL이에요. 웹사이트를 방문하면 브라우저가 HTML을 받아요. 프로그램이 API를 호출하면 JSON을 받죠. 프로그램이 쓸 수 있는 구조화된 데이터예요.
레벨 5에서 API를 배웠죠. 이제 실제 코드에서 써볼게요.
💡 상상해 봐요서버가 식당 주방이라면, 외부 API는 공급업체예요. 토마토를 직접 기르지 않죠. 공급업체(API)에 전화해서 주문(요청)하면 배달(응답)해줘요. 공급업체가 문을 닫으면(API가 다운되면) 대안(에러 처리)이 필요해요.
02 · 코드 예제
아래는 외부 API에서 데이터를 가져오는 라우트예요. 읽어보고 세 가지 핵심 패턴을 짚어보세요. async/await, fetch, try/catch.
예제: API 라우트
app.get('/api/joke', async (req, res) => {
try {
const response = await fetch('https://official-joke-api.appspot.com/random_joke');
const joke = await response.json();
res.json({
setup: joke.setup,
punchline: joke.punchline
});
} catch (error) {
res.status(500).json({ error: 'Failed to fetch joke' });
}
});
세 가지를 보세요. (1) async/await는 외부 데이터를 기다리는 동안 서버를 얼리지 않게 해줘요. 'await' 키워드는 데이터가 올 때까지 이 함수를 일시정지하지만, 다른 요청은 계속 처리돼요. (2) fetch는 외부 API에 HTTP 요청을 보내요. (3) try/catch는 에러를 우아하게 처리해요. 농담 API가 다운돼도, 서버가 크래시 나지 않고 유용한 에러 메시지를 반환해요.
03 · 읽기
외부 API를 쓸 때 자주 나오는 개념들이에요. 이걸 알면 흔한 실수를 피할 수 있어요.
핵심 정리
- async/await — 서버를 막지 않고 외부 데이터를 기다리는 방법
- API 키 — 유료나 비공개 API의 인증(.env에 넣으세요!)
- Rate limit — 분당 보낼 수 있는 요청 수를 API가 제한해요
- 에러 처리 — API가 다운될 때를 대비해 항상 폴백을 두세요
04 · 실기 실습
레벨 7의 Express 서버에 이 API 라우트를 추가해 보세요. API 키가 필요 없는 무료 농담 API를 호출해요. 연습용으로 딱이에요.
// Add this to your app.js
app.get('/api/joke', async (req, res) => {
try {
const response = await fetch('https://official-joke-api.appspot.com/random_joke');
const joke = await response.json();
res.json({ setup: joke.setup, punchline: joke.punchline });
} catch (error) {
res.status(500).json({ error: 'Failed to fetch joke' });
}
});05 · 빈칸 채우기
JavaScript에서 API 에러를 처리하려면 fetch 호출을 _____/catch 블록으로 감싸세요.
06 · 퀴즈
API 호출을 왜 try/catch 블록으로 감싸야 할까요?
- JavaScript의 모든 함수는 try/catch가 필요해서
- 프로그램이 더 빨리 돌게 하려고
- API가 너무 자주 호출되는 걸 막으려고
- API가 다운됐을 때 에러를 우아하게 처리하려고
⚠ 전체 인터랙티브 경험에는 JavaScript가 필요해요. JavaScript를 켜고 새로 고침해 주세요.
※ 이 사이트는 독립 운영되는 교육 프로젝트로, Anthropic의 공식 제품이 아니에요. Claude™ 는 Anthropic, PBC 의 상표예요.