Vue

1. 라우팅(Routing) 라우터(Router)를 알기전 먼저 라우팅(Routing)에 대해서 알아야 합니다. 라우팅(Routing)은 웹 페이지간의 이동 방법을 뜻합니다. 현재 웹 앱 형태 중 하나인 SPA(Single Page Application)에서 주로 사용되고 있습니다. 2. 뷰 라우터(Vue Router) Vue에서 라우팅(Routing)기능을 구현할 수 있도록 지원하는 공식 라이브러리입니다. 뷰 라우터(Vue Router)를 통해 뷰로 만든 페이지를 자유롭게 이동할 수 있습니다. 다음은 뷰 라우터(Vue Router)를 구현할 때 필요한 특수 태그와 기능입니다. 페이지 이동 태그. 화면에서는 로 표시되며 클릭하면 to에 지정한 URL로 이동 페이지 표시 태그. 변경되는 URL에 따라 해당..

1. 컴포넌트(Component)란? 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미합니다. 화면을 여러 영역으로 쪼개서 활용할 수 있는 형태로 관리하게 되면 코드를 다시 사용하기가 훨씬 편리하다는 장점을 가지고 있습니다. 컴포넌트를 등록하는 방법은 전역과 지역의 두 가지가 있습니다. 1) 전역 컴포넌트 Vue.component('컴포넌트 이름', { // 컴포넌트 내용 }); 전역 컴포넌트 등록 형식에는 컴포넌트 이름과 내용이 있습니다. 컴포넌트 이름 : template 속성에서 사용할 HTML 사용자 정의 태그 이름을 의미 컴포넌트 내용 : template, data, methods 등 인스턴스 옵션 속성을 정의 사용 예 전역 컴포넌트가 발생하는 과정 2) 지역 컴포넌트 new Vue({ co..

1. Vue.js LifeCycle Vue 인스턴스나 컴포넌트가 생성되면 거치게 되는 과정이 있는데 이를 라이프 사이클(LifeCycle)이라고 합니다. LifeCycle을 크게 나누면 Instance의 생성, 생성된 Instance를 화면에 부착, 화면에 부착된 Instance의 내용이 갱신, Instance가 제거되는 소멸의 4단계로 나뉜다. 이러한 LifeCycle의 속성에는 총 8가지로 나눠질 수 있지만 여기서는 Created, Mounted, Updated, Destroyed 4가지만 다뤄보겠습니다. Created - Vue Instance가 생성된 후 데이터들의 설정이 완료된 후 호출 - 이단계는 컴포넌트가 돔에 추가되기 전이다. 즉, 화면에 나타나기 전상태이다. - Instance가 화면에 ..

1. Vue.js - MVVM(Moel + View + ViewModel) 패턴을 가진 웹 프론트엔드 프레임워크 - 컴포넌트 기반의 SPA(Single Page Application)를 만들 수 있게 해주는 프레임워크 기존의 방식에서는 자바스크립트로 View에 해당하는 DOM에 접근하거나 Jquery를 이용해 이벤트를 제어하고 데이터를 넘겨주는 방식을 이용해 모델과 View를 직접 연결하는 방식을 이용해왔습니다. 이런 방식들은 자바스크립트에서 모든 역할을 제어하다보니 코드의 길이가 길어질 뿐만 아니라 성능이 떨어질 수 있습니다. 그런 점에 비해 Vue는 view와 Model을 연결하고 자동으로 바인딩이 되기 때문에 양방향 통신이 가능합니다.