패스트캠퍼스 챌린지 39일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online

챌린지 39일 차. 뭐라고라?? 챌린지가... 11일이 남았다고라??

Vue.js 어플리케이션 인스턴스 생성하기

모든 Vue 어플리케이션은 "createApp" 함수를 사용하여 새로운 어플리케이션 인스턴스를 생성하여 시작한다.

const app = Vue.createApp( { /* option */ } )

인스턴스가 생성되면 "mount 메소드"에 컨테이너를 전달하여 mount 할 수 있다.

const app = Vue.createApp({})
app.component('SearchInput', SearchInputComponent)
app.directive('focus', FocusDirective)
app.use(LocalePlugin)

어플리 케이션 인스턴스에 의해 노출된 대부분의 메소드들은 동일한 인스턴스를 반환하여 연결을 허용한다.( 메소드 체이닝, Method Chaining)

Vue.createApp({})
  .component('SearchInput', SearchInputComponent)
  .directive('focus', FocusDirective)
  .use(LocalePlugin)

인스턴스

인스턴스는 일반적으로 실행 중인 임의의 프로세스, 클래스의 현재 생성된 오브젝트를 가리킨다.

최상위(Root) 컴포넌트 ( App.vue)

createApp에 전달된 옵션은 루트 컴포넌트를 구성하는데 사용된다. 이 컴포넌트는 어플리케이션을 mount 할 때, 렌더링의 시작점으로 사용된다.

const RootComponent = { /* options */ }
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

이 때 코드블럭 2번째 줄의 루트 컴포넌트라는 것은 우리가 App.vue를 만들어서 연결한 것과 동일하다. 그래서 우리는 App.vue 파일을 시작하는 컴포넌트로서, 여러가지 확장자를 가지고 있는 파일들(컴포넌트)를 추가적으로 연결하여 사용할 수 있다.

라이프사이클 훅

각 컴포넌트는 생성될 때 일련의 초기화 단계를 거친다. 예를들어 데이터 관찰, 템플릿 컴파일, 인스턴스를 DOM에 마운트, 데이터 변경 시 DOM을 업데이트해야한다. 그 과정에서 라이프사이클 훅이라 불리우는 함수도 실행하여, 사용자가 특정 단계에서 자신의 코드를 추가할 수 있는 기회를 제공한다.

Vue.createApp({
  data() {
    return { count: 1 }
  },
  created() {
    // `this` points to the vm instance
    console.log('count is: ' + this.count) // => "count is: 1"
  }
})