1. 개발 프로젝트 주제
실시간 환율을 확인할 수 있는 웹 페이지를 개발해보자 (API 활용)
이것만은 필요 (사전 지식)
1) API 개념
2) JSON
3) 환율 API 활용 방법 ★
1) API 개념 
API 개념부터 살펴봅니다.
API란, Application Programing Interface의 약자로서, 두 개의 소프트웨어의 구성요소가 서로 주고받고 통신을 하는 인터페이스를 말합니다.
...네...뭐, 사실 저도 이 개념을 정확히 이해하지는 못했습니다.
일단 API라는 말은 너무 많이 들었지만, 생각보다 API의 명확한 정의를 결론내리기 어렵다고 하더군요.
우선은 ①상호작용 ②데이터를 주고받음 이라고 생각했습니다.
결국 지금 진행하려는 환율 웹 프로젝트도, 결국에는 환율 실시간 정보, 즉 API를 받아와야 데이터로 사부작거릴 수 있기 때문이죠.
그럼 다음으로 API 활용에 필수적인 JSON과, JSON의 동작 방식을 알아보겠습니다.
2) JSON
JSON은 JavaScript Object Notation의 약자입니다.
직역하면, "자바 스크립트 객체 표기법"입니다.
한마디로 데이터를 교환하고 저장하는 텍스트 기반의 표준 방식이라고 볼 수 있습니다.
JSON의 형태는 Javascript와 아주 흡사합니다.
// 기본 형태
{ Key : Value }
// 예시
{"이름" : "세세님", "나이" : 25, "취미" : "Velog"}
// 객체 예시
{"Velog" : {"목록" : "환율 API 활용"} }
// 배열 예시
{"태그" : [개발, Javascript, API] }네에. 이러한 구성을 가지고 있습니다.
생각보다 단순하면서도 복잡합니다(?) 아마 저 안에 들어가는 객체와 배열이 많을 수록... 크흠, 상상은 그만두겠습니다.
여기서 중요한 건 문자열과 Property를 작성할 시 반드시 큰 따옴표("")를 사용해야 한다는 겁니다.
3) 환율 API 활용 방법
그럼 이제 본격적으로 환율 API를 가져오는 방법을 알아보도록 하겠습니다.
- 한국수출입은행 환율 API 검색
https://www.koreaexim.go.kr/ir/HPHKIR020M01?apino=2&viewtype=C&searchselect=&searchword=
우선 한국수출입은행 홈페이지 Open API로 찾아갑니다.
대부분의 환율 API는 이 곳에서 인증키를 받아 사용한다고 합니다.
저 또한 '나의 인증키 발급 내역'을 통해,
요렇게 인증키를 받았습니다!
(인증키=APK Key는 반드시 노출하면 안된다고 합니다 ㅎㄷㄷ)
자, 그럼 인증키도 받았으니, 본격적인 환율 API를 활용한 간단한 웹 개발을 진행해보겠습니다.
- 웹 개발 요청 (Cursor AI 활용)
Cursor AI를 통해 아주 간단한 환율 웹 페이지를 요청하였습니다.
저는 무료 버전을 쓰고 있기 때문에, 파일 생성은 안되고 코드만 짜주는 방식입니다.
복잡한 기능 넣었다간 어차피 script 태그에서 아무것도 못 건드릴 게 뻔하기 때문에, 진짜 기초 기능만 넣어달라고 부탁했습니다.
저는 index.html style.css 버전으로 나누어 파일을 생성했습니다.
오늘은 API를 직접 활용해보기만 하는 실습이기 때문에, 제가 사전에 받은 API key를 코드에 넣어보도록 하겠습니다.
index 파일 내 API Key를 넣는 구간을 찾았습니다. 한번 넣어보도록 하겠습니다!
3. 오류 발생
앗. 오류가 발생함과 동시에 환율 API가 제대로 나오지 않습니다.
검색을 해보니, CORS의 문제라고 합니다.
CORS 에러란, 웹 브라우저의 Same-Origin 정책으로 인한 보안 오류로,
즉 출처가 불일치하면 다른 출처로 간주하여 접근을 차단한다고 합니다.
(=서로 다른 도메인(출처)에 대한 요청을 보안상 차단함)
정말 보안이라고 하니, 보안 컨설팅러로서 이해는 된다만....
일단 가장 좋은 해결방안은, 서버(백엔드)에서 CORS 정책을 설정하여 출처 요청을 허용해야 하는데...
아시다시피, 전 아직 백엔드 시작조차 하지 못한 초보 개발러입니다.
그리하여 제가 듣는 강의에서 추천해준 방법은 Google Apps Script를 활용한 우회법입니다.
4. Google Apps Script 사용
① Google Apps Script 프로젝트 생성
② "새 프로젝트" 클릭
③ 프록시 코드 작성
④ [새 배포] > [웹 앱] > [엑세스 권한이 있는 사용자] = 모든 사용자
배포 관리 > 웹 앱 URL의 링크를 클릭해보니
일단 환율 API는 잘 나오는 것 같습니다. 이제 Cursor AI 코드로 돌아가봅니다.
2. Javascript 구현
<script>
// 환율 불러오기
const API_URL = "https://script.google.com/macros/s/${나의 API key}/exec";
async function exchange(API_URL) {
try {
// API 및 JSON
const response = await fetch(API_URL);
const data = await response.json();
let price = {};
data.forEach(element => {
let ttb_value = element.ttb.replace(/,/g, '');
price[element.cur_unit] = parseFloat(ttb_value);
});
return price; // 가격만 반환하기(코드 리뷰)
} catch (error) {
console.log('ERROR : ', error);
return null;
}
}
// 이벤트 리스너
let exchangeRates = null;
exchange(API_URL).then(rates => {
exchangeRates = rates;
})
document.getElementById("calculate").addEventListener('click', function() {
if (!exchangeRates) {
alert('환율 정보를 불러오는 중입니다. 잠시 후 시도해주세요.');
return;
}
let example = document.getElementById("input_value").value;
let selectedName = document.getElementById("choice").value;
if(!example || isNaN(example) || parseFloat(example) <= 0) {
alert('정확한 금액을 입력해주세요.');
return;
}
let result = parseFloat(example) * exchangeRates[selectedName]; //지역변수 사용X
result = Number(result.toFixed(2));
document.getElementById("result").innerText = result + "원";
});
</script>저는 이렇게 Javascript를 구성하였습니다. 이렇게 구성하고, 연결해보면...
짜라잔. 드디어 환율 계산기를 완성해보았습니다.
어려우면서도 간단한 API 활용을 직접 해보니, API 활용이 얼마나 중요한지 제법 실감했습니다.
마지막으로 프로젝트를 하나 더 해보고 자바스크립트는 일단 마무리해보려고 합니다.
