Spring(12) - REST API1: JSON데이터 넘기기

지금까지 우리가 만든 DTO나 list, int 등의 데이터로 넘겼다면, 이제 이 데이터들을 JSON형식으로 넘기는 방법을 알아보자. 이는 나중에 REST API에 그대로 사용된다.

 

 

 

실행화면

 

 

 

 

0. JSON 데이터 사용하는 코드

주로, 비동기에서 사용한다. 페이지 전체가 아니라 비동기로 데이터만 받아올 때 자주 사용하기 때문이다.

아래는 회원 정보 list를 뿌릴 때, 회원 정보를 비동기로 받아와서 화면에 뿌리는 작업이다. 

 

 

1) JSON용

<script type="text/javascript">
	$(document).ready(function(){
		$.ajax({
			url:'${root}/user/list',
			type: 'GET',
			contentType:'application/json;charset=utf-8',
			dataType:'json',
			success: function(data){
				makeList(data.users);
			},
			error: function(xhr, status, error){
				console.log("상태값 : " + xhr.status + "\tHttp 에러메시지 : " + xhr.responseText);
			}
		});
		
		function makeList(users){
			$("#table-body").empty();
			if(users.length==0){
				let str = `
					<tr class="table-info">
						<td>회원이 없습니다.</td>
					</tr>
				`;
				$("#table-body").append(str);
			}
			else{
				$(users).each(function(index, user){
					let list = `<tr>
						<td>${'${user.userName}'}</td>
						<td>${'${user.userId}'}</td>
						<td>${'${user.userPwd}'}</td>
						<td>${'${user.email}'}</td>
						<td>${'${user.joinDate}'}</td>
						<td colspan="2" class="text-right">
							<a href="${root}/user/modify?userid=\${user.userId}">수정</a>
							<a href="${root}/user/delete?userid=\${user.userId}">삭제</a>
						</td>
					</tr>
					`;
					$("#table-body").append(list);
				});	
			}
		}
	})
</script>

<h2 class="user-list">회원 목록</h2>

<table class="user-table">
	<thead>
		<tr class="table-info">
			<td>이름</td>
			<td>아이디</td>
			<td>비밀번호</td>
			<td>이메일</td>
			<td>가입일자</td>
		</tr>
	</thead>
	<tbody id="table-body"></tbody>
</table>

 

2) JACKSON용

<script type="text/javascript">
	$(document).ready(function(){
		$.ajax({
			url:'${root}/user/list',
			type: 'GET',
			contentType:'application/json;charset=utf-8',
			dataType:'json',
			success: function(data){
				makeList(data);
			},
			error: function(xhr, status, error){
				console.log("상태값 : " + xhr.status + "\tHttp 에러메시지 : " + xhr.responseText);
			}
		});
		
		function makeList(users){
			$("#table-body").empty();
			if(users.length==0){
				let str = `
					<tr class="table-info">
						<td>회원이 없습니다.</td>
					</tr>
				`;
				$("#table-body").append(str);
			}
			else{
				$(users).each(function(index, user){
					let list = `<tr>
						<td>${'${user.userName}'}</td>
						<td>${'${user.userId}'}</td>
						<td>${'${user.userPwd}'}</td>
						<td>${'${user.email}'}</td>
						<td>${'${user.joinDate}'}</td>
						<td colspan="2" class="text-right">
							<a href="${root}/user/modify?userid=\${user.userId}">수정</a>
							<a href="${root}/user/delete?userid=\${user.userId}">삭제</a>
						</td>
					</tr>
					`;
					$("#table-body").append(list);
				});	
			}
		}
	})
</script>

<h2 class="user-list">회원 목록</h2>

<table class="user-table">
	<thead>
		<tr class="table-info">
			<td>이름</td>
			<td>아이디</td>
			<td>비밀번호</td>
			<td>이메일</td>
			<td>가입일자</td>
		</tr>
	</thead>
	<tbody id="table-body"></tbody>
</table>

 

 

 

1. JSON library 추가하기

pom.xml에 버전과 library추가하기

 

1. properties 태그에 버전 등록

<json-version>20220320</json-version>

 

 

2. dependencies 태그에 추가

<!-- https://mvnrepository.com/artifact/org.json/json -->
<dependency>
    <groupId>org.json</groupId>
    <artifactId>json</artifactId>
    <version>${json-version}</version>
</dependency>

 

 

 

2. 페이지가 아니라 데이터 넘겨주는 거라고 알리기

Controller에서 String을 리턴하는 건 view이름으로 인지한다. view이름을 return하면 앞뒤로 경로를 붙여 view.jsp파일을 보여준다. 따라서 데이터를 return할 때는 "view이름이 아니라 데이터야!"라고 알려줘야 한다.

 

데이터 전달하는 메서드에 @ResponseBody를 붙인다.

@ResponseBody
public String list(Model model) {
	//logic
}

 

+) Controller + ResponseBody = RestController

해당 Controller 전체를 Rest로 사용하려면 메서드마다 @ResponseBody를 붙이기보다는

Controller에 @RestController하나만 붙여주는 게 간편하다.

 

 

 

3. JSON 데이터로 응답하기

 

우선 listpage로 가는 코드를 작성한다. 페이지로 가야 js코드가 실행되기 때문이다.

@GetMapping("/listpage")
public String golist() {
    return "/user/list";
}

 

 

방법1) JSON Object 사용하기

//UserController.java
@GetMapping("/list")
public @ResponseBody String list() {
    JSONObject result = new JSONObject();
    try {
        List<UserDto> users = userService.listUser();
        JSONArray jsonArr = new JSONArray();
        for(UserDto user : users) {
            JSONObject json = new JSONObject();
            json.put("userName", user.getUserName());
            json.put("userId", user.getUserId());
            json.put("userPwd", user.getUserPwd());
            json.put("email", user.getEmail());
            json.put("joinDate", user.getJoinDate());
            jsonArr.put(json);
        }
        result.put("users", jsonArr);
    } catch (Exception e) {
        e.printStackTrace();
    }
    return result.toString();
}

 

 

방법2) Jackson 라이브러리 사용하기

Java의 객체도 큰 구조는 키:값으로 되어 JSON형태를 갖추고 있다. 따라서 Jackson을 사용하여 DTO를 넘기면 JSON으로 받도록 할 수 있다.

 

pom.xml에 Jackson관련 코드 추가

<jackson-databind-version>2.13.2.2</jackson-databind-version>

<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>${jackson-databind-version}</version>
</dependency>

 

 

그냥 자바 객체를 넘겨주면 알아서 변환해서 넘겨준다.

//UserController.java
@GetMapping("/list")
public @ResponseBody List<UserDto> list() {
    List<UserDto> users = null;
    try {
        users = userService.listUser();
    } catch (Exception e) {
        e.printStackTrace();
    }
    return users;
}