Fetch API 비동기 통신으로 구현한 실시간 자바스크립트 환율 계산기 제작기

작성자:

안녕하세요! 여덟 번째 프로젝트로 인사드립니다. 그동안 우리는 브라우저 안에서만 작동하는 다양한 도구들([계산기], [그림판], [스톱워치] 등)을 만들어왔습니다. 하지만 진정한 웹 앱의 매력은 외부의 살아있는 데이터를 가져와 사용자에게 실시간으로 전달하는 데 있다고 생각합니다.

그래서 오늘은 자바스크립트 중급자로 나아가는 가장 중요한 관문인 ‘비동기 통신’을 다뤄보려 합니다. 바로 외부 API를 연동한 ‘실시간 자바스크립트 환율 계산기’입니다. 단순히 환율 수치를 계산하는 로직을 넘어, 실제 외환 시장의 데이터를 초 단위로 가져와 반영하는 과정을 통해 우리가 매일 사용하는 수많은 서비스들이 어떻게 외부 세계와 소통하는지 그 원리를 깊이 있게 파헤쳐 보겠습니다.

초보자분들에게는 다소 생소할 수 있는 ‘비동기’와 ‘Fetch API’의 개념을 아주 쉽게 풀어내면서도, 중급 개발자로서 놓치지 말아야 할 예외 처리와 UX 최적화 포인트까지 풍성하게 담았으니 끝까지 함께해 주세요!

자바스크립트 환율 계산기 처음 화면

1. 설계: 정적 페이지를 넘어 살아있는 데이터를 다루다

그동안 우리가 만든 프로젝트들은 브라우저 내부에서 완결되는 로직들이었습니다. 하지만 실제 현업의 서비스들은 외부 서버로부터 끊임없이 데이터를 주고받으며 작동합니다. 여덟 번째 프로젝트인 ‘자바스크립트 환율 계산기’의 핵심 설계 목표는 바로 ‘외부 데이터와의 소통’입니다.

단순히 환율 정보를 수동으로 입력해 계산하는 도구는 의미가 없습니다. 1분 1초가 다르게 변하는 외환 시장의 정보를 어떻게 실시간으로 가져올 것인가, 그리고 그 데이터를 어떻게 사용자에게 매끄럽게 보여줄 것인가를 중점적으로 설계했습니다. 이번 프로젝트를 통해 우리는 자바스크립트의 가장 강력한 무기 중 하나인 비동기 통신을 정복하게 됩니다.

2. Fetch API와 데이터 파싱(Parsing)

서버와 데이터를 주고받기 위해 저는 자바스크립트 내장 함수인 fetch()를 활용했습니다. 과거에는 XMLHttpRequest라는 복잡한 객체를 사용했지만, 현대의 자바스크립트는 Promise 기반의 fetch를 통해 훨씬 간결하게 통신을 처리할 수 있습니다.

// 핵심 통신 로직: API 호출 및 데이터 처리
function calculate() {
    const currency_one = currencyEl_one.value;
    const currency_two = currencyEl_two.value;

    // 무료 환율 API 엔드포인트 호출
    fetch(`https://open.er-api.com/v6/latest/${currency_one}`)
        .then(res => res.json()) // 응답 데이터를 JSON 형태로 변환
        .then(data => {
            // 응답 데이터 구조 내에서 필요한 국가의 환율 추출
            const rate = data.rates[currency_two];
            
            // UI 업데이트 및 소수점 처리
            rateEl.innerText = `1 ${currency_one} = ${rate.toFixed(2)} ${currency_two}`;
            amountEl_two.value = (amountEl_one.value * rate).toFixed(2);
        })
        .catch(err => {
            console.error("데이터 통신 중 에러 발생:", err);
            rateEl.innerText = "환율 정보를 불러올 수 없습니다.";
        });
}

여기서 주목해야 할 부분은 .then() 체이닝과 catch()를 통한 에러 핸들링입니다. 네트워크 통신은 언제든 실패할 가능성이 있습니다. 서버가 점검 중이거나 사용자의 인터넷이 끊겼을 때를 대비해 예외 처리를 해주는 것은 서비스의 안정성을 결정짓는 중요한 요소입니다.

3. 비동기의 벽과 사용자 경험(UX) 최적화

구현 과정에서 가장 고민했던 점은 ‘데이터 로딩 시간’이었습니다. API 통신은 찰나의 순간이지만 시간이 걸립니다. 사용자가 통화 선택 버튼을 눌렀는데 화면에 아무런 반응이 없다면, 사용자는 앱이 멈췄다고 생각할 수 있습니다.

이를 해결하기 위해 저는 fetch가 시작되는 시점에 “최신 환율 업데이트 중…”이라는 안내 문구를 띄우도록 했습니다. 또한, 사용자가 숫자를 입력할 때마다 매번 API를 새로 호출하는 것은 서버 자원 낭비일 수 있어, 나중에는 ‘디바운싱(Debouncing)’ 기법을 도입해 입력이 멈춘 뒤에만 호출하도록 최적화할 계획입니다.

또한, 두 나라의 통화를 서로 맞바꾸는 ‘Swap’ 기능을 추가할 때 단순히 값만 바꾸는 것이 아니라, 바뀐 값에 맞춰 즉시 계산 함수(calculate())를 다시 실행하도록 설계하여 사용자가 추가적인 클릭 없이도 결과를 즉시 확인할 수 있게 배려했습니다.

4. 자바스크립트 환율 계산기 실행 영상

자바스크립트 환율 계산기 영상

5. 비동기(Asynchronous)란 무엇인가요?

자바스크립트를 공부하다 보면 가장 먼저 만나는 큰 벽이 바로 비동기입니다. 쉽게 비유를 들어볼까요?

  • 동기(Synchronous): 앞 손님의 주문이 끝날 때까지 뒤 손님들이 줄 서서 기다리는 키오스크.
  • 비동기(Asynchronous): 주문을 먼저 받고 벨을 준 뒤, 음식이 나오면 벨이 울리는 카페.

fetch는 바로 이 ‘카페의 벨’과 같습니다. 데이터를 요청하고 결과가 올 때까지 다른 코드는 멈추지 않고 계속 실행됩니다. 데이터가 도착하면 그때 비로소 벨이 울리듯 .then() 안의 코드가 실행되는 것이죠. 이 원리만 이해하신다면 한 단계 더 높이 점프하실 수 있을 겁니다.

6. 보완점 및 향후 발전 방향

현재는 페이지를 새로고침할 때마다 API를 새로 호출하고 있습니다. 하지만 환율은 매 초마다 수천 번 변하는 것이 아니기 때문에, 일정 시간 동안은 데이터를 브라우저에 저장해두는 방식이 더 효율적일 것입니다.

  1. LocalStorage 캐싱: API 호출 횟수를 줄이기 위해 가져온 환율 데이터를 일정 시간 동안 저장해두기.
  2. 차트 시각화: Chart.js 같은 라이브러리를 연동해 지난 일주일간의 환율 변동 추이를 그래프로 보여주기.
  3. 다양한 단위 변환: 환율뿐만 아니라 무게, 길이, 부피 등 다양한 단위를 변환할 수 있는 통합 변환기로 확장하기.

단순한 숫자 계산기를 넘어 외부 세계와 소통하는 ‘실시간 자바스크립트 환율 계산기’를 완성했습니다. 코드는 짧아졌을지 모르지만 그 안에 담긴 ‘비동기’와 ‘네트워크 통신’의 개념은 그 어떤 프로젝트보다 묵직하게 다가옵니다.

외부 API를 연동해 보면서 async와 await를 활용한 비동기 처리가 얼마나 강력한지 깨달았습니다. 네트워크 요청 중 발생할 수 있는 오류를 try…catch로 처리하는 법을 익히며, 실제 서비스에서 발생할 수 있는 예외 상황에 대비하는 실무적인 감각을 키울 수 있었던 뜻깊은 프로젝트였습니다.

외부 데이터를 가져와 가공하는 법을 배우셨다면, 다음 단계로 [자바스크립트 영단어장 제작]을 통해 데이터를 저장하는 법까지 익혀보시는 것을 추천합니다.

다음 시간에는 또 새로운 콘텐츠로 찾아올게요!

댓글 남기기