SPRING(10) 만약 다음 주소 API를 쓰는데 데이터베이스가 하나라면?

데이터베이스를 설계하는 부분에서 주소를 받는 3영역이 필요하지만 만약 컬럼 값이 하나라면 코드에서 처리를 해주어야 합니다. 

 

• 처리하기 위해서는 우편번호, 주소, 상세주소를 하나로 묶어서 데이터를 처리해야합니다.

그래서 자바스크립트로 하나로 뭉쳐서 보내는 방식은?

 

1. 먼저 submit이었던 회원가입을 button으로 바꾸고 onclick에 register()를 넣어줍니다.
2. 그리고 form에다가 id를 삽입하고 fo로 이름을 짓습니다.

<form id="fo" action="register" method="post">
<table border="1">
<tr><td>
<input type="text" name="id" placeholder="아이디"><br>
<input type="text" name="pw" placeholder="비밀번호"><br>
<input type="text" name="addr" id="addr1" readonly placeholder="우편번호" > <!-- readonly를 해야 사용자가 직접 작성하지 못합니다, -->
<input type="button" onclick="daumPost()" value="우편번호 찾기"><br>
<input type="text" id="addr2" readonly placeholder="주     소"> <!-- readonly를 해야 사용자가 직접 작성하지 못합니다, -->
<input type="text" id="addr3" placeholder="상세주소">
			 <br>
        <hr>
        <input type="button" onclick="register()" value="회원가입">
<!-- type을 submit에서 button으로 교체 후 onclick을 register()를 넣었음-->
     </td></tr>
  </table>
</form>

 

 

3. 그리고 script 부분에서 주소들을 합쳐줄 코드를 작성합니다.

 

function register() {
addr1 = $("#addr1").val()
addr2 = $("#addr2").val()
addr3 = $("#addr3").val()
addr = addr1 + "/" + addr2 + "/" + addr3
}

4. 그리고 form에 id로 fo로 지정해준것을 이용해 전송을 해주는 코드도 넣어줍니다.

 

fo.submit()을 해주면 값이 정상적으로 전송됩니다.

function register() {
addr1 = $("#addr1").val()
addr2 = $("#addr2").val()
addr3 = $("#addr3").val()
addr = addr1 + "/" + addr2 + "/" + addr3
$("#addr1").val(addr)
fo.submit()
}

 

그러면 하나의 컬럼값에 /로 묶여진 주소들이 데이터베이스에 잘 저장이 되는 것을 알 수 있습니다.