(2day)open API

공공데이터 키값 받기

생각보다 쉬웠다. 우선 회원가입을 하고 원하는 공공데이터를 검색하여 찾은 후

활용신청을 하면 끝이다.

그렇게 키값을 받으면 일반 인증키로 원하는데이터를 받을 수 있으며 이번에 내가 받은 데이터에는 워드파일이 참고로 있어 더 활용하기 좋았다.

요청/응답 메시지 예제

우선 간단히 요청/응답을 잘 주고받나 테스트해봤다.

참고파일의 예제를 보면

http://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getMinuDustFrcstDspth?searchDate=2020-11-14&returnType=xml&serviceKey=서비스키&numOfRows=100&pageNo=1

인데 이는 조회날짜 입력시의 예제이다. 2020-11-14를 바꾸어주면 다른 날짜의 정보를 얻을 수 있으며 xml을 json으로 바꾸면 json으로 응답을 받을 수 있다.

그 외의 다른 항목들은 참고파일에 자세히 나와있으므로 코드를 짤때 잘 설정하면 될 것 같다.

UI/UX 디자인

간단하게 한눈에 핵심만 보여주는 것이 포인트이므로 adobe xd의 google material을 사용했다.

위에는 검색과 내일 그리고 내일 모레를 알 수 있게 버튼을 추가했으며

아래에는 원을 크게 두어 그 원의 색깔로 미세먼지의 농도를 한눈에 볼 수 있게 그리고 그 밑의

막대로 자세하게 알 수 있게 했으며 아래에는 세부적으로 미세먼지와 초미세먼지, 그리고 이산화질소의 농도를 알 수 있게 해두었고 가운데에는 사람의 웃는 얼굴을 두어 알아볼 수 있게 할 예정이다.

스타일링

크게 어려운점은 없었다.

하던대로 position: absolute와 top, left를 이용하여 위치를 잡고

flex와 fontawesome을 적재적소에 잘 사용해준다.

검색시 위치 찾기 기능과 반응형은 좀 더 진행하고 나서 할 예정이다.

또한 netlify에 배포하고 나니 css에서 컨텐츠를 중간에 배치할때 잘못되었는지

모바일에서 작게 나온다. 나중에 수정해야할 부분이다. 

내일 해야할 일

우선 스타일링은 이정도면 어느정도 되었고 내일은 고객의 현재위치를 얻는것을

구현할 생각이다. 지금 단편적으로 아는 것은 navigator 객체에 geolocation 속성을

이용한다는 점인데 좀 더 알아봐야겠다.

만약 시간이 남는다면 다음으로는 api를 다루어야한다. api를 이용하여 고객의 현재위치에서의

미세먼지 농도를 측정할 예정이다.