11. Vue3 + d3.js 날씨 지도 만들기 - 날씨 데이터 가져오기

이제 지도 파일을 이용해 시도별 대한민국 지도를 화면에 표현했다.

 

다음은 공공데이터에서 날씨를 가져오는 부분인데 

전체 흐름도는 다음과 같다.

 

이번은 전체 흐름에 대해서만 설명하고 다음부터 코드와 관련되어 설명하고자 한다.

 

 

 

물론 Vue에서 공공데이터를 바로 가져와 처리할 수 있지만, 

외부 데이터 수집 처리부를 따로 분리하여 예제 코드를 만들어 보기로 한다. 

 

처리할 부분은 다음과 같다.

 

1. Vue + Nodejs 연동

2. Nodejs + DB 연동

3. python  + DB 연동 + 공공데이터 연동

 

구글을 검색하면 각각의 연동과 관련된 예제 코드들이 많아 어려움은 없다. 

 

python + DB 연동 + 공공데이터 연동

공공데이터 신청을 하게되면 활용한 API에 대한 샘플 소스를 제공한다. 

 

샘플 소스를 그대로 복사하고 부여 받은 인증 키와 옵션 값을 수정하면 

원하는 데이터를 가져올 수 있다.

 

신청한 목록의 가이드라인 문서에 정의된 데이터의 값을 파악하고,

받는 파일의 포맷 방식대로 데이터를 추출해서 DB에 Insert하거나 사용하면 된다.

 

DB Table은 추출한 데이터를 담을 수 있고 날짜와 시간을 키 값으로 만들면 된다.

 

순서는 다음과 같다.

 

1. 공공데이터 목록 신청 인증키 획득

2. 샘플 코드를 활용하여 테스트

3. 가이드라인 문서를 확인후 테이블 생성

4. 실제로 연동할 수 있는 코드로 수정한 후 쿼리 

5. 쿼리한 데이터 값 추출 확인

6. 데이터 수집 후 DB Insert

7. sql 퀴리를 통해 데이터 값 확인

 

필자는 일정한 시간에 데이터를 수집하기 위해 crontab에 등록하여 사용하였다. 

 

 

 

위 같이 테이블에 최근 수집만 데이터만 저장하게 하였다.

 

이제 남은 것은 vue + nodejs를 통해 데이터를 가져오고 지도에 표현을 하면 된다.

 

마지막으로 위의 방법은 필자의 방법이지, 다른 방법도 많이 있다.

 

각자의 편한 방법으로 구현하면 될 것이다.

 

그럼 다음은 vue+nodejs를 통해 데이터를 가져오는 방법에 대해 소개하겠다.