[SpringBoot] 서버에 데이터를 보내는 방법 : @PathVariable, @RequestParam

정리하기

• @PathVariable은 GET 방식으로 URL에 주소를 추가시켜 서버에 HTTP Request를 보낼 때 사용
• @RequestParam은 GET 방식으로 URL에 Query String을 추가시켜 서버에 HTTP Request를 보낼 때 사용
  • 또한 HTML에서 form태그를 통해 POST 방식으로 데이터를 요청할 때 HTTP Request의 Body부분에 Query String을 추가해서 서버에 전송할 때 사용

---

서버에 데이터를 보내는 방법

Clint(브라우저)에서 서버로 HTTP 요청을 보낼 때 데이터를 보내는 방식이 여러 가지가 존재하기 때문에 서버는 모든 방식에 대한 처리 방법을 학습해야 한다.

대표적인 데이터를 보내는 방법 종류

• @PathVariable : 데이터를 URL 경로에 추가하는 방법
• @RequestParam : 데이터를 URL 경로 마지막에 ?와 &를 사용하여 추가하는 방법

---

HTML에서 form 태그를 이용하여 서버에게 POST 요청

→ HTTP Body에 name=Robbie&age=95 형태로 담겨져서 서버로 전달된다.(개발자도구 - Payload에서 확인 가능)

<form method="POST" action="/hello/request/form/model">
  <div>
    이름: <input name="name" type="text">
  </div>
  <div>
    나이: <input name="age" type="text">
  </div>
  <button>전송</button>
</form>

---

서버에 POST 요청시 데이터 전달 방법

@PathVariable 방식

서버에 보내려는 데이터를 URL 경로에 추가하는 방법

URL 작성 방법(서버에서 데이터를 받는 방법)

• 예시) ‘Robbie’와 ‘95’ 데이터를 서버에 보내기 위해 URL 경로에 추가
  → 데이터를 받기 위해서는 /star/{name}/age/{age} 이처럼 URL 경로에서 데이터를 받고자 하는 위치의 경로에 {data} 중괄호를 사용
  

매서드의 매개변수 작성 방법

• 해당 요청 메서드 파라미터에 @PathVariable 애너테이션과 함께 {name} 중괄호에 선언한 변수명과 변수타입을 선언하면 해당 경로의 데이터를 받아올 수 있다.
• 예) (@PathVariable String name, @PathVariable int age)

예시

// GET http://localhost:8080/hello/request/star/Robbie/age/95
// 기존 경로에 '/star/Robbie/age/95' 추가
//{ } 안에 들어있는 이름과 @PathVariable를 사용한 변수명이 일치해야 한다

@GetMapping("/star/{name}/age/{age}")
@ResponseBody
public String helloRequestPath(@PathVariable String name, @PathVariable int age)
{
    return String.format("Hello, @PathVariable.<br> name = %s, age = %d", name, age);
}

---

@RequestParam 방식 (Query String 방식)

서버에 보내려는 데이터를 URL 경로 마지막에 ?와 &를 사용하여 추가하는 방법

URL 작성 방법(서버에서 데이터를 받는 방법)

• 예시) ‘Robbie’와 ‘95’ 데이터를 서버에 보내기 위해 URL 경로 마지막에 추가
  →?name=Robbie&age=95 에서 key 부분에 선언한 name과 age를 사용하여 value에 선언된 Robbie, 95 데이터를 받아 올 수 있다.
  

메서드의 매개변수 작성 방법

• 해당 요청 메서드 파라미터에 @RequestParam 애너테이션과 함께 key 부분에 선언한 변수명과 변수타입을 선언하면 데이터를 받아올 수 있다.
  • 예시) (@RequestParam String name, @RequestParam int age)

예시

// GET http://localhost:8080/hello/request/form/param?name=Robbie&age=95
// 기존 경로에 '?name=Robbie&age=95' 추가

@GetMapping("/form/param")
@ResponseBody
public String helloGetRequestParam(@RequestParam String name, @RequestParam int age) {
    return String.format("Hello, @RequestParam.<br> name = %s, age = %d", name, age);
}

---

TIP

• @RequestParam은 생략이 가능
• @PathVariable은 상황에 따라 생략 가능
• @RequestParam(required = false) : required 옵션을 false로 설정하면 Client에서 전달받은 값들에서 해당 값이 포함되어있지 않아도 오류가 발생하지 않는다.
  • 예시) ..(@RequestParam(required = false) name, ...)라고 매개변수를 전달할 경우 name이 비어있는 값이라 해도 오류가 발생하지 않는다.
    • Client로 부터 값을 전달 받지 못한 해당 변수는 null로 초기화
  • default값으로는 true로 되어 있다.
  • @PathVariable(required = false)도 해당 기능이 존재

예시

// GET http://localhost:8080/hello/request/form/param?name=Robbie&age=95

@GetMapping("/form/param")
@ResponseBody
public String helloGetRequestParam(@RequestParam(required = false) String name, int age) {
    return String.format("Hello, @RequestParam.<br> name = %s, age = %d", name, age);
}

---

전체 예시 코드

package com.sparta.springmvc.request;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

@Controller
@RequestMapping("/hello/request")
public class RequestController {
	// templates에 존재하는 HTML 파일을 반환
    @GetMapping("/form/html")
    public String helloForm() {
        return "hello-request-form";
    }

    // [Request sample]
    // GET http://localhost:8080/hello/request/star/Robbie/age/95
    @GetMapping("/star/{name}/age/{age}")
    @ResponseBody
    public String helloRequestPath(@PathVariable String name, @PathVariable int age)
    {
        return String.format("Hello, @PathVariable.<br> name = %s, age = %d", name, age);
    }

    // [Request sample]
    // GET http://localhost:8080/hello/request/form/param?name=Robbie&age=95
    @GetMapping("/form/param")
    @ResponseBody
    public String helloGetRequestParam(@RequestParam(required = false) String name, int age) {
        return String.format("Hello, @RequestParam.<br> name = %s, age = %d", name, age);
    }

    // [Request sample]
    // POST http://localhost:8080/hello/request/form/param
    // Header
    //  Content type: application/x-www-form-urlencoded
    // Body
    //  name=Robbie&age=95
    @PostMapping("/form/param")
    @ResponseBody
    public String helloPostRequestParam(@RequestParam String name, @RequestParam int age) {
        return String.format("Hello, @RequestParam.<br> name = %s, age = %d", name, age);
    }
}

---

여러 가지 방식을 모두 학습할 수 있도록 만든 HTML 파일

hello-request-form.html

<!DOCTYPE html>
<html>
<head>
  <title>Hello Request</title>
</head>
<body>
<h2>GET /star/{name}/age/{age}</h2>
<form id="helloPathForm">
  <div>
    이름: <input name="name" type="text">
  </div>
  <div>
    나이: <input name="age" type="text">
  </div>
</form>
<div>
  <button id="helloPathFormSend">전송</button>
</div>
<br>

<h2>GET /hello/request/form/param</h2>
<form method="GET" action="/hello/request/form/param">
  <div>
    이름: <input name="name" type="text">
  </div>
  <div>
    나이: <input name="age" type="text">
  </div>
  <button>전송</button>
</form>

<br>

<h2>POST /hello/request/form/param</h2>
<form method="POST" action="/hello/request/form/param">
  <div>
    이름: <input name="name" type="text">
  </div>
  <div>
    나이: <input name="age" type="text">
  </div>
  <button>전송</button>
</form>
<br>

<h2>POST /hello/request/form/model</h2>
<form method="POST" action="/hello/request/form/model">
  <div>
    이름: <input name="name" type="text">
  </div>
  <div>
    나이: <input name="age" type="text">
  </div>
  <button>전송</button>
</form>
<br>

<h2>GET /hello/request/form/param/model </h2>
<form method="GET" action="/hello/request/form/param/model">
  <div>
    이름: <input name="name" type="text">
  </div>
  <div>
    나이: <input name="age" type="text">
  </div>
  <button>전송</button>
</form>
<br>

<h2>POST /hello/request/form/json</h2>
<form id="helloJsonForm">
  <div>
    이름: <input name="name" type="text">
  </div>
  <div>
    나이: <input name="age" type="text">
  </div>
</form>
<div>
  <button id="helloJsonSend">전송</button>
</div>
<div>
  <div id="helloJsonResult"></div>
</div>
</body>
<script>
  // GET /star/{name}/age/{age}
  const helloPathForm = document.querySelector("#helloPathFormSend")
  helloPathForm.onclick = (e) => {
    const form = document.querySelector("#helloPathForm");
    const name = form.querySelector('input[name="name"]').value;
    const age = form.querySelector('input[name="age"]').value;
    const relativeUrl = `/hello/request/star/${name}/age/${age}`;
    window.location.href = relativeUrl;
  }

  // POST /hello/request/form/json
  const helloJson = document.querySelector("#helloJsonSend")
  helloJson.onclick = async (e) => {
    const form = document.querySelector("#helloJsonForm");

    const data = {
      name: form.querySelector('input[name="name"]').value,
      age: form.querySelector('input[name="age"]').value
    }

    const response = await fetch('/hello/request/form/json', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    })

    const text = await response.text(); // read response body as text
    document.querySelector("#helloJsonResult").innerHTML = text;
  };
</script>
</html>