공공 API로 토이 프로젝트를 하나 만들어 볼까? 해서 시작한 위치 기반 미세먼지 체크 앱 만들기!
공공데이터 사이트에서 적합한 API를 발견해 바로 시작해부렀다.
내가 생각한 로직은
- Geolocation API로 WGS84 좌표를 불러온다!
- 불러온 좌표를 kakao 좌표 변환 API를 통해 TM으로 변환한다!
- 변환한 좌표를 좌표에 따른 근처 대기 측정소 데이터를 호출하는 공공 API 파라미터로 넣어 데이터를 불러온다!
- 불러온 측정소 데이터를 미세먼지 데이터를 호출하는 공공 API 파라미터로 넣어 데이터를 뿌린다!
+5. 아까 불러온 WGS84 좌표를 kakao API를 통해 좌표 => 주소로 변환한다!
이거였는데 뭔가 데이터 불러오고 그 데이터 넣어서 또 호출하고 이 패턴 반복인 것 같아서 오! 간단하겠군! 했는데..
음 생각보다 간단하진 않았다. 하하!
우선 Postman에서 다 호출해보니까 잘 되길래 바로 작업을 시작했는데 api key부터가 말썽이었다. 분명 .env에 넣어서 환경변수 만들어서 잘 불렀는데 왜 access denied야!! 찾아보니 dotenv 설치하면 된다 해서 설치했더니 에러 안남 ㅎㅎ
그리고 이 데이터를 어떻게 연속적으로(?) 꼬리에 꼬리를 무는 식으로(?) 호출 하지? 라는 고민에 계속 빠져서 하루 왠종일 씨름했다. 하다가 너무 복잡해서 내던질 뻔 했ㄷㅏ...계속 좌표 변환까지 밖에 안되서 중간에는 그냥 도시별로 데이터 뿌려줄까.. 하다가 뭔가 위치 기반으로 하는 게 의미가 있는 것 같아서 계속 찾아봤다.
그런데 찾다보니 Axios랑 async/await 같이 쓰는 방법을 발견하고 증말..
유레카..!!!를 외쳤다.
여태 axios는 promise-then 방식으로 사용했는데 요런 방법도 있었다.
then 방식의 경우 api 호출이 복잡해지면 then을 then 내부나 또는 chain 형태로 연달아 쓰는 경우가 발생한다고 한다! (딱 지금 하는 작업의 경우인 듯 하다!)
// then 을 연속적으로 호출하는 예시
const TestApiCall = () {
axios.get('https://test.com/api/v1')
.then((response) => {
const data = response.data;
const userId = data.userId;
axios.get('https://test2.com/api/v2/' + userId)
.then((response) => {
console.log("Response >>", response.data)
})
.catch(() => {
})
})
.catch((error) => {
console.log("Error >>", err);
})
}하지만 이 방식은 보기에 복잡하고 불편해서 선호하는 방식은 아니라고..!
아래가 async/await를 이용한 코드이다. 에러처리는 try-catch 방식으로 작업해야 한다!
// async/await 를 활용하는 수정된 방식
const TestApiCall = async () {
try {
const response = await axios.get('https://test.com/api/v1')
const userId = response.data.userId;
const response2 = await axios.get('https://test2.com/api/v2/' + userId);
console.log("response >>", response2.data)
} catch(err) {
console.log("Error >>", err);
}
}그리하여 하루동안 현재 위치, 미세먼지 농도, 측정소 데이터 불러오는 것까지 해결했다!
이제 추가 데이터도 더 불러오고 스타일링 작업까지 해서 완성할 예정이다!
