vue3 (35) 썸네일형 리스트형 Vue3 컴포넌트 디자인 패턴 : Renderess Component / Compound Component Vue3의 Renderess Component / Compound Component 디자인 패턴에 대해 알아봅니다. Vue3 디자인 패턴 시리즈를 정리하는 내용이 될 것 같습니다. TL;DR renderess component는 마크업 없는 컴포넌트다 상태와 액션만을 추상화하는 컴포넌트다. 좋은 컴포넌트란 무엇인가? 결합도가 낮고 응집도가 높고 확장성 있는 컴포넌트 SOLID 원칙을 잘 지키는 컴포넌트 개발 중에 의식해야 하는 부분 : 응집도와 결합도 좋은 컴포넌트 설계 방법론 나쁜 ui 컴포넌트는 너무 다양한 관심사가 섞여있음 비동기 데이터 페치 로직 UI 업데이트 상태 관리 마크업 만들기 스타일 적용하기 ... 좋은 컴포넌트란? 하나의 일만 잘하는 컴포넌트 상속보단 합성 단일 책임 원칙 좋은 컴포넌트.. [번역] JS 번들 분할의 모든 것 원문 : https://medium.com/hackernoon/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758 The 100% correct way to split your chunks with Webpack Working out the best way to serve up files to your users can be a tricky business. There’s so many different scenarios, different… medium.com 해당 글의 주제 사용자와 사이트에게 가장 적합한 파일 분할 방법을 파악하기 파일 분할 방법 배우기(/w webpack4) 요즘 webpack4는 거의 사용하지 않으므로, 1번에 .. 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 컴포넌트 디자인 패턴 : 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)의 패턴을 꽤 많이 참고한다. 해당 링크의 탭만 하더라도 컴파운드 컴포넌트 패턴과 렌더리스 컴포넌트 패턴을 발견할 수 있다. 디자인 패턴은 왜 필요한가? 결국 아키텍처와 클린 코드란 것은 서로 독립적인 작은 단위로 기능들을 나누어 잘 합성할 수 있도록 해주는 것이다. 잘게 나누어진 기능들을 합하여 독.. 이전 1 2 3 4 5 다음
