🔥 #5 회원가입 구현하기 (Feat. Ajax를 사용하는 이유)

회원가입 폼 (jsp 파일)에서 데이터를 전송해야 한다.

<form action="/user/join" method="POST">
    <div class="form-group">
        <label for="username">Username</label>
        <input type="text" class="form-control" placeholder="Enter username" id="username">
    </div>
    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" placeholder="Enter email" id="email">
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="form-control" placeholder="Enter password" id="password">
    </div>
    <button type="submit" class="btn btn-primary">회원가입하기</button>
</form>

저번 프로젝트는 form 태그를 이용하여 위처럼 했었다면.. 이번에는 좀 다르게 !!

json 형태로 해보겠다.

---

🎈 회원가입시 Ajax를 사용하는 2가지 이유

1️⃣1. 요청에 대한 응답을 html이 아닌 Data(Json)를 받기 위해서

(예시)

이렇게 클라이언트가 브라우저 라면 위의 그림이 가능하다. (html)

하지만!!

브라우저가 아닌 앱이라면, 앱은 html을 이해하지 못한다.
정확히 말하면 화면을 그려야 하기 때문에 자바 코드를 리턴해야 한다.
앱을 다운로드하면 화면 디자인은 이미 앱에 심어져있다.
즉, Data만 리턴하면 된다!

이렇게 클라이언트가 브라우저 일때와 앱 일때의 방식이 다르다. 그러면 서버를 2번 만들어야 할까??

-> 당연히 아니다! 그냥 둘 다 Data를 리턴하는 서버를 사용하면 된다.

이렇게
1. 회원가입 요청 후 Data로 리턴 받고
2. 메인 페이지를 다시 요청하여 .html로 리턴 받는 것이다.

즉, Ajax를 사용해서 Data를 응답 받게 되면 브라우저나 앱 둘 다 동일한 서버로 작동할 수 있다.

2️⃣2. 비동기 통신을 하기 위해서

절차적으로 일을 처리하는데 순서에 상관없이 처리하는 것

콜백 : 하던 일을 멈추고 돌아가는 것

• 동기적 실행 : 절차적으로 수행하는데, 앞 순서가 끝이 나야 뒤 순서 실행
• 비동기적 실행 : 절차적으로 수행하는데, 앞 순서가 끝나지 않아도 뒤 순서 먼저 실행 가능

---

joinForm.jsp에

<button id="btn-save" class="btn btn-primary">회원가입하기</button>
.
.
.
<script src="/blog/js/user.js"></script>

넣어주고 이제 user.js를 만들어야 한다.

버튼 id가 btn-save이니까 .. 아래처럼 !!
< user.js >

let index = {
    init: function () {
        $("#btn-save").on("click", ()=>{ // function(){} 대신 ()=>{} 를 쓴 이유 : this를 바인딩하기 위해서
            this.save();
        });
    },

    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을 리턴해주면 자동으로 자바 오브젝트로 변환
        $.ajax({
            // 회원가입 수행 요청
            type: "POST",
            url: "/blog/api/user",
            data: JSON.stringify(data), // http body 데이터
            contentType: "application/json; charset=utf-8", // body 데이터가 어떤 타입인지 (MIME)
            dataType: "json" // 요청을 서버로 해서 응답이 왔을 때 기본적으로 모든 것이 String(문자열), 만약 생긴게 json이라면 javascript 오브젝트로 변경
        }).done(function (resp) {
            // 결과가 정상이면 done 실행
            alert("회원가입이 완료되었습니다.");
            //console.log(resp);
            location.href = "/blog";
        }).fail(function (error) {
            // 실패하면 fail 실행
            alert("회원가입이 실패하였습니다.");
            alert(JSON.stringify(error));
        });
    }
}


index.init();

회원가입 버튼을 누르면 ajax에서 회원가입 수행요청을 하는데

• url : url을 "/blog/api/user"로 잡았다.

• data : data에서는 위의 data가 자바스크립트 오브젝트니까 (let data = { id:1, username:"ssar" }; 이런 형태로 생김) 자바에서 이해를 하지 못한다. (data: data라고 적으면 자바가 이해 못함)
  따라서 js오브젝트를 json으로 변경해야 한다. (JSON.stringify() 함수 사용)
  
  위 : console.log(data); -> 자바스크립트 오브젝트
  아래 : console.log(JSON.stringify(data); -> JSON 문자열

• contentType : 무슨 데이터인지 알려주기 (MIME 데이터), 위의 data와 세트로 써주기

• dataType : 응답이 온 후!!!를 말함. 응답으로 온 데이터 -> 텍스트, 숫자, json 형태 등..
  기본적으로 모든 것이 문자열로 오지만, "json"이라고 설정하면 응답 온 데이터의 생긴 형태가 json 일 때 자바스크립트 오브젝트로 변경
  -> 결과를 자바스크립트로 변환해서 응답 결과가 아래의 function(결과) 여기 결과로 전달됨

< UserApiController >

	@PostMapping("/api/user")
    public ResponseDto<Integer> save(@RequestBody User user) {
        System.out.println("UserApiController : save 호출됨");
        user.setRole(RoleType.USER);
        userService.회원가입(user);
        return new ResponseDto<Integer>(HttpStatus.OK.value(), 1); // 통신 성공 : 200, 실패 : 500 // 자바 오브젝트를 JSON으로 변환해서 리턴 (Jackson)
    }

< UserService >

    @Transactional // 전체가 성공해야 commit, 실패하면 rollback
    public void 회원가입(User user) {
        userRepository.save(user);
    }

---

서비스가 필요한 이유

1. 트랜잭션 관리

• 트랜잭션 : 일이 처리되기 위한 가장 작은 단위
• 여러 트랜잭션이 묶여서 하나의 트랜잭션으로 처리할 수 있다. -> 서비스
• 보통 데이터 변경 할 때 사용, 변경해서 커밋 하는 용도 (update)

2. 서비스 의미 때문 (=기능)

• update, insert, delete 등 여러가지 로직이 묶인 것, update 라는 데이터베이스 로직을 하나만 들고 있어도 서비스라고 할 수 있긴 함.

• (예시) 송금 서비스 : A(현재 잔액 : 5000) -> B(현재 잔액 : 2000) 에게 1000원 입금하면 A의 데이터 5000->4000으로 update, B의 데이터 2000->3000으로 update. 총 2개의 로직을 묶는다. 또한 2개 로직의 트랜잭션을 묶어서 하나의 트랜잭션으로 묶어 서비스화 시킨다.
  즉, 여러 개의 트랜잭션이 모여 서비스가 된다.