[Spring] 회원가입 구현하기 - 4 <다음 주소 API 사용법>

안녕하세요~! 저번 포스팅에 이어서 회원가입 4페이즈 진행해보겠습니다.

 

저번 포스팅이 궁금하신 분들은 아래 링크를 참고해 주시길 바랍니다.

 

2019/05/20 - [Programming/JAVA] - [Spring] 회원가입 구현하기 -1

[Spring] 회원가입 구현하기 -1

2019/05/21 - [Programming/JAVA] - [Spring] 회원가입 구현하기 - 2

[Spring] 회원가입 구현하기 - 2

2019/05/22 - [Programming/JAVA] - [Spring] 회원가입 구현하기 -3

[Spring] 회원가입 구현하기 -3

저번 포스팅에서 이메일 인증까지 구현을 했으니 이제 비밀번호를 입력해 주겠습니다.

 

/* 비밀번호 일치 여부 체크 */
function onblur_passwordCheck() {
	$("#createPasswordSpan").remove();
	if ($("#${commandName} #userPw").val() != "" || $("#${commandName} #userPw2").val() != "") {
		if ($("#${commandName} #userPw").val() != $("#${commandName} #userPw2").val()) {
			$(".passwordCheck").append('<span class="createPasswordSpan" id="createPasswordSpan"></span>');
			$("#createPasswordSpan").css("color", "red").css("font-size", "10px").css("margin-left", "10px");
			document.getElementById("createPasswordSpan").innerHTML = "비밀번호가 일치하지 않습니다.";
		}else{
			$(".passwordCheck").append('<span class="createPasswordSpan" id="createPasswordSpan"></span>');
			$("#createPasswordSpan").css("color", "blue").css("font-size", "10px").css("margin-left", "10px");
			document.getElementById("createPasswordSpan").innerHTML = "비밀번호가 일치 합니다.";
		}
	}
}

비밀번호와 비밀번호 확인이 일치하는지 알려주는 스크립트 함수를 만들어 주었습니다.

 

 

비밀번호가 일치하는지 아닌지 확인할 수 있습니다.

 

그리고 주소를 입력해주어야 하는데, 우리가 직접 전국의 모든 주소를 담을 수 없기 때문에 API를 쓰도록 하겠습니다.

 

저는 티스토리 유저이기 때문에 다음 주소 API를 쓰겠습니다.

 

다음 주소는 구글과 달리 api 키를 발급받을 필요가 없고 무료이기 때문에 비교적 간편하고 손쉽게 쓸 수 있습니다.

<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>

jsp 상단에 추가해줍니다.

var element_layer = document.getElementById('layer');
	
	//주소 검색 닫아주기
	function closeDaumPostcode() {
		// iframe을 넣은 element를 안보이게 한다.
		element_layer.style.display = 'none';
	}
	
	//주소 검색 열어주기
	function openDaumPostcode(userZipCode, userFirstAddr, userSecondAddr) {
		new daum.Postcode({
			oncomplete : function(data) {
				document.getElementById(userZipCode).value = data.zonecode;
				document.getElementById(userFirstAddr).value = data.address;
				document.getElementById(userSecondAddr).focus();
				element_layer.style.display = 'none';
			},
			width : '100%',
			height : '100%'
		}).embed(element_layer);
		element_layer.style.display = 'block';
		initLayerPosition();
	}

	//팝업창 세부 설정
	function initLayerPosition() {
		var width = 300; //우편번호서비스가 들어갈 element의 width
		var height = 460; //우편번호서비스가 들어갈 element의 height
		var borderWidth = 5; //샘플에서 사용하는 border의 두께

		// 위에서 선언한 값들을 실제 element에 넣는다.
		element_layer.style.width = width + 'px';
		element_layer.style.height = height + 'px';
		element_layer.style.border = borderWidth + 'px solid';
		// 실행되는 순간의 화면 너비와 높이 값을 가져와서 중앙에 뜰 수 있도록 위치를 계산한다.
		element_layer.style.left = (((window.innerWidth || document.documentElement.clientWidth) - width) / 2 - borderWidth) + 'px';
		element_layer.style.top = (((window.innerHeight || document.documentElement.clientHeight) - height) / 2 - borderWidth) + 'px';
	}

 

그리고 위의 스크립트를 작성해 주면 주소검색을 사용할 준비가 끝났습니다.

 

 

만들어준 주소 input창을 클릭하면 주소를 검색할 수 있습니다.

 

 

이런식으로 주소를 입력할 수 있습니다.

 

 

 

자 이제 가입을 위한 모든 입력이 끝났으니 회원 가입 버튼을 눌러야겠죠?

 

하지만 저 버튼을 누르면서 데이터를 그대로 DB에 저장해버린다면 

 

유저테이블의 password가 입력한 그대로 노출이 되어버리겠죠?

 

사실 비밀번호는 아주 민감한 사항이라 운영자조차도 유저의 비밀번호를 알아서는 안됩니다.

 

그래서 암호화를 해주고 데이터베이스에 저장을 해야하는데요,

 

거기까지 다루려면 내용이 아주 길어질 것 같으니 다음 포스팅에서 이어가도록 하겠습니다.

 

다음 포스팅엔 반드시 마무리를 지을 수 있기를..