Vue.js_1

Vue.js란 무엇인가?

Vue.js란

웹 페이지 화면을 개발하기 위한 프런트엔트 프레임워크
뷰의 코어 라이브러리는 라이브러리 역할 뿐만 아니라 프레임워크 역할도 할 수 있는 점진적인 프레임워크
다른 프레임워크 (Angular, React)와 비교해 가볍고 빠름
배우기 쉽고 성능이 좋음

프레임워크: 개발 생산성을 높이기 위해 일정한 틀과 규칙에 따라 개발하도록 미리 구조를 정의해놓은 도구

라이브러리: 자주 사용되는 기능들을 모아 재활용할 수 있도록 정리한 기술 모음집

Vue.js 특징

MVVM 패턴의 ‘View Model’에 해당하는 화면단 라이브러리 (DOM Listener + Data Binding)

DOM Listener - DOM의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행
Data Binding - View에 표시되는 내용과 모델의 데이터를 동기화
예) 버튼을 클릭하면 돔 리스너에서 클릭 감지 -> 버튼과 관련된 로직의 처리 -> 결과에 해당하는 데이터를 모델에서 데이터바인딩으로 가져와 화면에 나타냄

컴포넌트 기반 프레임워크

컴포넌트를 조합하여 화면 구성
코드의 재사용을 높이고 HTML 코드에서 화면의 구조를 직관적으로 파악 가능

리액트와 앵귤러의 장점을 가진 프레임워크

앵귤러의 양방향 데이터 바인딩 - 화면에 표스되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경
리액트의 단방향 데이터 흐름 - 컴포넌트 간에 데이터를 전달할 떄 항상 상위 컴포넌트에서 하위 컴포넌트 방향으로만 전달
리액트의 가상 돔 렌더링 - 특정 돔 요소를 축다하거나 삭제하는 변경이 일어날 때 화면 전체를 그리지 않고 프레임워크에서 정의한 방식에 따라 화면 갱신. 브라우저의 성능 부하가 줄어들어 속도가 빨라짐

MVVM 패턴: 마크업 언어나 GUI 코드를 비지니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴. 즉, 프런트엔드의 화면 동작과 관련된 로직과 백엔드의 데이터 처리 로직을 분리하여 가독성을 높임

MVVM

View - 사용자에게 보이는 화면
View Model - 뷰와 모델의 중간 영역.
Model - 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장

Vue.js 개발환경 설정

뷰로 웹 앱을 개발하기 위한 환경을 구성하기 위해 다음 도구들을 설치

크롬 브라우저

크롬 브라우저는 웹 개발 시 편리한 기능을 제공하는 크롬 개발자 도구를 지원함

텍스트 에디터

책에서는 ‘atom’을 소개했으나, 기존에 사용하던 텍스트 에디터나 IDE 사용해도 괜찮음

Node.js

서버 사이드 자바스크립트로, 서버 측에서 실행되는 자바스크립트 실행 환경을 의미
vue cli로 뷰 프로젝트를 구성하고 프로토타이핑 할 때 사용됨
nodejs.org에서 다운로드 받은 후 node -v로 설치 확인

뷰 개발자 도구 (Vue.js devtools)

뷰로 만든 웹 앱의 구조를 간편하게 디버깅하거나 분석할 수 있음
크롬, 파이어폭스, 사파리에서 모두 지원

뷰 인스턴스

뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위

뷰 인스턴스 생성

1
2
3

new Vue({
    ...
});

뷰 인스턴스 생성자는 뷰 라이브러리를 로딩하고 나면 접급할 수 있음

뷰 인스턴스 옵션 속성

뷰 인스턴스를 생성할 때 재정의할 data, el, template, methods 등의 속성을 의미

template: 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의
methods: 화면 로직 제어와 관계된 메서드를 정의. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직 추가 가능

예제코드

<html>
    <head>
        <title>Vue Sample</title>
    </head>
    <body>
        <div id="app">
            {{message}}
        </div>
        <script src="http://cdn.jsdelivr.net/npm/vue@2.5.2/dis/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue.js!'
                }
            });
        </script>
    </body>
</html>

el 속성은 부로 만든 화면이 그려지는 시작점을 의미. 위 코드에서는 app이라는 아이디를 가진 돔 요소에 뷰 인스턴스가 그려짐. 이떄 선택자는 CSS 선택자 규칙과 동일

뷰 인스턴스 유효 범위

뷰 인스터스를 생성하면 HTML의 특정 범위 내에서만 옵션 속성들이 적용됨
el 속성과 관계가 있음
new Vue()로 인스턴스를 생성하고 나서 화면에 인스턴스 옵션 속성을 적용하는 과정은 다음과 같음

뷰 라이브러리 파일 로딩 -> 인스턴스 객체 생성(옵션 속성 포함) -> 특정 화면 요소에 인스턴스를 붙임 -> 인스턴스 내용이 화면 요소로 변환 -> 변환된 화면 요소를 사용자가 확인
위 예제 코드에서 el 속성에 인스턴스가 부착되고 나면 인스턴스에 정의한 data 속성이 el 속성에 지정한 화면 요소와 그 이하 레벨의 화면 요소에 적용되어 다음처럼 값이 치환됨
1
2
3
<div id='app'>
Hello Vue.js!
</div>
예제 코드의 일부가 아래처럼 변경된 경우
태그 바깥 범위에 있는 를 인식하지 못 하기 떄문에 치환되지 않고 그대로 출력됨
1
2
3
4
<div id='app'>

</div>
{{message}}

뷰 인스턴스 라이프 사이클

인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클 속성이라고 하고 각 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅이라고 함.

뷰 라이프 사이클 다이어그램

위 다이어그램에서 부착 -> 갱신 구간은 데이터가 변경되는 경우에만 거치게 됨

beforeCreate: data, methods 속성이 아직 인스턴스에 정의되어 있지 않고, 돔과 같은 화면 요소에도 접근 불가
created: data, methods 속성이 정의되어 this.data 또는 this.fetchData()와 같이 속성에 정의된 값에 접근하여 로직 실행 가능. 하지만 아직 인스턴스가 화면 요소에 부착되기 전이어서 template 속성에 정의된 돔 요소에 접근 불가. 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋음
beforeMount: template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후 el 속성에 지정한 화면 요소에 인스턴스를 부착하기 전에 호출됨. render() 함수 호출 직전의 로직을 추가하기 좋음 (render는 자바스크립트로 화면의 돔을 그리는 함수)
mounted: el 속성에 지정한 화면 요소에 인스턴스가 부착되고 나서 호출됨. template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋음. 인스턴스가 부착되자마자 호출되기 때문에 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 HTML 코드로 변환되는 시점과 다를 수 있음 ($nextTick() API를 활용해 HTML 코드로 최종 파싱될 때까지 기다린 후에 돔 제어 로직을 추가)
beforeUpdate: 인스턴스가 화면 요소에 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환되는데 이 값은 뷰의 반응성을 제공하기 위해 $watch 속성으로 감시. 이를 데이터 관찰이라고 함. 관찰 중인 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출 됨. 변경 예정인 새 데이터의 값과 관련된 로직을 수행할 수 있음
updated: 데이터 변경되고 나서 가상 돔으로 다시 화면을 그리고 나서 실행됨. 데이터 변경 후 화면 요소 제어와 관련된 로직 수행에 좋음. 이 단계 에서 데이터 값을 변경하면 무한 루프에 빠질 수 있어 computed, watch와 같은 속성을 사용해야 함. 데이터 값을 갱신하는 로직은 되도록 beforeUpdate에서 다루는 것이 좋음 (mounted와 마찬가지로 $nextTick()을 사용해 변환이 완료된 후에 로직을 추가)
beforeDestroy: 인스턴스 파괴되기 직전에 호출. 아직 인스턴스에 접근 가능. 인스턴스의 데이터를 삭제하기 좋은 단계
destroyed: 인스턴스가 파괴되고 나서 호출. 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들도 모두 파괴됨