[입문] Vue.js 개요

 

Vue.js는 웹 개발을 단순화하고 정리하기 위해 개발된 대중적인 자바스크립트 프런트엔드 프레임워크다. 이 프로젝트는 웹 UI 개발을 할 때 다양한 디자인 패턴을 적용할 수 있는 것에 초점을 둔다. 전통적인 HTML 개발 방식과 크게 다르지 않아 문법이 단순하고 간결하여 진입장벽이 낮은 편이다. 코어 라이브러리는 선언형 렌더링과 컴포넌트 구성에 초점을 두며, 정적인 페이지에 일부만 사용할 수도 있다.

 

라우팅, 상태 관리, 빌드 도구화와 같이 복잡한 애플리케이션에 필요한 기능들은 공식적으로 유지 보수되는 지원 라이브러리와 패키지를 통해 제공된다.

 

에반 유라는 개발자에 의해 개발되었으며, Angular에서 사용되는 양방향 데이터 바인딩을 제공하고 컴포넌트 간 통신의 기본 골격은 React의 단방향 데이터 흐름을 사용한다. 즉, Angular와 React의 강점을 반영하였으며, 두 프레임워크보다 늦게 출시된 만큼 상대적으로 가볍고 빠른 편이다.

 

MVVM 패턴의 ViewModel 레이어에 해당하는 화면단 라이브러리라고도 한다.

 

MVVM 패턴에서 VM을 담당하는 Vue.js

 

MVVM 패턴이란?

웹의 산업이 점점 커져감에 따라 단순한 웹사이트 개발이 아니라 하나의 서비스로 개발됨에 따라, 웹 애플리케이션 개발 방식도 변화가 필요했다. Front-end와 Back-end 로직을 분리하기 위한 전통적인 방식인 MVC 패턴의 방식에서 발전되었다.

 

UI 개발을 비즈니스 로직 또는 Model로부터 분리하여 View가 특정한 모델 플랫폼에 종속되지 않도록 한다. 즉, ViewModel은 View에서 Model로, 또는 Model에서 View로 이동하는 데이터 객체를 관리하는 역할을 한다. 간단히 말해서, 데이터 바인딩할 때 일어나는 일련의 과정들을 담당한다고 보면 된다. 더 자세한 내용은 추후 별도의 소프트웨어 아키텍처 패턴이라는 제목으로 작성해보겠다. 

 

Vue.js에 필요한 사전 지식

문법이 단순하고 간결해서 진입장벽이 낮긴 하지만, 기본적으로 HTML, CSS, javascript의 지식은 어느 정도 필요하다. 간단한 웹사이트 디자인과 UI 동작 스크립트를 작성하는데 문제가 없다면 어렵지 않다. 만약 Angular, React 등 다른 프런트엔드 프레임워크를 다뤄 본 경험이 있다면 쉽게 배울 수 있다. 단, 다른 프런트엔드 프레임워크의 경험이 꼭 필요한 것은 아니다.

 

그리고 Node.js 기반 빌드 도구에 아직 익숙하지 않다면, vue-cli 같은 빌드 설정을 바로 사용하는 것은 추천하지 않는다. 기본적인 HTML 작성 방식에서 링크로 Vue.js 연결이 가능하니, 그렇게 시작해도 된다.

 

Vue.js 핵심 기능 4가지

Vue.js는 이름에서 알 수 있듯이 사용자 인터페이스User Interface를 만드는데 초점을 맞춘 프레임워크인 만큼, 다음과 같은 기능들은 꼭 숙지하고 있는 것이 좋다.

 

- 선언적 렌더링
- 사용자 입력 핸들링
- 조건문과 반복문
- 컴포넌트 조립

 

1. 선언적 렌더링 Declarative Rendering

Vue.js는 렌더링 된 DOM과 Vue 인스턴스의 데이터를 바인딩할 수 있는 HTML 기반의 문법을 제공하는데, 이를 템플릿 문법이라고 한다. 즉, 선언적 렌더링은 간단한 템플릿 문법을 사용하여 DOM에서 데이터를 선언적으로 렌더링 할 수 있는 시스템이다.

 

<div id="app">
  {{ msg }}
</div>

export default {
  data() {
    return {
      msg: "Hello World",
    }
  }
}

 

Vue 인스턴스에 있는 데이터를 Mustache {{ }} 템플릿 엔진을 사용하여 HTML 템플릿에 바인딩하여 화면을 표현하고 있다. {{ msg }} 가 실제 화면에서는 Hello World로 변환되어 나오는데, 이것이 가장 기본적인 데이터 바인딩이다.

 

2. 사용자 입력 핸들링

사용자가 앱과 상호작용Interaction 할 수 있게 하기 위해 v-on 디렉티브를 사용하여 Vue 인스턴스에서 메서드를 호출하는 이벤트 리스너를 추가할 수 있다.

 

<div id="app">
  <p> {{ msg }} </p>
  <button v-on:click="changeMessage">메시지 변환</button>
</div>

export default {
  data() {
    return {
      msg: "Hello World"
    }
  },
  methods: {
    changeMessage() {
      this.msg = "Hello Vue.js"
    }
  }
}

HTML 템플릿에 선언되어 있는 {{ msg }} 가 초기에는 Hello World로 나오지만, 메시지 변환이라는 버튼을 클릭했을 때 Hello Vue.js라는 문구로 바뀌게 된다. 이 방법을 사용하면 DOM은 건드리지 않고, {{ msg }}라는 상태만 업데이트하기 때문에 새로고침을 누르지 않아도 바로 변경된다.

 

3. 조건문과 반복문

상황에 따라 HTML에서 보이는 화면이 다르거나, 특정 목록을 반복해서 보여줄 때가 있다. 예를 들어 쇼핑몰에서 로그인 전과 로그인 후 화면이 다르고, 상품 같은 경우 여러 개의 리스트를 보여줘야 하는 경우가 있다. 이때 v-if와 v-for를 활용하면 어렵지 않게 상황에 따라 화면을 제어할 수 있다.

 

<div id="app">
  <div v-if="true">로그인 했으면 보여지는 화면</div>
  <div v-else">로그인 안했으면 보여지는 화면</div>
</div>

<div id="app">
  <ul>
    <li v-for="item in items">
      {{ item }}
    </li>
  </ul>
</div>

 

이처럼 HTML의 Attribute을 선언하는 곳에 사용할 수 있으며, Vue 인스턴스에서 조건식과 데이터 리스트를 선언하여 상황에 맞게 사용할 수 있다.

 

4. 컴포넌트 조립

Component System은 Vue의 또 다른 중요한 개념으로, 사용자 인터페이스 구성 시 가장 많은 시간을 할애하는 부분이기도 하다. 컴포넌트 조립을 얼마나 수월하게 할 수 있느냐에 따라 웹 애플리케이션의 개발 속도나 난이도가 천차만별로 달라진다.

 

웹페이지를 추상화한 컴포넌트 트리

 

Vue.js에서 컴포넌트는 미리 정의된 옵션을 가진 인스턴스로, 거의 모든 유형의 애플리케이션 인터페이스를 컴포넌트 트리로 추상화할 수 있다. 컴포넌트가 왜 중요한지 우선 이해가 필요한데, 예를 들어 쇼핑몰에서 가장 많이 사용되는 UI인 상품 목록을 다음과 같이 작성해보았다.

 

<div id="app">
  <ul>
    <!-- 상품 목록 01  -->
    <li>
      <div class="item">
        <figure>이미지</figure>
        <div>상품 설명</div>
      </div>
    </li>
    <!-- 상품 목록 02  -->    
    <li>
      <div class="item">
        <figure>이미지</figure>
        <div>상품 설명</div>
      </div>
    </li>
    <!-- 상품 목록 03  -->    
    <li>
      <div class="item">
        <figure>이미지</figure>
        <div>상품 설명</div>
      </div>
    </li>    
  </ul>
</div>

컴포넌트를 만들지 않고 HTML을 작성한다면 위와 같은 코드로 나올 것이다. 만약 기획과 디자인이 완벽해서 더 이상 상품 목록 UI가 변경되지 않는다면, 3개의 li만 v-for로 반복시켜서 마무리 지어도 좋다.

 

그러나 실제 프로젝트에서 100% 라는 건 존재하지 않는다. 상품 목록 UI는 상품 리스트에서만 쓰이는 것이 아니라 장바구니, 혹은 마이페이지에서도 사용될 수 있다. 그러면 일일이 모든 페이지에 들어가서 상품 목록의 HTML을 변경을 해주어야 하는 끔찍한 상황이 발생하게 된다.

 

- 상품 목록 컴포넌트 (product-item)

<template>
  <div class="item">
    <figure>이미지</figure>
    <div>상품 설명</div>
  </div>
</template>

 

- HTML 템플릿

<div id="app">
  <ul>
    <li v-for="item in 3">
      <product-item />
    </li>
  </ul>
</div>

상품 목록 컴포넌트를 만들어서 HTML 템플릿에 product-item이라는 커스텀 태그로 작성할 수 있도록 선언할 수 있다. 그 부분은 차차 알아보도록 하고, 우선 HTML 구조만 이해하고 넘어가자.

 

상품 목록 UI가 여러 군데의 페이지에서 사용되더라도 product-item 이라는 하나의 컴포넌트로 선언되어있기 때문에 수정사항이 있을 경우 product-item 만 변경하면 모든 페이지가 동시에 변경되어 유지보수 측면에서 놀라운 효율성을 발휘할 수 있게 된다.

 

 

지금까지 Vue.js의 기본적인 개념과 사용법에 대해 알아보았다. 다음은 Vue.js를 설치하여 실제 예제 프로젝트를 생성하여 실습해보자.