본문 바로가기

전체 글

(908)
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]..
[번역] Vue3 Coding Better Composables : 다형적인 리턴값을 활용하여 컴포저블 잘만들기 컴포저블의 리턴 값을 좀 더 유용하게 만드는 방법을 알아봅니다. 해당 글을 번역 및 요약한 글입니다. https://www.vuemastery.com/blog/coding-better-composables-3-of-5/ Coding Better Composables: Dynamic Returns (3/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 Better Composables : 옵..
[번역] Vue3 Coding Better Composables : ref 및 unref를 사용하여 유연한 컴포저블 만들기 prop의 ref 여부와 관계없이 유연하게 사용할 수 있는 컴포저블을 만들어 봅시다. 해당 글을 번역 및 요약한 글입니다. https://www.vuemastery.com/blog/coding-better-composables-2-of-5/ Coding Better Composables: Flexible Arguments (2/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 Better ..