0 뷰 프로젝트

source: categories/study/vue-project/vue-project_0.md

0.1 뷰 특징

Vue.js는 사용자 인터페이스 개발을 위한 Progressive Framework입니다.
Progressive: 웹과 네이티브 앱의 이점을 모두 수용하고 표준 패턴을 사용해 개발한 것을 뜻합니다.

웹: 별도의 설치 없이 브라우저만 있으면 접속이 가능하기 때문에 접근성이 매우 뛰어납니다.
네이티브 앱의 경우는 일반적인 웹보다 빠르고 더 뛰어난 사용자 경험을 제공합니다.
결국 Vue.js가 목표로 하는 것은 웹의 장점과 앱의 장점을 모두 수용할 수 있는 진화된 웹앱 애플리케이션을 만들 수 있는 프레임워크를 제공하는데 있습니다.
Vue.js는 SPA(Single Page Application) 개발을 위한 프론트엔드 프레임워크입니다.
여기서 SPA는 단일 페이지 어플리케이션을 말합니다.
SPA가 무엇인지 이해하기 위해서는 기존의 웹의 동작 방식을 먼저 이해해야 합니다.

SPA 방식으로 개발하지 않은 웹사이트에 접속했다고 가정하겠습니다.
도메인 주소를 입력하고 특정 웹사이트에 들어와서 해당 사이트에서 제공하는 특정 메뉴를 클릭하면 보고 있는 페이지가 선택된 메뉴 페이지로 이동이 될 것입니다.
이때 브라우저 URL은 처음 접속한 도메인 주소에서 변화할 것입니다.

물론 SPA로 개발된 웹사이트도 여기까지는 동일합니다.
중요한 것은 페이지가 열리는 방식에서 차이가 납니다.
일반적인 웹사이트의 경우는 페이지를 매번 이동할 때마다 페이지 전체를 다시 로딩하게 됩니다.
이때 해당 페이지에서 이용하는 다양한 자바스크립트 파일, CSS 파일, 이미지 파일 등 전체를 서버에서 가져와서 로딩을 하게됩니다.

아마 이렇게 로딩되는 파일 중 일부는 이미 해당 페이지로 이동되기 전에 머물렀던 페이지에서 사용했던 동일한(중복된) 자바스크립트, CSS, 이미지 파일일 수 있습니다.
일반적인 웹사이트의 경우 페이지 이동으로 새로 열리는 페이지에 필요한 웹 자원(자바스크립트, CSS, 이미지 등)을 항상 다시 서버로부터 받아와서 로딩을 하게 됩니다.

SPA의 경우는 말 그대로 단일 페이지 애플리케이션입니다.
이름에서 알 수 있듯이 단일 페이지, 즉, 페이지 하나에서 동작하는 애플리케이션입니다.
SPA는 제일 처음 웹사이트에 접속했을 때, 웹사이트 전체에 필요한 모든 웹자원(자바스크립트, CSS, 이미지 등)을 서버로부터 가져와서 로딩을 하게 됩니다.

페이지를 이동하면 웹 페이지 전체가 바뀌는 것이 아니라, 처음 접속했을 때 로딩된 페이지 중에서 변경이 필요한 부분만 바뀌게 됩니다.
그렇기 때문에 페이지 전환 속도가 굉장히 빠르고, 이미 로딩된 자원을 다시 서버로부터 받아올 필요가 없기 때문에 웹 자원을 굉장히 효율적으로 관리할 수 있습니다.

SPA는 이런 장점 때문에 최근 웹 애플리케이션에서 매우 많이 사용되고 있는 방식입니다.
하지만 SPA도 단점이 존재합니다.
사용자가 웹사이트에 처음 접속하면 사이트 이용에 당장 필요하지 않은 모든 웹자원까지도 로딩하기 때문에 화면 로딩 속도가 느리고 많은 웹 자원을 가져와야 하는 단점이 있습니다.
만약에 첫 페이지만 보고 해당 웹 사이트를 더 이상 머물지 않고 빠져나가는 사용자라면, 내가 방문하지 않을 웹 페이지에서 사용하는 웹 자원까지 모두 로딩되어, 속도 저하를 느낄 수 있습니다.

제공하는 웹 사이트의 성격이 어떠하냐에 따라 웹 사이트를 개발하는 방식도 달라져야 합니다.
최근 웹 애플리케이션을 개발할 때 프론트엔드 개발에 사용되는 가장 인기있는 프레임워크에는 Vue 외에도 React, Angular가 있습니다.

웹 프론트엔드를 처음 접하는 모든 개발자들이 이 3가지 프레임워크 중에 무엇을 먼저 배우고, 무엇을 적용할지 고민합니다.
필자는 개발 경력이 오래되다 보니, 너무나 자연스럽게 이 3가지 프레임워크를 별 고민 없이 사용할 수 있었습니다.
Angular가 제일 먼저 나왔고, 그 다음으로 React, vue 순으로 나왔기 때문에, 나온 순서대로 자연스럽게 익히고 실무 프로젝트에 적용하게 되었습니다.

하지만 이제야 막 웹 프론트엔드를 시작하는 개발자라면 정말 고민이 될 수 밖에 없을 것 같습니다.
지금 이 책을 읽고 있는 독자라면 이 3가지 중에 Vue를 제일 먼저 선택했거나, 이미 다른 프로젝트에서 React, Angular에 대한 경험을 가지고 있어서 그 다음은 프레임워크로 Vue를 익히기 위해서일 것입니다.

만약에 아직 이 3가지 중 하나도 경험한 적이 없다면 지금 이 글을 읽고 있는 것은 정말 탁월한 선택이라고 말씀드리고 싶습니다.
왜냐하면 가장 빠르고, 직관적으로 새로운 프레임워크를 여러분의 것으로 만들 수 있을 거라 확신하기 때문입니다.

0.2 Vue.js 장점

직관적이고 배우기 쉽다.
재사용을 통한 애플리케이션을 개발 기간 단축 및 양질의 코드를 생산할 수 있다.
Angular의 장점(데이터 바인딩)과 React의 장점(가상 돔)을 모두 가지고 있다.

0.3 직관적이고 배우기 쉽다

필자는 전 세계 개발자들에게 가장 인기 있고 많이 사용되는 웹프론트엔드 프레임워크인 React.js, Angular.js, Vue.js를 모두 사용해 봤습니다.
여기서 사용해 봤다는 건, 단지 학습 차원에서 공부하는 프로토타이핑 수준의 미니 프로젝트 경험이 아니라, 실제 사용되는 애플리케이션을 개발하는 프로젝트를 진행한 경험을 말합니다.
Vue.js의 가장 큰 장점은 배우기 쉽다는 점입니다.
특히 다른 언어로 개발해본 경험이 있는 개발자라면 정말 단기간 안에 Vue.js를 익히고 실무에 바로 적용할 수 있을 정도로 매우 직관적이고 배우기가 쉽습니다.

만약 웹 애플리케이션을 개발하여 고객사에 납품해야 하는 상황이고 React, Angular, Vue 이렇게 3가지 프레임워크 중 하나를 선택해서 개발해야 하는 상황이라면 필자는 Vue를 사용하라고 과감히 추천합니다.
특히나 고객사의 운영팀이 아직 이 3가지 프레임워크에 대한 경험이 없다면 더더욱 Vue를 추천합니다.
이건 필자가 실무에서 무수히 겪은 경험을 토대로 말하는 것입니다.

고객사의 운영팀은 일단 새로운 기술이 적용되는 것에 대해서 두려움이 있습니다.
왜냐하면 운영팀 입장에서는 기존에는 한 번도 다뤄보지 않은 새로운 기술을 빠르게 익혀야하고, 그 기술로 구현된 애플리케이션을 실제 운영해야 하는 상황이기 때문입니다.

하지만 운영팀 엔지니어들은 이미 오랜 시간 시스템을 운영하면서 알게 된 많은 노하우를 가지고 있고, 최소한 하나 이상의 프로그래밍 언어에 익숙한 사람일 가능성이 매우 높습니다.
이때 React, Angular, Vue와 같은 프론트엔드 프레임워크에 대한 경험이 전혀 없다면 기존 기술 지식을 가지고 가장 빨리 익힐 수 있는 것이 Vue.js라는 것에 필자는 확신했고, 실제 실무에서 그렇다는 것에 대한 많은 사례를 경험했습니다.

0.4 재사용을 통한 애플리케이션 개발 단축 및 양질의 코드를 생산할 수 있다

Vue는 재사용성을 극대화하고 애플리케이션 전체에 걸쳐 양질의 코드를 생산할 수 있도록 해줍니다.
결국 애플리케이션 개발 속도를 높일 수 있습니다.

흔히 사용하는 단어 중에 템플릿이란 단어가 있습니다.
보통 템플릿이라고 하면 무언가 정형화되어 작성된, 유사한 것을 만들 때 적용하여 빠르게 원하는 대로 만들 수 있도록 해주는, 이미 구조화가 된 것을 말합니다.

템플릿은 문서일 수도 있고, 특정 디자인일 수도 있습니다.
프로그램에서도 템플릿은 비슷한 개념이라고 생각하면 됩니다.
특정 기능을 가지고 있는 프로그램 코드 세트이며, 개발자는 템플릿을 사용해서 이미 템플릿이 가지고 있는 기능을 활용하여 유사한 프로그램을 빠르고 안정적으로 개발할 수 있습니다.

Vue에서는 컴포넌트(Component)가 이에 해당합니다.
Vue에서는 컴포넌트를 통해 재사용성을 극대화할 수 있습니다.
컴포넌트가 무엇인지는 해당 챕터에서 자세히 설명드릴 것이니까 코드의 재사용성을 높이고 양질의 코드를 개발할 수 있다고 이해하시면 좋을 것 같습니다.

0.5 Angular의 장점(데이터 바인딩)과 React의 장점(가상 돔)을 모두 가지고 있다

Angular가 처음 나왔을 때, 가장 크게 충격받은 기능 중 하나는 단연코 데이터 바인딩 부분입니다.
기존의 웹 개발 방식에서는 자바스크립트의 대부분의 역할은 웹 화면에서 사용자의 인터렉션을 통해 발생하는 데이터와 이벤트를 화면에 설정하거나 반대로 발생하는 데이터/이벤트를 가져오는 부분에 대한 코딩이었습니다.

사실 너무나 당연한 코드이기도 하지만, 대다수의 웹 개발자들은 이런 자바스크립트 코딩을 어려워했고, 실제로 많은 코드를 작성해야 이런 부분을 처리할 수 있었습니다.
Angular가 나오고 데이터 바인딩, 정확히는 Two-Way 데이터 바인딩을 제공함으로써 어찌 보면 웹 개발의 혁명이 일어났다고 생각할 수 있습니다.

이후에 나올 챕터에서 데이터 바인딩에 대해서 자세히 설명하겠지만, 여기서 데이터 바인딩을 간략하게 설명하자면 데이터와 웹 화면의 요소(HTML DOM)가 서로 양방향으로 연결되어 있어서, 어느 한쪽에 변경이 일어나면 연결되어있는 다른 쪽에 자동으로 반영되는 것을 의미합니다.

데이터 바인딩을 적용함으로써, 기존 웹 개발에서 어느 한쪽에 변경이 일어났을 때 다른 한쪽에 해당 결과를 반영하기 위해서 구현했던 수많은 코드를 작성할 필요가 없어졌고, 개발자의 실수 혹은 구현 능력 부족으로 인한 오류를 걱정할 필요가 없어진 것입니다.

Angular는 처음 등장과 동시에 웹 개발 방식에 혁명을 가져왔고, 많은 웹 애플리케이션 개발에 사용됩니다.
그런데 이렇게 완벽해 보이는 Angular도 웹 애플리케이션이 복잡해짐에 따라 치명적인 단점이 발견되었습니다.
그건 바로 속도(성능) 문제였습니다.

Angular의 등장으로 웹에서도 데스크탑 애플리케이션 수준의 프로그램을 개발할 수 있다는 가능성이 열리게 되었고, 웹 애플리케이션은 기존에 데스크탑 애플리케이션이 처리하던 많은 기능을 담기 시작합니다.
그러면서 웹 화면은 점점 더 복잡도가 증가하게 되었고, 웹 즉, HTML DOM(Document Object Model)의 특성상 복잡도가 증가할수록 점점 무거워지고 느려지게 되었습니다.

HTML DOM은 트리구조로 되어 있어서 웹 화면에 요소가 많아지고 복잡도가 증가할수록 끊임없이 연결된 트리구조를 갖게 되고, 웹화면에 변경이 일어날 때마다 이러한 트리구조의 갱신이 일어나야 하고 이 작업은 매우 큰 성능 저하를 가져오게 되는 것입니다.

예를 들어 보고 있는 웹 화면에 광고 배너가 있습니다.
배너를 클릭하여, 광고 팝업이 나타났다고 가정하겠습니다.
이때 웹은 내부적으로 DOM 트리구조를 모두 갱신하는 비효율성으로 인해 웹의 복잡도가 큰 화면이라면 이러한 작업은 치명적인 성능 저하를 가져오게 되는 것입니다.

이러한 단점을 극복하고 빠르고 고성능을 가진 웹 애플리케이션을 위해 나온 것이 React입니다.
React는 이러한 DOM의 문제를 개선하기 위해 Virtual DOM(가상 돔) 개념을 제공하게 됩니다.
Virtual DOM은 실제 DOM 문서를 추상화하여, 변화가 많은 화면(View)을 DOM에서 직접 처리하는 방식이 아닌, 가상의 DOM을 만들어서 메모리에서 처리한 다음 실제 DOM과 동기화함으로써 기존 DOM이 가지고 있던 단점을 개선하고 웹에서도 고성능 애플리케이션을 구현할 수 있도록 하였습니다.

Vue는 Angular가 가지고 있는 데이터 바인딩의 장점과 React가 가지고 있는 Virtual DOM의 장점을 모두 수용해서 개발이 완료된 프레임워크입니다.

0.6 Vue.js의 특징

MVVM 패턴 사용
컴포넌트(Component)를 사용한 높은 재사용성

0.7 MVVM 패턴

MVVM은 Model-View-ViewModel의 약자입니다.
프로그래밍 로직과 화면에 해당하는 View(UI)를 분리해서 개발하기 위해 설계된 패턴입니다.
일반적으로 웹은 HTML DOM이 View, 자바스크립트가 Model의 역할을 하게 됩니다.
MVVM 패턴은 View와 Model 중간에 ViewModel을 둠으로써 데이터 바인딩 처리 및 가상 DOM을 통한 성능 및 개발의 편의성을 제공하기 위해 만들어졌습니다.

0.8 컴포넌트(Component)

재사용할 수 있는 구조로 개발하는 것을 컴포넌트(Component)라고 부릅니다.
Vue로 개발된 파일(.vue) 하나하나가 모두 컴포넌트입니다.
컴포넌트는 한 화면을 이루는 작은 요소일 수도 있고, 한 화면 전체일 수도 있습니다.
Vue에서 하나의 컴포넌트는 HTML+CSS+JavaScript로 이루어져있고, 다른 컴포넌트에서 import해서 바로 사용할 수 있습니다.

hyungju-lee

master