Vue.js 구성 요소 설계 참조

Architecture



Vue.js 공식: 스타일 가이드

Vue.js에서 처음으로 SPA를 개발할 때 생각한 것
  • SFC 권장
  • Vuejs Devtools 추천
  • Vue Router 권장
  • atomic design 추천
  • Vuex 추천

  • 처음 Vue.js를 만졌을 때의 나에게 지금 내가 전하고 싶은 Tips 컴포넌트 분할/라이브러리 선택편
  • atomic design 추천
  • propsdown eventup 권장
  • Vue Router 권장
  • 모두 Vuex는 더 이상 사용되지 않습니다

  • Vue.js에서 개발을 시작하기 전에 결정해야 할 사항
  • atomic design 추천
  • page: store에 의존, components: store에 의존
  • props의 정의는 상세하게
  • CSS 클래스 이름에 구성 요소 이름 포함
  • storybook 추천
  • 규모가 커지면 vuex 추천

  • 2019년 버전 Vue.js를 사용하는 사람에게는 반드시 알고 싶은 Vue.js의 무기와 문서에 쓰여지지 않은 컴포넌트나 메인터넌스시에 도움이 되는 Tips
  • SFC 권장
  • Vuex 비추천
  • template에 불필요한 method는 외출
  • data 정의를 줄입니다
  • flag를 최대한 줄이기
  • props required : rue 추천
  • 구성 요소는 잘게 자른다
  • OSS 권장

  • MVVM



    Vue + Vuex로 MVVM WebApplication을 설계 할 때 생각하고 싶은 것
  • View: template?
  • ViewModel: data, props, watch, computed, methods
  • Model: Vuex
  • Component의 분류: 완전/반 자기 완결형(props down, event up)/루프 아이템형
  • 게터는 VuexStore의 내용을 filter 하기 위해서 사용한다, 가공은 어디까지나 Vue측
  • Vuex 비추천
  • 플럭스로 만들고 싶다면 React를 사용합시다

  • Vue.js는 어떻게하면 깨끗하게 사용할 수 있습니다.
  • Vuex없이 MVVM을 인식하고 구성 요소를 분할합니다.

    2018 년 Vue.js와 Vuex를 사용하는 사람들에게 알고 싶은 Flux 디자인 패턴과 ViewModel의 조합



    2018년 Vue.js와 Vuex를 사용하는 사람들에게 제안하는 구성 요소의 분류 및 설계 패턴

    2019/07/26 Vue 구성 요소 분류 및 Vuex 책임

    Presentational/Container Component Pattern



    Vue.js+Vuex의 Container Component 패턴

    프런트 엔드 컴포넌트 설계에 맞서기
  • atomic design 추천
  • 1 컴포넌트 1 책임(기능도 스타일도)
  • Redux,Vuex는 요주의
  • Presentational/Container Component 추천

  • Vuex 규칙 및 구성 요소 설계
  • mapState 비추천, mapGetters 추천
  • mapMutation 비추천, mapActions 추천
  • 모두 Vuex는 더 이상 사용되지 않습니다
  • store는 도메인당
  • Presentational/Container Component 추천

  • Vue 컴포넌트의 상태 관리 고려
  • propsdown eventup 권장
  • 6개의 모듈 결합도
  • Presentational/Container Component 추천

  • Vue 사용이라면 알아두고 싶은 Vue의 패턴・소기집
  • v-model 사용자 정의
  • render function
  • functional wrapper component
  • error boundary
  • higher order component
  • Presentational/Container Component
  • renderless component (scoped slots)

  • Atomic Design



    미정리
    Vue.js에서 Atomic Design 연습

    Vue.js × Atomic Design - 컴포넌트 분할 지침

    Vue를 이용한 개발 프로젝트를 위해 "컴포넌트 설계 및 구현 가이드 라인"을 만든 이야기

    Atomic Design은 디자이너에게는 어렵지 않다! ? 라는 이야기

    Vue.js와 Atomic Design의 장소

    Nuxt (Vuex)로 Atomic Design을 채용 할 때의 메모

    Atomic Design의 일본어 슬라이드에 정확성을 요구하는 것이 잘못 되었습니까?

    AtomicDesign을 Vue.js(Nuxt.js)에 사용하면 최고의 개발을 체험할 수 있었다

    Vue.js 및 AtomicDesign

    Vue.js에서 본 AtomicDesign



    vuejs의 조금 편리한 구성 요소 기능
    내가 했던 Vue mixin의 안티 패턴에서 배우는 mixin의 사용법과 대안
    Vue.js의 mixin을 슬롯으로 대체
    Higher Order Components in Vue.js
    Vue.js에서 어려움을 겪을 때보기 Tips

    좋은 웹페이지 즐겨찾기