Vue #1 - Vue를 시작해보자!
Vue를 시작해보자!
빠르게 변하는 프런트엔드 시장에서 요즘 가장 주목을 받고 있는 Vue.js에 대해 실습을 해보면서 차근차근 알아본다. Vues.js는 웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크다. 기존 웹 개발자뿐만 아니라 HTML, CSS, 자바스크립트 기초만 아는 웹 개발 입문자 및 컴퓨터 비전공자들도 배우기 쉽게 만들어졌다.
개발도구의 준비
Vue를 시작하기 전에 다음과 같은 개발도구를 설치한다.
구글 사이트에서 'chrome' 이라고 입력하여 다운로드를 받는다.
구글에 'visual studio code'를 입력하고 다운로드를 받는다.
구글에 'node js'라고 입력하고 다운로드를 받는다.
구글에 'vue.js dev tools'를 입력하고 다운로드를 받는다.
Vue.js란?
Vue.js는 웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크다.
위 그림은 뷰의 창시자인 에반 유가 2017년 Vue.js 컨퍼러런스에서 발표한 프레젠테이션에서 사용한 그림이다. 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공된다. 즉, 라이브러리 역활뿐만 아니라 프레임워크 역활도 할 수 있다는 의미다. 그래서 공식 사이트에서도 뷰를 점진적인 프레임워크라고 부르고 있다.
프레임워크 시장 속에서 뷰의 위치와 성장성
최근 프런트엔드 프레임워크 시장은 리액트와 앵귤러가 높은 점유유을 차지하고 있다. 리액트와 앵귤러가 상대적으로 오래된 프레임워크이기도 하고, 이미 많은 기업에서 시스템을 해당 프레임워크로 구축해 서비스하고 있기 때문이다.
뷰의 창시자인 에반도 구글에서 일할 당시 브라우저 상에서 많은 프로토타이핑 작업을 앵귤러로 구현하였다. 에반은 앵귤러의 데이터 바인딩 방식과 돔에 직접 접근하지 않고도 데이터를 표현하는 방식에 흥미를 느꼈다.
하지만 앵귤러를 이해하기 위해서는 방대한 크기의 프레임워크 구조를 이해해야 했기에 부담을 느꼈다. 그래서 에반은 앵귤러의 명시적 데이터 바인딩과 같은 필수적인 요소들만 가지고 화면을 구현하기 시작했고, 오픈 소스화하면서 많은 사람들이 참여하여 프레임워크의 기능을 붙여 나가기 시작했다. 그리하여 뷰가 탄생했다.
뷰는 2014년 12월에 처음으로 공식 배포되었다. 따라서 현재 시장 점유율은 기존에 있던 프레임워크에 비해 상대적으로 낮은 편이다. 하지만 요즘의 가파른 성장세를 감안하여 지금 시기에 배워야 하는 프런트엔드 프레임워크는 뷰라고 볼 수 있다. 이는 개인적인 생각이 아니고 실무에서 퍼블리셔, 디자이너와 협업하는 대다수의 실무 웹 개발자들이 공감하는 의견이다.
뷰의 장점
빠르게 변화하는 프런트엔드 시장에서 뷰는 해결사 같은 존재다. 일단 첫째, 배우기가 쉽다 HTML, CSS, 자바스크립트의 기초만 아는 입문자라도 하루 안에 배울 수 있고, 익숙한 실무 개발자라면 몇 시간 이내 배울 수 있다. 둘째, 리액트와 앵귤러에 비해 성능이 우수하고 빠르다. 뷰 제작팀에서 리액트와 앵귤러를 가지고 같은 테스트 케이스에서 성능을 비교한 결과 뷰가 가장 빠른 것으로 나타났다. 셋째, 리액트의 장점과 앵귤러의 장점을 갖고 있다. 앞에서 보았듯이 뷰는 구글에서 일하던 직원이 앵귤러를 더 가볍게 쓰고 싶어서 만든 프레임워크다. 앵귤러의 데이터 바인딩 특성과 리액트의 가상 돔 기반 렌더링 특징을 모두 가지고 있다.
Vue.js의 특징
UI 화면단 라이브러리
위 그림에서 볼 수 있듯이 MVVM 패턴이란 화면을 모델(Model) - 뷰(View) - 뷰 모델(ViewModel)로 구조화하여 개발하는 방식을 의미한다. 이러한 방식으로 개발하는 이유는 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해할 수 있고, 추후 유지 보수가 편해지기 때문이다.
뷰(View) : 사용자에게 보이는 화면
돔(DOM) : HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리
돔 리스너(DOM Listener) : 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
모델(Model) : 데이터를 담는 용기. 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장
데이터 바인딩(Data Binding) : 뷰(View)에 표시되는 내용과 모델의 데이터를 동기화
뷰 모델(ViewModel) : 뷰와 모델의 중간 영역. 돔 리스너와 데이터 바인딩을 제공하는 영역
웹 초창기에는 프런트엔드 영역이라는 구분이 따로 없었다. 화면 요소를 꾸미는 HTML, CSS 코드와 데이터베이스에서 데이터를 가져와 제어하는 Java 코드가 한 파일에 섞이면서 가독성이 현저하게 떨어졌다. 이러한 코드 때문에 작성자뿐만 아니라 협업자들 소스 코드를 읽는 데 애를 먹었다. 이러한 문제점을 해결하기 위한 일환으로 MVVM 패턴을 사용하기 시작했다. MVVM 패턴은 뷰뿐만 아니라 최신 프런트엔드 프레임워크인 리액트에도 적용되어 있을 정도로 요즘에는 대중적인 화면 개발 패턴으로 자리매김했다.
컴포넌트 기반 프레임워크
뷰가 가지는 또 하나의 큰 특징은 컴포넌트 기반 프레임워크라는 점이다.
컴포넌트란 마치 레고 블록과 같다. 레고 블록을 잘 조합해서 쌓으면 원하는 모형을 만들 수 있듯이 뷰의 컴포넌트를 조합하여 화면을 구성할 수 있다. 위 그림의 왼쪽 화면은 각 영역을 컴포넌트로 지정하여 구분한 것이고, 오른쪽 그림은 왼쪽 화면의 각 컴포넌트 간의 관계를 나타낸다.
최신 프런트엔드 프레임워크인 리액트, 앵귤러 모두 컴포넌트 기반의 개발 방식을 추구하고 있다. 컴포넌트 기반 방식으로 개발하는 이유는 코드를 재사용하기 쉽기 때문이다. 그리고 뷰의 경우 컴포넌트를 썼을 때 HTML 코드에서 화면의 구조를 직관적으로 파악할 수 있다. 따라서 프레임워크 자체에서 컴포넌트 방식을 추구하면 모두가 정해진 방식대로 컴포넌트를 활용하므로 빠르게 구현할 수 있을 뿐만 아니라 남이 작성한 코드를 볼 때도 수월해진다.
리액트와 앵귤러의 장점을 가진 프레임워크
뷰는 앵귤러의 양방향 데이터 바인딩과 리액트의 단방향 데이터 흐름의 장점을 모두 결합한 프레임워크다. 양방향 데이터 바인딩이란 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것을 말한다. 단방향 데이터 흐름은 컴포넌트의 단방향 통신을 의미한다. 컴포넌트 간에 데이터를 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게끔 프레임워크가 구조화되어 있는 게 바로 단방향 데이터 흐름이다. 이 외에도 빠른 화면 렌더링을 위해 리액트의 가상 돔 렌더링 방식을 적용하여 사용자 인터랙션이 많은 요즘의 웹 화면에 적합한 동작 구조를 갖추고 있다.
가상 돔을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신한다. 따라서 브라우저 입장에서는 성능 부하가 줄어들어 일반 렌더링 방식보다 더 빠르게 화면을 그릴 수 있다.
Hello Vue.js! 프로젝트 만들기
개발 환경을 구성했으니 이제 뷰를 사용하여 간단한 메시지를 출력해보겠다. 뷰를 사용하는 방법이 얼마나 쉽고 간편한지 직접 확인할 수 있다.
Visual Studio Code를 실행하고 폴더와 파일을 위와 같이 구성하고 코드를 작성해본다. 작성 후에 Code에서 제공하는 기능인 Open With Live Server를 실행한다. 이 기능은 코드의 마켓플레이스에서 'Live Server'를 검색하고 설치해야한다. 위 코드는 html 기본 구조에 <div> 태그를 하나 추가하고, 뷰 라이브러리를 로딩한 후 뷰로 Hello Vue.js!라는 간단한 메시지를 출력하는 코드다. 뷰 인스턴스를 만들고 인스턴스에 정의된 데이터 객체의 메시지 프로퍼티를 화면에 출력한다.
