vue.js 개념 정리

vue.js file 구조

- dev.env.js : npm start 시 적용되는 설정파일

- prod.env.js : npm run build 로 배포버전에 적용되는 설정파일

- node_modules : npm으로 설치되는 서드파트 라이브러리 디렉토리

- build : webpack 빌드 설정 디렉토리

- src > components : vue 컴포넌트 모인 파일 > app.vue : 가장 최상위 컴포넌트 > main.js : 가장 먼저 실행되는 스크립트 파일 (vue 인스턴스 생성) Vue 구성

 

1. Vuex

: Virtual DOM 을 관리하는 매니저 역할 개별 요소들의 정보 반영을 체크하고 해당 값들을 업데이트 한다.

(기존 Browser Workflow : 화면을 다시 그릴 때 발생되는 스타일 정보 연산으로 시간이 걸림 Virtual DOM : 화면 계산한 DOM을 가상 DOM에 먼저 적용 후 최종 결과를 실제 DOM으로 전달. (브라우저 내에서의 연산양이 줄어들어 성능개선) )

 

2. Vue Router

: 요청 request 에 따라 전체 DOM을 변경하는게 아니라 변화만 있는 부분의 DOM 만 변경하는 방식. SPA(Single Page Application) 구현 시, 사용자 요청에 따라 해당 컴포넌트에 매핑해 랜더링 결정하는 플러그인.

 

3. Vue-Cli (Vue Command Line Interface)

: Vue 프로젝트 자동 생성/세팅 하는 역할 Webpack을 자동으로 모아 기본세팅을 해준다.

 

 

 

 

 

vue.js 파일구조 설명 : https://k39335.tistory.com/67?category=701079

vue router 설명 : https://k39335.tistory.com/67?category=701079