267일차(모험 176일차) - 회원가입 실시간 중복 체크하기

기존 코드를 먼저 살펴보면 동기 방식을 사용했다.

form 형태의 html을 사용하여 action으로 통신했다.

참고 : Form태그를 통한 데이터 전송 방법(Ajax/Submit)

 

<form class="signup" action="/user/signup" method="post">
    <h1 class="signup1">SIGN UP</h1>
    <input name="username" type="text" placeholder="아이디*" class="username" />
</form>

// 회원 가입 요청 처리
@PostMapping("/user/signup")
public String registerUser(SignupRequestDto requestDto) {
    userService.registerUser(requestDto);
    return "redirect:/";
}

 

아래 글을 보고 아이디어를 얻어 작성했다.

참고 : (Spring/Ajax)실시간으로 아이디 중복 체크하기

 

 

 

html

먼저 html을 수정했다. (일부 코드 생략)

<form class="signup" action="/user/signup" method="post">
    <input name="username" type="text" placeholder="아이디*" class="username"/>
    <input name="nickname" type="text" placeholder="닉네임*" class="username"/>
    <input name="email" type="text" placeholder="이메일*" class="username"/>
    <input name="password" type="password" placeholder="비밀번호*" class="username"/>
</form>

기존 코드를 보면 className이 모두 동일하다. 그래서 id값을 추가해서 분리시키기로 했다.

 

 

<input name="username" type="text" placeholder="아이디*" class="username" id="username"/>
<div class="warningMsg" id="usernameMsg">아이디를 입력해주세요</div>

밑에 생긴 warningMsg는 아이디 칸 밑에 중복 체크 메세지를 띄우기 위해서 생성했다.

 

---

js

그 다음 비동기 방식인 ajax를 활용하여 코드를 작성했다.

 

데이터를 한꺼번에 보낼 때는 .serialize()를 쓰면 좋다고 한다. 

나는 각자 체크할 생각이라서 사용하지는 않았다.

참고 : JQuery serialize() 사용하는 이유 

 

id값을 가져와서 form 데이터에 넣어준 후 결과값을 넣어줬다.

function checkId() {
    let form_data = new FormData();
    form_data.append("username", $("#username").val())
    $.ajax({
        type: "POST",
        url: `http://localhost:8080/user/signup`,
        data: form_data,
        contentType: false,
        processData: false,
        success: function (response) {
            $("#usernameMsg").text(response);
        }
    });
}

 

 

 

글을 작성하면 변화를 감지해야 될 것 같은 생각이 들어

이전에 채팅창 입력 알림 msg때 작성한 on을 사용했다.

$("#username").on('focus keyup', function () {
    checkId()
})

 

---

Controller

// id 중복 확인
@PostMapping("/user/signup")
public String checkId(SignupRequestDto requestDto) {
    //System.out.println("requestDto = " + requestDto);
    return userService.checkId(requestDto);
}

 

 

Service

public String checkId(SignupRequestDto requestDto) {
    String username = requestDto.getUsername();
    //System.out.println("username = " + username);
    
    // 회원 ID 중복 확인
    Optional<User> found = userRepository.findByUsername(username);
    if (found.isPresent()) { // isPresent : 값이 있는지 check
        return "중복된 사용자 ID 가 존재합니다.";
    }else{
        return "사용가능한 ID 입니다.";
    }
};

 

 

 

실행을 했을 때 아무것도 입력하지 않으면 사용가능한 id라고 뜬다.

따라서 else문에 if문을 추가해서 빈 값인 경우 입력해달라는 text를 추가했다.

변수 == null || str.isEmpty();

문자열이 null인지 체크 // isEmpty() : 문자열의 길이가 0인지 체크

출처 : [Java] String(문자열) 빈 값 체크하기 (null, 공백)

 

else{
    if (username == null || username.isEmpty()) {
        return "아이디를 입력해주세요";
    }
    return "사용가능한 ID 입니다.";
}

 

 

 

*현재 저장되어있는 db는 a와 s인 상황에서 실행해봤다.

 

 

 

* 추가로 중복 체크가 가능해져서 입력 칸 끝에 있는 중복 글씨는 없앴다.

 

 

 

backend  : [add] id, nickname 중복 체크 [#63] #64

front : [add] id, nickname 중복 체크 [#70] #71