반응형

vue.js 6

02-2.2 Vue 컴포넌트 통신

컴포넌트 간의 통신과 유효 범위 - 앵귤러1이나 백본(Backbone.js)과 같은 초창기 자바스크립트 프레임워크에서는 한 화면을 1개의 뷰(View)로 간주 했다. - 따라서 한 화면의 데이터를 해당 화면 영역 어디에서든지 호출 할 수 있다. - 하지만 뷰(Vue.js)의 경우 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없다. - 컴포넌트마다 자체적으로 고유한 유효 범위(Scope)를 갖기 때문이다. 이는 뷰 프레임워크 내부적으로 정의된 특징이다. - 따라서 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수가 없다. 상, 하위 컴포넌트 관계 - 위에서 언급 한 것 처럼, 컴포넌트는 다른 컴포넌트의 값을 직접적으로 참조할 수 없다. - 따라서..

vue.js 2021.08.20

02-2.1 컴포넌트 등록 (전역 컴포넌트, 지역컴포넌트)

컴포넌트 등록하기 - 컴포넌트를 등록하는 방법은 전역과 지역의 두 가지가 있다. - 지역(Local) 컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고, 전역(Global) 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다. - 지역은 특정 범위 내에서만 사용할 수 있고, 전역은 뷰로 접근 가능한 모든 범위에서 사용할 수 있다. 전역 컴포넌트 등록 - 전역 컴포넌트는 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록한다. - 전역 컴포넌트를 모든 인스턴스에 등록하려면 Vue 생성자에서 .component()를 호출하여 수행한다. ex) Vue.component('컴포넌트 이름', { // 컴포넌트 내용 }); - 전역 컴포넌트등록 형식에는 '컴포넌트 이름'과 '컴포넌트 내용'이 ..

vue.js 2021.08.18

02-2 뷰 컴포넌트

컴포넌트 - 컴포넌트(Component)란 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미한다. - 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발 할 수 있다. - 또한 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 다시 사용하기가 훨씬 편리하다. 모든 사람들이 정해진 방식대로 컴포넌트를 등록하거나 사용하게 되므로 남이 작성한 코드를 직관적으로 이해할 수 있다. - 내비게이션 바(navigation bar), 테이블(table), 리스트(list), 인풋 박스(input box) 등과 같은 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리한다. (p.51 그림참고) - 컴포넌트 간의 관계는 뷰에서 화면을 구성하는 데 매우 중요한 역할을..

vue.js 2021.08.15

02-1.1 뷰 라이프사이클

라이프 사이클 단계를 크게 나누면 1. 인스턴스의 생성 2. 생성된 인스턴스를 화면에 부착 3. 화면에 부착된 인스턴스의 내용이 갱신 4. 인스턴스가 제거되는 소멸 위와 같이 4단계로 이루어진다. 그리고 각 단계 사이에 사이클 속성 created, mounted, updated 등이 실행된다. beforeCreated - 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계 - data 속성과 methods 속성이 아직 인스턴스에 정의되어 있지 않고, 곰과 같은 화면 요소에도 접근할 수 없다. created - beforeCreated 라이프 사이클 단계 ㄷ음에 실행되는 단계 - data 속성과 methods 속성이 정의 되었기 때문에 this.data 또는 this.fetchData()와..

vue.js 2021.08.14

02-1 뷰 인스턴스

뷰 인스턴스의 정의와 속성 - 뷰 인스턴스(Instance)는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위이다. 뷰 인스턴스 생성 - Hello Vue! 텍스트를 화면에 표시하기 위해 new Vue()로 뷰 인스턴스를 생성 - 인스턴스 안에 el 속성으로 뷰 인스턴스가 그려질 지점을 지정 - data 속성에 message 값을 정의하여 화면의 {{message}}에 연결 뷰 인스턴스 생성자 - new Vue()로 인스턴스를 생성할 때, Vue를 생성자라고 한다. - Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있다. - 생성자를 사용하는 이유는 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고, 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위함이다. * ..

vue.js 2021.08.14

01 -1 Vue.js 란 무엇인가?

Vue.js - Vue.js(이하 '뷰'로 약칭)는 웹 페이지 화면을 개발하기 위한 프런트엔트 프레임워크이다. ( * 프레임워크 : 개발자들의 개발 생산성을 높이기 위해 일정한 툴과 규칙에 따라 개발하도록 미리 구조를 정의해 놓은 도구) - 기존 HTML, CSS, 자바스크립트 기초만 아는 웹 개발 입문자 및 컴퓨터 비전공자들도 배우기 쉽게 만들어졌다. - 뷰는 화면단 라이브러리이자 프레임워크라고도 볼 수 있다. ( * 라이브러리 : 자주 사용되는 기능들을 모아 재활용 할 수 있도록 정리한 기술 모음집 ) - 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공된다. 즉, 라이브러리 역할 뿐..

vue.js 2021.08.14
반응형