"미국 여행 가서 15달러짜리 햄버거를 사 먹었어요. 가계부엔 '15달러'라고 적었지만, 한국 돈으로 얼마인지도 자동으로 계산해주면 좋겠어요."
DB에 저장된 데이터만 보여주는 건 재미없죠. 세상엔 이미 훌륭한 데이터들이 넘쳐납니다. 오늘의 환율, 내일의 날씨, 이번 주 로또 번호...
이런 데이터를 내 서비스로 가져와서 보여주는 것, 그게 바로 외부 API 연결입니다.
동사무소(정부24)에서 등본 떼는 것과 비슷해요.
- 내 책상(내 DB)에 없어서 외부 기관에 요청해야 함
- **신분증(API Key)**이 있어야 함
- 신청하고 발급될 때까지 기다려야 함(비동기)
- 가끔 시스템 점검 중이면 **발급 실패(에러)**할 수도 있음
이 글을 읽고 나면:
- 내 서버가 아닌 남의 서버에서 데이터를 가져오는 법을 알게 됩니다.
- API Key가 왜 '인터넷 여권' 같은 존재인지 이해합니다.
- 외부 서버 오류에 대비하는 **안전장치(Safety Net)**를 만드는 법을 배웁니다.
1. API Key: 인터넷 여권
지금까지는 내 집(내 DB) 냉장고를 여는 거라 자유로웠습니다. 하지만 환율 정보는 **은행(남의 집)**에 있습니다. 남의 냉장고를 열려면 허락을 받아야겠죠?
그래서 대부분의 외부 API는 API Key라는 걸 요구합니다. 일종의 여권이나 출입증 같은 겁니다.
주의: 이 여권(Key)은 절대 남에게 보여주면 안 됩니다. 여권 사본을 인스타그램에 올리는 사람은 없겠죠? 마찬가지로 API Key도 깃허브에 올리면 안 됩니다. (해커들이 좋아해요 😈) 무조건 **
.env파일(금고)**에 숨겨야 합니다.
2. 실전: 환율 API 연결하기 (상황극)
자, 이제 AI(우리의 외교관)에게 환율 정보를 가져오라고 시켜봅시다. 여기서 중요한 건 **'안전장치'**입니다. 남의 서버는 언제든 터질 수 있거든요.
AI에게 지시하기
Tech Lead(나): "환율 정보를 가져오되, 만약 실패하면 앱이 멈추지 말고 '조회 불가'라고라도 뜨게 해줘."
┌───────────────────────────────────────────────────────────────┐
│ 1단계: 데이터 요청(Fetch) 및 안전장치 구현 요청 │
├───────────────────────────────────────────────────────────────┤
│ │
│ 나: "현재 원/달러 환율 정보를 가져오는 함수를 만들어줘. │
│ 무료 API (ExchangeRate-API 등)를 사용해. │
│ │
│ 요구사항: │
│ 1. fetch 함수로 데이터를 가져와줘. │
│ 2. 보안: API Key는 반드시 process.env에서 가져와야 해. │
│ 3. 안전장치 (중요): 외부 서버가 응답이 없거나 에러가 나면, │
│ 앱이 멈추지 말고 null을 반환하거나 에러를 로그로 남겨줘. │
│ (try-catch 구문 사용) │
│ │
│ AI: "알겠습니다! API Key는 환경변수에서 꺼내 쓰고, │
│ 통신 중 문제가 생기면 catch 블록에서 안전하게 처리할게요." │
│ │
└───────────────────────────────────────────────────────────────┘
AI가 작성해준 코드는 이런 구조일 겁니다.
// app/actions/getExchangeRate.ts
export async function getExchangeRate() {
const apiKey = process.env.EXCHANGE_API_KEY; // 🔒 금고에서 꺼냄
// 🪂 안전장치 (Safety Net) 시작
try {
// ✈️ 비행기 타고 데이터 가지러 감 (시간이 좀 걸림 = await)
const res = await fetch(`https://api.../KRW`);
if (!res.ok) {
throw new Error('비행기가 도착하지 않았습니다!');
}
const data = await res.json();
return data.conversion_rates.KRW; // 예: 1350
} catch (error) {
// 💥 사고 발생 시 여기서 처리
console.error('환율 조회 실패:', error);
return null; // "모름" 상태로 반환 (앱은 안 죽음)
}
}
3. 내 서비스와 연결하기
이제 이 함수를 써먹어 볼까요?
- 사용자가 지출 내역에 "$15" 입력
- "잠시만요, 환율 좀 보고 올게요" (
getExchangeRate실행) - 성공하면:
1350 * 15 = 20,250원계산해서 보여줌 - 실패하면: "현재 환율 정보를 불러올 수 없습니다" (조용히 넘어감)
사용자는 "우와, 달러만 넣었는데 원화가 자동으로 뜨네?"라고 감탄할 것이고, 가끔 서버가 터져도 "어? 지금은 안 되네?" 하고 넘어갈 겁니다. 앱이 하얗게 멈추지 않으니까요.
이게 바로 **'실패를 대비하는 설계'**입니다.
오늘의 핵심 정리
✅ 외부 API: 남의 데이터를 빌려 쓰는 기술. 항상 '부탁'하는 입장이다.
✅ API Key: 인터넷 여권. 절대 깃허브에 올리지 말고 .env에 숨기자.
✅ Try-Catch: 외부 서버 오류에 대비한 에어백(안전장치). 이게 없으면 앱 전체가 멈출 수 있다.
셀프체크
이 글을 이해했다면 다음 질문에 답할 수 있어야 합니다.
- 남의 서버에 들어갈 때 필요한 '디지털 여권'의 이름은?
- (정답: API Key)
- API Key를 깃허브에 올리면 안 되는 이유는?
- (정답: 해커가 내 여권을 도용해서 요금 폭탄을 맞을 수 있음)
- 외부 서버가 터졌을 때 내 앱이 죽지 않게 막아주는 '에어백' 구문은?
- (정답: try-catch)
다음 글 예고
데이터(DB), 기능(CRUD), 외부 연결(API)까지... 백엔드 기술은 거의 다 익혔습니다! 이제 이 딱딱한 숫자들을 예쁘게 보여줄 차례입니다.
다음 글에서는 **[대시보드 만들기]**를 통해, 지출 내역을 차트와 그래프로 시각화해봅시다. "이번 달 식비가 왜 이렇게 많아?"를 한눈에 보여주는 마법, 기대해주세요!