Weather Cast

API를 이용해 만들어본 날씨 정보 웹이다.
디자인은 거의 손을 대지 않았다.
막히는 부분이 조금 있었지만, 해결해 나가는 재미가 있었다.

이용한 API와 아이콘 주소

• https://developers.kakao.com/ 카카오 맵
• https://www.data.go.kr/ 공공데이터포털 동네예보
• https://www.flaticon.com/ flaticon

막혔던 부분

CORS 이슈

처음엔 데이터 받아오고, 받아온 데이터 그대로 출력해주면 그만인줄 알았는데 그게 아니었다.
분명 주소창이나 Postman으로 데이터를 요청하면 잘 받아왔는데 이상하게 내가 만든 웹에서는 데이터를 전혀 받아오지 못했다. 그래서 콘솔을 열어 확인해보니 ~~has been blocked by CORS policy라는 에러창이 나왔다.
아직 cors에 대해 몰랐던 때라 조금 당황했지만 이를 해결하기 위해 검색의 도움을 받았다.

서버를 따로 만들고 아래처럼 header를 추가해주면 이를 해결할 수 있다.

첫번째 방법

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");

두번째 방법

npm install cors

app.use(cors())

위경도와 그리드 변환

Geolocation API로 위경도 정보를 얻을 수 있는데, 기상청에서 데이터를 요청할 땐 그리드 좌표가 필요했다. 가이드에 변환하는 코드가 있었는데, C언어만 있기도 하고 좀 복잡하게 작성되어 있어서 해석하기 어려웠다.

카카오 API

많은 API를 이용해 본 건 아니지만, 친절하고 자세하게 설명되어 있어서 매우 좋았다. 또 다른 API를 이용해 공부하고 싶다는 생각이 들게한다.

Docs

정리

엄청 대단한건 아니지만, 그동안 공부한 내용으로 간단히 만들어 보았는데 그저 따라 만드는 것보다 처음부터 직접 계획하고, 자료를 찾아보고, 생각지도 못한 장애물을 만나면서 배우는게 많았던 것 같다.