Vue js 기본 개념

2022. 5. 11. 09:48

Vue js

웹 개발을 단순화하고 사용자 인터페이스 개발을 위해 탄생한 자바스크립트 프론트엔드 프레임워크.

Javascript기반의 라이브러리/프레임워크인 React의 데이터 바인딩과 Angular의 가상 DOM 동작 등의 장점들을 모두 반영.

특히, Vue js는 View와 Model 간 단방향 데이터 바인딩을 지원하는 React와 다르게 양방향 데이터 바인딩을 지원함.

Vue의 특징

MVVM패턴(Model View View Model): Front-end와 Back-end 로직을 분리하여 코드를 구성하는 디자인 패턴
- 사용자에게 보이는 View와 화면 요소의 로직을 제어하는 Model을 분리하여 개발함으로써 효율성을 높임.
- View model이란 View를 추상화한 개념으로 실제 논리 및 데이터 흐름을 담당.(→ 돔 리스너와 데이터 바인딩)
- 돔(Dom) : html 문서에 들어가는 요소(tag, class, attributes..)의 정보를 담고있는 데이터 트리로써, 웹 페이지에 대한 인터페이스를 의미함.
- 돔 리스너(DOM Listener) : 돔 변경 내역에 따라 즉각 반영하여 로직 수행
가상 Dom 랜더링: 실제 DOM을 추상화하여 변화가 많은 View를 DOM에서 직접 처리하지 않고 가상DOM을 생성하여 메모리에서 처리 후 실제 DOM과 동기화
- 기존의 웹앱에서는 자바스크립트로 DOM을 조작할 때마다 상태 변경이 발생하지 않은 부분까지도 렌더링이 발생하여 성능 저하를 일으킴.
- Vue js에서는 상태 변경이 발생한 부분을 가상 DOM에서 수정하고, 메인 DOM과 비교해서 변경된 부분만 적용하여 랜더링 횟수를 최소화 함 → 성능 부하가 줄고 빠른 동작
양방향 데이터 바인딩: 뷰와 모델을 하나로 연결하여 어느 한 쪽에서 변경 사항이 생기면 다른 한쪽도 동기화시켜 양쪽 모두에 반영
- 코드의 길이를 줄고 유지 보수가 용이
- 이벤트 처리를 위한 별도의 로직 불필요
컴포넌트 기반 Framework: 화면 구성을 위한 기능을 작은 단위 요소들로 구성하여 개발
- 화면의 구조를 직관적으로 파악할 수 있음.
- 코드 재사용 및 가독성이 좋아짐.
SPA: SPA(Single Page Application)방식으로 웹 사이트를 개발하여 웹 사이트 최초 접속 시 서버로부터 모든 웹 자원(HTML, css, image ..)들을 받아 온 뒤 로딩을 하게 됨.

개발 환경 구성

Vue CLI설치: 터미널에 npm install -g @vue/cli 입력
프로젝트 생성: vue create project_name (vue 3버전 설치)
프로젝트 실행: cd project_name → npm run serve(서버가 시작되며 http://localhost:8080으로 실행됨)
Vue Router설정
- SPA의 경우 페이지를 이동할 때 마다 서버에 요청해서 페이지를 갱신하는 것이 아닌 미리 구성해놓은 페이지를 라우팅을 이용하여 화면을 갱신.
- Vue JS에서 라우팅은 클라이언트에서 url 주소에 따라 페이지가 전환되는 개념으로, vue-router를 설치하여 라우팅을 구현.
- Vue Router 설치 및 Default 설정: 터미널에서 vue add router 입력→ src폴더에 router, views 폴더/파일이 생성됨.
- 생성된 Router폴더의 index.js 파일에서 라우팅 설정할 페이지 설정
- Path: 브라우저에서 접속하는 url주소
- name: 라우트 설정 이름
- component: 지정된 Path로 접속했을 때 보여줄 vue 컴포넌트(구현할 vue 파일)
- component 파일 import 시 2, 8번 째 라인 or 16번 째 라인 처럼 구성할 수 있음
- 코드 설명