[1일] 회원가입할 수 있습니다.

[Hong-ji-min]

🌈 Success criteria

1. db를 구축합니다. sh계정으로 springdb에 테이블/샘플데이터를 추가합니다.
2. springboot프로젝트에 웹어플리케이션에 알맞은 starter키워드를 선택하세요.
3. /app 인덱스페이지를 확인할 수 있습니다.
4. /regist 회원가입폼 페이지를 통해 회원 가입을 처리합니다.
5. 이메일 중복확인을 비동기로 처리합니다.
6. 다음 상황에서는 폼이 제출되어서는 안됩니다.
   • 이메일 중복확인을 하지 않은 경우 → 비동기 처리
   • 비밀번호가 일치하지 않은 경우 - html내부에서 처리
   • 필수 입력값이 작성되지 않은 경우 → html에서 required 속성 사용

🍒To-do

• [x] mvc 흐름으로 파일 구조 만들기
• [x] MemberDto, MemeberRegistDto 분리
• [x] 회원가입 시, 필수 입력값 처리
• [x] 회원가입 시, DB 반영 확인
• [x] 이메일 중복 확인 처리
• [x] 비밀번호 일치 하지 않은 경우, 회원가입 안되도록 처리

👓 Review

1. sh계정으로 db 구축 & 샘플 데이터 추가

2. springboot프로젝트에 웹어플리케이션에 알맞은 starter키워드를 선택

• 필요한 dependencies 추가했음
  

3. 인덱스 페이지 확인

4. 필수 입력값 처리

5. 회원가입시, DB 반영 확인

6. 이메일 중복체크 처리 기능 추가

• 이메일 중복처리 버튼 눌렀을때, DB에서 존재하는 이메일이면 "이미 사용중인 이메일입니다", 존재하지 않는 이메일이면 "사용가능한 이메일입니다"가 뜨게 처리
• 이메일 중복 체크를 하지 않고 제출을 할 경우, 이메일 중복체크를 먼저 하라는 메세지를 띄움
• 이메일 중복처리를 한 후, 제출을 한 경우 회원 가입 성공했다는 메세지가 뜨게 처리
• 회원가입 완료 후, 메인 페이지로 redirect 처리

7. 비밀번호 일치하지 않은 경우, 폼 제출 처리 막기

[Hong-ji-min]

html input태그에서 입력된 값을 변수로 사용하는 방법..?

const memberEmail = document.getElementById('email');
        alert(memberEmail);
        $.ajax({
            url: '[[@{/member/sameEmailCheck}]]',
            method: 'post',
            data: {
                memberEmail: **memberEmail**

• 이 코드에서 memberEmail만 쓸 경우, 값을 받는 것이 아니라 object 자체를 찍어버림 -> 따라서 memberEmail.value로 써야 함!