[Spring] 클라이언트에서 보낸 데이터 서버에서 받는 방법 (@PathVariable, @RequestParam, @ModelAttribute, @RequestBody)

[Spring] 클라이언트에서 보낸 데이터 서버에서 받는 방법

(@PathVariable, @RequestParam, @ModelAttribute, @RequestBody)

---

Spring 백엔드(서버)관련 학습을 하면서, 클라이언트에서 보낸 데이터를 서버로 받는 방법에 대해서 알아야됩니다. 다양한 방법으로 클라이언트에서 보내는 데이터를 받을수 있는데요. 이번 포스트에서는 클라이언트에서 서버로 보낸 데이터를 받는 방법을 초보입장에서 정리해볼까 합니다.

▶ @PathVariable

// 서버 : Controller
@Controller
public class TestController {
    @GetMapping("/people/{name}/age/{age}")
    @ResponseBody
    public String pathVariable(@PathVariable String name, @PathVariable int age) {
        System.out.println("name = " + name);
        System.out.println("age = " + age);
        return "PathVariable 접근 완료";
    }
}

// 클라이언트 : index.html - JS
let name = "Kim";
let age = 20;

$.ajax({
    type:'get',
    url:'/people/'+name+"/age/"+age,
    success:function (response) {
        alert(response);
    }
})

@PathVariable은 어떻게 보면, 초보자 입장에서 가장 쉬운 방법으로 클라이언트에서 서버로 데이터를 보내는 방법일껍니다. 쉽게 표현하면 'URL'안에 데이터를 보내는 방법이라 이해를 하면 됩니다. 위의 코드를 보면, 클라이언트에서 name = "kim", age = 20 이라는 변수를 선언하고, URL안에 해당 값을 넣어 만들었습니다. 즉, "/people/Kim/age/20"이라는 URL 형식으로 접근을 하는데, 서버쪽을 보면, "/people/{name}/age/{age}"로 적혀있고, 인자안에 @PathVariable를 작성해, URL에 있는 값을 사용할 수 있게 됩니다.

▶ @RequestParam

// 서버 : Controller
@Controller
public class TestController {
    @GetMapping("/people")
    @ResponseBody
    public String request_param(@RequestParam String name, @RequestParam int age) {
        System.out.println("name = " + name);
        System.out.println("age = " + age);
        return "RequestParam 접근 완료";
    }
}

// 클라이언트 : index.html - JS
function requestParam() {
    let name = "Kim";
    let age = 20;
    $.ajax({
        type:'get',
        url:'/people?name='+name+'&age='+age,
        success:function (response) {
            alert(response);
        }
    })
}

// 혹은 아래의 방법으로 클라이언트 코드를 작성할 수도 있습니다.
function requestParam() {
    let name = "Kim";
    let age = 20;

    $.ajax({
        type: 'get',
        url: '/people',
        data: {
            "name": name,
            "age": age
        },
        success: function (response) {
            alert(response);
        }
    })
}

@RequestParam은 @PathVariable과 겉으로 보기에는 형식은 비슷해보입니다. 다만, 서버쪽을 보면 URL 형식이 '/people'로만 작성이 되어있으며, 인자로 @RequestParam을 작성해줍니다. 그리고 클라이언트쪽 ajax의 url을 보게되면, /people?name='+name+'&age='+age 로 작성이 되어있는걸 볼 수 있습니다. 즉, ?뒤에 값들이 @RequestParam에서 받을 수 있게됩니다. 완성된 url을 보면, '/people?name=Kim&age=20'이라는걸 확인할 수 있습니다.

또한 코드를 보면, 클라이언트 코드를 보면, '?'뒤를 생력하고, 작성을 해도 사용을 할 수 있습니다.

▶ @ModelAttribute

// people.class
@Data
public class People {
    private String name;
    private int age;

    public People(String name, int age){
        this.name = name;
        this.age = age;
    }
}


// 서버 : controller
@Controller
public class TestController {
    @GetMapping("/model")
    @ResponseBody
    public String model_atb(@ModelAttribute People people) {
        System.out.println("people.getName() = " + people.getName());
        System.out.println("people.getAge() = " + people.getAge());
        return "Model 접근 완료";
    }
}

// 클라이언트 : index.html
function modelpost() {
    let name = "Kim";
    let age = 20;
    $.ajax({
        type:'get',
        url:'/model',
        data:{
            "name":name,
            "age":age
        },
        success: function (response) {
            alert(response);
        }
    })
}

@ModelAttribute는 앞에서 언급한 방법과 같이 URL을 활용하는 방법은 아닙니다. Model을 활용하여, 데이터값을 클라이언트에서 받아오는데, people클래스를 만들어, 생성자를 만든다음, controller에서 @ModelAttribute를 이용하는데, 이때, people 클래스를 활용하게 됩니다. 

그런데, 해당 데이터를 받아와보면, @RequestParam과 같은 방식으로 데이터를 받아오는걸 확인할 수 있습니다. 즉, 브라우저에 URL에 주고 받는 데이터가 URL에 공개되느냐 안되느냐 차이로 일단 알고 가면 좋을듯 합니다.

▶ @RequestBody

// people.class
@Data
public class People {
    private String name;
    private int age;

    public People(String name, int age){
        this.name = name;
        this.age = age;
    }
}


// 서버 : controller
@Controller
public class TestController {
    @PostMapping("/requestbody")
    @ResponseBody
    public String request_Body(@RequestBody People people) {
        System.out.println("people = " + people.getName());
        return "Requestbody 접근 완료";
    }
}

// 클라이언트 : index.html
function requestBodypost() {
    let name = "Kim";
    let age = 20;
    let people = {
        name:"kim",
        age:20
    }
    $.ajax({
        type:'post',
        url:'/requestbody',
        data:JSON.stringify(people),
        contentType: "application/json",
        success: function (response) {
            alert(response);
        }
    })
}

@RequestBody는 유일하게 'json'방식을 이용해서 데이터를 주고 받습니다. 클라이언트쪽을 보게되면, data쪽에 JSON.stringify를 사용해서 데이터를 보내는걸 확인할 수 있습니다. JSON.stringify( )는 자바스크립트의 값을 JSON 문자열로 변환해주는 역할을 합니다. 그리고, 클라이언트쪽에 @ModelAttribute랑 같은 방식으로 작성하면 됩니다. 

@ModelAttribute랑 다르게, JSON 방식으로 데이터 요청이 들어온것을 확인할 수 있습니다. 최근에는 JSON 방식을 많이 사용한다고 하니, @ModelAttribute보단, @RequestBody를 기억해놓으시는게 좋습니다!