반응형 개발/Vue.js21 Vue.js Vuex 알아보기 Vuex vue에서 모든 컴포넌트가 접근 가능한 중앙 집중식 저장소 역할로 데이터 및 상태 관리를 할 수 있는 상태 관리 패턴 라이브러리 데이터를 store에 저장하고, 프로젝트 전체에서 사용할 수 있음 주로 사용자 로그인 정보, 쇼핑몰의 장바구니 정보 등 전역으로 관리되고 참조되어야 하는 정보들에 사용 Vuex Store 옵션 state: 프로젝트 전체에서 공통으로 사용할 변수 정의, state로 관리되는 데이터는 반응형 mutations: state에 정의된 변수를 변경할 수 있는 역할(동기처리), state의 변수를 직접 접근해서 변경은 불가 getters: state 변수의 로직처리 결과를 조회하는 Getter actions: mutations과 비슷한 역할, 여러개의 mutations처리가 가능.. 2022. 4. 8. Vue.js Custom Directive 사용 vue 템플릿에서 많이 사용되는 내장된 디렉티브(ex. v-bind, v-for 등) 외에 사용자가 직접 Custom Directive를 생성해서 사용할 수 있다. Simple 예시 먼저 간단한 샘플코드는 아래와 같다. directives 옵션을 사용해서 focus라는 디렉티브를 선언해주고 input 엘리먼트에서는 v-focus로 사용을 하면 된다. 컴포넌트를 로딩하면 아래와 같이 input에 포커스가 자동으로 적용된다. 전역(Global) 설정 위에 방법은 컴포넌트 내에서 사용가능한 선언 방법이고 전역(Global) 설정을 위해서는 아래와 같이 main.js에 directive("focus", focus)로 선언을 해준다. 앞에 "v-"는 작성 할 필요없다. const focus = { mounted:.. 2022. 4. 4. Vue.js Composition API 알아보기 Composition API 컴포넌트에서 사용하는 특정 기능의 코드를 유연하게 구성할 수 있는 함수 기반의 API Vue3에서 가장 중요한 핵심 기능 [기존]개발 방식은 연관성 있는 로직들이 data, computed, methods 등에 흩어져 있어서 프로젝트 규모가 커질수록 관리, 추적에 어려움 => Composition API의 setup()을 사용하여 관련 코드들을 묶어서 구현할 수 있어서 코드 관리, 추적이 용이 [기존] Mixin을 통한 컴포넌트 기능 재사용 부분도 오버라이딩 문제나 다중 Mixin 상속 시 컴포넌트 관리가 어려워 짐 => Composition API를 통해서도 공통기능 제공 가능 setup() 메소드 - 샘플 코드 {{ count }} {{ countDouble }} Plus.. 2022. 4. 3. Vue.js refs로 자식컴포넌트, html 엘리먼트 접근 refs 자식컴포넌트나 일반적인 html 엘리먼트에 직접 접근 가능(getElimentById, querySelector 등 과 유사) 컴포넌트가 랜더링이 된 이후 적용되기 때문에 반응형으로 구성하기 위한 computed, template 에서 사용 제약 ref 속성과 $refs 키워드를 통해서 사용 ... // $refs를 사용해서 접근 this.$refs.child_component this.$refs.test_input 자식 컴포넌트 샘플 코드 테스트용 자식 컴포넌트 코드를 간단하게 작성한다 Child 클릭 이벤트 버튼 {{ msg }} 부모 컴포넌트 샘플 코드 부모컴포넌트가 mounted 되었을 때 간단히 엘리먼트 정보를 콘솔로 한번 조회하고, input 엘리먼트에 focus를 준다. 그리고 "테.. 2022. 4. 2. Vue.js props 사용 샘플 props 부모컴포넌트에서 자식컴포넌트로 데이터를 전달할 때 사용 자식컴포넌트에서 전달받을 데이터를 "props"로 선언 부모컴포넌트에서 "v-bind:" 또는 ":" 를 사용하여 데이터 전달 // 부모컴포넌트 데이터 전달 // 자식컴포넌트 props 선언 props: { message: String, } 부모 컴포넌트 샘플 코드 자식 컴포넌트 샘플 코드 string: {{ message }} number: {{ number }} bool: {{ bool }} array: {{ array }} user: {{ user.name }}, {{ user.age }} valid: {{ valid }} 테스트 결과 화면 2022. 4. 2. Vue.js Lazy Load(비동기 컴포넌트) 및 prefetch Vue와 같은 SPA에서는 빌드 시 소스 코드가 하나의 파일로 합쳐지는데 이 파일의 크기가 커질수록 화면이 처음 로딩될 때 시간이 그만큼 많이 걸려서 렌더링 속도가 느려진다. 이러한 문제점을 보완하기 위한 방법이 Lazy Loading 인데, 한마디로 필요한 시점에 로딩이 되도록 로딩 시점을 늦추겠다는 의미이다. Lazy Load 리소스를 Component 단위로 분리하여 Component or Router 단위로 필요한 것들만 그때 그때 다운받는 방법 Lazy Load 적용 Lazy Load가 적용될 컴포넌트 impot 시 아래와 같이 /* webpackChunkName: "이름" */ 구문을 추가해준다. 1. Router 단위 적용 - '/about' URL로 이동을 할 경우 about.js(webp.. 2022. 3. 25. Vue.js 웹팩(webpack) 개념 및 설정 Vue CLI를 통해서 프로젝트를 생성하면 webpack 설정이 자동 적용되어 'npm run serve', 'npm run build' 실행 시 webpack 기반으로 동작을 하게된다. vue CLI 2버전까지는 프로젝트 생성 시 웹팩설정 파일인 webpack.config.js 파일 생성되었고, vue CLI 3버전 부터는 vue.config.js를 통해서 좀 더 간단하게 설정하도록 지원을 하고 있다. 먼저 webpack이 뭔지부터 알아본 후 vue.config.js 설정에 대해 알아봐야 이해가 될 것이다. webpack - 최신 프론트엔드 프레임워크(vue, react, angular)에서 모두 권장하는 모듈 번들러 - 위 공식사이트 그림처럼 서로 연관 있는 모듈 간의 관계를 해석하여 정적인 자원(j.. 2022. 3. 24. Vue.js Font Awesome 아이콘 사용 Font Awesome 웹 아이콘 모음 라이브러리 vue에서 사용 시 vue-fontawesome 컴포넌트 사용을 권장하고 있음 아이콘 렌더링 시 SVG + JS메소드를 사용 Font Awesome 설치(NPM) # 1. Core패키지 설치 npm i --save-dev @fortawesome/fontawesome-svg-core # 2. (무료) 아이콘 패키지 설치 npm i --save-dev @fortawesome/free-solid-svg-icons # 3. Vue 컴포넌트 설치 npm i --save-dev @fortawesome/vue-fontawesome 2번의 '아이콘 패키지'는 아래와 같이 무료/유료로 구성되어 있어서 원하는 패키지를 설치하면 된다. Vue 프로젝트 설정 src/main... 2022. 3. 22. 이전 1 2 3 다음 반응형
