[Spring] 27.SpringProject-REST방식과 Ajax




REST 방식



REST는 ‘Representational State Transfer의 약자로 하나의 URI는 하나의 고유한 리소스(Resource)를 대표하도록 설계된다는 개념입니다!

지금까지 저희는 게시물 관리에서 등록, 조회, 삭제, 수정 등의 작업을 할 때,

/board/register(등록), /board/read?bno=123(조회), /board/update?bno=123(수정), /board/delete?bno=123(삭제)처럼 URI를 통해 해당 컨트롤러를 호출하는 방식으로 처리했습니다.

그리고 각 컨트롤러는 jsp를 반환하여 그것을 사용자에게 보여줬죠!

그렇다보니 게시물을 등록하고 수정하는 등의 작업을 할 때 refresh가 일어나 화면이 깜빡였습니다!


하지만, REST 방식은 특정한 URI는 반드시 그에 상응하는 데이터 자체어야합니다!

예를 들어 URI /boards 는 게시물들을 의미하고, /boards/123은 글번호가 123번인 게시물을 의미합니다!

그리고 조회, 수정, 삭제 등의 처리는 HTTP method 로 구분하여 처리합니다!


image




저희 게시물 댓글처리는 REST 방식으로 구현할 것이기 때문에 지금 제대로 모르셔도 걱정 안하셔도 됩니다!


REST 방식을 사용하면 컨트롤러의 반환 값은 jsp 파일이 아니라 JSON과 XML와 같은 데이터를 반환합니다.


@RestController




[Spring] 8.Controller에서 JSON 데이터를 반환할 때 @ResponseBody 애노테이션을 이용했습니다~!


//SampleContoller.java

//컨트롤러
@Controller
public class SampleController {
	
	//로그를 남겨줌
	private static final Logger logger = 
		LoggerFactory.getLogger(SampleController.class);
	
	
	//ProductVO를 json 데이터 형태로 반환
	@RequestMapping("/doJSON")
	public @ResponseBody ProductVO doJSON() {
		ProductVO product = new ProductVO("샘플상품",30000);
		
		return product;
	}
}




스프링 4부터는 @RestController 애노테이션을 지원하는데, RestController는 반환 값이 단순 문자열과 JSON입니다~!


  • 단순 문자열을 반환




//SampleController.java



package com.gguri.swp.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/sample")
public class SampleController {
	@RequestMapping("/hello")
	public String sayHello() {
		return "Hello world";
	}
}




image




서버에서 전송되는 데이터를 좀 더 살펴보면 ‘text/html’ 타입의 데이터가 전송되는 것을 볼 수 있습니다~!


  • 객체를 JSON으로 반환하는 경우




//SampleController.java


package com.gguri.swp.controller;

...

@RestController
@RequestMapping("/sample")
public class SampleController {
	...
	
	@RequestMapping("/sendVO")
	public BoardVO sendVO() {
		BoardVO board = new BoardVO();
		board.setBno(1);
		board.setContent("객체를 json 데이터로 반환");
		board.setTitle("연습");
		board.setWriter("꾸리");
		return board;
	}
}




image



객체가 JSON의 형태로 전달된 것을 볼 수 있습니다!

타입도 역시 application/json 으로 되어있네요~!


만약, JSON 데이터가 안 뜨고 406 에러 메시지가 뜬다면,

pom.xml에 jackson-databind 라이브러리가 추가되었는지 확인해주시길 바랍니다!


<!-- pom.xml -->


<dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-databind</artifactId>
	<version>2.8.4</version>
</dependency>




ResponseEntity 타입



@RestController는 별도의 뷰를 제공하지 않는 형태로 서비스를 실행하기 때문에, 때로는 결과 데이터가 예외적인 상황에서 문제가 발생할 수 있습니다!

웹의 경우는 HTTP 상태(status) 코드가 이러한 정보를 나타내는데 사용합니다.

주로 많이 사용되는 상태 코드는 아래와 같습니다!


image



스프링에서 제공하는 ResponseEntitiy 타입은 개발자가 직접 결과 데이터 + HTTP의 상태 코드를 직접 제어할 수 있는 클래스 입니다~!


//SampleController.java


package com.gguri.swp.controller;

...

@RestController
@RequestMapping("/sample")
public class SampleController {

	...
	@RequestMapping("/sendList")
	public ResponseEntity<List<BoardVO>> sendList(){
		List<BoardVO> list = new ArrayList<>();
		for(int i = 0; i < 3; i++) {
			BoardVO board = new BoardVO();
			board.setBno(i);
			board.setContent("객체를 json 데이터로 반환");
			board.setTitle("연습");
			board.setWriter("꾸리");
			list.add(board);
		}
		return new ResponseEntity<>(list,HttpStatus.NOT_FOUND);
	}
}




image




위의 결과를 보면 HTTP 상태 코드와 결과 데이터를 같이 보낸것을 볼 수 있습니다~

일반적인 404 메시지와 달리 전송한 결과는 그대로 보여주네요~!


REST 와 Ajax



웹을 통해서 작업할 때 REST 방식이 가장 많이 쓰이는 형태는 Ajax와 같이 결합된 형태입니다!

Ajax는 Asynchronous JavaScript and XML 의 약자로 비동기 방식으로 데이터를 주고 받는 방식을 말합니다~!


image



동기 방식은 순차적인 일을 실행하는데 적합합니다! 어떤 업무가 끝나길 기다린 후 끝나면 다른 업무가 시작되는 형태입니다

비동기 방식은 처리한 결과를 기다리지 않고, 흐름이 지속됩니다!

비동기 방식의 특징은 처리된 일의 결과를 통보받은 형태로 처리된다는 점입니다!

Ajax가 바로 비동기 방식인거죠!


image




REST 방식과 Ajax를 이용하면 화면의 전환이나 깜빡임 없이 주어진 기능을 수행할 수 있습니다~!

쉽게 설명하면 먼저 빈 껍데기 html을 클라이언트에 보내줍니다.

그리고 어떤 이벤트가 발생하면 (예를 들면 수정버튼 누르기) 제이쿼리의 Ajax가 RestController의 메소드를 호출합니다!

그럼 서버 측에서 요청한 기능(게시물 수정)을 수행하고 데이터(수정된 데이터)를 json형태로 클라이언트로 넘겨줍니다!

그럼 클라이언트 쪽 브라우저는 수정된 부분만 다시 로딩합니다~!


어떻게 보면 원래 서버 측에서 했던 jsp 파일을 html 파일로 만드는 작업을 클라이언트 쪽으로 떠넘긴 것입니다!

서버에서 화면에 필요한 모든 데이터를 만드는 대신 서버는 필요한 데이터만 전달하기 때문에, 개발의 무게 중심이 브라우저 쪽으로 많이 배분됩니다!


댓글 기능을 구현하면서 한 번 REST와 Ajax에 대해 차차 익숙해져 보겠습니다!