본문 바로가기

전체 글

 (908)
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..
[Storybook/ Vue3] Play 함수를 이용하여 컴포넌트 상호작용 자동화 Storybook 공식 문서를 번역한 글입니다. https://storybook.js.org/docs/vue/writing-stories/play-function Play function Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free. storybook.js.org Play 함수는 스토리가 렌더링된 후 실행되는 작은 코드 스니펫입니다. 다음과 같은 용도로 사용할 수 있습니다. 사용자 대신 컴포넌트와 상호작용 테스트 시나리오를 ..
[번역] Vite 플러그인 만들기 아래 게시물을 번역한 글임 https://www.vuemastery.com/blog/building-a-plugin-with-vite Building a plugin with Vite | Vue Mastery In this article, we’ll walk through how to create some simple plugins that you can use as the foundation and inspiration for your own custom Vite plugins. www.vuemastery.com 왜 Vite 플러그인을 만드나요? Vite 플러그인을 사용하면 아래와와 같은 작업을 수행할 수 있습니다. index.mycustomextension과 같은 커스텀 확장자를 index.js로 r..

티스토리툴바