[vue 3] 01.SPA & SFC & Vite

이번 포스트에서는 SPA와 SFC 그리고 이를 구현하기 위한 Vite에 대해서 살펴보자.

 

SPA vs MPA

 

정의

SPA(Single Page Application)과 MPA(Multi Page Application)이라는 용어에 대해서 살펴보자. 말 그대로 애플리케이션을 만들 때 하나의 페이지로만 만들것인가? 아니면 여러개의 페이지로 만들것인가의 차이다.

(당연히 이렇게 길~~~~다란 index.html을 만드는건 아니다. component의 개념이 필요하다!)

 

동작의 차이

SPA와 MPA의 구성에 따른 동작의 가장 큰 차이는 서버와 데이터를 주고 받을 때 <form>을 통한 submit을 이용하느냐 아니면 ajax를 이용하느냐로 나눠볼 수 있다.

 

두 방식의 장/단점 비교

SPA는 angular.js나 react, vue 등 frontend framework가 나오면서 각광을 받게 되었다.

이 방식은 서버로부터 데이터만 받아서 클라이언트에서 그리는 CSR(Client Side Rendering)을 추구한다. 화면과 관련된 리소스를 처음 요청 시 서버로부터 몽땅 받아내서 클라이언트단에 모든 HTML/CSS/JS 요소를 가지고 있다가 이후 ajax 통신을 통해서 데이터만 받아오게 된다. 이런 동작의 특성을 기반으로 장점과 단점을 살펴보자.

• 장점
  • 사용 중 리소스 로딩이 없기 때문에 화면 전환이 부드럽게 이뤄지며 성능상 이점이 많다.
  • 서버 입장에서는 템플릿(JSP 등)을 만드는 연산이 클라이언트로 분산되기 때문에 부담이 줄어든다.
  • 컴포넌트 별로 개발을 하기 때문에 생산성이 향상된다.
  • AJAX를 위해 서버를 REST API 로 구성해 놓으면 모바일 앱 등에서도 동일하게 사용할 수 있다.
• 단점
  • URL이 변경되지 않기 때문에 검색엔진의 색인화가 어렵다
  • 초기 구동 비용이 MPA에 비해 상대적으로 비싸다.

 

이에 비해 MPA는 전통적인 웹 애플리케이션의 동작 방식으로 일반적으로 SSR(Server Side Rendering)이다. SPA의 장점이 MPA의 단점이요 SPA의 단점이 MPA의 장점이기 때문에 누가 절대적인 우위에 있다고 보기는 힘들다.(고 개인적으로 생각한다.) 하지만 최근의 대세는 확실히 frondend framework 들이 지향하는 SPA인듯 하다.

	SPA	MPA
세련된 UX	Win
검색엔진 최적화(Search Engine Optimization)		Win
보안성		Win
서버 부하 정도	Win
오프라인 기능	Win
모바일 적응성	Win
UI와 데이터의 분리	Win
Application 확장성		Win
동작 속도	Win
초기 구동 속도		Win
JavaScript에 대한 독립성		Win

자료출처: https://www.mindk.com/blog/single-page-applications-the-definitive-guide/

 

컴포넌트와 SFC

 

컴포넌트

컴포넌트란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 이야기 한다. 우리는 다양한 컴포넌트를 만들어 놓고 내용만 바꿔가며 이들을 조합해서 새로운 페이지인 것 처럼 사용할 수 있다. 처음 살펴봤던 SPA의 길 다란 구조를 하나의 파일로 만드는건 매우 우숩고도 힘든 일일터 여러 개의 컴포넌트를 조합해서 그런 효과를 내게 된다.

이렇게 컴포넌트로 요소들을 구성하게 되면 코드의 재사용성과 개발의 생상성이 향상될 것이다.

컴포넌트에 대해서 좀 더 상세하게 알아보려면 다음의 글을 참조해보자.

 

컴포넌트(Component)란? - 하나몬

 

이제까지도 component 였다!  하지만..

사실 이제까지 만들었던 애플리케이션들도 모두 한페이지 짜리의 간단하지만 컴포넌트였다. Vue는 이것을 root component라고 부른다. 여기에 다양한 하위 컴포넌트를 만들고 좀 더 복잡한 애플리케이션을 생성할 수도 있다. 

간단히 여러개의 컴포넌트로 구성된 Vue 애플리케이션을 만들어보자.(실제로는 이렇게 사용하지 않을 계획이므로 대충 개념만 가져가자.)

아래의 예는 제목을 보여주는 titleComponent, 내용을 보여주는 contentComponent, 그리고 전체를 구성하는 root component로 작성되었다. 각각의 component들은 template과 함께 vue 애플리케이션을 구성하기 위한 setup이 선언되어있다.

<script>
  const { createApp, ref } = Vue;
  // 제목을 보여주는 component
  const titleComponent = {
    template: `<h1>{{msg}}</h1>`,
    setup() {
      const msg = ref("오늘의 뉴스");
      return { msg };
    },
  };
  // 내용을 보여주는 component
  const contentComponent = {
    template: `<hr><div>{{msg}}</div><hr>`,
    setup() {
      const msg = ref("희망찬 소식");
      return { msg };
    },
  };

  // root component - 기본 동작 + 사용할 component 등록
  createApp({})
    .component("content-component", contentComponent)
    .component("title-component", titleComponent)
    .mount("#app");
</script>

이 컴포넌트들은 아래와 같이 사용할 수 있다.

<div id="app">
    <title-component></title-component>
    <content-component></content-component>
    <content-component></content-component>
</div>

그리고 이 애플리케이션을 동작시키면 아래와 같은 화면이 나오고 개발자도구를 통해서 살펴보면 우측처럼 컴포넌트들이 모여서 화면이 구성되는 것을 알 수 있다.

 

하지만 위와 같이 하나의 html 파일에 모든 요소들을 넣어서 애플리케이션을 만든다는 것은 여러 가지 이유로 불가능에 가깝다. 대충 지적질을 해보면..

• 파일이 어마어마하게 길어질 것이고
• 파일 내에서 template 영역의 구분이 복잡해지고 꼬임이 발생하고
• component별로 css를 모듈화하기 어려워지며....

 

그 결과로 물리적으로 한개의 파일로 애플리케이션을 만드는 SPA는 불가능하고 한개의 파일로 한 개의 컴포넌트를 만들어서(SFC) 이것들을 import로 엮어서 하나의 애플리케이션을 만들게 된다.

 

SFC

SFC(Single File Component)는 단어 뜻 그대로 파일 하나가 하나의 컴포넌트를 구성한다는 개념이다. Vue는 이를 위해서 .vue라는 확장자를 갖는 파일을 이용하는데 이 파일은 <template>, <script>, <style> 3개의 태그로 작성한다.

각 부분의 역할은 <template>은 HTML 영역, <style>은 CSS 영역, <script>는 JavaScript 영역이다. 즉 하나의 component를 만들 때 필요한 요소들이 한 파일에 모이게 되는 것이다. 이렇게 만들어진 component는 import와 export를 통해 서로간 참조가 가능해진다.

이런 전용의 SFC 환경을 구축함으로써 어렵지 않게 SPA를 개발할 수 있게 되었다.

이제 개발만 잘 하면 되는데.. 한가지 더 고민할 필요가 있다. 웹 애플리케이션에서 중요한 클라이언트는 브라우저라는 것이다. 아무리 멋진 .vue 파일을 만들더라도 브라우저가 읽지 못한다면 무용지물이다. 브라우저는 html만 처리한다. ㅜㅜ

따라서 .vue를 .html로 변경시키기 위한 build tool이 필요하다.

 

Vite

Vite는 Vue에서 권장하는 build tool이다. (Vue 2.x에서는 Vue CLI가 사용되었지만 Vue 3.x에서는 Vite가 권장된다.)

https://vitejs-kr.github.io/

Vite | 차세대 프런트엔드 개발 툴

 

Vite에 대한 자세한 설명은 위 포스트를 참조하고 다음 포스트에서는 Vite를 활용한 애플리케이션 개발에 대해 살펴보자.