본문 바로가기

FrontEnd

 (437)
Vue3 컴포넌트 디자인 패턴 : expose Vue3의 expose에 대해 알아보고, 사용 사례를 알아봅니다. 원문 : https://www.vuemastery.com/blog/understanding-vue-3-expose/ Understanding Vue 3's "expose" | Vue Mastery With the release of Vue 3.2 a new composition tool was made available for us, called "expose" www.vuemastery.com Vue3의 인스턴스 Accecibility Vue3에서 부모 컴포넌트는 자식 컴포넌트의 메서드와 프롭 전체에 엑세스 할 수 있다고 합니다. 즉 setup 메서드에서 리턴되는 요소들은 전부 퍼블릭 합니다. 📃 MyCounter.vue Counter:..
Vue3 컴포넌트 디자인 패턴 : v-model v-model을 이용하여 단순 상태 업데이트 관련 코드 상용구를 줄여봅니다. v-model의 사용사례 프런트엔드에서 양식을 처리할 때 양식 입력 요소의 상태를 JavaScript의 해당 상태와 동기화해야 하는 경우가 많습니다. 값을 수동으로 바인딩하고 이벤트 리스너를 연결하는 것은 번거로울 수 있습니다. Vue3 공식문서 v-model은 form input값과 같은 컴포넌트 내부 상태(값)와 외부 반응형 값의 상태 동기화를 쉽게 만들어 줍니다. v-model의 비밀 이전 게시물에서 언급했듯이, 실제론 단방향 바인딩으로 컴파일 되어 처리합니다. 만약 v-model이 아니었다면 항상 저런 패턴으로 작성해야 합니다. v-model 쉽게 구현하기 컴파일러가 디폴트로 적용하는 modelValue를 넘어 한 컴..
Vue3 컴포넌트 디자인 패턴 : Object binding v-on, v-bind를 이용해 바인딩을 간소화하는 방법을 알아봅니다. 이전 시리즈 2022.12.21 - [Vue.js] - Vue3 컴포넌트 디자인 패턴 소개 Vue3 컴포넌트 디자인 패턴 소개 vue mastery의 컴포넌트 디자인 패턴(component-design-patterns) 강의를 학습하고 정리한 내용입니다. 디자인 패턴에 관하여 어제 한 후배한테 실무에서 디자인 패턴을 사용하냐는 질문을 들었는데, 리액 itchallenger.tistory.com 2022.12.22 - [Vue.js] - Vue3 컴포넌트 디자인 패턴 : Props Vue3 컴포넌트 디자인 패턴 : Props 컴포넌트 디자인 패턴은 컴포넌트를 개발하면서 마주치게 되는 특정 문제를 해결하면서 소프트웨어의 유지보수성 / 재..
Vue3 컴포넌트 디자인 패턴 : Scoped Slots Scoped Slot을 이용해 하위 컴포넌트의 데이터에 접근하는 방법을 알아봅니다. 이전 시리즈 2022.12.21 - [Vue.js] - Vue3 컴포넌트 디자인 패턴 소개 Vue3 컴포넌트 디자인 패턴 소개 vue mastery의 컴포넌트 디자인 패턴(component-design-patterns) 강의를 학습하고 정리한 내용입니다. 디자인 패턴에 관하여 어제 한 후배한테 실무에서 디자인 패턴을 사용하냐는 질문을 들었는데, 리액 itchallenger.tistory.com 2022.12.22 - [Vue.js] - Vue3 컴포넌트 디자인 패턴 : Props Vue3 컴포넌트 디자인 패턴 : Props 컴포넌트 디자인 패턴은 컴포넌트를 개발하면서 마주치게 되는 특정 문제를 해결하면서 소프트웨어의 유지..
Vue3 컴포넌트 디자인 패턴 : Slots Vue3에서 slot을 사용하여 유연한 구조, 유연한 합성이 가능한 컴포넌트를 개발하는 방법을 알아봅니다. 이전 시리즈 2022.12.21 - [Vue.js] - Vue3 컴포넌트 디자인 패턴 소개 2022.12.22 - [분류 전체보기] - Vue3 컴포넌트 디자인 패턴 : Slots Props 중심 컴포넌트의 문제점 props는 설정덩어리다. props가 구조를 바꾸고 props 정의 순서와 사용 순서가 다르고 props이 거대해 진다면 컴포넌트의 이해와 확장이 어려워진다. slot이 무엇인가? 슬롯은 콘텐츠 배포 outlet 역할을 하는 커스텀 Vue 엘리먼트다. HTML 엘리먼트(예: div, span, p 등)로 작업할 때 우리는 자식으로 모든 종류의 입력을 허용한다. This is just n..
Vue3 컴포넌트 디자인 패턴 : Props 컴포넌트 디자인 패턴은 컴포넌트를 개발하면서 마주치게 되는 특정 문제를 해결하면서 소프트웨어의 유지보수성 / 재사용성을 높이는 개발을 위한 도구다. 이전 시리즈 링크 : 2022.12.21 - [분류 전체보기] - Vue3 컴포넌트 디자인 패턴 소개 TL;DR props는 컴포넌트의 일관성(오케스트레이션)을 위해 사용하면 좋다. (특히 마크업 스트럭처 컨트롤은 X) 하위 컴포넌트나 htmlElement에 전달하는 경우는 직접 element를 노출하는 방법(slot)을 쓰는 것이 좋다 우리는 보통 컴포넌트를 설계할 때, props 데이터를 중심으로 사고한다. 이는 입출력이 기본인 함수의 멘탈 모델에 익숙하기 때문이다. Props 정의 : 모범 사례 배열 문법 prop을 정의시 많은 개발자가 배열 구문을 사..
Vue3 컴포넌트 디자인 패턴 소개 vue mastery의 컴포넌트 디자인 패턴(component-design-patterns) 강의를 학습하고 정리한 내용입니다. 디자인 패턴에 관하여 어제 한 후배한테 실무에서 디자인 패턴을 사용하냐는 질문을 들었는데, 리액트로 UI 개발하면서 컴파운트 컴포넌트 패턴은 꽤 많이 사용하였고, Vue3로 디자인 시스템을 개발하는 지금도 headlessUI(https://headlessui.com/vue/tabs)의 패턴을 꽤 많이 참고한다. 해당 링크의 탭만 하더라도 컴파운드 컴포넌트 패턴과 렌더리스 컴포넌트 패턴을 발견할 수 있다. 디자인 패턴은 왜 필요한가? 결국 아키텍처와 클린 코드란 것은 서로 독립적인 작은 단위로 기능들을 나누어 잘 합성할 수 있도록 해주는 것이다. 잘게 나누어진 기능들을 합하여 독..
[Vue3] Vue3은 리렌더링을 어떻게 트리거할까? Vue3의 공식문서를 읽어봐도 reactivity의 종속성 추적에 대한 설명만 있지 결과적으로 리렌더링을 어떻게 트리거 하는지에 대한 설명은 없는것 같다. 에반 유가 설명한 Vue3 코어 모듈(https://itchallenger.tistory.com/807)의 역할에 기반해서 해당 코드가 어떻게 동작할지 추론한 후 코드베이스를 분석하였다. 정답 : Renderer 모듈의 setupRenderEffect https://github.com/vuejs/core/blob/main/packages/runtime-core/src/renderer.ts#L1288 GitHub - vuejs/core: 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript fra..

티스토리툴바