반응형 VueJS57 [VueJS] 뷰 라우터(Vue Router) 라이프사이클(LifeCycle) (ft. Navigation Guards) Vue Router LifeCycle 뷰 라우터 라이프사이클 이라고는 했지만 결국에는 뷰 라우터의 내비게이션 가드(Navigation Guards)의 흐름이라고 생각하면 된다. 공식문서에서 안내하고 있는 전체적인 흐름은 다음과 같다. Navigation triggered. Call beforeRouteLeave guards in deactivated components. Call global beforeEach guards. Call beforeRouteUpdate guards in reused components. Call beforeEnter in route configs. Resolve async route components. Call beforeRouteEnter in activated comp.. 2022. 11. 3. [VueJS] 리스트 렌더링(v-for) 에서 key를 사용하는 이유 v-for에서 key를 사용하는 이유는 뭘까? 우선 key의 역할은 반복되는 내용을 하나로 관리하기 위해 사용되는 유니크한 값이다. 그 유니크한 값이 새 노드 목록을 이전 목록과 비교하기 위한 힌트로 제공된다. 좀 더 자세히 알아보기 위해 공식문서에서의 설명을 한번 살펴보자. Vue가 v-for로 렌더링 된 요소 목록을 업데이트할 때 기본적으로 "in-place patch" 전략을 사용합니다. 데이터 항목의 순서가 변경된 경우 항목의 순서와 일치하도록 DOM 요소를 이동하는 대신 Vue는 각 요소를 제자리에 패치하고 특정 인덱스에서 렌더링 되어야 하는 항목을 반영하는지 확인합니다. 이 기본 모드는 효율적이지만 목록 렌더링 출력이 하위 구성 요소 상태 또는 임시 DOM 상태(예: 양식 입력 값)에 의존하지.. 2022. 10. 26. [VueJS] Pinia 특정 Store의 상태(State) 초기화 하기 ($reset) 특정 Store State Reset vuex에서 특정 Store의 상태를 초기화하기 위해서는 말 그대로 초기 상태의 객체를 가지고 덮어 씌우는 작업을 하는 방법이 존재했다.(예를 들어 lodash의 cloneDeep 사용) 그러나 특이하게도 Pinia에서는 특정 Store State의 Reset 메서드를 제공해주고 있다. Pinia에서는 Store를 정의하는 방법이 두가지가 존재하는데, 각각의 방법에 따라 Reset 방법에 대해 알아보자. Option Stores (Object Syntax) Options API, Vuex 에서 사용하는 방식과 동일한 구조의 Option Stores 방식부터 알아보자. export const useCounterStore = defineStore('counter', { .. 2022. 10. 4. [VueJS] Pinia Store 기본 사용법 (ft. storeToRefs) Store 기본 사용법 공식문서를 통해 store 기본 사용법에 대해 알아보자. (*이 글은 Composition API 위주로 작성되었다.) 사용법을 익히기 전에 설치가 안되어 있다면 아래 링크를 통해 설치와 설정부터 해주고 오도록 하자. https://mine-it-record.tistory.com/639 [VueJS] 상태 관리자 Pinia란? (ft. 설치 및 설정) Pinia란? Pinia는 Composition API를 기반으로 동작하는 상태 관리자이다. 일반적으로 Vue3와 Composition API 환경에서 사용하기 용이하며, Vue 2.x 버전에서 사용할 경우 Composition API를 따로 설치해서 적용.. mine-it-record.tistory.com 스토어 정의하기 impor.. 2022. 9. 30. [VueJS] Vue3 - setup() 과 <script setup>의 차이 Vue3에서의 Composition API와 setup Vue3의 등장 예고와 함께 사용되어진 Composition API, Vue2.7 버전 미만을 사용할 경우에는 따로 플러그인을 설치해서 사용할 수 있으며, Vue2.7 이상부터는 Vue3처럼 Composition API를 사용할 수 있다. 이 Composition API의 등장과 함께 setup 함수가 등장하였다. 이 setup함수를 사용하여 반응형 데이터를 만들고, 라이프 사이클을 제어하는 등 Vue2 버전에서부터 사용되어 왔던 optioins api에서 사용했던 그 모든것을 Composition API에서는 setup함수 안에서 처리해준다. 그런데 여기서 공식문서를 살펴보면 Composition API의 setup함수가 있고, setup()은 p.. 2022. 9. 28. [VueJS] 상태 관리자 Pinia란? (ft. 설치 및 설정) Pinia란? Pinia는 Composition API를 기반으로 동작하는 상태 관리자이다. 일반적으로 Vue3와 Composition API 환경에서 사용하기 용이하며, Vue 2.x 버전에서 사용할 경우 Composition API를 따로 설치해서 적용해야 한다. Vue에서 가장 보편적으로 사용했던 상태 관리자는 Vuex인데, Vue의 창시자 Even You가 Vuex가 아닌 Pinia를 추천하는 상태 관리자로 공표하였다. 하지만 그렇다고 Vuex가 사라지는 게 아니라 Pinia와 Vuex 5.x는 사실상 완전 동일한 프로젝트로 생각해야 한다고 한다. 이는 현재 Vuex 4.x 버전이나 추후에는 Pinia와 Vuex 5.x 두 프로젝트를 하나로 합치거나 아주 쉽게 이동할 수 있도록 지원할 것이라고 한.. 2022. 9. 28. [VueJS] (Vue 3) - Vuex 타입 추론 설정하기 본문을 시작하기에 앞 서 아래 링크를 통해 우선 Vuex에서 Typesciprt를 사용하는 방법에 대해 알아온 다음에 이 게시글을 보도록 하자 (아래 게시글을 토대로 작성하였다.) * [VueJS] (Vue 3) - Vuex를 Typescript로 사용하기 [VueJS] (Vue 3) - Vuex를 Typescript로 사용하기 본 글은 vue-cli로 생성한 vue 프로젝트 기준으로 작성하였으며, vuex를 잘 모르겠다면 아래 글을 참고하자. * [VueJS] Vuex 사용하기 (1) - 설치, 세팅 및 기본 사용법 (ft. Composition API) * [Vue.. mine-it-record.tistory.com 일단 서론부터 시작하자면 Vuex에서 Typescript를 사용하게 된다면 별다른 설.. 2022. 7. 14. [VueJS] (Vue 3) - Vuex를 Typescript로 사용하기 본 글은 vue-cli로 생성한 vue 프로젝트 기준으로 작성하였으며, vuex를 잘 모르겠다면 아래 글을 참고하자. * [VueJS] Vuex 사용하기 (1) - 설치, 세팅 및 기본 사용법 (ft. Composition API) * [VueJS] Vuex 사용하기 (2) - 기능 상세 설명 및 다양한 사용법 (ft. Composition API) store/index.ts 보통 vue-cli를 통해 프로젝트를 생성하게 되면 index.ts가 기본적으로 생성이 되어있을 텐데, 타입 스크립트를 사용할 때는 index.ts의 경우에는 모든 타입들과, 각각의 저장소들을 한 곳에 모아주는 역할만 담당한다. import { createStore } from "vuex"; import { CreateState, .. 2022. 6. 17. [VueJS] (Vue 3 + TypeScript) - 설정 및 컴포넌트 정의하기 Vue3의 가장 큰 특징 중 하나가 바로 TypeScript와의 호환성이 좋아졌다는 특징이다. Vue2에서는 typescript를 사용하기 위해서는 큰 비용이 들었는데, Vue3에서는 이 단점들을 최대한 보완해서 타입 스크립트와 함께 사용하기 편하도록 개선이 되었다고 한다. 이번 글에서는 TypeScript를 사용하게 되었을때 컴포넌트 정의하는 방식이 어떻게 변했는지 알아보고자 한다. 프로젝트 생성 이쯤되면 Vue CLI를 사용한 프로젝트를 만드는 건 누구나 할 수 있을 거라 생각된다. Vue CLI를 사용하면 당연히 TypeScript를 설치하기 쉽고 설정도 기본적으로 되어있기 때문에 사용하기 편하다. # 1. Install Vue CLI, if it's not already installed npm .. 2022. 6. 14. 이전 1 2 3 4 5 6 7 다음 반응형
