Vue.js 란 무엇인지 그리고 핵심 컨셉인
데이터 바인딩(Data Binding)과 컴포넌트(Component)에 대해 간략히 정리해보겠습니다.
Vue.js란??
vue.js 자체는 프론트엔드. 즉, View와 관련된 처리들을 개발자 대신 관리해주는 라이브러리이다. 그래서 마치 jQuery를 이용하듯이 Script코드 몇 줄만 작성하면 곧바로 VUE를 적용할 수 있다. 공식 문서에서는 Progressive Framework라고 소개되는데, 이것은 처음 말한 것과 같은 간단한 방법으로 기존 프로젝트를 vue.js로 부분부분 점진적으로 또 쉽게 업데이트해나가며 전환할 수 있음을 의미한다. 근데 여기서 프레임워크라는 단어가 나온다. VUE가 라이브러리이면서 프론트엔드 자바스크립트 프레임워크인 이유는 많은 확장 기능과 개발 지원 도구가 제공되어, 큰 규모의 SPA(Single Page Application, 단일 페이지 애플리케이션)도 만들 수 있도록 설계를 도와주기 때문이다. 따라서 VueCLI, VueRouter, Vuex등의 라이브러리와 연계하여 Vue.js를 프레임워크로써 사용하면 대규모 애플리케이션의 기본 규칙과 뼈대를 빠르게 결정할 수 있다.
데이터 바인딩(Data Binding)
해당 개념에 대한 정의 이전에 아래 간단한 코드를 먼저 봐보자.
※ {{ message }}와 같이 이중 중괄호로 감싸는 것은 데이터를 렌더링하는 방식인 Mustache라고 부르는 기법으로, 텍스트 콘텐츠의 해당 위치에 message속성을 bind함을 의미한다.
<!DOCTYPE html>
<html>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js'
}
})
</script>
</body>
</html>Vue.js는 html과 같이 태그를 읽어 들이는 형태이기에 빠르게 학습할 수 있다는 장점이 있다. 아마 이 부분이 인기있는 이유 중 하나일 듯 싶다. 위 코드를 실행시키면, 다음과 같은 문자가 출력된다.
그리고 '개발자 도구(F12)'에서 app.message = 'Hi Hoon';로 문자열 변경.
그저 자바스크립트의 데이터 값을 변경했을 뿐인데, 렌더링 내용이 곧바로 변경됐다. 이를 JSP에서 JavaScript로 구현했다면 기본적으로 Element를 찾은 다음에 상태 값을 변경해야 했을텐데, 이 번거로운 작업이 간단하게 처리됐다. 이것이 Vue의 강력한 핵심 기능인 데이터 바인딩이다. Vue.js는 데이터가 먼저 존재하고 이 데이터를 기반으로 DOM을 구축한다. 즉, 데이터의 상태에 따라 DOM의 렌더링을 동기화하는 데이터 지향(Data Driven)적인 애플리케이션을 설계한다.
컴포넌트(Component)
사이트의 규모가 커지면 HTML 파일뿐만 아니라 Javascript, CSS의 소스코드도 많아져 각각의 기능들이 어떤 HTML과 연결되어 있는지 파악하기 힘들어진다. 예를 들어 하나의 Javascript 파일은 다양한 기능들로 구성&수정될 수 있고, 또 이것을 여러 HTML 파일들에서 사용하고 있을 수 있기 때문에 유리 관리가 힘들어지고 불필요한 소스코드를 포함하게 될 수도 있다.
이에 Vue.js는 한 UI에 해당하는 필요한 소스코드는 하나의 파일에 묶어서 관리할 수 있도록 컴포넌트(Component)라는 기능을 제공한다. 즉, 컴포넌트란 HTML과 Javascript, CSS를 한 세트로 하여 기능별로 묶어서 사용하는 UI 부품이라고 할 수 있다. 따라서 화면의 Header 또는 Footer 등의 특정 기능을 컴포넌트로 만들면, 하나의 파일에 외관(디자인 요소)뿐만 아니라 어떤 속성을 가지고 있으며, 어떤 액션을 하는지를 모두 포함시킬 수 있다. 정리하자면, 컴포넌트는 서로 관련있는 소스코드를 묶어서 재사용 및 유지관리를 수월하게 만든다.
.
.
.
다음은 VUE개발 환경 구축을 위한 설치방법을 포스팅하겠습니다.