Spring [쇼핑몰프로젝트] - 인증번호 이메일 전송[7]

 

 

오늘은 회원가입시 이메일 전송에 대한 첫번째 포스팅을 해보겠습니다 ( *^-^)ρ

 

 

 

구현 순서

 

1. 인증번호 입력란 색상 변경 및 disabled 속성 추가

2. 이메일 전송 메서드 추가

3. Controller 메서드 추가

4. 테스트

 

 

1. 인증번호 입력란 색상 변경 및 disabled 속성 추가

 

join.jsp에 id="mail_check_input_box_false" 코드를 추가해 줍니다. (58번 라인)

 

 

 

join.css에 하단의 코드를 추가해 줍니다. false에는 회색, true에는 투명 혹은 흰색을 띄게 해주는 코드입니다. 

 

 

join.jsp에 disabled="disabled" 코드를 추가해 줍니다. (59번 라인)

 

 

 

2. 이메일 전송 메서드 추가

 

인증번호 전송 버튼을 클릭하면 작성하는 메서드를 작성하겠습니다. 

Controller로 작성한 이메일 주소로 보내고, 인증번호를 생성하여 전달받은 이메일로 전송한 뒤 전송된 인증번호 뷰(회원가입 페이지)로 다시 반환되도록 해줍니다.

Controller에 요청할때 화면이 전환되면 안되기 때문에 ajax(비동기식)를 사용합니다. 

 

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

email 변수를 선언해서 입력한 이메일 값(mail_input)을 전달받을 수 있도록 해줍니다. (126번 라인)

ajax 코드의 타입은 GET이며, url을 통해 데이터를 보낼 수 있도록 해줍니다. (128-131번 라인)

url명은 mailCheck로 해주었습니다. url 끝에 ? 마크를 통해 url의 끝을 알리면서, 데이터 표현의 시작점을 알려줍니다. 

 

 

 

 

3. Controller 메서드 추가

 

ajax에서 요청을 실행하는 메서드를 추가해줍니다.

반환타입은 임시로 void로 설정했지만, 추후에 String으로 바꿀 시 @RequestBody 어노테이션이 필요하기 때문에 미리 작성해줍니다. String으로 변경할 경우 뷰로 온전히 데이터를 전송하기 위해 @RequestBody 어노테이션이 필요합니다.

데이터가 잘 넘어오는지 확인하기 위해 log를 작성해줍니다.

 

 

 

4. 테스트

 

웹 페이지 화면 ↓↓↓

 

콘솔 창 ↓↓↓

 

 

 

 

값이 아주 잘 들어왔습니당 (❁´◡`❁)

 

 

 

 

 

 

 

 

 

 

 

참고 : Kim VamPa (tistory.com) 👍