Vue&Vuetify 정리 (feat.gymcoding)
<참고blog>
https://joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/
- Vue
-
Vue Components
화면 영역을 일정한 단위로 쪼개어 재활용가능한 형태로 관리하는 것
new Vue({ el: “#app”, components: { “my-component”: { template: “A custom component!” } } }); -
부모와 자식 컴포넌트 관계
위에서 아래로는 데이터를 내리고 (props)
아래에서 위로는 이벤트를 올린다(event emit)
-
Vue Router
Vue에서 SPA(Single Page Application) 구현 시 사용자 요청 경로에 따라 해당하는 컴포넌트에 매핑하여 렌더링을 결정해주는 플러그인
사용자의 URI Request가 들어오면 서버 즉 백엔드에서 Controller가 그 Request에 해당하는 Response로써 정적 파일(html, css, javascript...)을 보내줌
프론트엔드에서 요청 URI에 따라 전체 새로운 돔을 변경하는 것이 아니라, 브라우저에서 변화가 있는 부분의 돔을 변경하는 방식
중첩라우팅
리다이렉션과 앨리어싱
자동으로 CSS클래스가 활성화되는 링크기능
Vue.js 트랜지션 기능을 이용한 페이지 이동 트랜지션
커스터마이즈된 스크롤링
-
라우트 : URL과 뷰의 정보를 저장한 레코드, 어떤 URL에 대해 어떤 페이지를 표시해야 하는지에 대한 정보, 애플리케이션을 구성하는 페이지마다 라우트를 정의하고 사용할 라우트를 지정하면 해당 라우트가 연결된 페이지로 이동함
Vue Router의 라우트는 Vue.js의 컴포넌트 특정 URL에 대응시킨 객체 형태
이 객체를 라우터 생성자를 사용해 라우터를 초기화할 때 routes 옵션으로 설정함
-
라우트 객체 생성 및 라우트 인스턴스 생성 : route > index.js
-
라우터 인스턴스를 루트 Vue 인스턴스에 전달 : main.js
-
라우터에 사용될 path 작성 : route > index.js
-
router-view와 router-link : App.vue, TestVueGo.vue
라우터 정의와 Vue 인스턴스 생성이 끝났으면 라우팅이 동작할 HTML을 작성해야 함
Vue 인스턴스가 마운트될 요소 외에도 라우트 정의에 사용될 컴포넌트를 실제로 반영시킬 요소가 있어야 함
router-view요소에 이 역할을 맡김
그럼 라우트에서 맵핑된 컴포넌트가 부분에 렌더링이 됨
링크를 표시해서 페이지 이동이 가능하게 하려면 router-link요소를 사용해 링크를 정의함
즉, <router-link to-”URL값”> : 페이지 이동 태그
: 페이지 표시 태그
-
-
vuex 역할
Vue.js의 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리
다른 상태 관리 패턴이나 라이브러리와 비교해봤을 때 뷰의 반응성 체계를 효율적으로 활용하여 화면을 업데이트한다는 차이점이 있음
상태 관리 - 여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한곳에서 관리하는 패턴
MVC 패턴의 구조적 오류 해결해줌 (뷰와 모델이 양방향 통신이 가능하므로 하나의 뷰가 모듈을 변경했을 때 다시 그 모듈이 연관된 뷰들을 갱신하고, 업데이트 된 뷰들이 연관된 모델을 다시 갱신하고 등 엮이고 엮이는 관계를 추적하기가 힘듬, 복잡해질수록 업데이트 루프도 복잡해짐)
-
Vuetify
Vue 기반 UI 프레임워크 (틀을 가지고 일을 함) - 빠르게, 일관성있게, 퀄리티있게 만들 수!
(UI 프레임워크 종류 : Bootstrap, Vuetify, Element UI)
-
Vue CLI
Vue 개발을 편하게 시작할 수 있도록 프로젝트를 구성해주는 도구
폴더구조, lint, build, webpack 설정에 대한 고민 없이 쉽게 프로젝트를 구성할 수 있음
- Vue cli 설치 프로세스
- installation 소스 터미널에 복붙하여 설치
- vue create vuetify-admin-template
- Vue2로 기본설정
- 설치완료 후 cd vuetify-admin-template
- dir로 생성한 프로젝트 확인
- vscode 실행하여 프로젝트 확인
-
Axios
Vue에서 가장 많이 사용하는 HTTP통신 라이브러리
Promise기반이라 코드를 간결하게 작성하기 용이함
-
Vue Template
뷰로 화면을 조작하기 위해 제공되는 문법.
뷰 인스턴스에서 관리하는 데이터를 화면에 연결하는 데이터 바인딩 과/
화면 조작을 편하게 할 수 있는 디렉티브 로 나뉨.
- Data Binding 데이터 바인딩 : {{ }} 사용, 인스턴스의 data, computed, props 속성을 연결할 수 있음.
- Directive 디렉티브 : HTML 태그 속성에 v-접두사 붙인 속성. 화면의 DOM 조작을 쉽게할 수 있는 문법 제공
- Filters : 화면에 표시되는 텍스트의 형식을 편하게 바꿀 수 있도록 고안된 기능
-
Virtual DOM in Vue.js
화면 조작 위한 기반 기술. 화면의 DOM을 추가하거나 삭제하는 등으 ㅣ변경이 일어날 때마다 화면을 다시 그리는 것이 아니라, 자바스크립트 객체로 DOM의 모양을 잡아 놓고 화면의 렌더링 횟수를 최소화하여 브라우저의 부하를 줄임
