뷰(Vue)/Vue에 관련한 정보와 문법들 (3) 썸네일형 리스트형 뷰 라이프 사이클이란? 속성 설명 Create Vue() 인스턴스의 라이프사이클 중 맨 처음에 실행컴포넌트들이 DOM에 추가되기 전이기 때문에, DOM에 접근하거나 vm.$el을 사용할 수 없음SSR 적용 시 서버 사이드에서도 실행 가능한 단계 beforeCreate 인스턴스 생성 후 가장 처음 실행되는 단계. 이 단계에서는 data 속성과 methods 속성이 아직 인스턴스에 정의되어 있지 않고, 데이터에 대한 관찰 기능 및 이벤트 감시자 설정 전에 (vm.$on, vm.$once, vm.$off 등) 호출되어 돔과 같은 화면 요소에도 접근할 수 없다. created data 속성과 methods 속성이 정의되었기 때문에 this.data 또는 this.fetchData()와 같은 로직들을 이용하여 data 속성과 metho.. 뷰 인스턴스란? 뷰 인스턴스(Instance)는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위이다. 뷰 인스턴스 생성자 new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 한다. Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있다. 생성자를 사용하는 이유는 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 그 기능을 재정의하여 편리하게 사용하도록 하기 위해서이다. 뷰 인스턴스 옵션 속성 뷰 인스턴스 옵션 속성은 인스턴스를 생성할 때, 재정의할 때 data, el, template 등의 속성을 의미한다. 뷰 인스턴스 라이프 사이클 인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클(life cycle) 속성이라고 한다. 각 라이프 사이클 속성에서 실행되는 커스텀 로직.. 렌더링이란? 렌더링이란 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정이다. 브라우저는 서버로부터 HTML 문서를 다운 받는다. 렌더링 엔진은 HTML 문서를 파싱(구문분석)해서 DOM 트리를 만든다. 그 다음, 외부 css 파일과 함께 포함된 스타일 요소를 파싱하여 CSSOM 트리를 만든다. 스타일은 브라우저의 자체 스타일, 사용자 정의 스타일, html 태그에 걸려있는 스타일 순서로 처리되며, 나중에 처리되는 스타일을 따르게 된다. 다음으로, DOM 트리와 CSSOM을 결합하여 렌더링 트리를 형성한다. 렌더링 정리하기 HTML을 파싱하여 DOM 트리를 만든다. CSS를 파싱하여 CSSOM 트리를 만든다. DOM 과 CSSOM 을 결합하여 렌더링 트리를 만든다. 렌더링 트리에서 각 노드의 크기와 위치를 계.. 이전 1 다음
