VUE
-
Vue.js - Vue Router (개념 및 구현)IT/Vue.js 2020. 8. 3. 10:22
Vue.js는 그 자체로는 단순한 뷰 계층 라이브러리입니다. 그러므로 여러 페이지로 구성되고 복잡한 사용자 인터랙션을 갖는 애플리케이션 등을 개발할 경우에는 Vue.js만으로는 구현이 어려울 때가 있습니다. 공식 플러그인인 Vue Router를 사용하면 단일 페이지 애플리케이션(SPA)을 비롯한 URL 이동이 필요한 동작을 간단히 구현할 수 있습니다. 1. Vue Router를 이용한 SPA SPA란 최초에 HTML 페이지 하나를 로드한 다음, 그 이후로 사용자 인터랙션에 따라 Ajax로 정보를 받아오면서 동적으로 페이지를 업데이트하는 웹 어플리케이션을 말합니다. 일반적으로 웹 애플리케이션은 페이지 이동 시에 대상 URL을 서버에 요청해 전체 페이지에 해당하는 HTML 콘텐츠를 받아옵니다. 반면, SPA..
-
Vue.js - Vuex getters, mutationsIT/Vue.js 2020. 7. 28. 15:20
1. Getter 란? 중앙 데이터 관리식 구조에서 발생하는 문제점 중 하나는 각 컴포넌트에서 Vuex의 데이터를 접근할 때 중복된 코드를 반복호출 하게 되는 것입니다. 예를들면 아래와 같은 코드가 있습니다. 여러 컴포넌트에서 같은 로직을 비효율적으로 중복 사용하고 있습니다. 이 때, Vuex의 데이터 (state) 변경을 각 컴포넌트에서 수행하는 것이 아니라, Vuex에서 수행하도록 하고 각 컴포넌트에서 수행 로직을 호출하면, 코드 가독성도 올라가고 성능에서도 이점이 생깁니다. 2. Getters 등록 상위 컴포넌트 : TestVueComponent.vue 하위 컴포넌트 : ChildVuex.vue getters를 Vuex에 추가합니다. export default new Vuex.Store({ // ...
-
Vue.js - 전역/지역 컴포넌트 개념 및 생성IT/Vue.js 2020. 7. 20. 14:47
1. 컴포넌트(Component)의 개념 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 됩니다. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트입니다. 경우에 따라 특별한 is 속성으로 확장된 원시 HTML 엘리먼트로 나타날 수도 있습니다. Vue 컴포넌트는 Vue 인스턴스이기도 합니다. 그러므로 모든 옵션 객체를 사용할 수 있습니다. (루트에만 사용하는 옵션은 제외) 그리고 같은 라이프사이클 훅을 사용할 수 있습니다. 위와 같이 Vue.js 공식 홈페이지에는 알려주고 있습니다. 저는 이 그림을 보면서 이해하기가 쉬웠습니다. 위 그림과 같이 하나의 화면을 적절하게 분리하여 (화면 또는 기능) 블록화 하며 여기서 하나하나의 블록이 컴포넌트..
-
Vue.js - Vue CLI 이용하여 프로젝트 생성 및 설정 파일 확인IT/Vue.js 2020. 7. 9. 10:55
1. Vue CLI를 이용하여 프로젝트 생성 명령어 vue init template-name과 project-name은 직접 입력해야 합니다. 여기서 눈여겨봐야 할 것은 template-name 영역입니다. template-name은 6개 중 하나를 입력해야 한다. 옵션 6개는 다음과 같습니다. - webpack : webpack 빌드 도구와 vue-loader를 이용하는 풀옵션으로서, 선택에 따라 linter, router, css 전처리, 테스팅 도구들을 사용할 수 있다. - webpack-simple : webpack 빌드 도구와 vue-loader를 이용하는 옵션으로서, 작은 애플리케이션을 구축하는데 용이하다. - browserify : browserify와 vueify를 이용하는 풀옵션으로서, ..