LG CNS 부트캠프 학습일지 27일차

학습 내용

• @RequestBody
• @RequestParam
• @PathVariable

개요

프론트엔드와 백엔드를 만들었다면 두 서버가 통신할 수 있게 만들어야 한다. 다시 말해 데이터를 주고받을 수 있게 만들어야 한다. 여러 방법이 있는데, 정리하면 다음과 같다.

1. JSON의 형식으로 주고받기
2. URL로 주고받기

특정 엔드포인트를 통해 백엔드가 데이터를 받을 때 개발자는 어노테이션을 활용해서 그 방식을 명시할 수 있다.

@RequestBody

JSON 형식으로 데이터를 주고받을 때 사용하는 어노테이션이다. URL 상으로는 데이터를 확인할 수 없고, GET 또는 POST 같은 HTTP 메소드를 통해 통신할 때 확인할 수 있다.

// 프론트엔드
const foo = async () -> {
	await axios.create()
		.put("https://coffeebreak.com/blog/write", {
			id: ... ,
			content: ... ,
			author: ... 
		})
		.then(
			...
		)
		.catch(
			...
		)
}

// 백엔드
@PutMapping("/blog/write")
public ResponseEntity<BlogResponseDTO> write(@RequestBody BlogRequestDTO request) {
	request.getId();
	request.getContent();
	...
}

위와 같은 코드가 있을 때 프론트엔드 측 put() 메소드에 전달된 두 번째 매개변수가 백엔드로 전달될 때, 자바스크립트 객체를 구성하는 개별 데이터가 BlogRequestDTO로 변환되어 자바 객체로서 접근할 수 있게 된다.

@RequestParam

URL을 통해서 데이터를 주고받을 때 사용하는 어노테이션이다. 쿼리 형식으로 전달된다. 예를 들어 https://coffeebreak.com/blog/delete?id=1 의 형태로 주어진다.

@DeleteMapping("/blog/delete")
public void doSomething(@RequestParam("id") Integer value) {
	System.out.println("id: " + id); // 1
}

@PathVariable

URL을 통해서 데이터를 주고받을 때 사용하는 어노테이션이다. 예를 들어 https://coffeebreak.com/blog/delete/1 의 형태로 주어진다.

@DeleteMapping("/blog/delete/{id}")
public void doSomething(@PathVariable("id") Integer value) {
	System.out.println("id: " + id); // 1
}

@RequestParam과 @PathVariable 중에 어떤 것이 더 좋다라고 딱 잘라 말할 수는 없지만, 개인적으로는 @PathVariable이 더 유용할 것 같다. @DeleteMapping 등에서 특정 값을 전달받을 것이라는 것을 명시할 수 있다는 점이 유용해 보인다. 반면 @RequestParam은 쿼리 때문에 URL이 이해하기 부담스러운 형태를 띠게 된다는 점에서 실용성이 부족해 보였다.

결론

워크플로우는 대충 이렇다. 명세서에 따라 컨트롤러를 만들고 엔드포인트를 정의한다. 바로 프론트엔드와 통신하지 않고 Swagger를 이용해서 백엔드가 입력을 제대로 받고 있는지 확인한다. 백엔드가 입력을 받고 있는 것을 확인하고 프론트엔드와 백엔드 사이에 통신하는데 문제가 없는지 확인한다. 여기까지 문제가 없다면 백엔드가 데이터베이스와 통신하는 것을 구현한다.