Spring boot + Thymeleaf + ajax 이용 중복 이메일 체크

회원가입 시 이메일 중복체크가 필요해서 ajax를 이용해 비동기방식을 이용하여 개발하기로함.(소요시간 : 3일)

 

 

개발 중 발생한 에러 및 몰랐던 점

1. <script></script>태그를 이용해 javascript와 ajax를 정의 후 button을 눌러도 반응을 안함.

<div class="col-sm-6">
        <input class="btn btn-primary" type="button" id="usernameOverlay" onclick="checkUserEmail()" value="중복 체크"/>
</div>

<script type="javascript"></script>

 

아래와 같이 thymeleaf문법에 맞춰 정의 후 해결함

<script th:inline="javascript"></script>

 

 

2. dataType과 contentType 차이점을 모르겠어서 확인해봄

-> dataType : 서버 -> Ajax로 전달되는 데이터 타입

-> ContentType :  Ajax -> 서버로 전달되는 데이터 타입 

 

 

3. 이메일 중복 검사 시 return할 변수 타입을 Member로 줄지 int로 줄지 고민

    1) JpaMemberRepository에서 비어있는 Member 생성

    2) 이미 존재하는 이메일인 경우 email만 있는 객체를 Ajax로 전달

    3) 존재하지 않는 이메일인 경우 비어있는 객체 그대로 Ajax로 전달

    4) ajax에서 email부분만 parsing해서 사용가능 유무를 alert로 띄어줌

@Override
    public Optional<Member> existsByUserEmail(String userEmail) {
        // em.find : pk만 조회가능
        Member member = new Member();
        
        TypedQuery<Member> query = em.createQuery("SELECT m FROM Member m WHERE m.email = :email", Member.class)
                .setParameter("email", userEmail);

        List<Member> result = query.getResultList();

        if(result.size() != 0){
            member.setEmail(result.get(0).getEmail());
        }
        return Optional.of(member);
    }

<script th:inline="javascript">
    function checkUserEmail(){
            var userEmail = {'email' : $("#userEmail").val()};
            $.ajax({
                    url : "/register.userEmail",
                    type : "POST",
                    data : userEmail,
                    dataType : "JSON",
                    success: function(data){
                    if(data.email == null){
                        alert("사용 가능한 이메일 입니다");
                        }else{
                        alert("이미 존재하는 이메일 입니다.");
                        }
                    },
                    error: function(){
                        alert("에러");
                    }

            })
    }
    </script>

 

4. existByUserEmail 기능 개발 시 데이터 흐름과 해당 변수에 어떤 값이 들어있는지 확인이 어려움

-> Debug를 이용해서 값 확인

---

 

 

추가로 해야할 것

1) email 정규식에 맞게 정의하도록 제한

2) 중복된 이메일인 경우 해당 input태그 값 reset시키기

3) 로그인 세션 유지하도록 개발