[TIL] 스파르타) 미니 프로젝트 1

https://teamsparta.notion.site/Chapter-1-77677e4e57624d0f80027384264c3604

 

--

 

학습 키워드: Overlay, css, 날씨 API, Javascript

 

1. Overlay (CSS)

 - 어제 구현했던 카드 회전 기능에 더하여 카드들에 overlay를 입혀서 반짝거리는 기능을 구현하려고 했는데, overlay용 div가 카드 위로 올라가지 않는 상황이 생겼다. div의 position 값이 무엇인지, z-index 값이 지정되어있는지에 따라서 div의 표시 우선순위가 바뀐다고 하는데, position 값이 absolute와 relative로 설정되어있는 상태로는 z-index가 오버레이 div의 표시 순서에 영향을 주지 않았다. position 값을 제거한 상태로도 z-index가 동작하는지 확인해봐야겠다.

 

2. 날씨 API (AccuWeather)

 - 일기예보 기능을 구현하기위해 API를 찾아봤는데, 네이버 날씨에서 사용하는 여러 API 중 AccuWeather 것을 살펴봤다.

 

AccuWeather APIs | home

 

 - 로그인 후 상단의 계정 정보에서 My Apps 에 진입하여 add a new app 버튼을 클릭하면 간단한 폼을 작성하는데, 여기서 Core Weather Limited Trial 이 시간별 날씨 예보 기능을 제공한다.

 - 폼을 제출하면 My Apps 페이지에 앱이 등록되고, 승인되면 Key 탭의 API Key를 이용하여 API REFERENCE 의 일부 기능들을 호출하는데 사용할 수 있다.

 - 무료 버전은 일일 50회 횟수 제한이 있어 테스트를 한다고 지속적으로 새로고침하여 호출하는 경우 50회를 초과하는 순간 접근이 거부된다. 서비스 용이 아닌 시연용으로만 사용하는 경우 My Apps 에서 해당 앱을 제거하고 새로운 app을 생성하여 API key를 새로 발급받으면 다시 50회를 호출할 수 있게 된다.

 

AccuWeather APIs | API Reference

 

 - 기본적으로 날씨(눈, 비, 맑음 등)와 기온은 Forecast API에 들어있다.

 - 1 Hour of Hourly Forecasts 를 사용했는데, 들어가보면 아래 4가지가 제공된다.

 

 Resource URL: 정보를 받기 위해 사용하는 URL 주소다. 자세히 보면 맨 뒤에 {Location Key} 라고 되어있는 부분이 있는데, 이 부분을 AccuWeather에서 제공하는 값으로 바꿔야한다 ({}는 제거). Location Key는 Location API의 기능들로 받아올 수 있고, 이번 프로젝트에서는 List의 Top Cities List에서 서울의 Location Key 값인 226081을 참조했다.

 Query Parameters: 정보 뒤에 붙게될 쿼리의 parameter 들이다. 완성 후 Send this request 버튼을 누르면 response 탭에서 반환된 정보를 확인할 수 있다. 그 옆의 curl 탭에서 완성된 쿼리 url을 확인할 수 있다.

  - apikey(필수): 내 App의 API key를 복사하여 붙여넣으면 된다. 무료 요금제를 사용했기 때문에 일부 API 기능 사용이 제한된다.

  - language: Response로 받는 정보의 언어를 설정한다. 언어 코드는 Dyspatch Language Code Standards를 따른다. 영어는 en-us, 한글은 ko-kr을 사용한다.

Dyspatch Language Code Standards | Dyspatch Support

  - detail: 말그대로 detail, 더 많은 정보를 준다는데 간단한 날씨와 기온 정보만 필요해서 기본 값인 false로 뒀다.

  - metric: 기온은 기본적으로 화씨( ° F) 로 제공되는데, true로 설정하면 섭씨( ° C) 로 변경된다.

 Response Error Detail: 에러 시 출력된 에러코드와 대조할 수 있다.

 Response Parameters: Response 에서 제공되는 파라미터 목록이다.