본문 바로가기

vue

(6)
Vue.js plugin(플러그인) 만들어보기 Vue.js 플러그인을 만들어봅니다. 원문 링크입니다 : https://snipcart.com/blog/vue-js-plugin Create a Custom Vue.js Plugin in < 1 Hour [Code Included] Vue.js plugins are essential for developers working with this JS framework. This post explains what they are, and how to craft a production-ready Vue plugin in < 1 hour. snipcart.com Directive와 Plugin은 주로 프레임워크 개발자가 사용하는 기능입니다. 하지만 좀 더 깊은 이해를 위해 스스로 플러그인을 만들어 보는것은 큰 도..
Vue.js 커스텀 Directive 만들어보기 뭔가를 배우는 최고의 방법은 직접 만들어 보는 것입니다. Vue.js의 Directive를 직접 만들며 배워봅니다. 원문 : https://learnvue.co/tutorials/vue-custom-directives Creating Your First Vue Custom Directive - with Vue 3 Updates - LearnVue Last Updated on Jan 10, 2020 learnvue.co Vue에서 Directive는 DOM을 직접 편집하는 가장 좋은 방법 중 하나입니다. 몇 가지 예로는 v-if, v-show, v-bind 등이 있습니다. Vue를 사용한 적이 있다면 directive에 익숙할 것입니다. Vue 사용자 지정 지시문은 Vue에서 프로젝트에 추가 지시문을 만들..
Vue3과 React 훅의 반응성 비교 : 불변 VS 가변 리액트와 Vue3의 반응형 구현은 어떤 차이가 있을까요? 1. 리액트는 불변 모델을 사용합니다. 리액트는 데이터와 UI를 동기화합니다. https://itchallenger.tistory.com/143 게시물에서 설명했듯이, 리액트는 상위 컴포넌트 렌더링이 반드시 하위 컴포넌트 트리 전체를 리렌더링 합니다. (중간에 memo같은 장벽이 없으면요) 여기서 렌더링이란 리액트 컴포넌트를 만드는 함수를 호출하는 것을 의미하며 실제 돔에 mount 하는 것을 의미하지는 않습니다. useEffect는 사이드이펙트와 UI의 동기화를 의미합니다. useEffect는 컴포넌트가 마운트 된 후, 그리고 언마운트 클린업 시, 혹은 업데이트 후에 콜백을 호출합니다. 또한 해당 훅 내부에서 UI과 관련한 사이드이펙트를 실행하는..
Vue3의 렌더링 메커니즘 알아보기 mount, patch, diffing, reconciliation, update... Vue3은 렌더링을 어떻게 수행할까요? 공식 문서의 번역입니다. https://vuejs.org/guide/extras/rendering-mechanism.html Rendering Mechanism | Vue.js Less than 48 hours to get 45% off at Vue School Access 800+ lessons including the Vue.js 3 Masterclass vuejs.org Vue는 템플릿을 어떻게 가져와 실제 DOM 노드로 변환할까요? Vue는 이러한 DOM 노드를 어떻게 효율적으로 업데이트할까요? 여기에서 Vue의 내부 렌더링 메커니즘을 살펴봄으로써 이러한 질문에 대한 설명..
Vue3 Reactivity In Depth (뷰3의 반응성 원리 이해하기) Vue3은 변화를 어떻게 추적하여 반응할까요? 공식문서의 번역입니다. https://vuejs.org/guide/extras/reactivity-in-depth.html Reactivity in Depth | Vue.js Less than 48 hours to get 45% off at Vue School Access 800+ lessons including the Vue.js 3 Masterclass vuejs.org Vue의 가장 독특한 기능 중 하나는 거슬리지 않는 반응성 시스템입니다. 컴포넌트 상태는 반응형 JavaScript 객체로 합성됩니다. 해당 상태를 수정하면 뷰가 업데이트됩니다. 상태 관리를 간단하고 직관적으로 만들지만, 일반적인 문제를 피하기 위해 동작 방식을 이해하는 것도 중요합니다...
Vue.js 내부 들여다보기[Demystifying Vue.js internals] vue.js의 내부 구현을 알아봅니다. 원문 : https://medium.com/js-imaginea/the-vue-js-internals-7b76f76813e3 Demystifying Vue.js internals When it comes to JavaScript frameworks, Vue.js is a trending UI framework.(just crossed 90k Github ⭐️ and more than 13k 🍴, very much… medium.com 저는 github의 소스를 살펴보고 vue 내부에서 무슨 일이 일어나는지 이해하기 위해 여러 차례 디버깅을 했습니다. 이 게시물은 여기 4가지 질문에 대한 답변을 제공하려고 합니다. Vue.js 인스턴스를 생성하면 무슨 일이 일어날까요..