Spring Boot ajax 사용하기

-> ajax : 비동기 통신을 지원하는 기능 ex) 이메일 중복체크
-> ajax를 사용하기 위해서 jquery cdn을 사용해야함
여기서는 회원가입 시 이메일 중복체크를 위해 ajax를 사용할 예정이다

https://releases.jquery.com/
-> 위 사이트에 들어가서 jQuery Core 3.7.1 minified 버전을 클릭하면 코드가 나오는데, 이를 복사해둔다
-> 복사한 코드를 save.html 파일(회원가입 페이지)의 head-title 아래에 붙여넣는다

1) save.html

    이메일 : <input type="text" name="memberEmail" id="memberEmail" onkeyup="emailCheck()"> <br>

jquery cdn을 사용하기 위한 코드를 넣은 후
-> 이메일을 입력받는 칸에 id="memberEmail"을 추가해준다 (id 속성은 중복 불가)
-> 이어서 속성을 추가한다 => 키보드를 하나씩 입력할 때마다 함수가 호출되는 onkeyup => onkeyup 옵션 대신 onblur 옵션을 사용하면 다음 칸으로 입력이 넘어갔을 때 emailCheck()를 실행하도록 한다

<script th:inline="javascript">
    const emailCheck = () => {
        const email = document.getElementById("memberEmail").value;
        console.log("입력값 : ", email);
        $.ajax({
            type:"post",
            url: "/member/email-check",
            data: {
                "memberEmail": email
            },
            success: function(res) {
                console.log("요청 성공", res);
            },
            error: function(err) {
                console.log("에러 발생 ", err);
            }
        })
    }
</script>

위의 코드는 body 아래에 입력하면 된다
-> 현재 문서(document)에서 memberEmail을 id로 갖는 요소에 접근한다는 의미
-> console.log 하면 당연히 인텔리제이에서 실행되고 있는 console에 찍히는 건줄 알았는데 웹에서 찍히는 콘솔이더군요 .. 바보 ㅜ (F12 개발자모드 > console)

키보드를 입력할 때마다 콘솔이 찍힌다

-> $.ajax에서 요청 방식은 POST, url은 "/member/email-check", 데이터는 이메일로 설정한다
-> ajax로 요청한 (post) 요청이 controller로 전송되고 document로 받은 email을 데이터로 설정했는지 확인한다

2) MemberController에서 "/member/email-check" POST

@PostMapping("/member/email-check")
    public @ResponseBody String emailCheck(@RequestParam("memberEmail") String memberEmail) {
        System.out.println("memberEmail = " + memberEmail);
        String checkResult = memberService.emailCheck(memberEmail);
        if(checkResult != null) {
            return "ok";
        } else {
            return "no";
        }
    }

ajax를 통해 "/member/email-check" 주소로 post 요청이 들어왔으므로 해당 요청을 처리해주는 함수를 작성한다
-> ajax는 다른 함수처럼 그냥 String 형식으로 반환하지 않고 String 앞에 @ResponseBody를 붙여준다!

3) MemberService에서 emailCheck(email) 함수 구성

public String emailCheck(String memberEmail) {
        Optional<MemberEntity> byMemberEmail = memberRepository.findByMemberEmail(memberEmail);
        if(byMemberEmail.isPresent()) {
            return null;
        } else {
            return "ok";
        }
    }

로그인할 때 findByMemberEmail 함수를 사용한 것처럼 이메일로 회원 정보를 조회
-> 조회 결과가 있으면 중복된 이메일이므로 사용 불가
-> 조회 결과가 없으면 사용 가능한 이메일

4) save.html에 조회 결과 표시

success: function(res) {
                console.log("요청 성공", res);
                if(res == "ok") {
                    console.log("usable");
                } else {
                    console.log("unusable");
                }
            },

기존에 요청 성공 메시지만 출력하던 것을 res 값에 따라 사용 가능한지 불가능한지 나타낸다

현재 DB에는 'aa' 이메일이 저장되어 있기 때문에 aa를 입력하면 unusuable이 뜬다

5) save.html에 span 옵션 추가하기

콘솔에 나타내는 것에서 끝나는 것이 아니라
회원 가입을 할 때 해당 페이지에서 이메일 사용 여부를 바로바로 보여줘야 하므로 해당 코드를 추가한다

    <span id="check-result"></span>

span 코드는 form action에서 이메일 아래에 붙여준다

        const checkResult = document.getElementById("check-result");

해당 코드는 th:inline이 위치한 script 내에 email을 작성한 코드 아래에 넣어준다
-> checkResult에서는 요소만 접근하는 것이기 때문에 .value하지 않는다

if(res == "ok") {
                    console.log("usable");
                    checkResult.innerHTML = "사용 가능한 이메일";
                } else {
                    console.log("unusable");
                    checkResult.innerHTML = "사용 불가능한 이메일";
                }

회원 가입 페이지에서 "사용 (불)가능한 이메일" 텍스트를 출력하기 위해
checkResult.innerHTML을 사용한다
-> innerHTML이 뭔가 검색을 해봤는데, 'html 또는 xml을 읽어오거나 설정 가능하며 태그 안에 있는 HTML 값을 가져오는 역할'을 수행한다고 한다 => 여기서 태그 값을 출력할 수 있다는 점이 포인트인 것 같다

코드를 실행했을 때 모습
이제 겨우 회원 가입에 관한 내용에 ajax를 통한 이메일 중복 확인을 구현해봤을 뿐인데 뭔가 바리바리 한 듯한 기분이 든다
다음으로는 잠깐 쉬어가는(?) 느낌으로 HTML 디자인 관련 옵션들을 살펴보고자 한다