Spring에 RESTful 적용을 위한 Ajax 사용

1. 상황

Spring 프로젝트에 RESTful 적용을 하기 위해 방법을 찾고 있었다.

인터넷에 검색해보면 Json 데이터만 반환하는 RestController 방법을 알려주는 글들이 대부분이다.

하지만 나는 JSP를 사용하며 RESTful을 적용하고 싶었기 때문에 위 글들이 참고가 되지 않았다.

끈질기게 검색한 결과 해외 사이트에서 간간히 댓글로 Ajax를 이용하여 view와 Json을 같이 리턴하는 방식이 있다는 정보를 얻을 수 있었고, 키워드를 이것으로 바꿔 검색하여 적절한 방법을 찾을 수 있었다.

본 게시글에서는 이 방법을 프로젝트에 적용하는 과정을 담아내었다.

 

2. RESTful과 Ajax

찾아보면 Ajax와 RESTful이 같은 것은 아니라는 글이 여럿 있다.

조금 더 찾아본 결과 RESTful = Ajax 인 것은 아니지만,

Spring에 RESTful을 적용할 때 Ajax를 사용할 수 있는 것으로 보인다(출처: [1]).

 

사람들의 말을 요약해보면 RESTful은 철학이고, 구현할 때 Ajax를 이용할 수 있는 것이다.

Ajax를 어떻게 사용하느냐에 따라 RESTful에 부합하지 않을 수도 있다.

 

3. 방법

아래 방법은 [1]의 게시글의 댓글을 그대로 가져온 내용이다.

혹시 삭제될까봐 핵심 내용만 그대로 가져온 것이며, 이 댓글의 작성자분이 굉장히 자세하게 내용을 적어주셨기 때문에,

직접 사이트에 방문하여 참고해도 좋을 듯 하다(댓글 작성자님께 깊은 감사를 ㅜㅜ).

 

3.1. 방법 1

ㄱ. .jsp를 버리고 .html + .js를 사용.
ㄴ. 모든 HTML, JS, CSS, image 파일을 정적자원으로 취급
ㄴ. 클라이언트에선 www.yoursite.com/main.html 요청
ㄷ. 전달받은 main.html 파일 내 JS에서 비동기로 REST API 요청
ㄹ. 서버에선 가장 깔끔한 JSON 형태로 응답
ㅁ. 클라이언트에선 응답받은 JSON파일로 main.html을 꾸밈

 

3.2. 방법 2

ㄱ. MainController와 MainRestController 두 개로 구성
ㄴ. 클라이언트에서 www.yoursite.com/main 요청
ㄷ. MainController에서 JSP파일 응답
ㄹ. 클라이언트 화면에서 버튼을 누르는 등의 동작에 따라 자바스크립트로 비동기 요청
ㅁ. 이런 요청들에 대해 MainRestController에서 가장 깔끔한 JSON형식으로 응답
ㅂ. 클라는 응답받은 데이터로 화면 꾸밈

 

나는 방법 2를 적용했다.

 

4. 적용 과정

4.1. GET을 이용하여 서버로부터 데이터 받기

 

나는 클라이언트가 페이지를 처음에 요청할 때부터 데이터를 주고, 이 데이터를 활용해서 페이지를 구성하고 싶었다.

그래서 기본 구성은 아래와 같이 잡았다.

(1) Controller에서 view return

(2) view에서 자동으로 ajax GET으로 연결

(3) 연결된 RestController에서 데이터 return

 

ajax 기본 구성(2)은 다음과 같다.

$(document).ready(function() {
    $.ajax({
        type : "GET",
        url : "getSortingTime?tag=값",
        error : function(error) {
            console.log(error);
            alert("error");
        },
        success : function(data) {
            drawChart(data);
        }
    });
});

 

4.2 @RequestParam 에러

RestController 메서드 단에서 자꾸 RequestParam 값에서 null이 들어가길래 헤맸었는데,

내가 Ajax url에서 param을 안 넣어줘서 그런 것이었다....

생각해보면 너무 당연한데 당시엔 몰랐던 ㅠㅠ

이때 path/?param=value와 같은 방식으로 GET을 이용하면,

관점에 따라 RESTful이 아닌 것으로 보는 개발자도 있다고 한다.

그래서 @PathVariable로 넣도록 수정하였다.

 

4.3 @PathVariable로 수정

$(document).ready(function() {
    $.ajax({
        type : "GET",
        url : "getSortingTime/{PathVariable1}/{PathVariable2}",
        error : function(error) {
            console.log(error);
            alert("error");
        },
        success : function(data) {
            drawChart(data);
        }
    });
});

 

5. 기타

5.1 Ajax GET 방식

Ajax GET 방식 예제는 POST보다 적어서 나에게 적합한 예제를 찾기 힘들었다.

지인에게 물어보니, Ajax GET 방식은 http에서 헤더만 쓸 수 있기 때문에 더 다양한 http를 사용할 수 있는 POST를 쓰는 경우가 많기에 그런 것이라고 알려줬다.

그러나 GET을 구현할 때 Ajax POST를 쓸 경우, 엄밀한 의미에서 RESTful API 구현은 아닐 수도 있다.

이에 조금 불편해도 연습을 위해 최대한 GET과 @PathVariable을 이용해서, RESTful API를 구현해보려고 한다.

 

5.1 Ajax 비동기이기 때문에 데이터를 바깥으로 보내기 불가능함

페이지에서 Ajax로 받은 데이터로 그래프를 그리고 싶었다. 

Ajax에서 직접 html을 그리지 않는 경우, 데이터를 밖으로 보내서 활용을 하고 싶단 생각을 할 수 있다.

왜냐하면 내가 그랬기 때문에...

근데 여러 번 시도해봐도 안되서 찾아보니,

Ajax는 비동기이기 때문에 다른 html 부분으로 데이터를 보낼 수 없다고 한다(출처: [2]).

생각해보면 당연한건데 또 그때는 몰랐었던...ㅠㅠ

어쨌든 해결방법은 Ajax 내에서 data를 전달하며 함수를 호출하는 것이다.

아니면 위에 말한 것처럼 Ajax에서 바로 html을 그려도 가능하다.

 

---

참고 문헌

[1] https://okky.kr/article/497982

[2] https://stackoverflow.com/questions/21052258/passing-data-outside-ajax-call-jquery