vue
-
[Vue] 3. HOC & MixinVue 2022. 1. 4. 10:06
HOC(Higher-order Component) 컴포넌트의 로직을 재사용하기 위한 기술로 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수 중복된 코드들을 js파일에 넣어 놓고, 라우트의 컴포넌트에 적용 중간 컴포넌트는 하위 컴포넌트를 등록하는 역할만 수행 HOC컴포넌트는 라우트에 따라 변경됨 따라서 사용되지 않는 뷰들은 삭제 Mixin 여러 컴포넌트 간에 공통으로 사용하고 있는 로직(기능)들을 추출하여 재사용 하는 방법 HOC는 컴포넌트의 역할 분리 면에서 유리하지만 컴포넌트의 깊이가 깊어지기 때문에 Mixin 사용 src 하위 폴더로 mixins 만들고 재사용할 로직을 작설할 js파일 만들기 js파일에 재사용할 로직이나 옵션 작성하고 해당 로직이나 옵션을 쓰는 곳에 import Mixins: [ 믹스인..
-
[Vue] Vuex 2. 기술 요소Vue 2021. 12. 17. 18:08
state : 여러 컴포넌트에 공유되는 데이터 data getters : 연산된 state 값을 접근하는 속성 computed mutations : state 값을 변경하는 이벤트 로직 methods actions : 비동기 처리 로직을 선언하는 메서드 async methods state 여러 컴포넌트 간에 공유할 데이터 // Vue data: { message: 'Hello!' } // Vuex state: { message: 'Hello!' } {{ message }} {{ this.$store.state.message }} getters state 값을 접근하는 속성이자 computed( ) 처럼 미리 연산된 값을 접근하는 속성 // store.js state: { num: 10 }, getters..
-
[Vue] Vuex 1. 들어가기Vue 2021. 12. 17. 14:34
들어가기 컴포넌트 관리하는 라이브러리(React에서 사용하는 Redux 같은 것) Vuex의 라이브러리 주요 속성: state(data), getters(computed), mutations(methods), actions(async methods) Vuex를 더 쉽게 코딩할 수 있는 Helper Vuex의 등장 배경 Vuex는 컴포넌트 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리 React의 Flux 패턴에서 기인함 Flux 패턴 : MVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴 (Unidirectional data flow) action : 화면에서 발생하는 이벤트 또는 사용자의 입력 dispatcher : 데이터를 변경하는 방법(메서드) model : 화면에 표시할 데이터 v..
-
[Vue] ES6 for Vue.jsVue 2021. 12. 17. 13:45
Babel 구 버전 브라우저 중에서 ES6 기능을 지원하지 않는 브라우저가 있어서 transpiling 필요 ES6 문법을 각 브라우저의 호환 가능한 ES5로 변환하는 컴파일러 const & let (var 대신 변수 선언법) 블록단위 { } 로 변수 범위 제한 const : 재선언 및 재할당 불가능. 하지만 객체나 배열의 내부는 변경 가능(객체와 배열은 reference data인데 이는 데이터 자체가 아니라 참조 주소가 메모리에 할당되기 때문에) let : 재선언 불가능, 재할당 가능 ES6의 특징 변수의 scope : 블록 { }에 상관없이 스코프 결정됨 Hoisting : JavaScript해석기는 코드의 라인 순서와 상관 없이 함수선언식과 변수를 위한 메모리 공간을 먼저 확보하기 때문에, 함수선..
-
[Vue] Level1 - computed와 watchVue 2021. 12. 16. 14:06
computed 단순히 데이터 값을 가공해서 보여줄 때 사용. watch watch에서 지정한 대상이 변경될때마다 정의한 함수가 실행 됨. 데이터의 변화를 감지하여 바뀔때마다 보여주어야 할 때 사용. 예를 들어 일시 2021.12.16 10:00 을 2021.12.17 오전 10시 로 변경해야 할 때 -> computed (데이터의 포맷만 변경, 다른 데이터의 변경으로 일어나는 일이 아님) 일시 2021.12.16 10:00 을 2021.12.16 10:30 으로 변경해야할 때 -> watch (시간의 데이터가 변함에 따라 바꿔서 보여줘야하기 때문에) computed는 참조하고 있는 값이 변경될 때마다 정의된 계산식에 따라 출력. 즉, 계산된 값을 출력하는 용. watch는 값이 변경될 때 실행되는 함수..
-
[Vue] Level1 - 5. Vue-cliVue 2021. 12. 16. 11:14
세팅순서 VS Code 설치 Git 설치: http://git-scm.com/download/win node.js (버전확인하고)설치: https://nodejs.org/ko/download/ npm 설치: VS Code 터미널에 npm install vue-cli 설치: VS Code 터미널에 npm install -g @vue/cli props 상위 컴포넌트에서 하위 컴포넌트로 data 전달하는 방식. * 개발자툴 수시로 확인 하위 컴포넌트(AppHeader.vue) components 폴더에 컴포넌트 파일 생성하고 < 로 기본 템플릿 작성 인스턴스 속성에 props 작성 //AppHeader.vue(하위 컴포넌트) {{propsdata}} 상위 컴포넌트(App.vue) App.vue에 하위 컴포넌트..
-
[Vue] Level1 - 3. 라우터Vue 2021. 12. 14. 17:18
뷰 라우터 뷰 라이브러리를 이용해 싱글 페이지 앱을 구현할 때 사용. CDN이나 NPM으로 설치. SPA는 여러 화면을 하나의 페이지 안에서 제공하기 때문에 고유식별자(URI)를 기반으로 화면을 렌더링 한다. URI & URL & URN URI(Uniform Resource Identifier): 인터넷에 있는 자원을 나타내는 유일한 주소 URL(Uniform Resource Locator): 컴퓨터 네트워크 상에서 리소의 위치 URN(Uniform Resource Name): 자원이 이름 라우터 등록 라우터 인스턴스 생성 뷰 인스턴스에 라우터 인스턴스 등록 var LoginComponent = { template: 'login' } var MainComponent = { template: 'main' ..