[API/Javascript/Jquery] 통계청 API 연동해서 시/도, 시/군/구 자동으로 연결하기

 

결과물

 

 

 

 

과정

 

 

1. 통계청 Developers 접속 > 회원가입 > 서비스ID 및 보안Key받기

2. 사용할  api 주소 및 예제 확인

3. 코드 작성

 

---

1. 통계청 Developers 접속 > 회원가입 > 서비스ID 및 보안Key받기

 

출처 - 통계청 Developers

 

1.2 사용 위한 인증키 신청

로그인 후 우측 상단 내 이름을 클릭하면 "나의 인증키 관리" 탭이 나타난다. 선택해서 접속

 

신청하기 클릭해서 절차대로 신청하면 서비스아이디와 보안키가 목록에 바로 나타난다

 

( ※ 참고 : 예제 소스에서 종종 Consumer Key, Client Secret라는 용어를 사용하는데  각각 서비스 ID와 보안Key를 의미한다. )

 

 

2. 사용할  api 주소 및 예제 확인

우리가 사용할 api는

accessToken을 가져오는 api와 시/도, 시/구/군 정보를 제공하는 api다

 

- (인증) accessToken API 

- ( 시/도, 시/구/군 ) 단계별 주소 조회 API 

 

단계별 주소 조회 api의 경우 어떤 데이터인지 확인 해볼 수 있도록 사이트에 예제를 실행 할 수 있는 서비스를 마련하고 있으니 직접 실행결과를 확인해보는것도 좋을듯 하다.

 

 

3. 코드 작성

 

 

작성할 코드는 시/도에 따른 시/구/군을 select box로 표현하는것인데

조건이 있었다. 이미 value를 한글로 사용하고 있기 때문에 코드값을 value로 활용하지못한다는점.

이부분을 참고해서 코드를 작성해보았다.

<script type="text/javascript" src="https://sgisapi.kostat.go.kr/OpenAPI3/auth/javascriptAuth?consumer_key=클라이언트ID"></script>
<script>
    var accessTaken = 'none';
    var errCnt=0;
    getAccessToken();
    var selectedsi = "<?=$wr_1?>"; // 저장되어있던 '시'
    var selectedgu = "<?=$wr_2?>"; // 저장되어있던 '구'

    function getAccessToken(){
        jQuery.ajax({
            type:'GET',
            url: 'https://sgisapi.kostat.go.kr/OpenAPI3/auth/authentication.json',
            data:{
                consumer_key : '클라이언트ID',
                consumer_secret : '보안Key',
            },
            success:function(data){
                errCnt = 0;
                accessToken = data.result.accessToken
                geoCoe($("#sido1"), undefined );
                geoCoe($("#gugun1"), 11 ); //default
            },
            error:function(data) {
            }
        });
    }
    function geoCoe(tt, cd){
        var data = {
            accessToken : accessToken,
            pg_yn : 0,
          };
        if ( cd != undefined) {
            data.cd = cd;
        }
        jQuery.ajax({
            type:'GET',
            url: 'https://sgisapi.kostat.go.kr/OpenAPI3/addr/stage.json',
            data:data,
            success:function(response){
                switch (parseInt(response.errCd)){
                    case 0:
                        tt.each(function() {
                            $selsido = $(this);
                            $selsido.find('option').remove();
                            $.each(response.result, function(index, item) {
                                if(this==selectedsi){
                                    $selsido.append("<option selected value='"+item.addr_name+"' data-cd='"+item.cd+"'>"+item.addr_name+"</option>");
                                }else{
                                    $selsido.append("<option value='"+item.addr_name+"'  data-cd='"+item.cd+"'>"+item.addr_name+"</option>");
                                }
                            });
                        })

                        break;
                    case -401:
                        errCnt ++;
                        if(errCnt<200){
                            getAccessToken();
                        }
                        break;
                    case -100:
                        break;
                }
            },
            error:function(data) {
            }
        });
    }
</script>
<script type="text/javascript">
    $('document').ready(function() {
        $("#sido1").change(function() {
            let selectedCd = $("#sido1").find(":selected").data("cd");
            geoCoe($("#gugun1"), selectedCd)
        })
    });
</script>

 

 

테스트

▶

▶

 

끝