1. User Package
1. UserController
//쿼리스트링으로 겟요청
//http:// localhost:8080/user/samecheck?username=hello
@GetMapping("/user/samecheck")
public ResponseEntity<?> sameCheck(@RequestParam("username") String username) {
userService.유저네임중복되었니(username);
boolean isSameUsername = userService.유저네임중복되었니(username);
return ResponseEntity.ok(Resp.ok(isSameUsername, isSameUsername ? "중복입니다." : "중복되지않았어여"));
}- 코드설명
GET 요청을 처리하는
sameCheck 메서드로, 특정 사용자 이름이 이미 존재하는지 확인하는 API 엔드포인트입니다1. 요청 경로와 매핑
@GetMapping("/user/samecheck")- 이 부분은
GET요청을/user/samecheck경로로 매핑합니다. 예를 들어http://localhost:8080/user/samecheck?username=hello라는 요청을 받을 때 이 메서드가 호출됩니다.
@RequestParam("username")은 URL에서username이라는 쿼리 파라미터를 추출하여 메서드의username매개변수로 전달합니다.
2. 서비스 호출 및 중복 확인
boolean isSameUsername = userService.유저네임중복되었니(username);- 이 부분은
userService.유저네임중복되었니(username)메서드를 호출하여 주어진username이 이미 존재하는지 확인하는 부분입니다.
- 이 메서드의 반환값은
boolean타입으로, 만약 해당 사용자 이름이 이미 존재하면true, 존재하지 않으면false를 반환합니다.
3. 응답 생성
return ResponseEntity.ok(Resp.ok(isSameUsername, isSameUsername ? "중복입니다." : "중복되지않았어여"));ResponseEntity.ok()는 성공적인 HTTP 응답을 생성하는 역할을 합니다.
Resp.ok()는 아마도 프로젝트에서 커스터마이즈된 응답 객체를 생성하는 메서드로, 두 가지 인자를 받습니다:- 첫 번째 인자는
isSameUsername으로, 중복 여부를 나타내는boolean값입니다. - 두 번째 인자는 사용자에게 보여줄 메시지로, 중복 여부에 따라 다르게 설정됩니다.
- 중복이면
"중복입니다." - 중복되지 않으면
"중복되지 않았습니다."
4. 결론
이 메서드는 클라이언트가 제공한 사용자 이름을 중복 체크하고, 그 결과를 응답 본문에
boolean 값과 함께 적절한 메시지를 포함시켜 반환합니다.2. UserService
public boolean 유저네임중복되었니(String username) {
Optional<User> userOP = userRepository.findByUsername(username);
if(userOP.isPresent()) {
//중복이있다.
return true;
}
else {
return false;
}- 코드설명
이 코드는 특정 사용자 이름(
username)이 데이터베이스에 이미 존재하는지 확인하는 메서드입니다.1. 메서드 정의
public boolean 유저네임중복되었니(String username) {유저네임중복되었니메서드는username이라는 문자열을 입력으로 받아서, 해당 사용자 이름이 데이터베이스에 존재하는지 여부를 확인하는 기능을 합니다.
- 반환 타입은
boolean이며, 중복이 있으면true, 중복이 없으면false를 반환합니다.
2. Optional로 사용자 검색
Optional<User> userOP = userRepository.findByUsername(username);
userRepository.findByUsername(username)는username을 이용해 데이터베이스에서 사용자를 검색하는 코드입니다. 여기서userRepository는User엔티티를 관리하는 데이터 접근 계층 (repository)입니다.
- 이 메서드는
Optional<User>타입의 객체를 반환합니다.Optional은 값이 존재할 수도 있고, 존재하지 않을 수도 있음을 나타내는 Java의 클래스입니다. - 만약 해당
username이 존재하면Optional객체는 그 값을 포함하고 (isPresent()가true), 존재하지 않으면 빈 객체를 반환합니다.
3. 중복 확인
if(userOP.isPresent()) {
//중복이 있다.
return true;
} else {
return false;
}if(userOP.isPresent())는Optional객체가 값(즉,User객체)을 가지고 있는지 확인합니다.- 만약 값이 존재한다면, 이는 해당
username이 이미 존재한다는 뜻이므로 중복이 있다고 판단하고true를 반환합니다. - 값이 없으면
Optional이 비어 있다는 의미이므로, 해당username은 존재하지 않으며 중복이 없다고 판단하고false를 반환합니다.
4. 결론
이 코드는
username을 데이터베이스에서 검색하여, 이미 존재하는지 여부를 Optional을 사용하여 간단하고 안전하게 처리합니다. 중복이 있을 경우 true, 중복이 없으면 false를 반환하는 구조입니다.동작 흐름 요약:
userRepository.findByUsername(username)로 데이터베이스에서 해당username을 검색.
- 결과가 있으면 중복이 있다고 판단하여
true반환.
- 결과가 없으면 중복이 없다고 판단하여
false반환.
3. join-form.mustache
<button onclick="sameCheck()" type="button" class="btn btn-outline-primary">중복체크</button>- 코드설명
<script>
// 1. bool 타입은 is를 붙여서 만든다.
let isSameUsername = true;
async function sameCheck(){
// 1. username 가져오기
let username = $("#username").val();
// 2. fetch로 통신하기 (get, url 모름)
let response = await fetch(`/user/samecheck?username=${username}`);
let responseBody = await response.json();
// 3. 중복됐으면 -> isSameUsername = true;
// 4. 중복안됐으면 -> isSameUsername = false; -> username input을 readOnly
if(responseBody.body){
isSameUsername = true;
alert("중복된 유저네임이에요");
}else{
isSameUsername = false;
alert("사용할 수 있는 유저네임이에요");
$("#username").attr("readOnly", true);
}
}
function valid(){
if(isSameUsername){
alert("중복체크가 필요합니다");
return false;
}else{
return true;
}
}
</script>- 코드설명
이 코드는 자바스크립트를 사용하여 사용자 이름 중복을 확인하는 기능을 구현한 코드입니다. 중복 확인을 위해 서버와 통신하고, 그 결과에 따라 입력 필드를 제어하는 방식으로 동작합니다.
1. 변수 선언
let isSameUsername = true;
- 이 변수는 사용자 이름 중복 여부를 나타내는
boolean값입니다.
- 일반적으로
boolean타입의 변수는is라는 접두사를 붙여서 명명하며, 여기서는isSameUsername이 중복 여부를 저장합니다. 기본값은true로 설정되어 있습니다.
2. sameCheck 함수
async function sameCheck() {- 이 함수는 사용자 이름 중복을 서버에 확인하고, 그 결과에 따라 UI를 제어하는 비동기 함수입니다.
async키워드는 함수 내에서await키워드를 사용해 비동기 처리를 할 수 있게 합니다.
3. 사용자 이름 가져오기
let username = $("#username").val();- 이 부분은 jQuery를 사용하여 HTML 입력 필드에서 사용자 이름을 가져옵니다.
$("#username")은 ID가username인 HTML 요소를 선택하고,.val()은 해당 요소의 값을 가져옵니다. 예를 들어, 사용자가 입력한 텍스트를 가져오는 역할을 합니다.
4. 서버로 사용자 이름 중복 확인 요청 (fetch 통신)
let response = await fetch(`/user/samecheck?username=${username}`);
let responseBody = await response.json();fetchAPI를 사용하여 서버에 GET 요청을 보냅니다. 이때, URL은/user/samecheck?username=${username}로, 쿼리스트링을 통해 사용자 이름을 전달합니다.
await키워드는 서버에서 응답이 올 때까지 기다리도록 설정합니다.
- 서버로부터 받은 응답을 JSON 형식으로 변환하기 위해
response.json()을 호출하고, 그 결과를responseBody변수에 저장합니다.
5. 중복 여부에 따른 처리
if(responseBody.body){
isSameUsername = true;
alert("중복된 유저네임이에요");
} else {
isSameUsername = false;
alert("사용할 수 있는 유저네임이에요");
$("#username").attr("readOnly", true);
}responseBody.body는 서버에서 반환된 응답 값 중 중복 여부를 확인하는 부분입니다. 중복이면true, 중복이 아니면false일 것입니다.
- 중복된 경우:
isSameUsername을true로 설정하고,alert("중복된 유저네임이에요")를 사용해 사용자에게 중복된 이름이라고 알립니다.
- 중복되지 않은 경우:
isSameUsername을false로 설정하고,alert("사용할 수 있는 유저네임이에요")로 알립니다.- 또한, jQuery를 사용해
$("#username")입력 필드를readOnly로 설정하여 더 이상 수정할 수 없게 만듭니다.
6. valid 함수
function valid(){
if(isSameUsername){
alert("중복체크가 필요합니다");
return false;
}else{
return true;
}
}- 이 함수는 유저네임이 중복인지 아닌지에 따라 폼 제출을 허용하거나 방지하는 역할을 합니다.
isSameUsername이true면 중복된 상태이므로 폼을 제출하지 못하게 하고,false를 반환하여 중복 체크가 필요하다고 알립니다.
isSameUsername이false면 중복이 없으므로 폼 제출이 가능하고,true를 반환하여 제출을 허용합니다.
동작 요약
- 사용자가 "중복체크" 버튼을 클릭하면
sameCheck함수가 호출됩니다.
- 사용자가 입력한
username을 서버로 보내 중복 여부를 확인합니다.
- 서버 응답에 따라 중복이면
alert("중복된 유저네임이에요"), 중복이 아니면alert("사용할 수 있는 유저네임이에요")를 표시합니다.
- 중복이 없을 경우 입력 필드를
readOnly로 변경하여 더 이상 수정하지 못하게 합니다.
valid함수는 제출 시 중복 확인 여부에 따라 제출을 허용하거나, 중복 체크를 요청하는 알림을 표시합니다.
Share article
