솔직히 이게 제일 헷갈렸다. req가 뭔지 res가 뭔지는 알겠는데 실제로 코드에서 어디서 어떻게 쓰이는지가 계속 안 잡혔다.
req, res
req (request) : 클라이언트가 서버한테 보내는 요청. 뭘 해달라는 거. URL, HTTP 메서드, 헤더, 바디 다 여기 담겨 있다.
res (response) : 서버가 클라이언트한테 돌려주는 응답. 처리 결과를 돌려주는 거. 상태코드, 헤더, 바디가 여기 담긴다.
클라이언트 --[req]--> 서버
클라이언트 <--[res]-- 서버프론트(Vue + axios)에서 req 보내기
axios로 요청을 보내는 게 req를 만드는 거다.
// GET 요청
const res = await axios.get('/api/vehicles')
// POST 요청
const res = await axios.post('/api/vehicles', {
carNumber: '12가3456',
ownerName: '홍길동'
})
// 헤더에 JWT 토큰 담아서 보내기
const res = await axios.get('/api/vehicles', {
headers: {
Authorization: `Bearer ${token}`
}
})axios.get(), axios.post() 이게 req를 만들어서 서버에 보내는 거다. 반환값으로 받는 res가 서버에서 돌아온 응답이다.
응답 데이터는 res.data로 꺼내 쓴다.
const res = await axios.get('/api/vehicles')
console.log(res.data) // 서버가 보내준 데이터백(Spring)에서 req 받고 res 돌려주기
프론트에서 보낸 req를 Spring 컨트롤러가 받는다.
@RestController
@RequestMapping("/api/vehicles")
public class VehicleController {
// GET 요청 받기
@GetMapping
public ResponseEntity<List<Vehicle>> getVehicles() {
List<Vehicle> list = vehicleService.getAll();
return ResponseEntity.ok(list); // 200 OK + 데이터 반환
}
// POST 요청 받기 (바디에서 데이터 꺼내기)
@PostMapping
public ResponseEntity<Void> addVehicle(@RequestBody VehicleRequest request) {
vehicleService.add(request);
return ResponseEntity.status(201).build(); // 201 Created
}
}
```
`@RequestBody` : req 바디에 담긴 JSON을 Java 객체로 변환해준다.
`ResponseEntity` : 상태코드랑 응답 바디를 직접 설정해서 돌려줄 수 있다.
---
## 전체 흐름 한눈에
```
[Vue]
axios.post('/api/vehicles', { carNumber: '12가3456' })
↓ req (HTTP POST, body에 JSON 담아서 전송)
[Spring - JwtAuthenticationFilter]
Authorization 헤더에서 토큰 꺼내서 검증
↓ 통과하면
[Spring - VehicleController]
@RequestBody로 바디 꺼냄
서비스 로직 실행
ResponseEntity로 결과 반환
↓ res (HTTP 201, 결과 JSON)
[Vue]
res.data로 응답 데이터 꺼내서 사용
처음엔 req가 axios에서 끝나는 줄 알았는데, Spring 필터 거치고 컨트롤러까지 들어오는 흐름이 연결돼 있는 거였다.
헷갈렸던 포인트
@RequestBody vs @RequestParam
// URL에 붙어오는 데이터 (?page=1&size=10)
@GetMapping
public ResponseEntity<?> getList(@RequestParam int page, @RequestParam int size) { }
// 바디에 JSON으로 담겨오는 데이터
@PostMapping
public ResponseEntity<?> add(@RequestBody VehicleRequest request) { }GET 요청은 보통 URL 파라미터, POST 요청은 보통 바디에 담아 보낸다. 처음엔 이걸 몰라서 계속 null 받았다.
axios res vs Spring ResponseEntity
프론트에서 쓰는 res는 axios가 받아온 응답 객체고, Spring에서 쓰는 ResponseEntity는 백엔드가 응답을 만들어서 보내는 객체다. 이름이 비슷해서 헷갈렸는데 역할이 반대라고 보면 된다.
느낀 점
req, res 개념 자체는 어렵지 않은데 프론트랑 백이 나눠져 있으니까 각각 어느 쪽에서 뭘 하는 건지 흐름이 안 잡혔던 것 같다.
프로젝트에서 axios 요청 보내놓고 컨트롤러에서 왜 안 받히지 하면서 한참 헤맸는데, 결국 @RequestBody 빠뜨린 거였다.
전체 흐름을 한 줄로 놓고 보니까 훨씬 이해가 됐다.
프론트에서 만든 req가 필터 거쳐서 컨트롤러까지 들어오고, 컨트롤러에서 만든 res가 다시 프론트로 돌아가는 구조. 이 한번 머릿속에 그려지니까 이해가 조금 더 됐다.