회원가입 아이디 중복체크

1. view 에서 중복 체크 버튼과 회원가입 form

async function sameCheck(){
    let username = $("#username").val();  // 입력된 username 값 가져오기
    let response = await fetch(/user/samecheck?username=${username});  // 서버로 GET request
    let responseBody = await response.json();  // 서버에서 반환된 응답 JSON으로 response

    if(responseBody.body){
        isSameUsername = true;
        alert("중복된 유저네임입니다.");
    } else {
        isSameUsername = false;
        alert("사용가능한 유저네임입니다.");
        $("#username").attr("readOnly", true);  // 사용 가능하면 username 입력 필드를 비활성화
    }
}

1. 사용자가 중복체크 버튼 클릭 시, sameCheck() 함수 실행, 입력된 username 값을 서버로 전송

2. 서버로부터 JSON response, response data에 따라 중복 여부 결정
1. if 중복된 아이디 = isSameUsername 변수를 true로 설정
2. else 면 false 설정 → username 입력 필드를 readonly 상태로 전환

2. 중복 체크 로직 처리 코드 (서버)

@GetMapping("/user/samecheck")
public ResponseEntity<?> sameCheck(@RequestParam("username") String username){
    boolean isSameUsername = userService.usernameDuplication(username);
    return ResponseEntity.ok(Resp.ok(isSameUsername, isSameUsername ? "중복되었습니다" : "중복되지 않았습니다"));
}

1. /user/samecheck 경로로 GET 요청을 받으면 username 값을 매개변수로 받아 userService의 usernameDuplication 메소드 호출

2. 이 메소드는 해당 username이 이미 존재하는지 확인 후 중복 여부에 따라 true 또는 false 반환

3. 반환 값에 따라 중복 = “중복되었습니다” / else = “중복되지 않았습니다” msg와 함께 JSON 형태로 반환

3. UserService에서의 비즈니스 로직

public boolean 유저네임중복되었니(String username) {
    Optional<User> userOP = userRepository.findByUsername(username);
    return userOP.isPresent();  // 중복된 아이디가 있으면 true 반환
}

1. usernameDuplication 메소드는 UserRepositor 를 통해 DB에 해당 username 을 가진 유저 조회

2. 조회된 유저 존재시 true , 존재하지 않을시 false 반환

4. UserRepository Query 처리

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

1. JPA를 통한 username 필드와 일치하는 유저 조회

2. 일치하는 유저 존재시 Optional<User> 객체 반환, 없으면 비어 있는 Optional 객체 반환

5. JavaScript 유효성 검사 로직

function valid(){
    if(isSameUsername){
        alert("중복체크가 필요합니다");
        return false;
    } else {
        return true;
    }
}

1. 만약 IsSameUsername 가 true 인 경우 → 중복 체크 완료 안됨 → 경고 msg 출력 하고 form 제출 막음

2. false → 중복되지 않은 아이디로 확인 → form 제출

요약