[Blog 프로젝트] 회원가입 기능 구현

회원 가입 기능은 Ajax 통신을 기반으로 구현합니다.

✅ ajax 를 사용하는 이유

1. 요청에 대한 응답을 html이 아닌 Data(Json)으로 받기 위해
2. 통신의 효율성을 높이기 위한 비동기 통신을 하기 위해

joinForm 에서 클라이언트가 입력한 데이터를 담아 javaScript를 통한 ajax통신으로 서버에 요청하고 컨트롤러에서 회원가입 비즈니스 로직을 실행하고, 결과 값(data)을 반환합니다.

컨트롤러는 데이터를 반환하기 때문에 @RestController어노테이션을 사용합니다.

joinForm.html

<div class="container" style="margin-bottom: 1rem">

    <form>
        <div class="mb-3 mt-3">
            <label for="username" class="form-label">UserName:</label>
            <input type="text" class="form-control" id="username" placeholder="Enter uesrname" name="username">
        </div>

        <div class="mb-3">
            <label for="password" class="form-label">Password:</label>
            <input type="password" class="form-control" id="password" placeholder="Enter password" name="password">
        </div>

        <div class="mb-3 mt-3">
            <label for="email" class="form-label">Email:</label>
            <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
        </div>
    </form>

    <button id="btn-save" class="btn btn-primary">회원가입</button>

</div>

<script src="/blog/js/user.js"></script>

회원 가입 버튼 시 form 태그의 데이터를 ajax 통신으로 서버에 전송하는 방식을 구현합니다.

해당 기능을 user.js에서 구현하고 해당 스크립트를 추가해줍니다.

user.js

let index = {
    init: function (){
        $("#btn-save").on("click", ()=>{ 
                // function(){} 대신 ()=>{}을 사용, this 를 바인딩하기 위해
            this.save(); // function 을 사용하면 해당 this 가 window 를 가리킴
        });
    },

    save: function (){
        // alert("user의 save함수 호출됨");
        let data = {
            username:$("#username").val(),
            password:$("#password").val(),
            email:$("#email").val()
        }
        // console.log(data);

        // ajax 호출 시 default 가 비동기 호출
        // ajax 통신을 이용하여 3개의 데이터를 json 으로 변경하여 insert 요청
        // ajax 통신을 성공하고 서버가 json 형태의 데이터를 리턴하면 
                // 자동으로 자바 Object 로 변환
        $.ajax({
            // 회원가입 수행을 요청
            type: "POST",
            url: "/blog/api/user",
            data: JSON.stringify(data), // http body 데이터
            contentType: "application/json; charset=utf-8", // body 데이터 타입 (MIME)
            dataType: "json", 
                        // 응답된 데이터가 json 형태라면 -> javascript object 로 변경

        }).done(function (response){
            // 요청 결과가 정상인 경우
            alert("회원가입이 완료 되었습니다.");

            // console.log(response);

            location.href = "/blog";

        }).fail(function (error){
            // 요청 결과가 비정상인 경우
            alert(JSON.stringify(error));

        }); // ajax 통신을 이용해서 3개의 데이터를 json 으로 변경하여 insert 요청
    }
}

index.init();

1. btn-save 라는 id를 가진 버튼을 클라이언트가 클릭할 시 save 함수가 실행됩니다.
2. save함수는 username, password, email 이라는 id를 가진 input 데이터를 data에 저장합니다.
3. 해당 데이터를 http body에 담아 ajax 통신을 사용하여 /blog/api/user 주소에 post 방식으로 전송합니다.
4. 요청에 대한 응답값을 확인하여 결과가 정상인 경우 메시지와 /blog url을 서버에 요청합니다.

UserApiController

@RestController
public class UserApiController {

    @Autowired
    private UserService userService;

    @PostMapping("/api/user")
    public ResponseDTO<Integer> save(@RequestBody User user){ //username, password, email
        System.out.println("UserApiController save 메서드 호출");

        // DB에 insert
        user.setRole(RoleType.USER);
        userService.join(user);

        return new ResponseDTO<Integer>(HttpStatus.OK.value(), 1);
    }
}

회원 가입 요청에 대한 비즈니스로직을 실행하는 컨트롤러입니다.

1. Http Body부에 저장되어 넘어온 json 형식의 데이터를 @RequestBody 어노테이션을 사용하여 User 자바 오브젝트에 저장합니다. (해당 오브젝트에 Setter가 존재해야 합니다.)
2. User 오브젝트를 비즈니스로직을 담당하는 service 클래스에 전달하여 회원가입을 진행합니다.
3. 요청에 처리에 대한 응답을 ResponseDTO 객체에 담아서 반환합니다.

오류 처리는 GlobalExceptionHandler 클래스에서 진행됩니다.

GlobalExceptionHandler

@ControllerAdvice
@RestController
public class GlobalExceptionHandler {

    @ExceptionHandler(value = Exception.class)
    public ResponseDTO<String> handleException(Exception e){
        return new ResponseDTO<String>(
                                        HttpStatus.INTERNAL_SERVER_ERROR.value(), e.getMessage());
    }

}

모든 에러 발생 시 에러코드와 에러 메시지를 담은 ResponseDTO 객체를 반환합니다.

ResponseDTO

@Data
@NoArgsConstructor
@AllArgsConstructor
@Builder
public class ResponseDTO<T> {
    int status;
    T data;
}