[Tistory] 유저네임 중복체크 (Ajax key event)

Sep 15, 2024

1. keyup 이벤트를 사용할 것 - Ajax는 Get요청


일단 keyup 이벤트 콘솔창 찍히는지만 확인
data 쓰지 말고, 쿼리 스트링으로 바로 보내기 ? +username 하기

2. Get은 쿼리스트링으로 받기 - joinForm.mustache

💡

주의!! GET 은 객체가 아니라 쿼리스트링으로 받는다.

쿼리 다 들어와서 yml show-sql: false 설정해놓고 값 들어오는지만 확인


<!-- username 중복 체크 -->
// 비밀번호 입력 필드에 keyup 이벤트 핸들러 추가
    $("#username").on('keyup', function() {
        // 입력된 비밀번호 값을 가져와서 콘솔에 출력
        console.log($(this).val());
        let username = $(this).val();

       //data 쓰지 말고
        $.ajax({
            url: '/username-check',
            data: {username: username},
            type: 'GET


<!-- username 중복 체크 -->
// 비밀번호 입력 필드에 keyup 이벤트 핸들러 추가
    $("#username").on('keyup', function() {
        // 입력된 비밀번호 값을 가져와서 콘솔에 출력
        console.log($(this).val());
        let username = $(this).val();

        //쿼리 스트링으로
        $.ajax({
            url: '/username-check?username=' + username,
            type: 'GET'

💡

ajax 날아와서 keyup 이벤트 적용되는 것 확인

ajax에서 넘기는 매개변수와 컨트롤러에서 받는 매개 변수의 이름이 동일하니 @RequestParam("username") 생략 가능!

💡

empty는 empty

💡

입력하는 값 중 정보가 있으면 db에서 조회 된 값이 뜬다.

코드 (일단 확인용)

[ UserJPARepository ]


    @Query("select u from User u where u.username = :username")
    Optional<User> findByUsername(@Param("username") String username);

[ UserService]


// username 중복 검색
    public void usernameCheck(String username) {
        Optional<User> userOP = userJPARepo.findByUsername(username);
        System.out.println("userOP = " + userOP);
    }

[ UserController ]


@GetMapping("/username-check")
    public ResponseEntity<?> usernameCheck(String username) {
        System.out.println("username = " + username);
        userService.usernameCheck(username);
        return null;

    }

3. 유저네임 중복체크 - Enum을 사용

[ UserEnum ]


package site.metacoding.blogv3.user;

public enum UserEnum {
    USER_EXIST,
    USER_NO_EXIST
}

[ UserService ]


// username 중복 검색
    public UserEnum usernameCheck(String username) {
        // 주어진 username으로 사용자 정보를 조회
        Optional<User> userOP = userJPARepo.findByUsername(username);

        //System.out.println("username = " + username);
        //System.out.println("userOP = " + userOP);

        // UserEnum 타입의 변수를 선언
        UserEnum userStatus;
        
        // 조회된 사용자 정보가 있을 경우
        if (userOP.isPresent()) {
            userStatus = UserEnum.USER_EXIST; // 사용자 존재 상태를 설정(유저 중복)
            return userStatus; // 설정된 상태를 반환

        } else {
            // 조회된 사용자 정보가 없을 경우
            userStatus = UserEnum.USER_NO_EXIST; // 사용자 미존재 상태를 설정(유저 네임 사용 가능)
        }
        return userStatus; // USER_EXIST 또는 USER_NO_EXIST 반환

    }

💡

결과값이 true인지, false인지에 따라 이렇게 값이 나올 것임

[ UserController ]

💡

서비스에서 이미 if 처리해서 값을 받아왔기 때문에, 여기는 if 처리 해 줄 필요가 없다


    @GetMapping("/username-check")
    public ResponseEntity<?> usernameCheck(String username) {
//        System.out.println("username = " + username);
        UserEnum usernameCheck = userService.usernameCheck(username);

//        System.out.println("usernameCheck = " + usernameCheck);
        
        return ResponseEntity.ok(new ApiUtil<>(usernameCheck));

    }

💡

ApiUtil body 값에 이 결과 값을 넣어서 전송함

4. 결과 값을 볼 때 제일 좋은 방법은 JSON - done의 res 찍어보기


console.log("Res " + res); 라고만 하니까 문자열로만 나온다.
내가 원하는 값을 보려면 JSON으로 변환해서 봐야함


}).done((res) => {
  console.log("Res " + JSON.stringify(res));

5. joinForm.mustache


<!-- username 중복 체크 -->
    // 비밀번호 입력 필드에 keyup 이벤트 핸들러 추가
    $("#username").on('keyup', function() {
        // 입력된 비밀번호 값을 가져와서 콘솔에 출력
        console.log($(this).val());
        let username = $(this).val();

        $.ajax({
            url: '/username-check?username=' + username,
            type: 'GET'

        }).done((res) => {
            console.log("Res " + JSON.stringify(res));

            // 응답 구조에 따라 확인
            if (username === "") {
                // 입력란이 빈 경우 텍스트 숨기기
                $("#usernameError, #usernameSuccess").addClass("my_hidden").hide();
            } else if (res.body === "USER_EXIST") {
                showError(); // 에러 메시지 표시
            } else if (res.body === "USER_NO_EXIST") {
                showSuccess(); // 성공 메시지 표시
            }
        }).fail((res) => {
            alert("오류가 발생했습니다. 다시 시도해 주세요.");
        });

    });


   // 에러 메시지를 표시하고 성공 메시지를 숨기는 함수
    function showError() {
        $("#usernameError").removeClass("my_hidden").show();
        $("#usernameSuccess").addClass("my_hidden").hide();
    }

    // 성공 메시지를 표시하고 에러 메시지를 숨기는 함수
    function showSuccess() {
        $("#usernameSuccess").removeClass("my_hidden").show();
        $("#usernameError").addClass("my_hidden").hide();
    }

6. 화면

 // 비밀번호 입력 필드에 keyup 이벤트 핸들러 추가 $("#username").on('keyup', function() { // 입력된 비밀번호 값을 가져와서 콘솔에 출력 console.log($(this).val()); let username = $(this).val(); //data 쓰지 말고 $.ajax({ url: '/username-check', data: {username: username}, type: 'GET

 // 비밀번호 입력 필드에 keyup 이벤트 핸들러 추가 $("#username").on('keyup', function() { // 입력된 비밀번호 값을 가져와서 콘솔에 출력 console.log($(this).val()); let username = $(this).val(); //쿼리 스트링으로 $.ajax({ url: '/username-check?username=' + username, type: 'GET'

// username 중복 검색 public void usernameCheck(String username) { Optional<User> userOP = userJPARepo.findByUsername(username); System.out.println("userOP = " + userOP); }

@GetMapping("/username-check") public ResponseEntity<?> usernameCheck(String username) { System.out.println("username = " + username); userService.usernameCheck(username); return null; }

// username 중복 검색 public UserEnum usernameCheck(String username) { // 주어진 username으로 사용자 정보를 조회 Optional<User> userOP = userJPARepo.findByUsername(username); //System.out.println("username = " + username); //System.out.println("userOP = " + userOP); // UserEnum 타입의 변수를 선언 UserEnum userStatus; // 조회된 사용자 정보가 있을 경우 if (userOP.isPresent()) { userStatus = UserEnum.USER_EXIST; // 사용자 존재 상태를 설정(유저 중복) return userStatus; // 설정된 상태를 반환 } else { // 조회된 사용자 정보가 없을 경우 userStatus = UserEnum.USER_NO_EXIST; // 사용자 미존재 상태를 설정(유저 네임 사용 가능) } return userStatus; // USER_EXIST 또는 USER_NO_EXIST 반환 }

@GetMapping("/username-check") public ResponseEntity<?> usernameCheck(String username) { // System.out.println("username = " + username); UserEnum usernameCheck = userService.usernameCheck(username); // System.out.println("usernameCheck = " + usernameCheck); return ResponseEntity.ok(new ApiUtil<>(usernameCheck)); }

// 비밀번호 입력 필드에 keyup 이벤트 핸들러 추가 $("#username").on('keyup', function() { // 입력된 비밀번호 값을 가져와서 콘솔에 출력 console.log($(this).val()); let username = $(this).val(); $.ajax({ url: '/username-check?username=' + username, type: 'GET' }).done((res) => { console.log("Res " + JSON.stringify(res)); // 응답 구조에 따라 확인 if (username === "") { // 입력란이 빈 경우 텍스트 숨기기 $("#usernameError, #usernameSuccess").addClass("my_hidden").hide(); } else if (res.body === "USER_EXIST") { showError(); // 에러 메시지 표시 } else if (res.body === "USER_NO_EXIST") { showSuccess(); // 성공 메시지 표시 } }).fail((res) => { alert("오류가 발생했습니다. 다시 시도해 주세요."); }); });

// 에러 메시지를 표시하고 성공 메시지를 숨기는 함수 function showError() { $("#usernameError").removeClass("my_hidden").show(); $("#usernameSuccess").addClass("my_hidden").hide(); } // 성공 메시지를 표시하고 에러 메시지를 숨기는 함수 function showSuccess() { $("#usernameSuccess").removeClass("my_hidden").show(); $("#usernameError").addClass("my_hidden").hide(); }