vue.js (3) 썸네일형 리스트형 뷰 컴포넌트 컴포넌트란? 컴포넌트란 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미합니다. 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있다. 이렇게 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 다시 사용하기가 훨씬 편리하다. 또한 모든 사람들이 정해진 방식대로 컴포넌트를 등록하거나 사용하게 되므로 남이 작성한 코드를 직관적으로 이해할 수 있다. 컴포넌트 등록하기 컴포넌트를 등록하는 방법은 전여고가 지역의 두 가지가 있다. 지역(Local) 컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고, 전역(Global) 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다. 더 쉽게 말하자면 지역은 특정 범위 내에서만 사용할 수 있고, 전역은 뷰.. 뷰 인스턴스 뷰 인스턴스(Instance)는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본단위이다. 뷰 인스턴스 생성 뷰 인스턴스를 사용하기 위해 new Vue({ ... }); 위 코드랑 같은 형식으로 뷰 인스턴스를 생성한다. {{ message }} 먼저 "hello vue.js!" 텍스트를 화면에 표시하기 위해 new Vue()로 뷰 인스턴스를 생성하였다. 그리고 인스턴스 안에 el 속성으로 뷰 인스턴스가 그려질 지점을 지정하고, data 속성에 message 값을 정의하여 화면의 {{ message }}에 연결하였다. 그럼 각 요소에 대해 자세히 알아보자. 뷰 인스턴스 생성자 new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 한다. Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수.. Vue.js의 특징 UI 화면단 라이브러리 뷰(Vue.js)는 UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델(ViewModel)에 해당하는 화면단 라이브러리이다. MVVM 패턴이란 화면을 모델(Model) - 뷰(View) - 뷰 모델(ViewModel)로 구조화하여 개발하는 방식을 의미한다. 이러한 방식으로 개발하는 이유는 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해할 수 있고, 추후 유지 보수가 편해지기 때문이다. 좀 더 쉽게 이해하기 위해 용어를 하나하나 살펴보자. 뷰(View) : 사용자에게 보이는 화면 돔(DOM) : HTML 문서에 들어가는 요소(태그, 클래스, 속성)의 정보를 담고 있는 데이터 트리 돔 리스너(DOM Listener) : 돔의 변경 내역에 대.. 이전 1 다음