Spring의 기본 Parsing 전략

1. Get요청

• 주소에 데이터를 담아 보낸다. 이때, 데이터 형태는 key=value
• 특징: body로 데이터를 담아 보내지 않음.

2. Post, Put, Delete 요청

• Body에 데이터를 담아 보낸다. 이때, 데이터 형태는 json으로 통일하는 것이 좋음.
• ex) username, password, email, create_date 등등
• form 태그 method='Post' 도 가능
  • 한계: form 태그는 get 또는 post 요청 밖에 못함
  • put, delete를 위해서는 javascript로 요청해야 함 => 통일성 문제
• 통일: javascript로 ajax 요청 + 데이터는 json으로 통일!

  다른 방식으로는 get, post, put, delete 요청이 다 가능한 Spring의 form:form 태그도 있다.

3. 스프링 컨트롤러의 Parsing 전략 1

• 스프링 컨트롤러는 key=value 데이터를 자동으로 파싱해 변수에 담아준다.
• ex) http://localhost:8000/get?username=hong&email=hong@gmail.com 으로 요청하면 아래 parameter에 값 전달 가능

PostMapping("/home")
public String home(String username, String email){
	
    return "home";
}

4. 스프링 컨트롤러의 파싱 전략 2

• Spring은 key=value 형태의 데이터를 오브젝트로도 parsing해서 받아준다.

• 주의 점은 setter가 있어야 key=value 데이터를 스프링이 parsing해서 넣어 준다는 것

class User {

    private String username;
    private String password;
    
    public String getUsername(){
    	return username;
    }
    
    public String getPassword(){
    	return password;
    }
    
    public void setUsername(String username){
    	this.username = username;
    }
    
    public void setPassword(String password){
    	this.password = password;
    }
    
}

Setter 존재 시, 아래와 같이 parameter object 사용 가능

PostMapping("/home")
public String home(User user){
	
    return "home";
}

5. Key=value 형태가 아닌 데이터의 parsing

• json 데이터나 일반 text데이터를 스프링 컨트롤러에서 받기 위해서는 @RequestBody 어노테이션 사용
• 기본전략이 스프링 컨트롤러는 key=value 데이터를 파싱해서 받아주는 일을 하는데, 다른 형태의 데이터 (ex.json) 데이터는 아래와 같다.

{
    "username":"hong",
    "password":"1111"
}

해당 데이터는 스프링이 파싱해서 오브젝트로 받지 못하므로 @RequestBody 어노테이션을 이용해 MessageConverter 클래스를 구현한 Jackson 라이브러리가 불러 json 데이터를 자바 오브젝트로 파싱하여 받아준다.

PostMapping("/home")
public String home(@RequestBody User user){
	
    return "home";
}

6. form 태그로 json데이터 요청 방법

• key=value 데이터가 아니라 json데이터의 전송

join.jsp

<div class="container">

	<form>
		<div class="form-group">
			<label for="username">회원</label> 
			<input type="text" id="username">
		</div>
		<div class="form-group">
			<label for="password">비밀번호</label> 
			<input type="password" id="password">
		</div>
		
		<div class="form-group">
			<label for="email">이메일</label> 
			<input type="email" id="email">
		</div>
	</form>
	
	<button id="join--submit" class="btn btn-primary">회원가입</button>

</div>

<script src="/js/join.js"></script>

join.js

<script>
$('#join--submit').on('click', function() {
	var data = {
		username : $('#username').val(),
		password : $('#password').val(),
		email : $('#email').val()
	};

	$.ajax({
		type : 'POST',
		url : '/user/join',
		data : JSON.stringify(data),
		contentType : 'application/json; charset=utf-8',
		dataType : 'json'
	}).done(function(r) {
		if (r.statusCode == 200) {
			console.log(r);
			alert('회원가입 성공');
			location.href = '/user/login';
		} else {
			if (r.msg == '아이디중복') {
				console.log(r);
				alert('아이디가 중복되었습니다.');
			} else {
				console.log(r);
				alert('회원가입 실패');
			}
		}
	}).fail(function(r) {
		var message = JSON.parse(r.responseText);
		console.log((message));
		alert('서버 오류');
	});
});
</script>

1. form 태그에 user, password, email 등에 각각 id를 만든다.
2. javascript를 이용해 submit 클릭 시, id의 value를 변수에 담아 data object로 묶는다.
3. ajax 요청을 post 방식으로 특정 url에 보낸다.
4. 이때, data는 javascript object이므로 JSON.stringify(data) 함수를 이용해 json으로 변경 후, 전송

참고: https://getinthere.tistory.com/24?category=884180