Web/Vue

고차 컴포넌트 패턴(HOC)과 믹스인(Mixins)

하이오더컴포넌트는 리액트 진영에서 기반한 컴포넌트 개발 패턴이다. 컴포넌트의 로직을 훼손하지 않고 재사용성을 최대로 끌어올리는 것에 장점이 있지만, 중간 컴포넌트가 하나 추가되므로 depth가 깊어질 수록 컴포넌트 구조가 복잡해지는 단점이 존재한다. 반대로 믹스인의 경우 HOC에 비해 쉽고 고차 컴포넌트에 대한 생각을 안해도 되지만, SOC(관심사 분리), 컴포넌트 테스트 측면에서 HOC에 비해 불리하다. 때문에 둘의 패턴을 적절히 활용해 반복되는 코드의 역할을 단일화시키며 재활용이 용이하게, 외부 종속성을 최소화 하는 것을 유의하며 적용해야 한다. 믹스인(Mixins) 🎄글로벌 믹스인(Global Mixins) 믹스인은 여러 Vue 컴포넌트에서 기능을 재사용하는 방법이다. 컴포넌트가 믹스인을 사용하면 ..

Vue 점진적 도입(2): SFC 전환 경험 공유

이 글은 jQuery 기반의 미디어 플랫폼 모바일 앱에 Vue를 도입한 사례를 정리한 내용입니다. 웹뷰에 Vue를 도입하거나 기존 레거시와 함께 점진적 도입을 고민하고 있으신 분들을 위해 공유합니다. 웹뷰를 좀 더 네이티브 앱에 가깝게 구현하자 기존에 작성했었던 Vue 점진적 도입 경험기(1) 에 이어 MBC 앱을 지속적으로 담당하게 되면서 연말 개편을 맡게 되었다. 지난 버전에서 웹뷰를 도입하며 vue 2.0 버전 cdn을 다운받아 사용해 보는 것을 시작으로, 각 페이지 별로 JS를 로딩하는 고전적 MPA구조로 작성했다. 처음 버전에서는 웹팩의 엔트리를 이렇게 작성했다. module.exports = { devtool: 'source-map', entry: { main: './src/entry/main..

Vue.js로 점진적 도입 경험 공유

도입 배경 부족 하디 부족한 주니어 개발자 코딩 배우는 학생입니다. 기존 jQuery 레거시 기반을 Vue.js를 프로젝트에 적용한 경험 및 후기 공유입니다...! 기존의 회사 프론트 스택은 CSR(ClientSide Rendering)인 경우 Jquery, Jquery Template 기반으로 되어있었고, 어드민과 같은 사이트의 경우 SSR(Serverside Rendering) 기반(JSP, Razor 등)으로 구성되어 있었습니다. 새롭게 프로젝트를 시작하게 되면서 기존 스택을 고수하지 않은 이유에는 3가지가 있습니다. 1. 코드 관리의 어려움 2. 데이터 바인딩 및 화면 렌더링 시 성능 문제 3. 코드의 중복(레거시의 문제점), 반응형 지원 기술 조사 및 안정성 검토 후 두 달간 제가 맡은 프로젝트..