저고데

[Spring Boot 실전]7. ajax를 사용하여 아이디 중복 방지 기능을 만들어보자 본문

Spring Boot 실전

[Spring Boot 실전]7. ajax를 사용하여 아이디 중복 방지 기능을 만들어보자

진철 2024. 1. 18. 23:04
728x90
반응형

지난 시간에는 간단하게 회원가입과 로그인 기능을 구현하였다.

하지만 회원가입 과정에서 기존에 있는 아이디를 이용하면 오류가 발생하였다.

그건 바로 회원 테이블인 User 테이블의 PK를 아이디로 설정하였기 때문이다.

따라서 이번 시간에는 스프링 부트에서 제공하는 ajax를 통해 아이디와 닉네임 중복 확인 기능을 만들어서 데이터베이스에 오류가 나지 않게 만들어보겠다.

    <title>회원 가입</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<h1>회원 가입 폼</h1>

<div class="container">
    <form action="/register" method="post" onsubmit="return valid()">
        <div class="form-group">
            <label for="name">이름</label>
            <input type="text" id="name" name="name" required>
            <br>
            <label for="userid">아이디</label>
            <input type="text" id="userid" name="userid" required>
            <button type="button" onclick="sameCheck()">중복확인</button>
            <br>
            <label for="nickname">닉네임</label>
            <input type="text" id="nickname" name="nickname" required>
            <button type="button" onclick="samenickCheck()">중복확인</button>
            <br>
            <label for="password">비밀번호</label>
            <input type="password" id="password" name="password" required>
            <br>
        </div>
        <button type="submit">가입하기</button>
    </form>
    <form method="get" th:action ="@{/}">
        <div class="form-group">
            <button type="submit">취소</button>
        </div>
    </form>
</div>

 

우선 회원가입 html에 다음과 같은 코드를 추가해준다.

해당 코드는 submit 버튼을 누를 때, 올바른 형식이면 /register로 post 요청을 보내는 코드이다.

그리고 아이디와 닉네임에 onClick 메소드로 same___Check()이라는 것을 볼 수가 있는데, 이것은 스프링 부트의 get 요청으로 해당 닉네임과 아이디가 존재하는 지 확인하는 메소드이다.

따라서, 닉네임과 아이디가 모두 존재하지 않는 상태여야, 회원가입이 가능하다는 것이다.

<script>
    let submitCheck = false;
    let nickCheck = false;

    function valid() {
        if (submitCheck && nickCheck) {
            return true;
        } else if (submitCheck && !nickCheck) {
            alert('닉네임 중복확인을 해주세요.');
            return false;
        } else if (!submitCheck && nickCheck) {
            alert('아이디 중복확인을 해주세요.');
            return false;
        } else {
            alert('닉네임 중복확인을 해주세요.');
            return false;
        }
    }
    function sameCheck() {
        let userid = $('#userid').val()

        $.ajax({
            type: "get",
            url: "/IDCheck?userid=" + userid
        }).done((res) => {
            if (res.data === true) {
                alert(res.msg);
                submitCheck = true;
            } else {
                alert(res.msg);
                submitCheck = false;
            }

        }).fail((err) => {
            console.log('상태코드 200밖에 없어서 실행 안됨')
        });
    }

    function samenickCheck() {
        let nickname = $('#nickname').val()

        $.ajax({
            type: "get",
            url: "/NicknameCheck?nickname=" + nickname
        }).done((res) => {
            if (res.data === true) {
                alert(res.msg);
                nickCheck = true;
            } else {
                alert(res.msg);
                nickCheck = false;
            }

        }).fail((err) => {
            console.log('상태코드 200밖에 없어서 실행 안됨')
        });
    }
</script>

 

추가적으로 회원가입 html에 위와 같은 script를 추가해준다.

해당 부분이 오늘의 핵심이다.

여기서 $.ajax를 살펴보자면, ajax는 비동기적으로 서버와 통신할 수 있게 해주는 기술이다.

ajax는 스프링부트와 달리 자바 스크립트 언어로 이루어져있고 새로고침을 하지 않고도 java 서버에 get, post 요청을 송수신할 수 있다.

즉, 위의 회원가입에서 작성한 id와 nickname을 변수로 받아서 스프링부트에 get 요청을 보낸다.

그리고 해당 요청에 대한 답을 res 변수로 수신하여, 옳으면 true, 그렇지 않다면 false를 확인하여 submit 기능을 활성화한다.

@GetMapping("/IDCheck")
public @ResponseBody ResponseDto<?> check(String id){

    if(id == null || id.isEmpty()){
        return new ResponseDto<>(-1,"아이디를 입력해주세요",null);
    }
    if (!userService.IDcheck(id)){
        return new ResponseDto<>(1,"동일한 아이디가 존재합니다.", false);
    }else{
        return new ResponseDto<>(1,"사용가능한 아이디입니다.", true);
    }
}

@GetMapping("/NicknameCheck")
public @ResponseBody ResponseDto<?> nickcheck(String nickname){

    if(nickname == null || nickname.isEmpty()){
        return new ResponseDto<>(-1,"닉네임을 입력해주세요",null);
    }
    if (!userService.Nickcheck(nickname)){
        return new ResponseDto<>(1,"동일한 닉네임이 존재합니다.", false);
    }else{
        return new ResponseDto<>(1,"사용가능한 닉네임입니다.", true);
    }
}

 

위의 코드는 ajax를 통해 송신된 id, nickname 중복확인 요청을 받는 Controller의 메서드이다.

Service를 통해 레포지토리가 DB에 접근하여 해당 데이터가 있는지 없는지를 판단하고 값을 반환한다.

@AllArgsConstructor
@Getter
@Setter
public class ResponseDto<T> {
    private int code;
    private String msg;
    private T data;
}

 

여기서 ResponseDto라는 객체를 볼 수가 있다.

이는 필자가 자바 스크립트에 깔끔하게 데이터를 전달하기 위해서 만든 객체이다.

 

오늘은 이렇게 ajax를 통해서 어떻게 자바 스크립트와 자바(프론트와 백)가 통신하는지에 대해서 알아보았다.

다음 시간에는 JPA를 통한 테이블 조인에 대해서 알아보도록 하자.

728x90
반응형

'Spring Boot 실전' 카테고리의 다른 글

[Spring Boot 실전]9. 댓글을 불러오고 삭제하는 기능을 만들어보자  (0) 2024.01.21
[Spring Boot 실전]8. 두 가지 테이블 조인하기  (0) 2024.01.20
[Spring Boot 실전]6. 회원가입 기능을 추가해보자  (0) 2024.01.18
[Spring Boot 실전]5. AWS EC2와 RDS  (0) 2024.01.16
[Spring Boot 실전]4. 게시판에 Delete 기능을 추가하자.  (2) 2024.01.07
'Spring Boot 실전' Related Articles more