뷰 템플릿 뷰의 템플릿은 HTML, CSS 등 의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성이다. 라이브러리 내부적으로 template 속성에서 정의한 마크업과 뷰 테이너를 가상 돔 기반의 render() 함수로 변환한다. 변환된 render() 함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역할을하고, 변환 과정에서 뷰의 반응성이 화면에 더해진다. 템플릿 속성을 사용하는 첫 번째 방법은 template 속성을 활용한 방법이다. 지금까지 예제로 사용했다. 두 번째는 싱글 파일 컴포넌트 체계의 코드를 활용하는 방법이다. // 1 new Vue({ ... template: ` Hello Vue.js! ` })..
뷰 라우터 라우팅 라우팅은 웹 페이지간의 이동방법을 말한다. 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(Single Page Application, SPA)에 주로 사용된다. 라우팅을 이용하면 화면이 매끄럽게 전환되어 사용자 경험을 상승시킬 수 있다. 프론트엔드 프레임워크(뷰, 리액트 등)를 사용하거나, 순수 자바스크립트의 라이브러리(router.js 등)를 이용하여 라우팅을 통한 페이지 이동이 가능하다. 싱글 페이지 애플리케이션 페이지를 이동할 때마다 웹 페이지를 요청하여 새로 갱신하는 것이 아니라, 미리 해당 페이지르 받아놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 애플리케이션 뷰 라우터 뷰 라우터는 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공..
[Vue.js] 뷰 인스턴스와 컴포넌트
뷰 인스턴스 뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본단위이다. 1. 뷰 인스턴스 생성 new Vue()로 뷰 인스턴스를 생성한다. 인스턴스 내부 el 속성으로 뷰 인스턴스가 그려질 지점을 지정 data 속성에 message 값을 정의하여 {{ message }}에 연결 Vue를 생성자라고한다. Vue 생성자는 뷰 라이브러리를 로딩하고나면 접근할 수 있다. 뷰로 개발할 때 필요한 기능들을생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하기위해 생성자를 사용한다. 2. 뷰 인스턴스 옵션 속성 뷰 인스턴스 속성은 인스턴스를 생성할 때 재정의할 el, data, template 등의 속성을 의미한다. 3. 뷰 인스턴스 유효 범위 뷰 인스턴스를 생성하면 HTML..
[Vue.js] Vue.js 소개
Vue.js란 무엇인가? Vue.js란? Vue.js는 웹 페이지 화면을 개발하기위한 프론트엔드 프레임 워크이다. 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원한다. 하지만 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공한다. 즉, 라이브러리 뿐 아니라 프레임 워크의 역할도 수행할 수 있다는 것이다. 따라서 뷰를 점진적 프레임워크(Progressive framework)라고 한다. Vue의 특징 1. MVVM 패턴의 뷰 모델 - View: 사용자에게 보이는 화면 - DOM: HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리 - DOM Listener: 돔의 변경 내역에 대해 즉각적으로 반응하여 특정..