SPA

SPA(Single Page Application)

한 개의 페이지로 이루어진 애플리케이션

모든 웹페이지를 만들기 위해서 굳이 프론트엔드 라이브러리를 사용해야 할 피요는 없다.

단순히 HTML과 CSS, 그리고  순수 Javascript 만드로도 웹페이지를 얼마든지 제작할 수 있다.

특히, 정적 페이지를 만드는 것이 목적이라면 프론트엔드 라이브러리나 프레임워크의 도움은 필요하지 않을 것이다.

요즘의 웹은 정적이고 단순한 페이지가 아니다.

웹 앱 혹은 웹 애플리케이션이라 불릴 정도로 복잡하고 동적이 되었다.

이처럼 복잡하고 동적인 웹 페이지가 늘어나고 웹의 크기가 커지자, 자바스크립트 파일의 관리가 어려워졌고, 이를 효율적으로 관리하기 위해 backbone.js 와 같은 라이브러리 가 등장하며 자바스크립트 파일의 관리가 용이해졌지만 이러만 웹 어필리케이션에서 UI를 동적으로 나타내기 위해서는 복잡하고 많은 상태를 관리해야 하는 부담이 생겼다.

그 원인으로 웹페이지는 모든 페이지마다 HTML, CSS Javascript 파일을 각기 가지고 있어야 했고, 따라서 페이지 간 이동을 할 때마다 HTML, CSS, Javascript 파일을 서버와 주고받아야 하기 때문에 속도가 느릴 수밖에 없었다.

이때 SPA가 등장하게 되는데 SPA는 HTML, CSS, Javascript파일을 최초 1회만 로드하고, 이후에는 자바스크립트 파일을 통해 DOM 또는 필요한 HTML 파일을 조작하는 방식을 말한다.

이는 완전한 새로운 페이지를 불러오지 않고, index.html 파일 하나에서 js, css 등 리소스 파일들과 모듈들을 로드해서 페이지 이동 없이 특정 영역만 새로 모듈을 호출하고 데이터를 바인딩하는 개념이다.

이처럼 웹의 발전과 함께 SPA개발을 위한 ES6, Node.js와 npm 그리고 webpack, Babel과 React, Vue, Angular와 같은 프론트엔트 라이브러리, 프레임 워크가 등장하게 되었다.

기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때마다 서버에 리소스를 전달받아 해석한 뒤 화면에 보여주었다.

요즘은 웹에서 제공되는 정보가 많기 때문에 새로운 화면을 보여 주어야 할 때마다 서버 측에서 모든 뷰를 준비한다면 성능상의 문제가 발생할 수 있다.

이러한 방식은 비효율적이다.

React 같은 라이브러리 혹은 프레임워크를 사용하여 View렌더링을 사용자의 브라우저가 담당하도록 하고, 우선 애플리케이션을 브라우저에 불러와서 실행시킨 후에

사용자와의 인터렉션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트해준다.

만약 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 새로 불러와 애플리케이션에서 사용할 수 있다.

한 개의 페이지라고 정말 하나의 페이지 일까?

절대 그렇지 않다.

요즘은 웹에서 제공되는 정보의 양도 어마어마하고 페이지 수도 엄청나게 많다.

다른 조수에 다른 화면을 보여주는 것을 Routing이라고 한다.

React 자체에 이 기능이 내장되어 있지는 않다.

그 대신 브라우저의 API를 직접 사용하여 관리하거나, 라이브러리를 사용하여 쉽게 구현할 수 있다.

하지만 이런 SPA에도 단점이 있다.

앱의 규모가 커지면 자바스크립트 파일이 너무 커진다는 것이다.

페이지 로딩 시 사용자가 실제 방문하지 않을 수 도 있는 페이지의 스크립트도 불러오기 때문이다.

대안으로는 코드 스플리팅을 사용하여 트래픽과 로딩 속도를 개선할 수 있다.