(API) 공공데이터포털 API활용 / (JS/AJAX) 대분류에 따른 중분류 내용 변경
✅ 요약
1. 목표한 것 : 코땡나 선별진료소 정보를 지도에 표시하기
2. 배운 것 : CORS 정책 / XML데이터 파싱
3. 명심한 것 : 샘플코드를 잘 읽자
구구절절 쓰다가 내 병타퍼포먼스만 줄줄 늘어놓는 꼴이 되니까 나중에 봐도 쓸모는 없겠다 싶어서 걍 지움...
최대한 요약해서 쓰기로 함
1. 공공데이터포털 데이터 가져오기
(1) 맨처음 생각한 논리는 버튼 클릭하면 ajax로 위 주소 연결해서 받아온 data를 HTML에 삽입시켜 주면 되는 거 아닌가? 였다 (제발 그 생각 멈춰)
→ 그랬더니 CORS 정책에 위배된다고 경고를 오천만번 쯤 받았다.
CORS 정책이 무엇인가는 pass(사실 아직 내가 내 말로 풀어 설명할 수 있는 수준이 못 됨)
아무튼 구글링을 쌔빠지게 돌리며 (1) 프리플라이트 코드 따라쓰기 (2) CORS 적용해제 필터 작성 등등의 삽질을 계속했다.
내가 여기서 벗어나게 된 계기는 'CORS정잭은 HTML 단계에서만 적용된다'는 거다. 다시 말해 자바단으로 들어가서 저 링크에 접속하면 괜찮다는 뜻?
(2) 그래서 서블릿으로 이동했다. 서블릿 단까지 가니까 다른 에러는 떠도 CORS 에러는 안 뜬다. 그래도 에러는 에러라서 열심히 개선방법을 찾았다.
그러던 중 알게 됐다. 공공데이터포털에는 각 컴퓨터 언어용 샘플코드라는 걸 제공해준다... 매뉴얼 안보고 혼자 우다다 달려나가는 습관이 얼마나 바보같은지 뼈저리게 느낌
(3) 샘플코드를 활용하니까 놀랍도록 빨리 데이터를 반환했다.
그런데 이걸 어떻게 지역별로 거르냐, 하는 문제에 닥쳤다. 이거 때문에 또 고민을 하다가 (짧게 쓰지만 고민은 길었다) 강같은 글 발견
https://m.blog.naver.com/nonamed0000/220988048654
xml 형식으로 구성된 파일을 java단에서 분해해 객체형 리스트로 만들어내는 과정을 알려주셨다
그래서 여기에 지역별 구분단계에서 내용을 1차로 거르고 요청에 맞는 내용만 리턴해서 리스트에 담음
2. 지도 대분류/중분류 만들기
이부분이 야매의 초절정이라 쓰기도 민망하지만 일단 기록해놓는다.
json을 더 잘 알았다면 더 쉽게 할 수 있었을텐데 머리가 나쁘면 몸이 고생하는 인생 레전드답게 몸으로 떼웠다.
(1) 기본
<select name="sidoCdNm" id="sidoCdNm" class="form-select">
<option>시/도</option>
<option value="서울">서울특별시</option>
<option value="경기">경기도</option>
<option value="인천">인천광역시</option>
<option value="강원">강원도</option>
<option value="충남">충청남도</option>
<option value="대전">대전광역시</option>
<option value="충북">충청북도</option>
<option value="세종">세종특별자치시</option>
<option value="부산">부산광역시</option>
<option value="울산">울산광역시</option>
<option value="대구">대구광역시</option>
<option value="경북">경상북도</option>
<option value="경남">경상남도</option>
<option value="전남">전라남도</option>
<option value="광주">광주광역시</option>
<option value="전북">전라북도</option>
<option value="제주">제주도</option>
</select>일단 대분류 드롭다운 리스트만 생성하고 중분류 리스트는 틀만 만들었다.
$("#sidoCdNm").on("change",function(){
// 하단 내용 기재
});대분류의 변화에 따라 동작하는 이벤트를 걸어놓고
$.ajax({
type: 'post',
url : '/이동서블릿',
data : {
"district": 대분류값.val()
},
success : function(data){
},
error : function(){
}
})해당 선택지의 value를 구해다가 서블릿에 같이 넘겼다.
여기부터가 진짜 삽질레전드인데
걍... 지역별로 모든 경우의수를 String으로 따놓고 선택값에 따라 해당 값이 리턴되게 했다... ㅡㅡ;;; 감자가 할 수 있는 최선
String[] result = data.split(",");
response.setContentType("application/json");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
new Gson().toJson(result, out);그렇게 만든 String을 split 메소드로 배열화해 json에 태워 다시 보내기.
success : function(data){
// 군구정보 리턴
$("#sgguCdNm").empty();
$("#sgguCdNm").append('<option>구/군</option>');
$.each(data, function(index, item){
$("#sgguCdNm").append('<option value="'+item+'">'+item+'</option>');
})
},보내온 정보는 each문에 담아 각각 option 태그로 둘러싼 채 본문에 삽입한다.
✔ 속성 변경 시 기존 검색결과로 만들어진 분류값은 지워야 하니까 .empty();
✔ 맨 위 분류기준 보여주려고 구/군 단위 option 사전 추가
✔ append()와 appendTo()의 차이 잊지말기! (부모요소).append(신규요소); / (신규요소).appendTo(부모요소)
(2) 옵션. 검색 후 리턴시 값 드롭다운 값 셋팅해놓기
$(function(){
const sidoInfo = $("대분류값").val();
const gugunInfo = $("중분류값").val();
// 하단 내용 기재
});기본 준비로 onload 함수 걸어둔 뒤 대/중/소분류 정보를 받아온다. 사실 이부분을 .param으로 해결할 수 있지만 이때의 나는 감자니까 정직하게 hidden에 숨겨왔다.
$('대분류 option[value="'+sidoInfo+'"]').attr("selected", true).trigger("change");'대분류 select 중에서 해당 값을 가진 option을 찾는다.'
> 'selected 속성을 true로 바꿔준다.'
> '이것의 변화에 따른 트리거를 실행시킨다' 는 논리
중분류도 이거랑 똑같이 하면 되지 않냐? 했는데 문제가 있었다. 바로 js는 자바와 달리 비동기 방식이라는 거.
그래서 컴퓨터는 기다려줄 수가 없는거다. 대분류가 selected 속성을 true로 변경하고 트리거를 실행시키기까지의 짧은 그 순간조차.
setTimeout(function(){
if(gugunInfo!="null"){
$('중분류 option[value="'+gugunInfo+'"]').attr("selected", true);
}
},100);그래서 중분류는 setTimeout으로 0.1초의 간격을 두고 실행되게 했다.