Spring [쇼핑몰프로젝트] - 아이디 중복 검사 기능[4]

 

 

오늘은 회원가입시 아이디 중복 검사 기능에 대해 포스팅 해보겠습니다. ༼ つ ◕_◕ ༽つ

 

 

구현 순서

 

1. join.jsp 수정 및 css

2. 아이디 중복검사 메서드 작성 및 테스트 

3. ajax 작성

4. Controller 작성

5. mapper / service 작성

6. ajax success 작성

7. 테스트

 

 

1. join.jsp 수정 및 css

 

join.jsp의 27,28째 라인에 span 태그를 추가해 줍니다.

클래스 명은 각각 id_input_box_re_1 과 id_input_box_re_2 로 해줍니다. 

 

 

 

join.css 파일에 추가해줍니다.

display 속성은 요소를 어떻게 보여줄지 결정합니다. 주로 4가지 속성값이 쓰이는데  none은 보이지 않음, block는 블록박스, inline은 인라인 박스, inline-block은 block과 inline의 중간형태를 의미합니다. 

 

 

2. 아이디 중복검사 메서드 작성 및 테스트 

 

join.jsp 하단에 스크립트 코드를 추가해 줍니다.

propertychange change keyup paste input를 사용하면 input에 입력되는 값을 실시간으로 값을 처리 할 수 있습니다.

 

 

콘솔 창에 잘 나오는지 확인을 해줍니다.

 

 

 

3. ajax 작성

 

앞서 작성한 스크립트 부분의 console.log() 부분을 주석 처리해줍니다.

.val()은 양식(form)의 값을 가져오거나 값을 설정하는 메서드 입니다.

.id_input에 입력되는 값을 memberId에 넣어주고, data에 담아 컨트롤러에 넘겨줍니다. (102-103번 라인)

type : post 형식의 type으로 전송하며 (106번 라인)

url : Back End에서 받을 요청 url을 의미합니다. (107번 라인)

data : data형식으로 데이터를 전송합니다. (108번 라인)

 

 

 

👀❗여기서 잠깐❗👀 - $.ajax란?

Ajax란 Asynchronous JavaScript and XML의 약자입니다. 

Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법중 하나입니다. (비동기 형식)

또한 웹페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신 할 수 있습니다.

 

 

 

👀❗여기서 잠깐❗👀 - JSON이란?

JSON은 javascript 객체를 만드는 표현식입니다.

key : value 형식의 데이터 저장 방식이며 경량의 DATA를 교환하는 방식입니다.

JSON은 객체를 정의하지 않습니다. javascript 객체가 아니라 객체 표현식으로 데이터를 표현합니다.

type : 서버 전송 통신 방식 지정 ( GET, POST, PUT, DELETE )

url : 데이터를 전송할 URL

dataType : data type을 "json"형식으로 전송

ContentType : 서버에 데이터를 보낼 때 JSON 데이터 형식 지정

data : 서버로 보낼 데이터

 

 

 

 

4. Controller 작성

 

MemberController에 memberIdChkPOST 메서드를 작성해줍니다.

테스트 진행을 위해 반환타입을 잠시 void로 설정해줍니다.

@ResponseBody 어노테이션을 반드시 작성해주어야 join.jsp로 메서드의 결과가 반환됩니다.

join.jsp에서 작성한 ajax요청을 memberIdChkPOST 메서드가 수신받는지 확인하기 위해 log를 찍어줍니다.

 

 

 

 

👀❗여기서 잠깐❗👀 - @ResponseBody와 @RequestBody란?

클라이언트에서 서버로 통신하는 메세지를 요청(request) 메시지라고 하며,

서버에서 클라이언트로 통신하는 메세지를 응답(response) 메세지라고 합니다.

비동기통신을 하기 위해서는 클라이언트에서 서버로 요청 메세지를 보낼 때, 본문에 데이터를 담아서 보내야 하고,

서버에서 클라이언트로 응답을 보낼때에도 본문에 데이터를 담아서 보내야합니다. 이 본문이 바로 Body 입니다. 

요청하는 본문을 RequestBody, 응답하는 응답 본문을 ResponseBody라고 합니다. 

 

 

 

 

 

 

테스트를 해줍니다. 로그가 아주 잘 찍히고 있습니다 ✪ ω ✪

 

 

 

테스트가 잘 되었으니 log를 주석처리 해줍니다.

메서드의 반환타입을 void에서 String으로 변경해 줍니다.

memberservice.idCheck의 결과를 int형 변수인 result에 저장합니다. (존재한다면 1, 존재하지 않는다면 0을 반환합니다.)

result의 결과가 0이 아니면 fail을 반환하고, 1이 아니면 success를 반환하는 if문을 작성해 줍니다.

이제 memberservice에 idCheck 메서드를 작성해 주어야 합니다. 

 

 

 

 

5. mapper / service 작성

 

MemberMapper.xml에 아이디 중복확인을 위한 코드를 추가해 줍니다.

 

 

MemberMapper.java 인터페이스에도 코드를 추가해 줍니다.

 

 

 

작성한 mapper 메서드가 잘 동작하는지 확인하기 위해 test를 진행해 줍니다.

MemberMapperTest.java에 테스트 코드를 작성하고 Junit 테스트를 실행해 줍니다.

 

 

 

MemberService.java에 코드를 추가해 줍니다.

 

 

MemberServiceImpl.java에도 코드를 추가해 줍니다.

 

 

 

 

 

6. ajax success 작성

 

join.jsp에 작성한 ajax에 success 코드를 추가해 줍니다. 

정상으로 값이 넘어가는지 확인하기 위해 log도 같이 작성해 줍니다.

 

 

 

 

서버를 구동시켜 아이디란에 데이터베이스에 존재하는 아이디와 존재하지 않는 아이디를 작성해보고 결과값을 확인합니다.

 

 

 

값이 정상적으로 출력이 되었습니다.

이제 log를 주석 처리해줍니다.

success 메서드에 if문을 추가해 줍니다. 

 

 

 

7. 테스트

 

데이터베이스에 없는 데이터 입력시 뜨는 문구 ↓

 

 

 

데이터베이스에 있는 데이터 입력시 뜨는 문구 ↓

 

 

 

 

이상입니다 (●'◡'●)

 

 

 

 

 

 

 

 

 

 

참고 : Kim VamPa (tistory.com) 👍