맛집 공유 SNS 프로젝트#01_2. 회원가입 기능 구현(주소api)

회원가입 기능을 구현하기에 앞서, 회원가입 시 사용자가 입력할 정보는 이름, id, pwd, 주소로 총 4가지이다. 

주소를 입력할 때 입력 칸에 사용자가 직접 입력하는 게 아니라 주소 api를 사용하여 주소를 검색하도록 할 것이다.

우선 https://business.juso.go.kr/addrlink/openApi/apiReqst.do

으로 접속하여 api를 신청한다.

여기서 URL에 localhost:8181을 써줬음

api를 신청하고 나서, 내가 사용할 수 있는 변수가 무엇인지 가이드를 살펴보았다.

참고항목은 (목동, ~아파트) 이러한 걸 의미

나는 여기서 도로명주소(참고항목 제외), 우편번호, 고객 입력 상세 주소를 사용할 것이다. 보니까 내가 전에 만들어놓은 테이블을 수정해야 한다. 테이블을 다음과 같이 수정했다.

DTO도 위와 같이 다시 수정해주겠다.

 

인증키를 발급 받으면 해당 사이트에서 가이드 및 소스 파일을 다운로드 받고 .jsp 파일을 아래 경로에 넣는다.

나 같은 경우에는 join.jsp이 회원가입 페이지이기 때문에 Sample에 있던 코드를 따와서 join에 넣어주었다.

그런데 아까 이렇게 코드를 작성했더니 갑자기 " Multiple annotations found at this line "이라는 오류가 떴다.

그래서 구글링을 통해 해결 방법을 찾았다. 

프로젝트 우클릭> properties > java build path에 들어가서 만약 톰캣이 없다면 Add Library를 클릭해 server runtime에서 톰캣을 add해주면 된다.

그랬더니 그 오류는 해결됐다. 이렇게 코드를 수정한 후 팝업창이 잘 뜨는지 확인하기 위해 구동해보았다.

404에러가 뜬다. 혹시 몰라 '/popup/jusoPopup'으로 다시 시도했는데 해결되지 않았다. 혹시 몰라서 테스트를 위해 '/member/join'으로 해보았더니 잘된다.

생각해보니까 controller를 작성하지 않았다. controller를 작성하고 실행해보니 

이렇게 팝업창이 잘 뜬다. 이제 나머지 파일도 작성하겠다.

MemberController

MemberServiceImpl

MemberDAOImpl

memberMapper

나중에 회원가입 기능 확장을 위해 다양한 변수 존재

다음과 같이 코드를 작성하고 돌려봤는데 주소를 입력하고 팝업창에서 '주소 입력' 버튼을 누르니 제대로 실행이 되지 않았다. 다음과 같이 코드를 바꾸니 제대로 동작하였다.

아무래도 document.form.name.value로 값을 가져올 때 뭔가 잘못한듯

위의 주소는 아무거나 삽입