(5)-2 SPA, MPA

Swagger을 설치하다가 내 애플리케이션이 single-page application(SPA)이면 swagger-ui를 쓰고, 그게 아니면 swagger-ui-dist를 쓰라는 말이 있길래, SPA를 찾아보다가 서블릿까지 와버렸다!

MPA (Multi Page Application)

SPA가 한 개의 페이지로 구성된 애플리케이션이라면 MPA는 그 반대! 여러 페이지로 구성된 애플리케이션이다. 그러니까 그게 무슨 말이나면. 클라이언트가 페이지를 접속할 때마다 HTTP Request로 서버에게 페이지 접속 요청을 보낸다는 사실은 이미 다 알 것이다. 예전에는 클라이언트의 요청이 있을 때마다 서버에서 페이지를 매번 새로 보내줬었다.

 

예를 들어 동적 요청이 있다면 서버는 요청에 맞게 데이터베이스에서 데이터를 꺼내서 JSP파일을 만든 다음에 HTML로 바꿔서 보내주고, 정적 요청이었다면 그냥 HTML만 보내주고 이런 식으로.. 그러니까 요청된 웹에 대한 처리와 렌더링을 서버에서 다 해야되기 때문에 페이지를 이동할 때마다 서버에서 내려받아야 했다. 따라서 서버에는 과부하가 올 수밖에 없다.

 

SPA (Singlel Page Appllication)

페이지 요청이 있을 때마다 서버에서 매번 새로운 페이지를 렌더링해주는 MPA와는 달리, 페이지 렌더링을 웹브라우저에 맡겨보자. HTML페이지 한 개에다가 서버에서 받은 데이터를 넣어서 웹 페이지를 구성하면 매번 새로운 페이지를 서버에서 받아오지 않아도 된다.

 

원리는 웹 브라우저가 HTML문서를 읽고 이 문서를 DOM(Document Object Model)로 변환한다. 그러면 HTML문서의 요소들이 모두 객체로 표현되는데, .js파일이 이 객체들을 조작해서 웹 페이지의 내용, 구조, 스타일을 동적으로 변경한다.

 

이제 동적 데이터를 HTML에 적용하는 일을 .js가 해야되는데, 동적 데이터를 어떻게 서버에서 받아올까..? .jsp는 서버에 있는 파일이라서 그냥 자바 코드가 데베에 연결되어있으니까 바로 가져와서 파싱할 수 있었는데 이제는 서버에서 데이터를 갖고와야 한다.

 

서버에서 데이터를 가져올 때는 보통 REST API 방식을 사용한다. REST API 방식은 URL 와 HTTP 요청 메서드로 어떤 데이터를 서버에 보내고 서버로부터 받을지 정하는 방식이다. 예를 들어 서버에 http://~/member 을 HTTP GET 방식으로 요청 보냈으면 회원 데이터를 가져오겠다는 의미이고, 똑같은 http://~/member을 HTTP POST 방식으로 요청 보냈으면 회원 데이터를 저장하겠다는 의미이다. 물론 서버의 컨트롤러에도 어떤 URL에 어떤 HTTP 메서드가 요청으로 들어오면 뭘 리턴해줘야 하는지 이미 정의되어있기 때문에 그에 맞는 데이터가 웹 브라우저로 보내질 것이다.

 

참고로 웹 브라우저에서 서버를 호출할 때는 AJAX방식을 사용하고, 서버는 JSON형식으로 응답을 보낸다. AJAX에 대해 살짝만 설명하면..

$.ajax({
    url: '/perform/getRelayList.ajax',
    method: 'post',
    data : form,
    dataType : 'html',
    success: function (data, status, xhr) {
        console.log("data : : " + JSON.stringify(data));
        $("#search_result").empty();
        $("#search_result").replaceWith(data);
    },
    error: function (data, status, err) {
    },
    complete: function () {
        var total = $("#dataCount").val();
        $("#totalCount").text(addComma(total));
    }
});

 

이게 jQuery를 이용한 Ajax이고

function reqListener(e){
    console.log(e.currentTarget.response);
}

var xhr = new XMLHttpRequest() //xhr 생성

xhr.addEventListener("load", reqListener);
xhr.open("GET", "/jbground/list.do");
xhr.send();

또는

const xhr = new XMLHttpRequest() //객체 인스턴스 생성

function connect(){
    xhr.onreadystatechange = reply();
    xhr.open("GET", "/jbground/ajax/vo.do");
    xhr.send();
}

function reply(){
    if(xhr.readyState === 4){
        if(xhr.status === 200){
            console.log(xhr.response);
            const obj = JSON.parse(xhr.response);
            console.log(obj);
        }
    }
}

 

이게 jQuery 없는 Ajax이다. (jQuery는 자바스크립트 코드를 쉽고 편하게 짜도록 돕는 라이브러리라고 생각하면 된다.) 코드에서 직관적으로 보이듯이 Ajax에는 url, http 요청 타입, data타입, content타입, data 등이 포함되어있다. 이렇게 Ajax를 통해 전체 페이지를 새로 가져오지 않고도 HTTP 요청으로 서버에 '데이터'만 별도로 요청해서 페이지 일부만 변경할 수 있다.

 

이걸 HTTP 프로토콜을 이용한 '비동기 통신'이라고도 하던데 이건 아직 완전히 이해 못 해서 다음에 다루는 걸로 하고..

 

결국 웹 브라우저는 정적 HTML, CSS파일을 통해 먼저 골격을 형성하고 Ajax 실행부가 담긴 자바스크립트 영역을 별도로 실행하여 데이터를 가져와 끼워넣은 후 페이지를 로딩한다는 걸 말하고싶은 것 ~

 

최종적으로 정리하면 ~

서버 사이드 렌더링에서는 자바코드를 통해 데이터를 가져온 다음 .jsp에 담고 HTML로 렌더링해서 웹 브라우저에 보내주는 방식! 이렇게 하면 여러 개의 페이지가 항상 불러와져야 하므로 MPA가 된다.

클라이언트 사이드 렌더링에서는 서버가 먼저 HTML, CSS를 클라이언트에게 보내주고 동적으로 처리할 부분은 따로 서버에게 데이터를 요청하는데, 보통 REST API 방식으로 요청한다. url과 HTTP 요청 메서드를 서버에게 보내면 요청이 된 것! HTTP 요청 메서드는 Ajax 방식으로 작성된 자바스크립트에 의해 서버에 전송된다.

 

 

그리고 내가 이걸 공부하고 있는 이유는 Swagger로 API 문서를 작성해야 하는데 클라이언트 서버간 어떤 데이터가 어떤 원리로 전달되는지 잘 정리되지 않았기 때문에.. 그리고 스웨거 설치 전에 버전 선택부터 난관이었기 때문이다. 부족한 내용 여기저기서 찾아서 글 쓸 때마다 책이며 구글이며 쏟아지는 정보에 뭐부터 정리해야할 지 난감하지만 일단 빠르게 내용 쳐내는 게 중요하니까. 오늘도 글을 써보았다.

 

---

https://jbground.tistory.com/4

https://velog.io/@pkbird/Single-Page-Application