[Springboot] 24 아이디 중복체크

김호정's avatar
Sep 17, 2024
[Springboot] 24 아이디 중복체크
 
중복체크 버튼을 클릭하지 않고 회원가입을 클릭하면 못넘어가게 해야한다.
 
notion image
onsubmit
 
submit을 클릭해서 액션이 일어나면,
 
submit 이 일어나면 onsubmit의 함수를 먼저 실행한다.
return을 true로 하면
return을 false로 하면
notion image
notion image
form 안에 버튼 만들어주기
→ type은 button으로 해줘야한다. (submit으로 하면 form이 전송되고 리로드 됨)
notion image
자바스크립트 변수는 타입을 모르니까
boolean 타입인 경우 변수명을 is_ 를 붙여서 지어주면 좋다.
( → 이름만 보고도 어떤 타입인지 알 수 있도록 ! )
 
<script> 바로 아래에 변수 isSameUsername = true 로 설정해 두었기 때문에 이 회원가입 form에 들어오면 무조건 true로 자동 설정된다.
 
그리고 vaild 함수는 “중복체크버튼을 클릭했는지 검사”하는 역할을 한다. → 중복체크버튼 클릭 없이 회원가입 버튼을 클릭하는 경우를 막기 위한 것.
 
notion image
중복체크 버튼을 누르지 않고 회원가입을 누르면
지금 isSameUsername의 default 값이 true 이기 때문에
위의 alert 창이 뜬다.
 
 
통신. 컨트롤러 작성하기
notion image
userController
 
 
notion image
쿼리는 기존에 있는거 쓰면 됨
 
notion image
받으면서 무조건 throw 날리면 안 됨. 못찾은 경우에도 return 해줘야하니까!!!!!
 
자 이제 컨트롤러에 와서 받은 boolean 값을 return 하면 되는데 지금
 
@GetMapping("/user/samecheck") public ResponseEntity<?> sameCheck(@RequestParam("username")String username){ boolean isSameUsername = userService.유저네임중복되었니(username); // 영어로 하면 isUsernameDuplicated 이런식으로 짓기 return ResponseEntity.ok(Resp.ok(isSameUsername)); }
이 코드에서는 Resp를 body에 담아서 return 하면
200, “성공”, false
200, “성공”, true
이렇게 return 된다.
 
“성공”이라고 return 하기보다 좀 더 정확한 메시지를 주고 싶으면
ok 매서드를 “오버로딩” 해서 return 할 때 직접 메시지도 적을 수 있게 해주는게 좋다!
 
notion image
기존 매서드를 복사해서
 
notion image
오버로딩해서 하나 더 만들어주고 msg도 받아서 만들어 준다.
notion image
return 부분 삼항연산자를 사용해서
중복됐을때, 안됐을때 메세지를 구분해서 보낼 수 있도록 코드를 수정한다!
// http://localhost:8080/user/samecheck?username=hello @GetMapping("/user/samecheck") public ResponseEntity<?> sameCheck(@RequestParam("username") String username) { boolean isSameUsername = userService.유저네임중복되었니(username); // isSameUsername? 유저네임중복체크 이런식으로 매서드 이름짓지 말기 // true는 중복된거, false는 중복되지 않은거 // 팀원들이랑 정해야함 return ResponseEntity.ok(Resp.ok(isSameUsername, isSameUsername ? "중복되었어요" : "중복되지않았어요")); // front가 true받으면 중복된거, false받으면 중복안된거 }
 
 
++

Limit, Offset

페이징 처리할때 쓰는 limit
select * from board_tb order by id desc limit 0, 3; select * from board_tb order by id desc limit 3, 3; select * from board_tb order by id desc limit 0*3, 3;
notion image
나중에 할거임
 
 
 
notion image
notion image
notion image
username가져올때 $("input[name=username]") // 이런거 쓰지말고 id를 사용해라
 
 
 
근데 쿼리스트링 날리는 문법을 모르겠다.
fetch에서 쿼리스트링 전송법
이라고 구글에 검색해서 찾기 : )
 
 
notion image
어음을 받으면 then then 방식으로 받는다.
()안에 행위가 들어와야 한다.
돈을 받을 때 첫번째 then이 때려진다.
그리고 파싱해야한다.
→ 이거보면 그냥 프로미스 방식을 쓰는구나 만 알면되고
 
이거말고 그냥 await async 쓰기
 
notion image
 
notion image
완성
 
<script> // 1. bool 타입은 is를 붙여서 만든다. let isSameUsername = true; // 이 페이지 열릴때 뜬다. f5누르면 true로 다시 refresh 된다. 일단 true로 보고 시작! async function sameCheck() { // 1. username 가져오기 //$("input[name=username]") // 이런거 쓰지말고 id를 사용해라 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;haha alert("중복된 유저네임이에요"); } else { isSameUsername = false; alert("사용할 수 있는 유저네임이에요"); $("#username").attr("readOnly", true); } }; function valid() { if (isSameUsername) { alert("중복체크가 필요합니다."); return false; } else { return true; } } </script>
 
 
 
 
 
master 에 그대로 push 했는데,
 
오늘 push 한 것 이전 코드에서 오늘 내용을 복습하고 싶어서 이전 커밋을 돌아가는 걸 검색해봤다.
 
 
 
돌아가서 오늘 배운 아이디 중복체크를 연습했는데,
 
다시 master로 돌아오려니
 
notion image
 
error 가 났다.
 
지피티한테 물어보니 변경 코드(연습한 코드)를 다 버리거나
 
일시적으로 저장하라고(stash) 했음. 그래서 거기서 stash 해고 master로 checkout 함
 
→ 나중에 복원하려면 git stash pop 하면 됨
notion image
 
Share article

keepgoing