19. 스프링부트(블로그만들기) 아이디 중복 체크 V3 3.8

윤주헌

Sep 11, 2024

Contents

디자인 먼저 join form에 버튼 넣음 유저컨트롤러로 이동 유저 서비스 다시 유저 컨트롤러로 다시 유저 서비스 쿼리 만들기 유저 컨트롤러 이동 resp클래스 가서 다시 유저 컨트롤러 가서 join-form

resp 같은 공동

ajax할 때 왜 필요할까 공동클래스 resp만듬

부가적인 정보를 추가해서 전달해주기 위해

응답의 형태가 일관적이기에

디자인 먼저 join form에 버튼 넣음

만약 일자로 만드려면 flex하면 됨


{{> layout/header}}

<div class="container p-5">

    <!-- 요청을 하면 localhost:8080/join POST로 요청됨
    username=사용자입력값&password=사용자값&email=사용자입력값 -->

    <div class="card">
        <div class="card-header"><b>회원가입을 해주세요</b></div>
        <div class="card-body">
            <form action="/join" method="post" enctype="application/x-www-form-urlencoded">
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="Enter username" name="username" value="haha">
                    <button type="button" class="btn btn-outline-primary">중복체크</button>
                </div>
                <div class="mb-3">
                    <input type="password" class="form-control" placeholder="Enter password" name="password"
                           value="1234">
                </div>
                <div class="mb-3">
                    <input type="email" class="form-control" placeholder="Enter email" name="email"
                           value="haha@nate.com">
                </div>
                <button type="submit" class="btn btn-primary form-control">회원가입</button>
            </form>
        </div>
    </div>
</div>

{{> layout/footer}}

해야할 것

중복체크→ 버튼 안 누르고 회원가입 누르면 못 넘어가게 유효성 체크먼저!

이 값을 가지고 와서

서버에 가지고 와서 있는지 없는지 확인

유효성 검사하기

리턴 벨리드 → 서브밋 버튼 누르면 액션 생김 하지만 valid를 적으면 먼저 실행한다 이 함수가 return true하면 실행 false하면 아무일도 안 일어난다 여기서 버튼 클릭해서 중복체크 됐으면 true 안 누르면 false리턴!

일단 여기서 중복체크를 누르지 않고 회원가입을 누르면 알림 메시지만 올라온다


form action="/join" 이 줄에
onsubmit="return valid()"  추가


{{> layout/header}}

<div class="container p-5">

    <!-- 요청을 하면 localhost:8080/join POST로 요청됨
    username=사용자입력값&password=사용자값&email=사용자입력값 -->

    <div class="card">
        <div class="card-header"><b>회원가입을 해주세요</b></div>
        <div class="card-body">
            <form action="/join" method="post" enctype="application/x-www-form-urlencoded" onsubmit="return valid()">
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="Enter username" name="username" value="haha">
                    <button type="button" class="btn btn-outline-primary">중복체크</button>
                </div>
                <div class="mb-3">
                    <input type="password" class="form-control" placeholder="Enter password" name="password"
                           value="1234">
                </div>
                <div class="mb-3">
                    <input type="email" class="form-control" placeholder="Enter email" name="email"
                           value="haha@nate.com">
                </div>
                <button type="submit" class="btn btn-primary form-control">회원가입</button>
            </form>
        </div>
    </div>
</div>
<script>
    //1. bool 타입은 is를 붙여서 만든다! 컨벤션이다
    //그래야 if해서 보기 편하다
    //최초에 바로 실행되고 f5누르면 초기화 브라우저 페이지 마다 가지고 있는 것!
    let isSameUsername = true;

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

이제 로직짜야한다!

이런 것 생각하고 하자!

1. username 가져오기

2. fetch로 통신하기(url 모름, 메서드에서 가지고 와야한다! get요청, select요청은 무조건 get!! 프론트 앤드한테는 컨트롤러 보여주는 문서가 필요하다 3. 중복됐으면 -> isSameUser = true 원래 true인데 왜 true로 바꿔요? 트리거 해줘야함 4. 중복 안 됐으면 -> isSameUser = false; -> username자리 input을 readOnly로 바꿔야 함 중복체크 했으면 바꿀 수 없게!


{{> layout/header}}

<div class="container p-5">

    <!-- 요청을 하면 localhost:8080/join POST로 요청됨
    username=사용자입력값&password=사용자값&email=사용자입력값 -->

    <div class="card">
        <div class="card-header"><b>회원가입을 해주세요</b></div>
        <div class="card-body">
            <form action="/join" method="post" enctype="application/x-www-form-urlencoded" onsubmit="return valid()">
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="Enter username" name="username" value="haha">
                    <button onclick="sameCheck()" type="button" class="btn btn-outline-primary">중복체크</button>
                </div>
                <div class="mb-3">
                    <input type="password" class="form-control" placeholder="Enter password" name="password"
                           value="1234">
                </div>
                <div class="mb-3">
                    <input type="email" class="form-control" placeholder="Enter email" name="email"
                           value="haha@nate.com">
                </div>
                <button type="submit" class="btn btn-primary form-control">회원가입</button>
            </form>
        </div>
    </div>
</div>
<script>
    //1. bool 타입은 is를 붙여서 만든다! 컨벤션이다
    //그래야 if해서 보기 편하다
    //최초에 바로 실행되고 f5누르면 초기화 브라우저 페이지 마다 가지고 있는 것!
    let isSameUsername = true;

    function sameCheck(){
        //1. username 가져오기

        //2. fetch로 통신하기(url 모름, 메서드에서 가지고 와야한다!  get요청,   select요청은 무조건 get!!
        //프론트 앤드한테는 컨트롤러 보여주는 문서가 필요하다

        //3. 중복됐으면 -> isSameUser = true 원래 true인데 왜 true로 바꿔요?  트리거 해줘야함
        //4. 중복 안 됐으면 -> isSameUser = flase; -> username자리 input을 readOnly로 바꿔야 함 중복체크 했으면 바꿀 수 없게!
    }

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

{{> layout/footer}}

유저컨트롤러로 이동

get은 데이터 받아오려면 쿼리 스트링!!

where절에 걸릴꺼니까

1번


 //http://localhost:8080/user/samecheck?username=hello   이렇게 요청들어옴    xwwwform도 쿼리스트링 받을 수 있다!
    //서비스로 부터 불리언을 받을 거다 중복체크일 때 true가 중복체크됐는지 flase가 중복체크 됐는지 정해야함 짜기 나름이다 꼭 정해야 한다!  유저네임중복체크 이래하면 헷갈림
    //유저네임중복되었니 이렇게 명확해야 한다!
    @GetMapping("/user/samecheck")
    public ResponseEntity<?> sameCheck(@RequestParam("username") String username) {
        boolean isSameUsername = userService.유저네임중복되었니(username);
    }

유저 서비스


public boolean 유저네임중복되었니(String username) {
        return true;
    }

일단 트루로

다시 유저 컨트롤러로


 @GetMapping("/user/samecheck")
    public ResponseEntity<?> sameCheck(@RequestParam("username") String username) {
        boolean isSameUsername = userService.유저네임중복되었니(username);
        return ResponseEntity.ok(Resp.ok(isSameUsername));
    }

다시 유저 서비스 쿼리 만들기


public boolean 유저네임중복되었니(String username) {
        Optional<User> userOP = userRepository.findByUsername(username);
        //optional안에 있는 것 꺼내기
        if(userOP.isPresent()) {
            return true;
        }else {
            return false;
        }
    }

유저 컨트롤러 이동

resp의 성공 메시지가 별로다

그래서

resp클래스 가서


public static <B> Resp<?> ok(B body, String msg){
        return new Resp<>(200, msg, body);
    }

오버로딩하기

다시 유저 컨트롤러 가서


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

여기서 문제 ssar넣으면 중복 됐다 하는데 200임

join-form

아이디 없으면 못 가지고 오니까 가지고 오기

name 서브밋 할 때 필요하다!

input태그로 name 찾는게 있다 $(”input[name=username]”) 이런거 쓸대없다 쓰지마 id걸어라

어음받으면 response.then().then();해야함

첫번째 then() 에서는 파싱

두번째 then()은 해야할 것

responset.the(res⇒ res.json()).then(res⇒{

뭘 할껀지 적는다

});

이거 하지 말자 트랜디하지 않다 await async 하면 된다!


{{> layout/header}}

<div class="container p-5">

    <!-- 요청을 하면 localhost:8080/join POST로 요청됨
    username=사용자입력값&password=사용자값&email=사용자입력값 -->

    <div class="card">
        <div class="card-header"><b>회원가입을 해주세요</b></div>
        <div class="card-body">
            <form action="/join" method="post" enctype="application/x-www-form-urlencoded" onsubmit="return valid()">
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="Enter username" name="username" id="username" value="haha">
                    <button onclick="sameCheck()" type="button" class="btn btn-outline-primary">중복체크</button>
                </div>
                <div class="mb-3">
                    <input type="password" class="form-control" placeholder="Enter password" name="password"
                           value="1234">
                </div>
                <div class="mb-3">
                    <input type="email" class="form-control" placeholder="Enter email" name="email"
                           value="haha@nate.com">
                </div>
                <button type="submit" class="btn btn-primary form-control">회원가입</button>
            </form>
        </div>
    </div>
</div>
<script>
    //1. bool 타입은 is를 붙여서 만든다! 컨벤션이다
    //그래야 if해서 보기 편하다
    //최초에 바로 실행되고 f5누르면 초기화 브라우저 페이지 마다 가지고 있는 것!
    let isSameUsername = true;

    async function sameCheck(){
        //id로 찾자!
        //1. username 가져오기
        let username = $("#username").val();
        //2. fetch로 통신하기(url 모름, 메서드에서 가지고 와야한다!  get요청,   select요청은 무조건 get!!
        //프론트 앤드한테는 컨트롤러 보여주는 문서가 필요하다
        let response = await fetch(`/user/samecheck?username=${username}`);
        let responseBody = await  response.json();
        
        //3. 중복됐으면 -> isSameUser = true 원래 true인데 왜 true로 바꿔요?  트리거 해줘야함
        //4. 중복 안 됐으면 -> isSameUser = flase; -> username자리 input을 readOnly로 바꿔야 함 중복체크 했으면 바꿀 수 없게!
        if(responseBody.body){
            isSameUsername = true;
            alert("중복된 유저네임이에요")
        }else {
            isSameUsername = false;
        }
    }

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

{{> layout/footer}}

이제 유저 내임 수정 못하게 만들기

추가


$("#username").attr("readOnly", true);

최종본


{{> layout/header}}

<div class="container p-5">

    <!-- 요청을 하면 localhost:8080/join POST로 요청됨
    username=사용자입력값&password=사용자값&email=사용자입력값 -->

    <div class="card">
        <div class="card-header"><b>회원가입을 해주세요</b></div>
        <div class="card-body">
            <form action="/join" method="post" enctype="application/x-www-form-urlencoded" onsubmit="return valid()">
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="Enter username" name="username" id="username" value="haha">
                    <button onclick="sameCheck()" type="button" class="btn btn-outline-primary">중복체크</button>
                </div>
                <div class="mb-3">
                    <input type="password" class="form-control" placeholder="Enter password" name="password"
                           value="1234">
                </div>
                <div class="mb-3">
                    <input type="email" class="form-control" placeholder="Enter email" name="email"
                           value="haha@nate.com">
                </div>
                <button type="submit" class="btn btn-primary form-control">회원가입</button>
            </form>
        </div>
    </div>
</div>
<script>
    //1. bool 타입은 is를 붙여서 만든다! 컨벤션이다
    //그래야 if해서 보기 편하다
    //최초에 바로 실행되고 f5누르면 초기화 브라우저 페이지 마다 가지고 있는 것!
    let isSameUsername = true;

    async function sameCheck(){
        //id로 찾자!
        //1. username 가져오기
        let username = $("#username").val();
        //2. fetch로 통신하기(url 모름, 메서드에서 가지고 와야한다!  get요청,   select요청은 무조건 get!!
        //프론트 앤드한테는 컨트롤러 보여주는 문서가 필요하다
        let response = await fetch(`/user/samecheck?username=${username}`);
        let responseBody = await  response.json();

        //3. 중복됐으면 -> isSameUser = true 원래 true인데 왜 true로 바꿔요?  트리거 해줘야함
        //4. 중복 안 됐으면 -> isSameUser = flase; -> 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>

{{> layout/footer}}

다시 만들다가 실수 한 것들

1. # 안붙임

안 붙이니까 값이 들어가지를 않아서 못 찾았었음

2. url 주소를 sameCheck 로 대문자로 적음

인식할 수 없음! 소문자로 변경돼서 들어간다

만대로 join에서는 url을 samecheck로 하고 UserController에서는 sameCheck으로 했다면

마찬가지로 인식되지 않는다!

3. await를 걸지 않는다면

console.log(responseBody.body) 했는데 값이 나오지 않는다 .

분명히 찾아진 것은 맞는데 왜 안 됐을까?

아무튼 이런 실수들이 있었다

blog