7. 외부 API 활용 - 환율 계산기 만들기

 

지금까지 만든 앱들은 모두 Firebase에 직접 데이터를 넣고 꺼내는 방식이었다. 이번에는 다른 걸 해본다. 인터넷에 이미 존재하는 데이터를 가져와서 보여주는 앱을 만든다. 이걸 외부 API를 사용한다고 표현한다.

 

회사를 운영하다 보면 환율을 확인할 일이 자주 있다. 해외 거래처가 있거나 해외에서 원자재를 수입하거나 해외 솔루션을 쓰고 있으면 달러 환율에 따라 비용이 달라진다. 매번 네이버에서 검색하는 것보다 내가 자주 보는 통화만 모아서 한눈에 보고 금액을 바로 계산할 수 있으면 편하다.

1. API가 뭔데

API는 쉽게 말해서 데이터를 주고받는 창구다. 은행 창구에 가서 오늘 달러 환율 알려주세요 라고 하면 직원이 알려주듯이 환율 API에 요청을 보내면 현재 환율 데이터를 돌려준다. 다만 사람이 아니라 컴퓨터끼리 통신하는 것이고 창구가 아니라 인터넷 주소(URL)로 요청한다는 차이만 있다. 세상에는 무료로 쓸 수 있는 API가 엄청나게 많다. 환율, 날씨, 뉴스, 주식, 지도 등 거의 모든 종류의 데이터를 API로 가져올 수 있다. 바이브 코딩으로 이 API들을 활용하면 만들 수 있는 앱의 범위가 확 넓어진다.

2. 환율 API 선택

 

무료 환율 API가 여러 개 있다. 이번에는 ExchangeRate-API를 사용한다. 무료 플랜에서 월 1500회까지 요청할 수 있어서 개인이나 소규모 회사에서 쓰기에 충분하다. 먼저 exchangerate-api.com에 가서 무료 계정을 만든다. 가입하면 API 키를 발급받는다. 이 키를 .env 파일에 저장한다. Firebase API 키를 저장했던 것과 같은 방식이다. API 키를 .env 파일에 추가한다. VITE_EXCHANGE_API_KEY=발급받은키 이런 식이다.

3. 프로젝트 시작

이번 프로젝트는 로그인 없이 만든다. 환율 계산기는 누구나 접속해서 바로 쓸 수 있으면 되니까. Firebase도 필요 없다. 데이터를 저장할 일이 없고 외부 API에서 실시간으로 가져오면 되기 때문이다.

 

React + Vite + Tailwind CSS로 환율 계산기 앱을 만들어줘. ExchangeRate-API를 사용해서 실시간 환율을 가져와. 기능은 이렇게 해줘.

1. 기준 통화를 선택할 수 있어 (기본값은 KRW 한국 원)
2. 자주 쓰는 통화의 환율을 카드 형태로 보여줘 (USD, EUR, JPY, CNY, GBP)
3. 금액을 입력하면 선택한 통화로 실시간 환산해줘
4. 마지막 업데이트 시간을 표시해줘

이번 프로젝트에서 다른 점은 Firebase가 없다는 것이다. 데이터를 저장하지 않으니 Firestore 연결도 필요 없다. 외부 API에서 데이터를 가져와서 화면에 보여주기만 하면 된다. 덕분에 프로젝트 구조가 훨씬 단순하다.

4. API 연동에서 자주 나는 에러

외부 API를 처음 연동하면 거의 100% 에러를 만난다. 흔한 것들을 정리한다. API 키가 안 먹히는 경우. 가입 직후에는 키가 활성화되는 데 시간이 좀 걸릴 수 있다. 몇 분 기다렸다가 다시 시도한다. 그래도 안 되면 .env 파일에 키를 제대로 넣었는지 확인한다. 앞뒤로 공백이 들어간 경우가 의외로 많다. CORS 에러. 브라우저 콘솔에 CORS policy 어쩌고 하는 빨간 에러가 나오면 이거다. 쉽게 말하면 브라우저가 보안상의 이유로 외부 서버에 직접 요청하는 걸 막는 것이다. 대부분의 공개 API는 이 문제가 없지만 간혹 발생한다. AI에게 에러 메시지를 보여주면 해결 방법을 알려준다. 데이터 형식이 예상과 다른 경우. API가 돌려주는 데이터의 구조를 모르면 코드에서 값을 제대로 꺼내지 못한다. 이 API의 응답 데이터 구조를 콘솔에 출력해서 보여달라고 AI에게 요청하면 데이터가 어떻게 생겼는지 확인할 수 있다.

5. 환율 변환 기능

기본 환율 표시가 되면 실제로 유용한 변환 기능을 추가한다. 아래와 같이 요청하면 된다.

 

금액 입력 기능을 강화해줘. 원화 금액을 입력하면 모든 카드에 해당 금액의 환산 결과가 실시간으로 표시돼. 반대로 달러 카드에 달러 금액을 입력하면 원화로 얼마인지도 보여줘. 양방향 변환이 가능하게 해줘.

 

이 기능을 만들 때 소수점 처리에 신경 써야 한다. 환율 계산 결과가 0.7283746528 같은 숫자로 나오면 보기 불편하다. 환율은 소수점 둘째 자리까지, 원화 금액은 정수로 표시하고 천 단위 콤마도 넣어달라고 요청한다.

6. 나만의 통화 추가

기본 5개 통화 외에 자주 확인하는 통화를 추가할 수 있으면 더 편하다. 더하기 버튼을 누르면 통화 코드를 검색해서 추가할 수 있는 기능, 추가한 통화는 로컬 스토리지에 저장해서 브라우저를 닫았다 열어도 유지되도록 만들어보자. 이번에는 Firebase 대신 로컬 스토리지를 사용한다. 간단한 설정값을 저장할 때는 굳이 서버에 올릴 필요 없이 브라우저에 저장하면 된다. 로그인이 필요 없는 앱이니 사용자별로 구분할 필요도 없다.

7. 배포

Firebase를 안 쓰니까 환경변수가 API 키 하나뿐이라 배포 설정이 간단하다. Netlify 환경변수에 VITE_EXCHANGE_API_KEY만 추가하면 된다. Git에 커밋하고 GitHub에 푸시한 다음 Netlify에 연결하면 끝이다. 빌드 커맨드와 배포 폴더 설정은 이전 프로젝트들과 동일하다. 배포 후 핸드폰에서 접속해 보자. 외근 중에 거래처와 통화하면서 바로 환율을 확인할 수 있다.

8. API 활용의 가능성

환율 API 하나를 연동해 봤을 뿐인데 활용할 수 있는 API가 얼마나 많은지 알게 되면 아이디어가 쏟아진다. 몇 가지만 예를 들면 이렇다.

날씨 API를 연동하면 매장이나 행사장의 날씨를 미리 확인하는 대시보드를 만들 수 있다. 택배 API를 연동하면 발송한 물건의 배송 상태를 한 화면에서 추적할 수 있다. 구글 캘린더 API를 연동하면 팀 일정을 한눈에 보는 보드를 만들 수 있다.

 

바이브 코딩의 진짜 힘은 이런 API들을 조합해서 나만의 도구를 만들 수 있다는 것이다. 세상에 이미 있는 데이터를 가져다가 내가 원하는 형태로 보여주는 것. 이전까지는 직접 데이터를 입력하는 앱만 만들었다면 이제는 세상의 데이터를 끌어와서 활용할 수 있게 된 것이다.