📚 Vue.js

---

📕 현대적 웹 프레임워크의 정립

정립 과정

• MVVM 패턴의 등장 : 화면과 데이터의 분리, 템플릿과 데이터의 변화를 통해 화면을 제어한다.
• SPA (Single Page Application) 가 대중화 되었다.
• 모듈화와 빌드 도구가 등장하였다.
• 컴포넌트 기반 개발이 등장하였다.
• 현대 프레임워크가 정립되었다.

MVVM에서 컴포넌트로의 진화

• MVVM 패턴을 통해 개발이 훨씬 간단해지고 규모가 커졌다.
• 대규모 서비스 개발 과정에서 UI들이 반복적으로 나타나는 것 발견하였다.
• 화면과 기능이 결합되어 반복적으로 등장하는 UI 형태를 재사용하고자 하는 요구가 발생하게 되었다.
• 별도의 재사용 가능한 컴포넌트로 만들어 조립해서 개발하는 방식이 등장하였다.

---

📗 Vue.js 소개

등장 배경

• knockout.js, angular.js 등의 프레임워크들의 발전을 바탕으로 등장하게 되었다.
• 더 직관적이고 간소화된 현대적 MVVM 프레임워크 개념으로 정립되었다.

---

📘 Vue.js 핵심 개념

Directive

• 지시어를 분리하여 독립적이고 간결한 지시어로 작성한다. (knockout의 data-bind)
  • Text Binding :
    {{message}}
  • Attribute Binding : <div :id=””>,<img :src=””>
  • Event Listener : <div @click=””>

양방향 바인딩

• value의 변화에 model의 값을 변경, model 값의 변경에 따라 Control의 value값을 변경하는 기능이다.
  • <input v-model=”data”/>

구조 변화

• 조건부 렌더링 : 조건이 되었을 때만 보이는 지시자, 주로 템플릿과 사용한다.
  • <template v-if=”cond”>
• 리스트 렌더링 : foreach와 유사, 목록형 컨텐츠 생성하는 지시자이다.
  • <template v-for=”todo in todos”>

모델의 변화

• computed : 기존 모델 데이터로부터 유도되는 값을 만드는 기능이다.
• watch : 기존 모델의 값이 변경될 때 마다 처리할 수 있는 기능이다.

컴포넌트

• component : 화면의 기능이 결합된 재사용 가능한 UI 조각이다.
• props : 컴포넌트에 필요한 데이터를 전달하기 위한 방법이다.
• Emit : 자식 컴포넌트에서 부모 컴포넌트로 이벤트를 전달하는 방법이다.
• Slot : 컴포넌트의 빈 부분을 외부에서 채울 수 있도록 제공하는 기능이다.

컴포넌트 생명주기와 템플릿

• mounted, unMounted, beforeCreate, created, beforeMount…
• ref : DOM 엘리먼트에 직접 접근하기 위한 지시어이다.

---