Day94 - [Jquery]회원가입( 주소API 구현 ), 로그인 기능 구현

어제까지 게시판에 대한 기능 구현을 마치고, 이제 User 쪽 기능을 구현 해보도록 하겠습니다

 

회원가입 기능 구현

User 쪽 기능 하면, 먼저 회원가입을 하도록 해주어야 하는데요

 

html, css 등 화면에 보여지는 기본적인 세팅은 선생님께서 배포한 상태 입니다.

 

개발 환경은 Spring , oracle, Lombok, myBatis, Tiles View Template 를 사용하고 있습니다.

 

먼저 회원가입을 아래처럼 화면에 보이도록 만들어 줍니다.

일단, User 컨트롤러 를 만들어서, 페이지가 작동하도록 만들어 줍니다.

1. 데이터베이스 및 UserVO 를 만든다

먼저 회원가입Form 에서 넘어올 데이터 들에 대한 데이터베이스 및 그에 상응 하는 UserVO 를 만듭니다.

이 때, Input 태그에 name 과 이름을 같도록 합니다.

 

※ oracle 은 대소문자를 구분하지 않음 ( 문자열 제외 )

※ Lombok 을 사용해서, getter, setter , 생성자 등은 위의 @Data , @All .... 이 대신 만들어줌

 

2. 아이디 중복체크를 만들기

먼저, 회원가입을 하려면 기본 키인 아이디가 이미 존재하는 가 에 대한 조건을 만족 해야 합니다.

 

그렇기에, "아이디 중복체크" 버튼을 누르면, 데이터베이스에 접근해서 해당 아이디가 존재하는지 여부를 판별 해야 합니다.

 

해당 아이디만 매개변수로 넘겨서 확인을 해도 되고, 이미 만든 UserVO 를 사용해도 됩니다 ( UserId 만 할당됌 )

※ 비동기 통신 으로 구현하기 위해서 @ResponseBody 를 사용했습니다. ( @ResponseBody 를 사용하면 뷰 리졸버가 아닌 요청한 곳으로 retrun 값을 돌려 줍니다  ) , @RequestBody 는 넘어오는 변수를 바로 VO의 Setter 를 통해 데이터가 입력 됩니다.

 

Service, SerivceImpl, Mapper.java  에는 각각 idCheck 라는 메서드를 만들어 줍니다.

이제 SQL 문을 작성해주면 되는데, Mapper.xml 에서 아래와 같이 작성해주면 됩니다.

아이디가 이미 있다면 1을 반환, 없다면 0을 반환 하게 됩니다

 

이제, 비동기 통신으로 해당 값을 요청하면 됩니다. 해당 아이디를 비교하기 전에, 간단하게 아이디가 공백인지 여부 등 정규식 표현법을 사용한 형식 처리를 한 후 넘깁니다.

<script>
    	// 아이디 중복체크
    	$("#idCheck").click(function() {
    		
    		var userId = $("#userId").val();
    		
    		if( userId == '' || userId.length < 4 ) {
    			$("#userId").focus(); // 포커싱함수
    			alert("아이디 형식을 확인하세요");
    			return; // 함수 종료
    		};
    		
    		// 비동기처리
    		$.ajax({
    			type : "post",
    			url : "idCheck",
    			contentType : "application/json",
    			data : JSON.stringify({"userId" : userId}),
    			success : function(data) {
    				
					if(data == 0){ // 사용가능
						$("#userId").attr("readonly", true); // 리드온리 속성지정
						$("#msgId").html("사용가능한 아이디 입니다");
					} else { // 중복
						$("#msgId").html("중복된 아이디입니다");
					}
    				
    			},
    			error : function(status, error) {
    				alert("서버문제가 발생했습니다. 관리자에게 문의하세요.");
    			}
    		});
    		
    	}); // 아이디 중복체크
</script>

3. 폼검증 ( 주소 API 구현 )

이제 회원가입 폼에서 입력되는 값들을 검증해야 하는데요

 

이는, 비밀번호와 비밀번호확인 이 동일한 값인지, 이름을 입력했는지 등등이 있습니다.

<script>
	// 폼검증
    	$("#joinBtn").click( function() {
    		
    		console.log( $("#userId").attr("readonly") );
    	
    		if( $("#userId").attr("readonly") != 'readonly' ){ // 중복검사를 하지 않은 경우
    			alert("아이디 중복검사는 필수 입니다.");
    			$("userId").focus();
    			return;
    		} else if ( $("#userPw").val() == '' || ( $("#userPw").val() != $("#pwConfirm").val() ) ) {
    			alert("비밀번호를 확인하세요");
    			$("#userPw").focus();
    			return;
    		} else if ( $("#userName").val() == ''){
    			alert("이름은 필수 입니다");
    			$("#userName").focus();
    			return;
    		} else {
    			$("#joinForm").submit(); // 전송
    		}
    		
    	}); // 폼검증
    	
    	// 엔터값 처리 (form태그에 keyup 이벤트, 엔터값이 아니라면 처리x)
    	$("#joinForm").on("keyup", "input", function(event) {
    		
    		if( event.keyCode != 13 ) return; // 엔터의 키값이 아니면 함수 종료
    		
    		$("#joinBtn").click(); // 폼검증 함수 호출
    		
    	}); // 엔터값 처리
    	
    </script>

특히, 회원가입을 할 때 주소를 적기 마련인데요 주소 API 를 사용하면 됩니다.

 

검색엔진에 "주소API" 를 검색 합니다.

기본적으로 API 를 사용하기 위해서는 대부분 인증키를 발급 받아야 합니다. ( 아래처럼 진행해 줍니다 )

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

※ 인증키 부분에는, 자신이 발급 받은 인증키를 넣어 줍니다.

 

직접 코드를 보고, 해석을 해보면 좋습니다. ( 도로명주소를 입력하고 검색을 누르면, 해당 서버에 데이터를 전달하고, 콜백 함수를 통해서 원하는 데이터를 받아올 수 있도록 되어 있음 )

 

주소찾기 버튼을 누르면 아래의 함수를 실행하도록 만들어 줍니다. ( 콜백함수를 실행시켜서 필요한 값만 표시되도록 )

<script>

  // 주소 팝업
  function goPopup() {
  	var pop = window.open("${pageContext.request.contextPath}/resources/popup/jusoPopup.jsp","pop","width=570,height=420, scrollbars=yes, resizable=yes");
  }

  function jusoCallBack(roadFullAddr,roadAddrPart1,addrDetail,roadAddrPart2,engAddr, jibunAddr, zipNo, admCd, rnMgtSn, bdMgtSn,detBdNmList,bdNm,bdKdcd,siNm,sggNm,emdNm,liNm,rn,udrtYn,buldMnnm,buldSlno,mtYn,lnbrMnnm,lnbrSlno,emdNo){
    // 팝업페이지에서 주소입력한 정보를 받아서, 현 페이지에 정보를 등록합니다.

    document.getElementById("addrBasic").value = roadAddrPart1;

    document.getElementById("addrDetail").value = addrDetail;

    document.getElementById("addrZipNum").value = zipNo;
  }

</script>

이를 실행하면, 아래 처럼 됩니다.

4. 데이터베이스에 입력한 값 등록

위의 폼검증을 진행하면서, 조건들을 만족하면, submit() 함수를 실행하도록 되어 있습니다.

컨트롤러에서 처리할 수 있도록 만들어 줍니다.

컨트롤러에서 사용하는 join 이라는 메서드를 각각 Service, ServiceImpl, Mapper 에 만듭니다.

※ 이 때, 비밀번호는 서비스에서 데이터 암호화를 진행 해야 합니다. ( 건너뜀 )

Mapper.xml 에서 SQL 문을 이용해서 값을 insert 합니다.

데이터베이스에 무사히 값을 insert 하게 되면, 로그인화면을 보여줄 수 있도록 컨트롤러에 아래의 메서드를 추가 합니다.

이렇게 하면, 회원가입을 완료하게 되었습니다. 로그인 화면에서는 "msg" 를 전달 받아서, 회원가입에 성공, 실패 여부를 화면에 표시해 줍니다.

 

로그인 구현

로그인은 아이디 와 비밀번호 를 받아서 해당 아이디와 비밀번호에 일치하는 값이 있는지 여부를 확인하면 됩니다.

 

아래의 로그인Form 을 만들고, Input 태그의 name속성에 UserVO 에서 만든 변수 이름과 같도록 해줍니다.

※ userId, userPw

로그인을 누르면, 해당 값들이 컨트롤러로 넘어가도록 처리 해줍니다.

 

로그인에 성공할 경우, 필요한 데이터를 session 에 저장 합니다. ( 로그인 하지 않고 User 개인 페이지 접근 제한 위해 )

컨트롤러 에서 사용하는 login 메서드를 각각 Service, ServiceImpl, Mapper 에 만듭니다.

※ ServiceImpl 에서 매개변수로 넘어온 비밀번호 를 암호화 및 예외처리 해줍니다 ( 건너뜀 )

Mapper.xml 에서 SQL 문을 작성 합니다. ( 비밀번호는 가지고 오지 말 것 )

where 조건에 알맞은 데이터가 있다면 데이터를 반환 하지만, 없다면 null 이 됌

 

오늘은 여기까지 알아 보았습니다.