<Vue.js> Vue가 뭔데?

라모스·2022년 1월 12일
0

Vue.js

목록 보기
2/3
post-thumbnail

Vue?


// 이미지 출처: 캡틴판교(장기효)님, Vue.js 시작하기 - Age of Vue.js

MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리

// MVVM 패턴에 대한 자세한 내용은 다음 글을 참고하자.

📌 용어 정리

  • 뷰(View): 사용자에게 보이는 화면
  • 돔(DOM): HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리
  • 돔 리스너(DOM Listener): 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
  • 모델(Model): 데이터를 담는 용기. 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장
  • 데이터 바인딩(Data Binding): 뷰(View)에 표시되는 내용과 모델의 데이터를 동기화
  • 뷰 모델(ViewModel): 뷰와 모델의 중간 영역. 돔 리스너와 데이터 바인딩을 제공하는 영역

컴포넌트(component) 기반 프레임워크


리액트, 앵귤러와 마찬가지로 레고 블록 같이 컴포넌트를 조합하여 화면을 구성할 수 있는데, 이 방법은 코드를 재사용하기가 쉽고 빠르게 화면을 제작할 수 있음.

  1. 양방향 데이터 바인딩
    -> 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경됨

  2. 단방향 데이터 흐름
    -> 컴포넌트의 단방향 통신을 의미. (상위 컴포넌트에서 하위 컴포넌트 한 방향으로 데이터를 전달)

  3. 빠른 화면 렌더링을 위해 가상 DOM 렌더링 방식을 적용.
    -> 특점 돔 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신한다.

profile
Step by step goes a long way.

0개의 댓글