개발 일기

라이프사이클이란? 인스턴트나 컴포넌트가 생성되고 사라지기 까지에 몇 단계를 거치게 된다. 이는 미리 정의 되어있으며 우리 눈에 보여지고 사라지기 까지의 단계를 일컫는 말이라고 생각하면 쉽다. 위는 라이프사이클 다이어그램을 뜻한다. 라이프사이클은 크게 4단계로 나누면 1. 인스턴스의 생성 (create) 2. 생성된 인스턴스를 화면에 부착 (mount) 3. 화면에 부착된 인스턴스의 내용 갱신 (update) 4. 인스턴스가 소멸 (destory) 로 분류할 수 있다. 라이프사이클은 위의 4단계의 전후를 합쳐서 총 8개로 되어있다. 8단계의 라이프사이클 설명과 주요 라이프사이클은 예제를 통해서 사용 예시를 보도록하겠다. beforeCreate 먼저 beforeCreate는 인스턴스가 생성되고 나서 가장 처..

컴포넌트로 화면을 구성하게 되면 같은 웹페이지라도 데이터를 공유할 수 없다. 이는 컴포넌트마다 고유한 유효 범위를 갖지 때문이다. 그렇다면 데이터 전달을 하려면 어떻게 해야할까? 상위-하위 컴포넌트 간의 데이터 전달 방법 우선 상위 - 하위 컴포넌트 간의 데이터 전달 방법이다. 상위 -> 하위 로는 props라는 특별한 속성을 전달하고, 하위 -> 상위 로는 기본적으로 이벤트만 전달 가능하다. 상위-하위 컴포넌트 간의 데이터 전달 방법에 대해 설명하기 위해 ParentComponent에 ChildComponent를 등록한 모습이다. Root Instance (main.js) └─ 최상위 컴포넌트 (App.vue) └─ ParentComponent └─ ChildComponent => 현재 컴포넌트 트리 ..

저번글 (2020/12/20 - [Vue] - Vue.js 시작하기 - Vue.js 설치)에서 Vue.js 프로젝트를 하기위해 설치를 하였지만 Vue.js 코딩을 시작하기 위해서 알아야 할 기본적인 것들에 대해 설명을 해보려한다. Instance 모든 Vue 애플리케이션의 필수, Vue 생성자로 인스턴스를 만드는 것부터 시작한다. 인스턴스를 생성할 때는 옵션 객체들을 전달해야하고 이는 사용자가 원하는 동작에 따라 다르다. new Vue({ //옵션들 }) Vue 앱은 new Vue를 통해 만들어진 Root Instance로 구성되고, 중첩이 가능하고 재사용이 가능한 컴포넌트 트리로 구성된다. 우리 프로젝트에 빗대어 표현하자면 이런 모양이 나오겠다. Root Instance (main.js) └─ 최상위 ..