#2 따릉이 API fetch하기

md2eoseo·2021년 3월 25일
0

저번에 서울열린데이터광장에서 받은 따릉이 실시간 대여정보 API KEY로 fetch API를 이용해 각 정류소의 실시간 정보를 받아오려고 한다. 그 전에 모든 API KEY는 나를 제외한 사람들이 마음대로 쓸 수 없도록 깃허브 레포지토리에 올리는 일이 없도록 해야한다. 이 문제를 해결하기 위해서는 환경 변수(.env)에 API KEY를 저장해야 하는데, 이 때 손쉽게 환경 변수를 적용할 수 있는 dotenv라는 node module을 이용하면 된다.

dotenv 패키지 적용

  1. node module 설치
npm install dotenv
  1. app을 시작하는 파일 상단에 설정 추가
// react app의 경우, src/index.js 파일 상단에 추가
require('dotenv').config()

나의 경우에는 src/index.js 파일의 최상단에 코드를 추가했는데,

위 오류가 발생해 import 구문 아래로 이동시켰다.

  1. 프로젝트 루트 경로에 .env 파일 생성 후, 환경 변수 입력
    e.g.)
// .env

PORT=3000
API_KEY=abcdefg1234567
DB_HOST=localhost
DB_USER=root
  1. 환경 변수가 필요한 곳에서 process.env 를 통해 접근
    e.g.)
process.env.API_KEY
  1. 서버가 실행 중이었다면, 프로세스를 restart

참고로, react app에서는 환경 변수 이름 앞에

'REACT_APP_' 을 붙여야 된다.
예를 들어,
REACT_APP_API_KEY=abcdefg1234567

이 과정대로 dotenv 패키지를 적용시키면, 깃허브 레포지토리에 API KEY가 노출되는 것을 방지할 수 있다.

fetch API로 실시간 대여정보 받기

모든 정류소의 실시간 대여정보를 받으려면 3개의 url을 fetch 해야 하기 때문에, links라는 배열에 url 정보를 담고 forEach 구문을 이용하여 각 url에서 fetch한 정보를 모두 모아 return 하려고 했다.

그런데 내 예상대로 작동하지 않아 원인을 찾아봤는데, forEach는 loop를 기다려주지 않고 종료한다고 한다. 그래서 대여정보를 fetch해도 그 전에 loop가 끝나 텅빈 대여정보를 return했던 것이다.

대책으로 ES2015에서 제정된 for...of 키워드를 사용할 수 있었다. 이 키워드를 사용하면 비동기 처리가 끝날 때까지 기다려주기 때문에 모든 대여정보를 모아 return 할 수 있었다.

for (const link of links) {
    const partialData = await fetch(link)
      .then(res => res.json())
      .then(res => {
        return res.data;
      });
    allData = allData.concat(partialData);
  }

받은 대여정보를 App.js에서 쭉 출력해보았다.

-참고자료-
async/await를 이용한 비동기 loop 병렬로 순차 처리하기

0개의 댓글