24년 11월 25일

오전

공공데이터 포털 가입 후에 각종 통계데이터들을 사용해서 데이터를 가져와보는 작업을 진행중이다.

데이터를 그냥 가져오면 되는줄 알았더니 은근히 이것저것 작업이 필요하다.

공공 데이터포털 API 사용법

공공데이터 포털을 가입한 후에 원하는 데이터가 있는 페이지로 들어간다.

(파일 확장자는 일단 JSON 파일로 설정)

페이지에서 활용신청을 한다.

활용신청이 되면 데이터를 사용할 수 있게 됨.

활용신청 승인이 되면 데이터 상세보기 페이지로 진입하게 된다.

 

마이페이지의 디코딩 인증키를 복사해서 저기 인증키 설정버튼을 누르면 인증키를 넣는 부분이 있다.

그 부분에다 디코딩 인증키를 넣는다.

그리고 원하는 날짜의 GET 을 눌러 펼쳐보면 OPEN API 실행준비 버튼이 있는데 누름.

그럼 아래에 파라미터의 개수나 리턴 타입을 지정할 수도 있다.

지정을 하고 OpenAPI 호출을 누르면

 

이런식의 데이터가 받아와진다.

이것을 코드로 사용하기 위해서는 요청 URL 을 봐야한다.

한번 살펴보자.

---

API 란 ?

비유해서 보면 API는 점원과 같은 역할을 합니다.

API는 손님(프로그램)이 주문할 수 있게 메뉴(명령 목록)를 정리하고, 주문(명령)을 받으면 요리사(응용프로그램)와 상호작용하여 요청된 메뉴(명령에 대한 값)를 전달합니다.

API 의 유형

1) private API

: private API는 내부 API로, 회사 개발자가 자체 제품과 서비스를 개선하기 위해 내부적으로 발행합니다. 따라서 제 3자에게 노출되지 않습니다.

자기들 끼리만 쓰는 API 임

 

2) public API

: public API는 개방형 API로, 모두에게 공개됩니다. 누구나 제한 없이 API를 사용할 수 있는 게 특징입니다.

모든 사용자가 사용할 수 있게 해 개발을 할 때 사용할 수 있는 오픈 API

 

3) partner API

:partner API는 기업이 데이터 공유에 동의하는 특정인들만 사용할 수 있습니다. 비즈니스 관계에서 사용되는 편이며, 종종 파트너 회사 간에 소프트웨어를 통합하기 위해 사용됩니다.

뭐 돈을 낸다거나 그런 사람들만 사용할 수 있게한 API 인듯 ?

날씨 데이터를 받는 코드를 한번 예로 들어보자.

@GetMapping(value="/weather/{base_date}/{base_time}/{nx}/{ny}",produces = MediaType.APPLICATION_JSON_VALUE)
    @ResponseBody
    public ResponseEntity weather(
            @PathVariable("base_date") String base_date,
            @PathVariable("base_time") String base_time,
            @PathVariable("nx") String nx,
            @PathVariable("ny") String ny

    ){
        log.info("GET .. weather !");
        String url = "<http://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/getUltraSrtNcst>";
        String numOfRows = "10";  // 한 페이지 결과 수
        String pageNo ="1"; //페이지 번호
//         base_date = "20241125";  //발표 일자
//         base_time = "0600";  //발표 시각
//         nx = "55";  //예보지점 X좌표
//         ny = "127"; //예보지점 Y좌표
        String dataType = "json";
        String serviceKey = "xYZ80mMcU8S57mCCY/q8sRsk7o7G8NtnfnK7mVEuVxdtozrl0skuhvNf34epviHrru/jiRQ41FokE9H4lK0Hhg==";

        url += "?numOfRows="+numOfRows;
        url += "&pageNo="+pageNo;
        url += "&base_date="+base_date;
        url += "&base_time="+base_time;
        url += "&nx="+nx;
        url += "&ny="+ny;
        url += "&dataType="+dataType;
        url += "&serviceKey="+serviceKey;
        System.out.println(url);  //url 에 모든 요청 파라미터를 담아서 쿼리스트링으로 보낸다.

        RestTemplate restTemplate = new RestTemplate();
        ResponseEntity response=
                restTemplate.exchange(url, HttpMethod.GET,null,WeatherRoot.class);

        System.out.println("reponse" +response.getBody());

        return response;
    }

url 쿼리스트링을 만드는 부분까지는 알겠는데 , 아래 RestTemplate 객체를 만드는 부분부터는 잘 모르겠어서 찾아봤다.

RestTemplate 객체란 ?

Spring에서 지원하는 객체로 간편하게 Rest 방식 API를 호출할 수 있는 Spring 내장 클래스입니다.

Spring 3.0부터 지원되었고, json, xml 응답을 모두 받을 수 있습니다.

Rest API 서비스를 요청 후 응답 받을 수 있도록 설계되어있으며 HTTP 프로토콜의 메소드(ex. GET, POST, DELETE, PUT)들에 적합한 여러 메소드들을 제공합니다.

RestTemplate 의 특징

RestTemplate의 특징

· Spring 3.0 부터 지원하는 Spring의 HTTP 통신 템플릿

· HTTP 요청 후 JSON, XML, String 과 같은 응답을 받을 수 있는 템플릿

· Blocking I/O 기반의 동기방식을 사용하는 템플릿

· RESTful 형식에 맞추어진 템플릿

· Header, Content-Tpye등을 설정하여 외부 API 호출

· Server to Server 통신에 사용

---

쿼리스트링 파라미터 값 url 을 만들고 전달을 해주는데

view 에서 화면을 출력하기 위해 reponseBody 에다 객체 데이터를 담아준다.

그리고 주소창에서 localhost:8092/opnedata/weather 를 쳐보면..

 

뭐 이런식으로 데이터가 나온다.

현재 위에 예시 코드는 다른건 아니고 참조변수에 데이터를 입력해서 창에 나오게 하는건데

 

@GetMapping(value="/weather/{base_date}/{base_time}/{nx}/{ny}

이 형식으로 get 요청을 하려고 하는데

아래와 같은 주소로 데이터를 요청하면 그에맞는 데이터가 view 화면에 출력된다.

http://localhost:8092/opendata/weather/20241125/0600/55/127

 

 

 

여기서 각 요소에 대한 설명 같은것을 보려면 공공데이터포털에 있는 API 활용 가이드를 보면 설명히 자세히 나와있다 .

하나만 살펴보자면

예보구분	항목값	항목명	단위	압축bit수
단기예보	POP	강수확률	%	8
	PTY	강수형태	코드값	4
	PCP	1시간 강수량	범주 (1 mm)	8
	REH	습도	%	8
	SNO	1시간 신적설	범주(1 cm)	8
	SKY	하늘상태	코드값	4
	TMP	1시간 기온	℃	10
	TMN	일 최저기온	℃	10
	TMX	일 최고기온	℃	10
	UUU	풍속(동서성분)	m/s	12
	VVV	풍속(남북성분)	m/s	12
	WAV	파고	M	8
	VEC	풍향	deg	10
	WSD	풍속	m/s	10
초단기실황	T1H	기온	℃	10
	RN1	1시간 강수량	mm	8
	UUU	동서바람성분	m/s	12
	VVV	남북바람성분	m/s	12
	REH	습도	%	8
	PTY	강수형태	코드값	4
	VEC	풍향	deg	10
	WSD	풍속	m/s	10
초단기예보	T1H	기온	℃	10
	RN1	1시간 강수량	범주 (1 mm)	8
	SKY	하늘상태	코드값	4
	UUU	동서바람성분	m/s	12

뭐 간단히 이런 자료 데이터들이 가이드파일 안에 자세히 기술되어있다.

API 를 사용할 땐 이걸보면서 사용하면 될듯 하다.

JSON to JAVA

받아온 JSON 데이터를 java 데이터로 바꿔서 사용하기 위해 변환기를 사용해서 간단히 데이터를 생성한다. ResponseEntity 에 데이터를 담아 웹에 데이터를 전달하기 위해

구글에 json to java 라고 검색.

그럼 https://json2csharp.com/ 이라는 사이트로 들어가서 사용하면 되는데

요청을 해서 받아온 Json 데이터를 왼쪽 변환할 json 데이터에 넣어주고 컨버터를 돌리면

    @Data
    public class Body{
        public String dataType;
        public Items items;
        public int pageNo;
        public int numOfRows;
        public int totalCount;
    }
    @Data
    public class Header{
        public String resultCode;
        public String resultMsg;
    }
    @Data
    public class Item{
        public String baseDate;
        public String baseTime;
        public String category;
        public int nx;
        public int ny;
        public String obsrValue;
    }
    @Data
    public class Items{
        public ArrayList<Item> item;
    }
    @Data
    public class Response{
        public Header header;
        public Body body;
    }
    @Data
    public class WeatherRoot{
        public Response response;
    }

이런식으로 데이터를 바탕으로 클래스를 생성해준다.

 

---

서비스키 에러

공공데이터를 사용하면 서비스키 에러가 자꾸남 ;

일단 강사님 서비스키를 사용하니 정상적으로 데이터가 받아져오는데

왜그런지 알고싶다.

아마 인증키를 발급한지 시간이 얼마 지나지 않아서 그런듯하다.

근데 그냥 공공데이터 포털사이트가 문제임 ㅇㅇ;;

---

오후

leafLet

웹 페이지에 지도를 삽입하기 위한 자바스크립트 라이브러리 Leaflet

사용법

LeafLet 을 사용하려는 페이지에 link 를 해주어야 한다.

leaflet cdn 을 찾아 들어가던가 아니면 leafLet 사이트에 다운로드 탭을 들어가면 있다.

그래서 추가한 후에 사용하는 법을 보니..

오늘 한 것 중에 대표적으로 클릭을 했을 때 이벤트 처리로 클릭한 위치에 마커를 찍는 작업을 진행했는데 사이트에서 한번 보자.

     var map = new L.Map('map', {
          center: new L.LatLng(35.849957, 128.520305), //중심점 : 대구
          zoom: 8,	//Leaflet.KoreanTmsProviders.js : resolutions기준 줌 레벨(Level 12)
          crs: L.Proj.CRS.Daum, //Leaflet.KoreanTmsProviders.js : 새로 정의된 Daum Map CRS
          worldCopyJump: false,  //https://leafletjs.com/reference-1.3.2.html#map-worldcopyjump 참조
    });
    var baseLayers = L.tileLayer.koreaProvider('DaumMap.Street').addTo(map);

             //geocoder
    var geocoder = L.Control.geocoder({defaultMarkGeocode: false})
                            .on('markgeocode', function(e) { //사용자가 주소를 검색해서 위치를 선택했을 때 실행
                                console.log(e.geocode.center); //검색 위치의 중심좌표
                                map.setView(e.geocode.center,9) //검색 위치 지도의 중심으로 이동하여 줌 레벨 9로 설정
                            })
                            .addTo(map); //맵에 추가
                            
                               axios.get(`/openWeather/get/${e.latlng.lat}/${e.latlng.lng}`)
        .then(resp=>{console.log(resp)


        var newMarker = L.marker([`${e.latlng.lat}`, `${e.latlng.lng}`]).addTo(map); //e.latlng 가 객체로 나온다고함 그래서 .lat 하면 그 값이 나옴
        //툴팁추가
        newMarker.bindTooltip(`${e.latlng.lat}`, `${e.latlng.lng}`,{direction:'top',permanent:false,offset:[-15,-15]});
        //팝업추가
        newMarker.bindPopup(`<div style="width:150px;height:150px;background-color:white">${resp.data.base}</div>`,{}); //data.base 가 stations 이라고 뜨는데 이건 왜 stations 인가

 

 

간단히 한번 살펴보자면 map 이라는 새로운 맵을 생성한다.

다음 맵을 사용했음 !

아까 강사님이 crs 값이 중요하다고 하셨다.

crs 값 ?

지도의 좌표계. 여기서는 Daum 지도의 커스텀 좌표계를 사용하고 있다.

worldCopyJump : 사용자가 세계의 끝으로 갈 경우 지도를 반복하지 않도록 설정

 

L.tileLayer.koreaProvider : 타일 레이어를 추가하는 커스텀 함수.

L.Control.geocoder : 지도의 특정 위치를 주소나 이름으로 검색할 수 있는 컨트롤 .

defaultMarkGeocode: false : 검색 결과를 지도에 자동으로 마커로 표시하지 않도록 설정

 

지금 다른건 새로운 코드라 잘 모르겠고 , axios.get 밑에부터는 알것같다 ㅋㅋ

axios get 요청을 받을 시 비동기로 마커를 찍거나 팝업을 띄우게 하는 코드이다.

---

이것을 배우는 도중에 지오코딩이라는 단어가 나왔는데 이게 도통 이해가 안되네.

지오코딩이란 ?

**지오코딩(Geocoding)**은 주소, 장소 이름, 또는 기타 지리적 데이터를 기반으로 해당 위치의 **위도(latitude)와 경도(longitude)**와 같은 지리적 좌표를 변환하는 프로세스를 의미합니다.

뭐 특별한 라이브러리 같은게 아니고 특정 장소의 이름으로 위도와 경도 좌표로 변환해주는 프로세스 라고 한다.

---

그럼 오늘 지도페이지를 만들어주는 leafLet , 특정위치의 날씨 정보를 나타내주는 openWeather ,

그리고 이름을 기준으로 위치값을 알려주는 지오코딩을 배웠는데 , 내일은 그럼 이걸 다 합쳐서

특정 장소의 이름을 누를 시에 팝업창에 위치 값과 날씨 정보가 나오게 하는 그런 작업을 하지 않을까 ? 그런 생각이 든다.

수업시간 때는 뭐가 엄청 많이보이고 어지러웠는데 집에 와서 천천히 보니까 막상 뭐 그렇게 뭐가 없네…

---

오늘 사용해본 api 들

날씨를 사용하는 OpenWeather

웹 페이지에 지도를 삽입하기 위한 자바스크립트 라이브러리 Leaflet

공공데이터포털 api