주소와 시도, 시군구 코드 input 처리

시도코드? 시군구코드?

프로젝트를 위해 여러 공공 API를 찾아보면, 주소를 기반으로 데이터를 검색할 수 있도록 API를 제공하는 경우가 많다. 하지만 단순히 문자열로 주소를 검색할 수 있는 것이 아니라, 정해진 코드를 기반으로 주소를 입력해야 데이터를 사용 가능하다. 여기서 정말 짜증나는 건 API마다 주소 코드를 다르게 사용한다는 점이다.

Tour API 4.0의 국내 관광지 데이터에선 시/도를 1부터 순차적으로 매겼다

 

KOPIS의 공연 데이터는 다음과 같이 지역코드를 설정했고

 

문화재청 API는 다음과 같은 지역코드를 사용한다

 

 

결국 죄다 천차만별의 코드를 사용하니 API에 맞춘 코드를 입력해줘야 제대로 데이터를 활용할 수 있는 것이다. 이를 위해 애초에 프로젝트에서 데이터를 입력받을 때, 문자열로 입력받는 것이 아니라 select 형태의 선택지로 입력받아야 바로 지역코드로 변환할 수 있다.

 

 

Javascript로 select 옵션들 만들기

select형태로 주소들을 입력받기 위해서 우선 선택할 옵션값들을 생성해야 한다. 물론 일일이 손으로 옵션들을 코드로 칠 수도 있지만, 전국 모든 주소를 코드로 만들기에 시간이 너무 오래 걸리고 실수도 하게 된다. 그냥 한 번에 자바스크립트로 생성할 수 있으니, 꼭 사용해 보자.

 

다음과 같은 코드로 select태그의 아이디로 호출해서 옵션태그들을 append로 붙여줄 수 있다.

각 옵션값은 area라는 배열에서 참조를 하고 있고, 해당 값의 인덱스값을 사용해서 code배열에서 해당하는 코드를 찾아서 저장하게 된다.

	<script>
	  $(function(){
        var area = ["서울", "부산", "대구", "인천", "광주", "대전", "울산", "세종", "경기", "강원", "충북", "충남", "전북", "전남", "경북", "경남", "제주"];
        var code = [ 11, 21, 22, 23, 24, 25, 26, 45, 31, 32, 33, 34, 35,
            36, 37, 38, 50 ];
        
        $("#addresscode").each(function(){
          $sel = $(this);
          $.each(eval(area), function(){
            $sel.append("<option value='"+this+"'>"+this+"</option>");
          });
        });
        
        $("#addresscode").change(function(){
        	var areasel = $(this).val();
        	console.log(areasel);
        	var num = area.indexOf(areasel);
        	console.log(code[num]);
        	$("#codeno").val(code[num]);
        });
        
        
      });
    </script>

 

 

이 코드를 실행하면, 다음과 같이 주소를 선택하면 바로 코드도 자동으로 선택되는 것을 콘솔창에서 확인할 수 있다.