SPA와 WebPack에 관해

Traditional vs SPA

동적인 웹페이지, 웹 어플리케이션 그리고 이를 구현하기 위한 아키텍처와 프레임워크들. 이렇게 웹 어플리케이션을 구현하다 보면 다음과 같은 문제의식에 직면하게 된다.

 

http 요청에 대한 응답으로 매번 html 파일을 렌더링 해주어야 하는데, 이를 한 번만 하게 할 수는 없을까? 즉 매번 다른 페이지를 보여주는 것이 아니라 새로고침처럼 변화하는 부분만 변하게 하고, html 전체를 렌더링 안하게 할 수는 없을까?

 

이러한 문제의식에서 나온 것이 SPA(Single Page Application)이라는 기술이다. 이 방식은 기존의 방식과 달리 HTML을 한 번만 렌더링 해주고, 그 때 그 때 변화가 필요한 부분만 바꾸어 준다. 

 

헌데 이 방식 역시도 문제가 존재한다. 기존에는 html 파일을 변화가 있을 때마다 렌더링 해주었다. 그러다보니 하나의 HTML 파일이 가지고 있는 정보량이 많지 않았다. 하지만 SPA의 경우에는 원래는 여러번 보냈어야할 HTML 파일을 통째로 보내주고, 변화하는 부분만 조금씩 바꾸어 주는 부분이다. 따라서 HTML 파일이 담고 있는 정보량이 많다.

 

이것이 문제인 이유는 우리의 HTML 응답은 한번에 하나의 응답만 가능하기 때문이다. HTML 문서가 담고 있는 정보가 많을 경우, 이를 렌더링 해주기 위해서 여러번 HTML 응답을 해주어야 한다. 이미지 파일, 동영상 파일, 자바스크립트 파일 등을 각각 응답해주어야 한다. SPA의 경우에는, 하나의 문서가 담고 있는 정보량이 많기 때문에 기존의 방식보다 더 많은 정보를 응답해주어야 한다.

 

그렇다면, 이렇게 SPA에서 여러번 보내야 하는 파일을 하나로 묶어서, HTTP 응답에 담아낼 수는 없을까? 이러한 배경에서 나온 기술이 Web Pack이다.

 

여러 파일을 번들링해준다

기존의 JQuery를 넘어, React, Vue 등 여러 SPA 프레임워크의 등장으로 서버가 보내주어야할, 그리고 웹 브라우저가 렌더링해야할 문서가 더더욱 무거워지고 있다. 그러한 상황 속에서 HTTP 통신은 한 번에 하나의 응답만 할 수 있다. 그렇다면 하나의 응답 속에 최대한 많은 파일을 묶어서 보낼 수 있으면, 성능이 개선될 수 있지 않을까?

 

그러한 의식에서 다양한 번들러들이 탄생했고, WebPack이 가장 대표적인 도구이다.