저번에 서울열린데이터광장에서 받은 따릉이 실시간 대여정보 API KEY로 fetch API를 이용해 각 정류소의 실시간 정보를 받아오려고 한다. 그 전에 모든 API KEY는 나를 제외한 사람들이 마음대로 쓸 수 없도록 깃허브 레포지토리에 올리는 일이 없도록 해야한다. 이 문제를 해결하기 위해서는 환경 변수(.env)에 API KEY를 저장해야 하는데, 이 때 손쉽게 환경 변수를 적용할 수 있는 dotenv라는 node module을 이용하면 된다.
dotenv 패키지 적용
- node module 설치
npm install dotenv- app을 시작하는 파일 상단에 설정 추가
// react app의 경우, src/index.js 파일 상단에 추가
require('dotenv').config()나의 경우에는 src/index.js 파일의 최상단에 코드를 추가했는데,
위 오류가 발생해 import 구문 아래로 이동시켰다.
- 프로젝트 루트 경로에 .env 파일 생성 후, 환경 변수 입력
e.g.)
// .env
PORT=3000
API_KEY=abcdefg1234567
DB_HOST=localhost
DB_USER=root- 환경 변수가 필요한 곳에서 process.env 를 통해 접근
e.g.)
process.env.API_KEY- 서버가 실행 중이었다면, 프로세스를 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에서 쭉 출력해보았다.
