먼저 자바스크립트로 하는 방법을 알아보겠습니다.
1. 코드 1
가. 코드
이것은 alert창에 송파동의 법정동 코드를 출력하는 코드입니다.
인증키는 입력하지 않았으므로 자신의 것으로 채우기 바랍니다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, shrink-to-fit=no">
<title>법정동코드 조회</title>
</head>
<body>
<script type="text/javascript">
xhr=new XMLHttpRequest();
dong = '송파동';
const HttpUrl = "https://apis.data.go.kr/1741000/StanReginCd/getStanReginCdList";
let parameter = "?" + "ServiceKey" + "=" + "인증키";
parameter += "&" + "type" + "=" + "json";
parameter += "&" + "locatadd_nm" + "=" + dong;
const searchUrl = HttpUrl + parameter;
xhr.open("GET", searchUrl);
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
const obj = JSON.parse(this.responseText);
console.log(obj);
const regionCd = obj.StanReginCd[1].row[0].region_cd;
alert(dong + "의 법정동 코드는 " + regionCd);
}
};
xhr.send();
</script>
</script>
</body>
</html>
나. 코드 설명
(1) XMLHttpRequest
XMLHttpRequest에 대한 설명을 아래를 참고 바랍니다.
| xhr=new XMLHttpRequest(); xhr.open("GET", searchUrl); xhr.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { 전송 결과 성공시 코드 } }; xhr.send(); |
XMLHttpRequest 변수를 선언하고, 이것을 이용해 검색 URL을 서버에 전송하고 결괏값을 받습니다.
(2) 검색 URL 만들기
| dong = '송파동'; const HttpUrl = "https://apis.data.go.kr/1741000/StanReginCd/getStanReginCdList"; let parameter = "?" + "ServiceKey" + "=" + "인증키"; parameter += "&" + "type" + "=" + "json"; parameter += "&" + "locatadd_nm" + "=" + dong; const searchUrl = HttpUrl + parameter; |
요청 메시지의 형식에 따라 URL과 parameter 중 필요 없는 부분은 없애고, ServiceKey와 type, locatadd_nm(법정동명)에 대한 값만 지정합니다.
url이 원래 http인데, cloudaccess.net에서 무료 호스팅을 받았더니 https라고 해야 한다고 해서 바꿨습니다.
"요구가 차단되었다고 하면서 content가 HTTPS로 전달되어야 한다"라고 합니다.
인증키 앞에 encodeURIComponent를 붙여야 하는 경우도 있는데 여기서는 붙이면 오히려 검색이 안 돼서 뺐습니다.
(3) 전송 결과 처리
| if (this.readyState == 4 && this.status == 200) { const obj = JSON.parse(this.responseText); console.log(obj); const regionCd = obj.StanReginCd[1].row[0].region_cd; alert(dong + "의 법정동 코드는 " + regionCd); } |
const obj = JSON.parse(this.responseText);
=> JSON 형식의 전송 결과인 this.responseText을 파싱 하여 JavaScript 오브젝트로 만듭니다.
console.log(obj);
=> 전송 결과를 콘솔 창에 띄웁니다.
F12키를 누르거나, 마우스 오른쪽 버튼을 누른 후 검사 메뉴를 누르고, Console 창을 보면 아래와 같이 결과가 표시됩니다.
const regionCd = obj.StanReginCd[1].row[0].region_cd;
=> 법정동 코드인 1171010400은 키(Key) regioncd에 해당하는 값(Value)으로
위 화면을 보면
StanReginCd 배열의 2번째 인덱스인 1에 있고,
row란 키의 첫 번째 인덱스, [0]의 region_cd키에 해당합니다.
alert(dong + "의 법정동 코드는 " + regionCd);
=> dong, 여기서는 송파동이므로 위 수식은 "송파동의 법정동 코드는 1171010400"이 됩니다.
실행하면 아래와 같이 경고(알림) 창이 표시됩니다.
'Map(WEB)' 카테고리의 다른 글
| 오픈 API를 이용한 법정동 코드 조회(4) - PHP(1) (0) | 2025.02.27 |
|---|---|
| 오픈 API를 이용한 법정동 코드 조회(3) - JavaScript(2) (0) | 2025.02.26 |
| 오픈 API를 이용한 법정동 코드 조회(1) (0) | 2025.02.24 |
| vworld 지도 만들기(12) - 주소에 대한 좌표 구하기(2) (0) | 2025.02.17 |
| vworld 지도 만들기(11) - 좌표에 대한 주소 검색하기(3) (2) | 2025.02.14 |