FrontEnd (437) 썸네일형 리스트형 [Vue3] props와 컴포넌트 상태 동기화 Vue3에서 컴포넌트의 상태와 외부 props 값을 동기화 하는 방법을 알아봅니다. TL;DR props은 기본적으로 readOnly인 reactive 값임 기본값을 reactive하게 선언 내부적으로 사용할 상태를 computed로 선언하여 props 여부에 따라 활용 여부 결정 useControllable 컴포저블 해당 함수는 headlessUI 깃헙에서 가져옴 사용처에서는 아래와 같이 활용함. let [checked, theirOnChange] = useControllable( computed(() => props.modelValue), // props를 활용한 computed (value: boolean) => emit('update:modelValue', value), // 값 변경 시 호출활 .. Vue3가 DOM 업데이트를 비동기적으로 수행하는 방법 프론트엔드 프레임워크(Vue3)는 어떻게 UI 업데이트를 비동기적으로 순서를 보장하여 처리할까요? Vue3의 Scheduler 소스 코드를 읽다가 아래와 같은 함수를 발견했습니다. export function nextTick( this: T, fn?: (this: T) => void ): Promise { const p = currentFlushPromise || resolvedPromise return fn ? p.then(this ? fn.bind(this) : fn) : p } 해당 함수의 동작이 아리까리하여 관련 자료를 찾다가 좋은 내용을 발견해서 정리해둡니다. nextTick? 정의: 다음 DOM 업데이트 주기가 끝난 후 실행할 지연된 콜백입니다. 데이터를 수정한 직후에 이 방법을 사용하여 업데.. Vue3 반응성 완벽 이해 3편 : vue3 core 코드 직접 읽어보기 Vue3의 창시자인 에반 유와 함께 Vue3 Reactivity 모듈 코드를 읽어봅니다. 이전 시리즈 2022.12.10 - [Vue.js] - Vue3의 반응성 완벽 이해 1편 : 종속성 추적 Vue3의 반응성 완벽 이해 1편 : 종속성 추적 vue mastery의 리액트 코어팀이 설명해주는 vue3의 반응성의 원리를 알아봅니다. 공식 문서와 nhn의 게시물을 읽어봤지만, 약간 납득이 안되는 부분들이 있었습니다. 해당 강의를 통해 어느정도 해소 itchallenger.tistory.com 2022.12.11 - [Vue.js] - Vue3의 반응성 완벽 이해 2편 : ref와 computed Vue3의 반응성 완벽 이해 2편 : ref와 computed Vue3의 반응성을 직접 구현하며 Vue3에 대.. Vue3의 반응성 완벽 이해 2편 : ref와 computed Vue3의 반응성을 직접 구현하며 Vue3에 대한 더 깊은 이해를 도모해 봅시다. 이전 시리즈 : 2022.12.10 - [Vue.js] - Vue3의 반응성 완벽 이해 1편 : 종속성 추적 Vue3의 반응성 완벽 이해 1편 : 종속성 추적 vue mastery의 리액트 코어팀이 설명해주는 vue3의 반응성의 원리를 알아봅니다. 공식 문서와 nhn의 게시물을 읽어봤지만, 약간 납득이 안되는 부분들이 있었습니다. 해당 강의를 통해 어느정도 해소 itchallenger.tistory.com 실행 중인 효과를 저장하는 전역 변수와 ref 이전 게시물의 예제 소스 코드(all-together.js)의 동작에는 하나의 문제점이 있는데요, 이전 소스 코드 실행 후 get을 실행할 때마다 effect가 추가됩니다. .. Vue3의 반응성 완벽 이해 1편 : 종속성 추적 vue mastery의 리액트 코어팀이 설명해주는 vue3의 반응성의 원리를 알아봅니다. 공식 문서와 nhn의 게시물을 읽어봤지만, 약간 납득이 안되는 부분들이 있었습니다. 해당 강의를 통해 어느정도 해소된 느낌입니다. 해당 아티클에서 다룰 내용 Vue3 Reactive 모듈의 디자인 패턴 및 디자인 디시전 Vue3 반응성의 원리 뷰의 반응성 이해하기 아래의 간단한 뷰 앱을 봅시다. 해당 앱의 뷰모델은 세 가지 역할을 수행해야 합니다. 페이지의 product.price 값 업데이트 페이지의 product.price * product.quantity 값 업데이트 totalPriceWithTax 함수를 다시 호출하고 페이지 업데이트 Price: ${{ product.price }} Total: ${{ pro.. zustand와 react query를 같이 사용하는 방법 zustand와 react query는 둘 다 여러 개의 전역 스토어를 지향합니다. 두 라이브러리를 같이 잘 사용하는 방법을 배워봅시다. 대부분의 아이디어는 아래 글에서 가져왔습니다. https://tkdodo.eu/blog/working-with-zustand Working with Zustand Let's dive into some tips for working with Zustand - one of my favourite client state management libraries in React. tkdodo.eu Zustand 전역 스토어를 제공하며 셀럭터를 포함한 간단한 API를 포함합니다. 용량도 매우 작습니다.(1.1kb) 개념적으로 리덕스와 비슷합니다. 사용중인 필드를 셀렉터로 추적해야 .. [번역] Vue3 Coding Better Composables : await 없이 비동기를 처리하는 컴포저블 잘만들기 await 없이 비동기를 처리는 컴포저블을 만들어 봅시다. 해당 글은 컴포저블 잘 만들기 시리즈의 마지막 아티클입니다. 아래 글의 번역입니다. https://www.vuemastery.com/blog/coding-better-composables-5-of-5/ Coding Better Composables: Async Without Await (5/5) | Vue Mastery This tutorial series will serve as your guide on how to craft solid composables that you and your team can rely on. www.vuemastery.com 이전 시리즈 보기 2022.12.08 - [Vue.js] - [번역] Vue3 Coding.. [번역] Vue3 Coding Better Composables : 인터페이스를 잘 설계하여 컴포저블 잘 만들기 컴포저블용 인터페이스 작성에 대해 알아보고 이 프로세스가 먼 미래를 위해 확장 가능한 컴포저블을 만드는 데 어떻게 도움이 되는지 알아봅니다. 해당 문서의 번역입니다 : https://www.vuemastery.com/blog/coding-better-composables-4-of-5/ Coding Better Composables: Start with the Interface (4/5) | Vue Mastery This tutorial series will serve as your guide on how to craft solid composables that you and your team can rely on. www.vuemastery.com 이전 시리즈 목록 2022.12.08 - [Vue.js].. 이전 1 ··· 11 12 13 14 15 16 17 ··· 55 다음
