요즘 핫한 프런트엔드 프레임워크 중 하나인 vue.js를 접해 볼 수 있는 기회가 회사에서 생겨서 기록과 공부 목적을 위해 글을 작성해봅니다. Angular와 React의 장점들만 가져와서 만들어진 Vue.js! 시작 해보겠습니다.
Vue.js란?
웹 페이지 화면을 개발하기 위한 프런트앤드 프레임워크이다. Vuejs는 다른 프런트엔트 프래임워크보다 배우기 쉽다고 한다.
- 데이터 바인딩과 화면 단위를 컴포넌트 형태로 제공하며, 관련 API를 지원 하든데 궁극적인 목적이 있음.
- Angular에서 지원하는 양방향 데이터 바인딩 제공
- 컴포넌트 간 통신의 기본 틀은 React의 **단반향 데이터 흐름(부모 -> 자식)
- 다른 프런트엔드 프레임워크(React, Angular)와 비교했을 때 상대적으로 가볍고 빠름
reference : 캡틴판교👍
Vue.js 특징
MVVM 패턴
위 그림과 같은 구조로 개발하는 이유는 화면의 요소들을 제어하는 코드와 데이터를 제어하는 로직을 분리하여 코드 관리를 편하게 하기 위함이다.
View : 브라우저에서 사용자에게 보여지는 화면이다.
DOM : HTML에 들어가는 요소 정보들을 담고 있는 곳이다. ex)태그, 클래스, 속성 등
DOM Listener: view에서 사용자가 클릭 혹은 키보드를 이용하여 이벤트를 실행했을때 동작을 실행 시키는 것이다. DOM의 변경 내역에 대해 즉각적으로 반응해서 특정 로직을 수행하는 장치이다.
Model : JavaScript 에 있는 데이터를 바꿔주거나 혹은 자바스크립에 지정했던 특정 로직에서 실행된다. Javascript의 데이터가 변했을때 data bindings를 탄다. 예를 들어 문자열이 바꼇다 숫자가 바끼면 data binding을 통해 화면에 변화를 적용한다.
reference : Vue.js 시작하기 인프런 강의
Jiujitsu_coder