Vue.js

Vue.js

Vue.js는 프레임워크이자 라이브러리다. 공식 사이트에서는 뷰를 점진적인 프레임워크라고 부르고 있음

• 프레임워크
  일정한 틀과 규칙에 따라 개발하도록 미리 구조를 정해 놓은 도구. 생산성 증가

• 라이브러리
  기술 모음집. 자주 사용되는 기능들 재활용할 수 있도록

Vue.js특징

• MVVM(Model-View-ViewModel)패턴.
  화면을 모델 - 뷰 - 뷰 모델로 구조화하여 개발하는 방식. 구조화 되어있어 코드 직곽적 이해, 추후 유지보수 편함
  View: 사용자 화면. Dom(돔. html문서에 들어가는 요소의 정보를 담고 있는 데이터 트리)
  Model: 데이터를 담는 용기. 보통 서버에서 가져온 데이터를 자바스크립트 객체형태로 저장
  ViewModel: 뷰와 모델의 중간 역역. 돔 리스너(돔의 변경 내역 즉각 반응 후 로직 수행하는 장치)와 데이터 바인딩(뷰에 표시되는 내용과 모델의 데이터 동기화)제공

• 컴포넌트 기반 프레임워크
  왜 컴포넌트 기반? 코드의 재사용이 쉬워서
  컴포넌트: 레고블록과 같은. 잘 쌓으면 원하는 모형을 만들 수 있는 것과 같은.

• 단방향 데이터 바인딩, 양방향 데이터 바인딩
  단방향데이터바인딩: 항상 상위->하위로 데이터전달
  양방향데이터바인딩: 모든 데이터 값 동기화. 한쪽을 바꾸면 다른쪽도 바뀜

뷰 인스턴스

• new생성자 함수로 new Vue({})생성
  필요 기능(객체.속성들의 집합. 추상화:속성을 선택적으로 작성가능하기때문에 )을 생성자에 정의.

  new Vue({
    ...
  }) ->인스턴스

• 뷰 인스턴스 옵션 속성
  template: html,css 등 화면에 표시할 마크업 요소를 정의하는 속성
  methods: 화면의 전반적인 동작과 관련된 로직 추가
  created: 뷰 인스턴스 생성 직후

• 뷰 인스턴스 라이프 사이클
  라이프 사이클(생명주기): 인스턴스 상태에 따라 호출할 수 있는 속성들
  라이플 사이클 훅: 속성들이 커스텀 로직(개발자가 임의로 작성한 추가 로직)에 의해 실행되는것
  라이플사이클은 총 8개이며 4단계로 나눔
  인스턴스 생성 -> 인스턴스를 화면에 부착 -> 인스턴스 내용갱신 -> 인스턴스 소멸
  (인스턴스부착과 갱신구간은 데이터가 변경되는 경우에만 거치게 됨)
  created
  인스턴스 생성 직후기때문에 data와 methods 속성이 정의되서 this.data로 접근 가능. 단, 화면부착전이라 template 속성 접근 할 수 없음
  mounted
  el속성에서 지정한 화면 요소에 인스턴스 부착된직후기때문에 template속성에 접근 가능.
  watch
  뷰의 반응성
  변경 데이터 값과 관련된 로직을 미리 넣을 수 있음. 관찰만 가능
  computed
  데이터 값 변경 가능. 변경 데이터의 화면요소와 관련된 로직

뷰 컴포넌트

화면영역을 컴포넌트화 -> 코드직관적
크리구조(컴퓨터의 자료구조): 노드(부모-자식)

• 컴포넌트 등록하기
  전역컴포넌트: 여러인스턴스 사용가능
  지역컴포넌트: 특정인스턴스만 사용가능(지정한곳이 아닌 다른곳에서 쓰면 html 사용자 정의로 인식)
  둘의 차이점은 유효범위.

뷰 컴포넌트 통신

뷰는 컴포넌트 단위로 구성. 다른 컴포넌트 값을 직접 참조 불가능
왜? 서로 고유한 유효범위(scope)를 갖기 때문에. 이는 뷰 프레임워크 내부적으로 정의된 특징
간접적으로 전달을 해야함
상•하위 컴포넌트 관계
상위컴포넌트 -> 하위컴포넌트: props을 통해 데이터전달
하위컴포넌트 -> 상위컴포넌트: 이벤트 발생

• 상위컴포넌트에서 하위컴포넌트로 데이터 전달하기
  하위컴포넌트에 props: 'props 속성 이름' 정의
  상위컴포넌트에 v-bind: 'props 속성 이름' = "상위컴포넌트의data속성"

• 하위컴포넌트에서 상위컴포넌트로 이벤트 전달하기
  이벤트발생과 수신
  인벤트발생(emit event)시켜 상위컴포넌트의 메서드를 호출
  하위컴포넌트에 이벤트발생(신호보냄): this.$emit('이벤트명')
  상위컴포넌트에 v-on: 이벤트명 = "상위 컴포넌트의 메서드명"

하위에서 상위로 데이터전달방법은 없나? event bus를 이용해 전달가능. 단, 단방향 데이터 흐름에 어긋나는 구현 방법

• 관계없는 컴포넌트 간 통신- event bus
  별개의 새로운 인스턴스 생성 후
  보내는 컴포넌트쪽에서 .$emit('이벤트명,',데이터)
  받는 컴포넌트쪽에서 created구간 .$on('이벤트명', function(데이터받을인자))

단점: 컴포넌트가 많아지면 어디서 어디로 보냈는지 관리가 되지 않기때문에 뷰엑Vuex 상태관리도구 필요

뷰 라우터(Vue Router)

• 라우팅
  라우터를 알기위해선 우선 라우팅을 이해
  라우팅: 웹페이지 간의 이동방법. SPA(Single Page Application. 미리 해당 페이지 받아놓고 화면을 갱신하는 패턴을 적용)에서 주로 사용
  일반적인 웹브라우저 웹페이지 요청은 서버에서 응답받아 다시 사용자에게 돌려주는 시간동안 화면 상에 깜빡거리는 현상이 있음
  이를 라우팅으로 처리하면 화면 매끄럽게전환 가능, 화면을 빠르게 조작할 수 있게되서 사용자 경험 향상

• 뷰 라우터
  라우팅을 구현할 수 있도록 지원하는 공식 라이브러리

태그	설명
<router-link to ="URL값">	페이지 이동 태그. 화면에 <a>로 표시
<router-view>	페이지 표시 태그. 해당 컴포넌트를 뿌려주는 영역

• $mount() API
  el 속성과 동일하게 인스턴스를 화면에 붙이는 역할. 생성된 인스턴스를 $mount()를 이용해 붙임 ex)$mount('#app')

여러 개의 컴포넌트를 동시에 표시할 수 있는 라우터 네스트드 라우터, 네임드 뷰

• 네스티드 라우터 (nested router)

  children: [
    { 
    path: ..., 
    component: ...
    },
    { 
    path: ..., 
    component: ...
    }
  ]

  네스티드 라우터에는 최상위 컴포넌트와 최상위 컴포넌트 하위 컴포넌트에도 router-vuew 가 있다는 점
  화면을 구성하는 컴포넌트의 수가 적을 때 유용하지만 많은 컴포넌트 표시하는데 한계가 있음

• 네임드 뷰 (named view)
  특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식
  name속성을 추가

  componets: {
  default: ...,
  header: ...,
  footer: ...  
  }