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

<aside> ✅ ajax 를 사용하는 이유

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

</aside>

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);
    }
}