Notice
Recent Posts
Recent Comments
Link
«   2025/02   »
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
Tags
more
Archives
Today
Total
관리 메뉴

코드와이

[웹] Rest API 본문

[웹] Rest API

코드와이 2021. 5. 9. 01:10

 

REST API

 

AJAX(Asynchronous Javascript And Xml)

   - JavaScript의 라이브러리중 하나이며, 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이다. JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.

$.ajax({
	url:'${root}/product/list',
    type:'GET',
    contentType:'application/json;charset=utf-8',
    dataType:'json',
    success:function(list){
    	make(list);
	},
    error:function(xhr, status, msg){
    	console.log("상태값 : " + status + "Http에러메시지 : " + msg);
	}
});

<AJAX 예시>

 

Rest Controller에 필요한 annotation

@RestController

   - Data를 반환하기 위해서는 viewResolver(@Controller 가 data를 반환하기 위해 거쳐가는 것) 대신에 HttpMessageConverter가 동작합니다.

@RequestMapping("/list")

   - DefaultAnnotationHandlerMapping에서 컨트롤러를 선택할 때 사용됩니다. 예시에선 url에 "list"를 적용하면 해당 컨트롤러가 작동합니다.

@CrossOrigin("*")

   - 웹 페이지의 제한된 자원을 외부 도메인에서 접근을 허용해줍니다. 예시에선 "*"를 적용시켰기 때문에 모든 도메인에서 접근이 가능합니다.

 

[간단한 예시]

 

AJAX -> REST controller(value="product")

productList 함수 작동

@RequestMapping(value="/list", method=RequestMethod.GET, headers={"Content-tpye=application/json"})
public List<ProductDto> productList(){
	return productService.productList();
}

 

ajax에선 json 형태의 객체를 받아야 하는데 위의 productList 반환 객체는 List<ProductDto> 형식이므로 오류가 납니다.

이때 Jackson-databind 라이브러리가 객체를 JSON 포맷의 문자열로 변환시켜서 브라우저로 전송시켜 줄 수 있습니다.

<dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
    <atrifactId>jackson-databind</artifactId>
    <version>${jackson-databind-version}</version>
</dependency>

위의 dependency를 pom.xml에 추가

또 다른 케이스로 jackson-dataformat-xml 라이브러리는 xml로 브라우저로 전송합니다.

 

@RequestMapping(value="/findProduct/{pId}", method=RequestMethod.GET, headers={"Content-tpye=application/json"})
public List<ProductDto> findProduct(@PathVariable("pID" String id){
	return productService.findProduct(id);
}

변수값을 url에 포함시켜  REST controller로 넘겨주면 @PathVariable annotation을 통해 받을 수 있습니다.

 

'' 카테고리의 다른 글

[웹] Vue.js(2)  (0) 2021.05.13
[웹] Vue.js  (0) 2021.05.10
[웹] MyBatis  (0) 2021.05.01
[웹] Spring(2)  (0) 2021.04.27
[웹] Spring  (0) 2021.04.27