nc2u Blog

컴포넌트란?컴포넌트(Component)란 조합하여 화면을 구성할 수 있는 블록을 의미한다. 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발 할 수 있으며, 코드를 쉽게 이해하고 재사용할 수 있다. 컴포넌트 등록하기컴포넌트를 등록하는 방법은 전역(Global)과 지역(Local)의 두 가지가 있다. 지역 컴포넌트는 특정 인스턴스에서만 유효하고, 전역 컴포넌트는 모든 범위의 여러 인스턴스에서 공통으로 사용할 수 있다. 전역 컴포넌트 등록전역컴포넌트는 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록한다. 전역 컴포넌트를 모든 인스턴스에 등록하려면 아래와 같은 형식으로 Vue 생성자에서 .component() 를 호출하여 수행하면 된다. Vue.component('컴포..

뷰 인스턴스의 정의와 속성뷰 인스턴스(Instance)는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위이다. 뷰 인스턴스 생성 new Vue({ .. }); 뷰 인스턴스를 사용하기 위해 위 코드와 같은 형식으로 뷰 인스턴스를 생성한다. 아래 예제 코드에서 인스턴스와 관계된 부분을 다시 한 번 살펴보자. {{ message }} 먼저 ‘Hello Vue.js!’ 텍스트를 화면에 표시하기 위해 new Vue()로 뷰 인스턴스를 생성하였다. 그리고 인스턴스 안에 el속성으로 뷰 인스턴스가 그려질 지점을 지정하고, data 속성에 message 값을 정의하여 화면의 {{ message }}에 연결하였다. 그럼 각 요소에 대해 자세히 알아보자. 뷰 인스턴스 생성자new Vue()로 인스턴스를 생성..

뷰 템플릿이란?뷰의 템플릿(Template)은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성이다. 템플릿 속성을 사용하는 방법은 두 가지로, 첫 번째는 ES5에서 뷰 인스턴스의 template 속성을 활용하는 방법이다. 예를 들어 template: Hello {{ message }}와 같은 코드가 템플릿을 의미한다. 여기서 템플릿 속성에 대해 한 가지 알아 둘 특징이 있다. 사용자가 볼 수는 없지만 라이브러리 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render()함수로 변환한다. 두 번째는 싱글 파일 컴포넌트 체계의 코드를 활용하는 방법이다. Hell..