Vue_TIL #1 MVVM 패턴, 인스턴스와 컴포넌트

📘 교재

👀 Vue.js?

• SPA(Single Page Application) 개발을 위한 JAVASCRIPT 프레임워크

• Vue는 MVVM 패턴을 이용하는 프레임워크이며, 이 중 View만을 위한 Model인 VM(ViewModel)에 집중

• 뷰View 는 사용자에게 보여지는 브라우저 화면(html) 을 의미
  ➡️ DOM을 통해 자바스크립트를 조작

• ViewModel에 해당하는 뷰Vue 인스턴스는 DOM Listners(이벤트 핸들링) / Data Bindings(데이터 변환)를 통해 자바스크립트 코드를 실행하고 화면 View에 반영

---

💡 Vue.js 사용하기

📌 데이터가 변경될 때, 그 값을 적용하기

📘 참고자료

• 자바스크립트 내장 메서드
  • Object.defineProperty() : 객체의 동작을 재정의하는 메서드

   	Object.defineProperty(대상 객체, 객체의 속성, { 새로 정의 또는 수정하려는 속성, get : , set : })

📌 Reactivity ➡️ 데이터 바인딩 구현

⭐️ Reactivity, 반응성

• Vue를 사용하면 변경된 데이터를 화면에 적용해주기가 용이하다.

• Reactivity 코드 라이브러리화 하기

  📘 즉시 실행 함수 표현
  (IIFE, Immediately Invoked Function Expression)

  📘 참고자료

---

📌 인스턴스 생성하기

• new Vue() -> 생성자 함수로 인스턴스를 만든다.
• 미리 정의되어 있는 속성과 메서드(API)들이 있기 때문에 이 기능들을 이용(재사용)하여 화면을 개발

new Vue({
  el: ,
  template: ,
  data: ,
  methods: ,
  created: ,
  watch: ,
});

• el : 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그)
• template : 화면에 표시할 요소 (HTML, CSS 등)
• data : 뷰의 반응성(Reactivity)이 반영된 데이터 속성
• methods : 화면의 동작과 이벤트 로직을 제어하는 메서드
• created : 뷰의 라이프 사이클과 관련된 속성
• watch : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성

• 인스턴스 안에 들어가는 객체는 따로 변수로 지정하지 않고 리터럴 형식으로 바로 값을 대입해주는 것이 가독성이 높다.

• 인스턴스를 생성하면 Root 컴포넌트가 된다.
  ( crome extenstion - Vue Devtool 화면 )

  

📌 컴포넌트 생성하기

• vue를 사용해 화면의 영역을 나누어 개발할 수 있다.

• 전역 / 지역 컴포넌트를 만들 수 있는데, 실무에서 전역은 거의 사용하지 않는다(⭐️ 지역 컴포넌트로 만들었을 때 하위 컴포넌트 조회가 가능).

• 전역 컴포넌트는 플러그인, 라이브러리 등 전역에서 사용이 필요할 때만 만든다.

• 지역 컴포넌트 등록하기
  ⭐️ 속성 이름이 components! s 붙이는 것 주의 ( 보통 여러 개의 컴포넌트를 만들기 때문 )

      new Vue({
          el: '#app',
          //지역 컴포넌트 등록
          components: {
           // '컴포넌트 이름': 컴포넌트 내용,
          'app-footer' : {
              template: '<footer>footer</footer>'
          }
          }
      })

📌 컴포넌트와 인스턴스

• 💡 배경지식으로 알고 있기 : 전역 컴포넌트는 인스턴스를 생성할 때마다 자동으로 등록이 되어있고, 지역 컴포넌트는 새로 등록해줘야함
  (콘솔 에러메세지 캡처 -지역 컴포넌트로 만든 app-footer)
  

• 그러나 앞서 말했듯 실제 서비스를 개발할 때는 인스턴스는 하나를 생성하고 그 안에서 컴포넌트를 더해나가는 식으로 진행된다!