[프론트엔드]Vue.js 3일 스터디(1일차)
- Vue.js 기본 개념 및 인스턴스
회사에서 진행 중인 프로젝트에 갑자기 Vue.js 를 적용한다고 한다. 그래서 뜬금없지만 급하게 주말에 공부를 해서 정리를 하려고 한다. 최신 기술을 따라가지 못하고 있는 아재(?)이면서, React , Angular 도 잘 모르는 프론트엔드 무식자이다. 해야 할 공부가 많아서 프론트엔드 기술은 당장 공부하고 싶지는 않았지만... 일정상 조금 급하게 기본 개념과 간단한 샘플 소스를 정리할 예정이다. 목차는 아래와 같다.
1. Vue.js 기본 개념(1일차)
2. Vue.js 심화 - 주제 미정(2일차)
3. Vue.js 심화 - 주제 미정(3일차)
1. Vue.js 기본
Vue.js 의 기본 개념 및 인스턴스에 대해서 공부한다.
1.1 프론트엔드 기술을 대하는 자세
프론트엔드 전문 개발자라면 React, Angularjs, Vue.js 등 자바스크립트 프레임워크를 깊게 파고 공부해도 좋을 듯하다. 하지만, 풀스택 개발자는 어떻게 접근하는 게 좋을까? 최근 프론트엔드 기술 트렌드 변화가 꽤 빠른 편이다. 작년에는 React, 그 전에는 Angular js 등, 해가 바뀌면 새로운 기술이 계속 나오는 중이다. 개발자는 당연히 신기술에 민감하고, 서비스에 바로 적용하고 싶을 것이다. 하지만 어떤 기술이 좋고 나쁨을 따지는 것도 중요하지만, 그전에 서비스에 맞게 어떻게 잘 사용하는지가 너무 중요하다. 빠르게 습득해서, 빠르게 구축할 수 있어도, 제대로 알고 적용하지 않는다면... 나중에 유지보수가 너무 어려울 것이다.
제대로 알고 써야 하지만, 심플하게 사용하자. (... 이 말이 참 아리송하다. 그냥 잘하자는 의미다..)
1.2 Vue.js 소개
Vue.js 는 Angular & React 의 장점을 결합하여 만든 오픈소스 자바스크립트 프레임워크이다. 나는 전문가가 아니라서 설명할 자신이 없으니, 아래 링크를 참고하자. Vue.js 에 대해서 아주 상세하게 알 수 있다.
이 허접한 브런치에 와서 해당 글을 읽고 있는 당신은... 아마 프론트엔드 기술에 조금이라도 관심이 있을 것이다. 다른 프레임워크와의 비교라는 글을 읽어보면 Vue.js 에 대해서 바로 이해할 수 있을 것이다.
https://kr.vuejs.org/v2/guide/comparison.html
Vue.js 를 잠깐 공부하며 느낀 점은 Angular , React 등 기존 프레임워크를 잘 몰라도 쉽게 배워서 사용할 수 있는 것 같다. 하지만, 기본적인 자바스크립트 문법, 함수형 자바스크립트, 객체지향 자바스크립트 개념을 이해하고 시작하는 것을 추천한다.
좋고 나쁨이 기술 선택의 기준이 되어서는 절대 안 됩니다. React 는 React 답게, Angular 는 Angular 답게, Vue.js 는 Vue.js 답게 프로젝트에 제일 적합한 기술로 사용하면 됩니다.
1.3 Vue.js 시작하기 - 디렉티브
Vue.js는 심플한 템플릿 구문을 사용하여 DOM 템플릿을 구현할 수 있다. Vue.js 에서는 템플릿 표현식 {{}} 를 사용하여 표현할 수 있다. 샘플 소스를 먼저 보는 것이 이해가 빠를 것이다.
<div id="div01">
{{ message }}
</div>
<script>
var vm01 = new Vue({
el: '#div01',
data: {
message : '테스트입니다.'
}
})
</script>
vm01 객체는 뷰모델(ViewModel) 객체이고, "new Vue"는 인스턴스를 생성하는 구문이다. 인스턴스 생성 시에는 DOM 영역의 id 값을 설정해야 한다. 뷰모델 및 인스턴스에 대해서는 잠시 후에 다시 정리하겠다. 아무튼 해당 소스는 HTML 태그 안에 사용하였고 Vue.js 의 템플릿 표현식 ( {{ }} )을 사용하였다. 하지만, 템플릿 표현식을 사용하지 않고 디렉티브라는 것을 사용해도 표현할 수 있다. v-text, v-html이라는 디렉티브를 사용할 수 있다.
<div id="div01" v-text="message">
</div>
v-text는 innerText, v-html 은 innerHTML로 실행이 된다. innerText 은 태그 문자열 그대로 표현되고, innerHtml 은 문자열이 HTML 문법에 맞게 파싱 되어 표현된다. message : 'Vue & React' 로 설정하면 innerText는 " Vue & React " 로 렌더링 되고, innerHTML에서는 " Vue & React " 로 렌더링 된다. 참고로 "&" 로 표현한 문자는 엔티티 코드라고 부르는데, 엔티티 코드는 아래 W3C 홈페이지에서 확인할 수 있다. 당장 중요한 건 아니니, 나중에 시간 되면 보길 바란다.
https://www.w3schools.com/html/html_entities.asp
Vue 는 DOM 의 속성들을 바인딩 할수도 있다. 이때 사용하는 디렉티브는 v-bind 이다. 예를 들어서 이미지 태그의 Src 값을 바인딩할 수 있다. 아래 샘플 소스를 확인해보자.
v-bind:src 구문을 참고하면 된다. 이렇게만 간단하게 소개하면 너무 민망하니... Vue.js 프레임워크의 내부 로직을 확인해봤는데, 자바스크립트의 setAttribute 메서드를 사용하는 것을 확인하였다.
https://unpkg.com/vue@2.5.13/dist/vue.js
생략
function setAttr (el, key, value) {
생략
.setAttribute
생략
}
Vue.js 나 React 나 결국엔 자바스크립트이기 때문에, 자바스크립트 기본 개념은 반드시 이해를 해야 한다. setAttribute 관련해서는 [자바스크립트 완벽 가이드 - 인사이트 - 414page] 에서 확인할 수 있다.
Vue.js 는 양방향 데이터 바인딩도 가능하다. 위 샘플에서 v-model 이 바로 양방향 바인딩을 위한 디렉티브이다. Input 태그에 텍스트를 작성하면, Vm01 인스턴스의, Data 모델의 name 에 바인딩된다. 소스를 직접 실행해보는 것이 이해가 빠를 것이다.
프레임워크에서는 아래 genDefaultModel 함수에서 v-model 관련 핵심 로직을 수행한다. 자세히는 못 봤지만 나중에 한 번쯤은 소스를 자세히 까 보면 좋을 것 같다.
https://unpkg.com/vue@2.5.13/dist/vue.js
생략...
function model (
생략...
genDefaultModel(el, value, modifiers);
v-show, v-if 디렉티브는 브라우저(사용자) 에게 표현을 할지, 안 할지, 렌더링을 할지, 안 할지 정하는 조건문(?)이다. 정확히는 v-if는 조건에 따라서 렌더링 여부를 결정하고, v-show는 렌더링은 하지만 조건에 따라서 display를 block 할지 none 처리할지를 정할 수 있다. 이 글에서 모든 걸 적을 수 없고, 가능하면 Vue.js 가이드 페이지를 보는 게 훨씬 좋을 것이다.
참고로, Vue 가 정상적으로 동작을 하면 디렉티브는 삭제가 된다. 웹페이지를 실행했는데 소스보기를 통해서 봤을 때 Vue.js 의 디렉티브가 렌더링 된 HTML 태그에 남아있다면, 그건 뭔가 Vue 실행 중에 문제가 있었다는 것을 의미한다. Vue.js 프레임워크 소스를 보면, 특정 디렉티브를 실행했을 때 정상적으로 실행을 하면, 그 이후에 getAndRemoveAttr를 실행한다. getAndRemoveAttr는 HTML 에 선언된 디렉티브를 지워주는 것으로 추측한다. 어쨌든 이런 Vue.js 의 기능들은 심플하게 템플릿팅 해주는 역할을 하는데, 자세히 보면 HTML (DOM)을 자바스크립트로 템플릿, 즉 조작하는 역할을 할 뿐이다. 알고 보면 별거 없지만 참 심플하고 간결하다. 나는 뭐든지 심플하고 간결한 것을 좋아하기 때문에, 개인적으로는 Angular js 보다는 Vue.js 가 더 마음에 들기는 하다. 그래도 위에 얘기했지만, 좋다고 무조건 쓰는 건 안 좋고 시스템, 프로젝트에 맞는 기술 도입이 필요하다. 어쩃든 디렉티브 관련해서 여기서 소개 못한 내용이 꽤 많으니, Vue.js 가이드 페이지를 꼭 참고하길 바란다.
1.4 Vue.js 시작하기 - 인스턴스
인스턴스를 이해하려면, 라이프사이클에 대해서 이해해야 한다.
영어가 힘든 사람은, [Vue.js 퀵 스타트 - 루비페이퍼 출판사 - 원형섭님] 의 65page 를 참고하면 된다. 시간이 되면 저작권 걱정 없이 개인적으로 따로 정리해서 공유하고 싶지만 시간이 없어서 일단 패스한다. 어쨌든 인스턴스가 뭔지 이해해야 하는데, Vue 생성자로 만든 객체를 Vue 인스턴스라고 부른다. 라이프사이클 최상단의 new Vue() 에서 실행된다. Vue 인스턴스에는 Data, Methods 등의 속성과 함수 등을 선언할 수 있다. 아주 간단한 Methods 적용 샘플을 아래와 같이 작성해봤다.
v-model을 이용하여 데이터 양방향 기능을 활용하여고, sum 메서드를 구현하였다. 아래와 같이 INput 에 숫자를 입력하면 sum에서 계산된 결과 값이 바로 표현될 것이다.
만약 메서드를 정상적으로 실행하지 못하면 어떻게 될까? 인스턴스가 선언한 el 영역이 렌더링이 되지 않을 수 있다. 아래와 같이 크롬 개발자 도구에서 확인할 수 있다.
위 샘플의 해당 sum 메서드는 매번 실행한다. 하지만, 계산된 속성을 활용하면 데이터 일부가 변경된 경우에만 다시 계산을 하고, 그렇지 않다면 캐싱된 이전에 계산 돈 결과를 즉시 반환한다. 아래 계산된 속성 (Computed)를 활용한 샘플 소스가 있다.
참고로 watch라는 것도 있는데, watch 옵션에 등록되었을 때 속성이 변경되었을 때마다 호출을 하는 함수이다. 자세한 내용은 아래 가이드에서 확인을 할 수 있다
https://kr.vuejs.org/v2/guide/computed.html
위에 샘플 소스를 다시 보면, beforeCreate, updated 등은 라이프사이클 훅이다. 라이프사이클 훅은, 라이프사이클이 실행되는 다양한 과정의 프로세스에서 사용자 로직을 추가할 수 있다. 라이프사이클에 대해서 당장 이해가 어려우니... 스터디가 끝날 때쯤 한번 더 정리가 필요할 것이다.
이번 글에서는 [[프론트엔드]Vue.js 일주일 스터디(1일차)]라는 주제로 Vue.js 의 아주 기본적인 개념에 대해서 빠르게 공부해봤다. 다음 글의 주제는 아직은 미정인데, 아마도 Vue.js 의 이벤트 처리 또는 Vue.js의 컴포넌트 등의 개념을 정리할 예정이다.
https://brunch.co.kr/@springboot/29
