자기 개발하기

created

• 타입: Function
• 상세:
• 인스턴스가 생성된 후 동기적으로 호출됩니다. 이 단계에서 인스턴스는 data 관찰, computed 속성, methods, watch/이벤트 콜백 등의 설정이 준비되었음을 의미하는 옵션 처리를 완료합니다. 그러나 마운트 단계가 시작되지 않았으며, $el 속성을 사용할 수 없습니다.

beforeMount

• 타입: Function
• 상세:이 훅은 서버측 렌더링 중 호출되지 않습니다.
• 마운트가 시작되기 직전에 호출됩니다. render 함수가 처음으로 호출됩니다..

mounted

• 타입: Function
• 상세:mounted는 모든 자식 컴포넌트가 마운트되었음을 보장하지 않습니다. 전체 화면내용이 렌더링될 때까지 기다리려면, mounted 내에서 vm.$nextTick를 사용합니다:
• 인스턴스가 마운트된 후 호출되며, 여기서 Vue.createApp({}).mount()로 전달된 엘리먼트는 새로 생성된 vm.$el로 대체됩니다. 루트 인스턴스가 문서 내의 엘리먼트에 마운트되어 있으면, mounted가 호출될 때 vm.$el도 문서에 포함(in-document)됩니다.

mounted() { this.$nextTick(function () { // 전체 화면내용이 렌더링된 후에 아래의 코드가 실행됩니다. }) }

beforeUpdate

• 타입: Function
• 상세:초기 렌더링만 서버측에서 수행되기 때문에, 이 훅은 서버측 렌더링 중 호출되지 않습니다.
• DOM이 패치되기 전에 데이터가 변경될 때 호출됩니다. 이 훅은 업데이트 전에 기존 DOM에 접근 (예: 수동으로 추가된 이벤트 리스너를 제거)할 수 있는 좋습니다.

updated

• 타입: Function
• 상세:updated가 호출될 때 컴포넌트의 DOM이 업데이트되므로, 여기에서 DOM의 종속적인 연산(DOM-dependent operations)을 할 수 있습니다. 그러나 대부분의 경우 훅 내부에서 상태를 변경하지 않아야 합니다. 상태 변경에 반응하기 위해, 일반적으로 computed property 속성이나 watcher를 사용하는 것이 더 좋습니다.
• updated는 모든 하위 컴포넌트가 다시 렌더링되었음을 보장하지 않습니다. 전체 화면이 재렌더링 될 때까지 기다리려면, updated 내부에서 vm.$nextTick를 사용합니다
• 데이터가 변경되어 가상 DOM이 다시 렌더링되고 패치된 후에 호출됩니다.

updated() { this.$nextTick(function () { // 전체 화면내용이 다시 렌더링된 후에 아래의 코드가 실행됩니다. }) }

이 훅은 서버측 렌더링 중 호출되지 않습니다

activated

• 타입: Function
• 상세:이 훅은 서버측 렌더링 중 호출되지 않습니다.
• keep-alive 컴포넌트가 활성화될 때 호출됩니다.

deactivated

• 타입: Function
• 상세:이 훅은 서버측 렌더링 중 호출되지 않습니다.
• keep-alive 컴포넌트가 비활성화될 때 호출됩니다.

beforeUnmount

• 타입: Function
• 상세:이 훅은 서버측 렌더링 중 호출되지 않습니다.
• 컴포넌트 인스턴스가 마운트 해제(unmounted) 되기 직전에 호출됩니다. 이 단계에서 인스턴스는 여전히 완전하게 작동합니다.

unmounted

• 타입: Function
• 상세:이 훅은 서버측 렌더링 중 호출되지 않습니다.
• 컴포넌트 인스턴스가 마운트 해제(unmounted)된 후 호출됩니다. 이 훅이 호출되면, 컴포넌트 인스턴스의 모든 디렉티브가 바인딩 해제되고, 모든 이벤트 리스너가 제거되며, 모든 자식 컴포넌트 컴포넌트도 마운트 해제(unmounted)됩니다.

errorCaptured

• 타입: (err: Error, instance: Component, info: string) => ?boolean
• 상세:TIP
  • 기본적으로, 모든 에러는 정의된 경우에 전역 config.errorHandler로 보내지므로, 에러들은 계속 한 곳에서 분석 서비스에 보고될 수 있습니다.
  • 여러 개의 errorCaptured 훅들이 컴포넌트의 상속 체인이나 부모 체인에 존재하면, 모두 동일한 에러로 호출됩니다.
  • errorCaptured 훅 자체에서 에러가 발생하면, 이 에러와 원래 포착된 에러가 모두 전역 config.errorHandler로 보내집니다.
  • errorCaptured 훅은 에러가 더 전파되지 않도록 false를 반환할 수 있습니다. 이는 본질적으로 "이 에러는 처리되었으므로 무시해야 합니다."라는 의미입니다. 이 에러에 대해 어떠한 추가적인 errorCaptured 훅이나 전역 config.errorHandler가 호출되지 않도록 합니다
• 이 훅에서 컴포넌트 상태를 수정할 수 있습니다. 하지만 에러가 포착되었을 때, 템플릿이나 렌더 함수 안에서 다른 내용을 더 이상 실행시키지 않는 조건을 가지는 것이 중요합니다. 그렇지 않다면, 컴포넌트가 무한루프에 빠질 것입니다.
• 에러 전파 규칙
• 자손 컴포넌트의 에러가 포착(capture)될 때 호출됩니다. 이 훅은 세 가지 전달인자(에러 자체(err), 에러를 발생시킨 컴포넌트 인스턴스(instance), 그리고 에러가 포착된 위치에 대한 정보가 들어있는 문자열(info))를 받습니다. 이 훅은 false를 반환하여 에러가 더 전파되지 않도록 할 수 있습니다.

renderTracked

• 타입: (e: DebuggerEvent) => void
• 상세:
• 가상 DOM의 재렌더링이 추적될 때 호출됩니다. 이 훅은 debugger event를 전달인자로 받습니다. 이 이벤트는 어떤 작업이 컴포넌트를 추적했는지와 해당 작업의 대상 객체 및 키를 알려줍니다.
• 사용법:

HTML-

<div id="app"> <button v-on:click="addToCart">Add to cart</button> <p>Cart({{ cart }})</p> </div>

JS - 

const app = Vue.createApp({ data() { return { cart: 0 } }, renderTracked({ key, target, type }) { console.log({ key, target, type }) /* 컴포넌트가 최초로 렌더링될 때 출력됩니다: { key: "cart", target: { cart: 0 }, type: "get" } */ }, methods: { addToCart() { this.cart += 1 } } }) app.mount('#app')

renderTriggered

• 타입: (e: DebuggerEvent) => void
• 상세:
• 가상 돔의 재렌더링이 트리거 될 때 호출됩니다. renderTracked와 유사하게 debugger event를 전달인자로 받습니다. 이 이벤트는 어떤 작업이 재렌더링을 트리거한 작업과 해당 작업의 대상 객체 및 키를 알려줍니다.
• 사용법:

HTML-<div id="app"> <button v-on:click="addToCart">Add to cart</button> <p>Cart({{ cart }})</p> </div>

JS -

const app = Vue.createApp({ data() { return { cart: 0 } }, renderTriggered({ key, target, type }) { console.log({ key, target, type }) }, methods: { addToCart() { this.cart += 1 /* renderTriggered 호출이 발생합니다 { key: "cart", target: { cart: 1 }, type: "set" } */ } } }) app.mount('#app')

공식홈페이지 펌 https://v3.ko.vuejs.org/

Vue.js가 무엇인가요?

Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다.

숙련된 프론트엔드 개발자이고 Vue를 다른 라이브러리/프레임워크와 비교하고 싶다면 다른 프레임워크와의 비교를 확인하십시오.

시작하기

공식 가이드는 HTML, CSS 및 JavaScript에 대한 중간 수준의 지식을 전제로 합니다. 프론트 엔드 개발에 완전히 익숙하지 않다면 첫 번째 단계로 프레임워크를 시작하는 것은 좋은 생각이 아닙니다. 기본을 파악한 다음 다시 해보세요! 다른 프레임워크에 대한 사전 경험이 도움 되지만 필수는 아닙니다.

Vue.js를 시험해 볼 수 있는 가장 쉬운 방법은 JSFiddle Hello World 예제를 사용하는 것입니다. 다른 탭에서 자유롭게 열어 본 후 몇 가지 기본 예제를 따라가십시오. 또는 단순히 index.html 파일을 만들고 Vue를 다음과 같이 포함할 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

설치 페이지에는 Vue 옵션이 추가로 제공됩니다. Node.js 기반 빌드 도구에 아직 익숙하지 않으면 vue-cli로 시작하는 것을 추천하지 않습니다.

선언적 렌더링

Vue.js의 핵심은 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 렌더링하는 것입니다.

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: '안녕하세요 Vue!'
  }
})

우리는 이미 첫 Vue 앱을 만들었습니다! 문자열 템플릿을 렌더링하는 것과 매우 유사하지만 사실 Vue는 더 많은 작업을 합니다. 데이터와 DOM이 연결되어 이제 모든 것이 반응형입니다. 어떻게 알 수 있을까요? 브라우저의 JavaScript 콘솔을 열고 app.message를 다른 값으로 설정해 보십시오. 그에 따라 렌더링 된 예제를 볼 수 있습니다.

텍스트 보간 이외에도 다음과 같은 엘리먼트 속성을 바인딩할 수 있습니다.

<div id="app-2">
  <span v-bind:title="message">
    내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'
  }
})

여기서 우리는 새로운 곳에 다다랐습니다. v-bind 속성은 디렉티브 이라고 합니다. 디렉티브는 Vue에서 제공하는 특수 속성임을 나타내는 v- 접두어가 붙어있으며 사용자가 짐작할 수 있듯 렌더링 된 DOM에 특수한 반응형 동작을 합니다. 기본적으로 “이 요소의 title 속성을 Vue 인스턴스의 message 속성으로 최신 상태를 유지 합니다.”

JavaScript 콘솔을 다시 열고 app2.message = '새로운 메시지'라고 입력하면 HTML(이 경우에 title 속성)이 업데이트되었음을 다시 한번 확인할 수 있습니다.

조건문과 반복문

엘리먼트의 존재 여부를 토글하는 것은 아주 간단합니다.

<div id="app-3">
  <p v-if="seen">이제 나를 볼 수 있어요</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

계속해서, app3.seen = false를 콘솔에 입력하세요. 메시지가 사라지는 것을 확인해야 합니다.

이 예제는 텍스트와 속성뿐 아니라 DOM의 구조에도 데이터를 바인딩 할 수 있음을 보여줍니다. 또한 Vue 엘리먼트가 Vue에 삽입/갱신/제거될 때 자동으로 트랜지션 효과를 적용할 수 있는 강력한 시스템을 제공합니다.

몇가지 디렉티브가 있습니다. 각 디렉티브마다 고유한 기능이 있습니다. 예를 들어 v-for디렉티브는 배열의 데이터를 사용해 항목 목록을 표시하는데 사용할 수 있습니다.

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'JavaScript 배우기' },
      { text: 'Vue 배우기' },
      { text: '무언가 멋진 것을 만들기' }
    ]
  }
})

콘솔에서, app4.todos.push({ text: 'New item' })을 입력하십시오. 목록에 새 항목이 추가되어야 합니다.

사용자 입력 핸들링

사용자가 앱과 상호 작용할 수 있게 하기 위해 우리는v-on 디렉티브를 사용하여 Vue 인스턴스에 메소드를 호출하는 이벤트 리스너를 첨부 할 수 있습니다 :

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">메시지 뒤집기</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: '안녕하세요! Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

이 메소드에서 우리는 단순히 DOM을 건드리지 않고 앱의 상태를 업데이트 합니다. 모든 DOM 조작은 Vue에 의해 처리되며 작성한 코드는 기본 로직에만 초점을 맞춥니다.

Vue는 또한 양식에 대한 입력과 앱 상태를 양방향으로 바인딩하는 v-model 디렉티브를 제공합니다.

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: '안녕하세요 Vue!'
  }
})

컴포넌트를 사용한 작성방법

컴포넌트 시스템은 Vue의 또 다른 중요한 개념입니다. 이는 작고 그 자체로 제 기능을 하며 재사용할 수 있는 컴포넌트로 구성된 대규모 응용 프로그램을 구축할 수 있게 해주는 추상적 개념입니다. 생각해보면 거의 모든 유형의 응용 프로그램 인터페이스를 컴포넌트 트리로 추상화할 수 있습니다.

Vue에서, 컴포넌트는 본질적으로 미리 정의된 옵션을 가진 Vue 인스턴스 입니다. Vue에서 컴포넌트를 등록하는 방법은 간단합니다.

// todo-item 이름을 가진 컴포넌트를 정의합니다
Vue.component('todo-item', {
  template: '<li>할일 항목 하나입니다.</li>'
})

이제 다른 컴포넌트의 템플릿에서 이 컴포넌트를 사용할 수 있습니다.

<ol>
  <!-- todo-item 컴포넌트의 인스턴스 만들기 -->
  <todo-item></todo-item>
</ol>

그러나 이는 모든 할 일 인스턴스에 똑같은 내용을 렌더링할 것입니다. 이래서는 무언가가 부족합니다. 부모 영역의 데이터를 자식 컴포넌트에 집어넣을 수 있어야겠습니다. prop을 전달받을 수 있도록 할 일 컴포넌트의 정의를 수정해봅시다.

Vue.component('todo-item', {
  // 이제 todo-item 컴포넌트는 "prop" 이라고 하는
  // 사용자 정의 속성 같은 것을 입력받을 수 있습니다.
  // 이 prop은 todo라는 이름으로 정의했습니다.
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

이제 이 todo를 v-bind를 사용하여 각각의 반복되는 컴포넌트에 전달할 수 있습니다.

<div id="app-7">
  <ol>
    <!-- 
      이제 각 todo-item 에 todo 객체를 제공합니다.
      화면에 나오므로, 각 항목의 컨텐츠는 동적으로 바뀔 수 있습니다. 
      또한 각 구성 요소에 "키"를 제공해야합니다 (나중에 설명 됨).
     -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

이것은 인위적으로 만든 예시이지만, 우리는 앱을 두 개의 더 작은 단위로 나눌 수 있었고, 자식을 props 인터페이스를 통하여 부모로부터 합리적인 수준으로 분리할 수 있었습니다. 이제 앞으로는 부모 앱에 영향을 주지 않으면서 <todo-item> 컴포넌트를 더 복잡한 템플릿과 로직으로 더욱 향상시킬 수 있을 것입니다.

대규모 응용 프로그램에서는 개발 과정을 관리할 수 있는 수준 하에 두기 위해 전체 앱을 컴포넌트로 나누는 것이 필수적입니다. 나중에 이 가이드에서 컴포넌트에 대해 더 많은 이야기를 나누겠습니다. 하지만 여기서는 컴포넌트를 사용한 앱의 모습이 어떻게 구성될지에 대한 (상상의) 예를 제시하겠습니다.

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

사용자 정의 엘리먼트와의 관계

Vue 컴포넌트는 Web Components Spec의 일부인 사용자 지정 엘리먼트 와 매우 유사하다는 것을 눈치 챘을 수 있습니다. Vue의 컴포넌트 구문은 스펙 이후 느슨하게 모델링 되었기 때문입니다. 예를 들어 Vue 컴포넌트는 Slot API와 is 특수 속성을 구현합니다. 그러나 몇가지 중요한 차이가 있습니다.

1. Web Components Spec은 여전히 초안이며 모든 브라우저에서 기본적으로 구현되지 않습니다. 이에 비해 Vue 컴포넌트는 지원되는 모든 브라우저 (IE 9 이상)에서 폴리필을 필요로 하지 않으며 일관되게 작동합니다. 필요한 경우 Vue 컴포넌트는 기본 사용자 정의 엘리먼트 내에 래핑할 수 있습니다.

2. Vue 컴포넌트는 일반 사용자 정의 엘리먼트에서 사용할 수 없는 중요한 기능을 제공합니다. 특히 컴포넌트 데이터 흐름, 사용자 지정 이벤트 통신 및 빌드 도구 통합이 중요합니다.

더 해야할 것은 무엇인가요?

우리는 Vue.js 코어의 가장 기본적인 기능을 간략하게 소개했습니다. 이 가이드의 나머지 부분에서 더 자세한 세부 내용이 포함된 다른 고급 기능에 대해 다룰 예정이므로 꼭 읽어보시기 바랍니다.

출처 :  https://kr.vuejs.org/v2/guide/index.html

문제시 삭제하겠습니다.