Self-Study/Vue 검색 결과
5 개의 검색 결과가 있습니다.
Self-Study/Vue

[Vue] Pinia

References https://pinia.vuejs.org/introduction.html#why-should-i-use-pinia https://eggplantiny.github.io/blog/articles/pinia-a-new-statement-manage-plugin/ https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment https://dev.to/carlomigueldy/getting-started-with-vue-3-pinia-store-typescript-by-building-a-grocery-list-app-19km Pinia의 정의 VueConf Toronto 20..

2022. 9. 13. 16:21
Self-Study/Vue

[Vue] keep-alive

References https://vuejs.org/guide/built-ins/keep-alive.html https://ddolcat.tistory.com/1655 https://swoo1226.tistory.com/165 https://v3.ko.vuejs.org/api/built-in-components.html#transition-group 서론 Vue의 라이프 사이클에는 Create, Mount, Update, Destroy 총 4가지로 분류되어 자원을 관리한다. 문제는 이 과정에서 비활성화한 캐시된 컴포넌트 인스턴스를 제거하기 때문에 특정 컴포넌트로 재요청을 할 경우 원하는 데이터가 반영되지 않아 조회에 이상이 생길 수 있다. 따라서, 이에 대한 대응책이 필요한데 바로 keep-alive 기..

2022. 9. 13. 14:53
Self-Study/Vue

[Vue] teleport

References https://v3.ko.vuejs.org/guide/teleport.html https://kyounghwan01.github.io/blog/Vue/vue3/teleport/#사용하는-이유 사용하는 이유 index.html 파일 내부를 보면 다음과 같은 코드가 있다. 이는 app이란 이름의 id 내에 모든 vue 로직이 돌아간다는 의미가 되는데 만약, toast나 modal 팝업 같은 global한 이벤트가 생길때 이를 따로 처리하는데에 한계가 있을 수 있다. 따라서, 이러한 문제를 해결하기 위한 방법이 teleport다. 사용방법 index.html에 teleport를 ****위한 별도의 id를 만든다. 이벤트 로직과 관련된 component를(Modal.vue) 구..

2022. 7. 4. 11:14
Self-Study/Vue

[Vue] Refs의 종류

References https://v3.ko.vuejs.org/api/refs-api.html#ref https://velog.io/@soulee__/Vue.js-공식문서-뜯어보기-Refs ref 내부에 값을 가지면서 반응적이고 변경 가능한 ref 라는 객체를 반환한다. 이때, ref 객체는 단 하나의 프로퍼티만을 가지는데 이 내부 값은 .value 로 사용된다. const count = ref(0) console.log(count.value) // 0 count.value++ console.log(count.value) // 1 unref 주어진 인자가 ref 라면 내부 값(.value )을 반환하고 아니라면 주어진 인자를 반환한다. (삼항연산자 과정 간소화) function useFoo(x: numb..

2022. 7. 4. 11:13
Self-Study/Vue

[Vue] 딥 셀렉터

References https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors https://uxgjs.tistory.com/261 개요 딥 셀렉터(Deep Selector)는 부모 컴포넌트에서 자식 컴포넌트의 CSS로 접근하기 위한 방법이다. 딥 셀렉터의 사용 이유 Vue는 각 컴포넌트 간 스타일의 결합도를 줄이기 위해 **스타일 캡슐화(scpoed)**를 적용할 수 있다. 이는 현재 컴포넌트에만 적용이 되고 다른 컴포넌트에 적용하지 않게 한다. 문제는 스타일 캡슐화가 적용되면 자식 컴포넌트에게도 영향이 미치지 않기 때문에 scoped를 유지하면서 이를 해결하기 위한 방법이 바로 딥 셀렉터이다. 딥 셀렉터 적용 딥 셀렉터를 적용하기 위한 방법은..

2022. 7. 4. 11:09