2023.03.11 (62일)

Day 62

---

1. 회원가입 페이지 만들기  

부트스트랩과 ajax를 사용해서 간단하게 만들었는데 스프링과 통신하는 것도 처음이고 오랜만에 html을 만지니 어지러웠다. 그래도 주먹구구식으로 결과를 만들기는 했다. 기본적인 데이터의 유효성 검사와 서버의 응답을 출력하는 기능을 만들었다. 다시 한 번 프론트의 중요성을 느낀다. 오늘 트러블 슈팅이 있었다. 해결은 했는데 프론트 지식이 부족해서 원인을 파악하지는 못했다. 

---

response 실패 시 응답값 못받오는 문제

문제상황

회원가입을 할 때 서버에서 예외를 던지는 경우 존재한다. 예를 들어 중복된 회원이 존재하는 경우 상태코드와 함께 에러 메시지를 객체로 담아서 응답한다. 응답 성공 시 전송하는 객체와 형태는 같은데 성공했을 때는 값을 잘 받아왔지만 실패 시 응답을 받아오지 못하는 문제가 발생했다.

원인 & 해결방법

모르겠다. 원인을 모르겠어서 우회해서 값을 받아왔다.

success: function (response) {  
    console.log("success");  
    const msg = '[Success] : ' + response.msg;  
    alert(msg);  
    location.href = "/login";  
}, error: function (responseData) {  
    const response = JSON.parse(responseData.responseText);  
    const msg = '[Error] : ' + response.msg;  
    alert(msg);  
}

성공시에는 response로 받아서 response.msg로 메시지를 받아오면 되지만 실패시에는 undifned가 출력되어서 reponseText로 문자열로 받아온뒤 다시 JSON으로 변경해서 응답 메시지를 사용했다.

---

2. 주소 API 사용 

실전 프로젝트 메인 페이지에 주소를 입력하는 부분이 있어야 하는데 일반 검색이 아닌 셀렉트 형식으로 하기로 했다. 그래서 첫 번째로는 전국 행정 구역의 정보가 담긴 엑셀을 다운받아 JSON으로 변환 후 DB에 넣어서 정보를 가져오려고 했다. 그래서 JSON으로 변환을 하다가 많은 서비스에서 주소 정보를 사용하는데 API가 존재하지 않을까? 하는 생각이 들었고 주소 API를 찾아보는 방향으로 노선을 틀었다. 역시나 API가 존재했고 공공 API를 이용해서 쉽게 구현할 수 있었다. 아래는 사용법을 정리한 내용이다. 

---

주소 API

주소 api

공간정보 오픈플랫폼 오픈API

공식 reference

데이터 검색

→ vworld 들어가서 가입하고 인증키 발급받아야함.

API 요청 url 예시

https://api.vworld.kr/req/data
// 인증키값
?key=인증키자리
// 등록 도메인
&domain=http://localhost:8080
// 요청 서비스 명 (기본값 data)
&service=data
// 요청 서비스 버전 (기본값 2.0)
&version=2.0
// 요청 서비스 오퍼레이션
&request=getfeature
// 응답결과  포맷
&format=json
// 한 페이지의 출력 결과 수
&size=1000
// 응답결과 페이지 번호
&page=1
// 지오메트리 반환 여부 (기본값 true)
&geometry=false
// 속성 반환 여부 (기본 true)
&attribute=true
// 응답결과 좌표계 (기본 4326)
&crs=EPSG:3857
// 지오메트리 필터 *좌표박스* (minx,miny,maxx,maxy)
&geomfilter=BOX(13663271.680031825,3894007.9689600193,14817776.555251127,4688953.0631258525)
// 조회할 데이터 (LT_C_ADSIGG_INFO)
&data=LT_C_ADSIDO_INFO

// 전체 URL
https://api.vworld.kr/req/data?key=CEB52025-E065-364C-9DBA-44880E3B02B8&domain=http://localhost:8080&service=data&version=2.0&request=getfeature&format=json&size=1000&page=1&geometry=false&attribute=true&crs=EPSG:3857&geomfilter=BOX(13663271.680031825,3894007.9689600193,14817776.555251127,4688953.0631258525)&data=LT_C_ADSIDO_INFO

원하는 데이터 가져오기

URL 마지막 data의 입력값이 가져올 데이터의 유형을 정한다.
데이터 유형 엑셀 다운 링크
위 엑셀 파일에서 원하는 데이터를 정한 뒤 data값에 WFS명을 입력하면 된다.