[블로그 만들기] 주소 API 활용 -2) 주소찾기 기능 넣기

2021.07.18 - [Spring] - Spring 주소 api / 주소 검색 1) API 가져오기

지난 게시글에서 설정한 파일을 이제 적용할 프로그램에 붙여넣기 해줍니다.
우선 Sample.jsp 파일에서 <script> 태그를 복사해서 사용할 jsp 파일에 붙여넣기 해줍니다.

회원가입 페이지에서 주소 찾기 기능을 넣으려고 합니다. regist.jsp 파일의 body 태그 속 가장 아래에 <script>태그를 붙여넣기 해좁니다. 이때 goPopup()함수의 pop 속 open 함수에 들어가는 주소는 상대주소로 하면 안됩니다. jusoPopup.jsp 파일이 있는 폴더 명을 첫번째 매개변수로 넣어주세요.
jusoCallBack 함수의 querySelector는 주소가 들어갈 부분의 id 값을 넣어줍니다.

주소찾기 버튼을 눌렀을 때 실행되어야 할 메서드는 같은 주소로 GET,POST 매핑 방식 두개를 모두 만들어야 합니다. jusoPopup.jsp 파일 속 init 함수가 두번 실행되면서 처음에는 GET 방식으로, 두번째에는 값을 들고 가기 때문에 POST 방식으로 매핑하므로 PostMapping을 하는 메서드가 필요합니다.
Post로 매핑하는 메서드에는 roadFullAddr 과 inputYn을 받아와야 합니다. 그래야 Model에 올리고 jusoPopup.jsp 파일에서 El 표현식을 통해 쉽게 데이터를 받아올 수 있습니다.

jusoPopup.jsp파일에서도 request들은 다 지워줍니다. UTF-8 설정한 것도 properties.yml 파일에서 설정해주었기 때문에 다시 설정해줄 필요는 없으므로 지워줍니다.
inputYn과 roadFullAddr을 받아와야하는데 request를 지웠으니 EL표현식을 통해 간편하게 받아와줍니다.
이는 바로 통신으로 들어온 것도 아니고 request로 데이터를 받는 것도 아니고 setAttribute로 model에 담아서 데이터를 받아 EL 표현식을 쓰면 쉽게 받아올 수 있습니다. 자바 코드를 톰캣이 먼저 컴파일 하고 그 뒤 자바스크립트를 컴파일 하기 때문에 자바스크립트 값을 자바에 넣는 것은 무리가 있습니다. 하지만 자바스크립트에 자바 변수를 넣는 것은 가능합니다. 자바를 먼저 컴파일 하기 때문입니다.

마지막으로 주소가 반환되는 부분에 readonly 속성을 달아주어 주소 검색을 하지 않으면 수정이 불가능하게 해줍니다.

서버를 실행시켜서 확인해보면

주소 찾기 버튼을 눌러서 주소 팝업을 띄우고

팝업에서 검색하고 확인을 누르면

주소가 잘 들어가는 것을 볼 수 있습니다.

주소 API를 가지고 회원가입 기능 중 주소 검색을 만들어보았습니다.