본문 바로가기

전체 글

(908)
Vue3 컴포넌트 디자인 패턴 : Renderess Component / Compound Component Vue3의 Renderess Component / Compound Component 디자인 패턴에 대해 알아봅니다. Vue3 디자인 패턴 시리즈를 정리하는 내용이 될 것 같습니다. TL;DR renderess component는 마크업 없는 컴포넌트다 상태와 액션만을 추상화하는 컴포넌트다. 좋은 컴포넌트란 무엇인가? 결합도가 낮고 응집도가 높고 확장성 있는 컴포넌트 SOLID 원칙을 잘 지키는 컴포넌트 개발 중에 의식해야 하는 부분 : 응집도와 결합도 좋은 컴포넌트 설계 방법론 나쁜 ui 컴포넌트는 너무 다양한 관심사가 섞여있음 비동기 데이터 페치 로직 UI 업데이트 상태 관리 마크업 만들기 스타일 적용하기 ... 좋은 컴포넌트란? 하나의 일만 잘하는 컴포넌트 상속보단 합성 단일 책임 원칙 좋은 컴포넌트..
[객체지향설계] 객체지향 설계 및 분석 : UML과 Use Case 다이어그램 grokking-the-object-oriented-design-interview의 개념 부분을 학습하고 정리한 내용입니다. 객체지향 분석 및 설계 객체지향 프로그래밍은 데이터(상태)와 해당 데이터와 관련된 메서드(기능)을 객체라는 개념 안에 감싸는 방식으로 프로그래밍 하는 것 객체지향 분석 및 설계는 객체 지향 개념을 적용하여 시스템을 분석하고 설계하는 구조화된 방법입니다. 이 설계 프로세스는 시스템을 구성하는 객체를 파악하는 것부터 시작함 먼저 시스템의 객체를 식별 그 다음 다양한 개체 간의 상호 작용을 파악 OO 분석 및 설계 프로세스는 다음과 같이 설명할 수 있습니다. 시스템에서 객체 식별 객체 간의 관계 정의 각 객체의 인터페이스 설정 OO 언어를 사용하여 실행 파일로 변환할 수 있는 디자인을 ..
[객체지향 설계] 객체지향 설계의 기초와 핵심개념 designgurus의 객체지향 코스를 수강하면서 관련 내용을 정리 중입니다. 객체 지향 설계란? 객체 중심으로 프로그램을 설계하고 개발하는 프로그래밍 스타일 절차 지향 : 각 블록은 데이터를 조작하기 위한 단계 객체 지향 : 데이터와 데이터와 관련된 기능을 객체 안에 포장 객체 지향의 재료 객체: 객체는 현실의 실체와 OOP의 기본 빌딩 블록을 나타냅니다. 예를 들어 온라인 쇼핑 시스템에는 장바구니, 고객, 제품 항목 등과 같은 각 객체가 있습니다. 클래스 : 클래스는 객체를 위한 설계도, 프로토타입 입니다. 객체의 속성, 상태, 데이터, 필드 객체의 함수, 동작 ,행동, 메서드 예를 들어 온라인 쇼핑 시스템에서 고객 객체는 배송 주소, 신용 카드 등과 같은 속성과 주문, 주문 취소 등의 메서드를 갖습..
프론트엔드 성능 최적화 : layout thrashing 피하기 with requestAnimationFrame requestAnimationFrame API는 왜 중요한가요? 불필요한 레이아웃을 피하는 방법과, 불가피하다면 성능 영향을 줄이는 방법을 알아봅니다. 아래 글과 이어서 보면 좋습니다. https://itchallenger.tistory.com/838 브라우저의 이벤트 루프와 렌더링의 관계에 대해 알아보자 브라우저의 이벤트 루프와 렌더링은 어떤 관계가 있을까요? 원문 링크 : https://xnim.me/blog/javascript-browser-event-loop-layout-paint-composite-call-stack https://xnim.me/blog/javascript-browser-event-loop-layout-paint-composite-c itchallenger.tistory.com ..
브라우저의 이벤트 루프와 렌더링의 관계에 대해 알아보자 브라우저의 이벤트 루프와 렌더링은 어떤 관계가 있을까요? 원문 링크 : https://xnim.me/blog/javascript-browser-event-loop-layout-paint-composite-call-stack https://xnim.me/blog/javascript-browser-event-loop-layout-paint-composite-call-stack The long journey to the runtime. Part 3. Event loop, layout, paint, composite, call stack The first 2 parts were dedicated to resource loading and application critical path. Today we will ..
[번역] 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 컴포넌트 디자인 패턴 : v-model v-model을 이용하여 단순 상태 업데이트 관련 코드 상용구를 줄여봅니다. v-model의 사용사례 프런트엔드에서 양식을 처리할 때 양식 입력 요소의 상태를 JavaScript의 해당 상태와 동기화해야 하는 경우가 많습니다. 값을 수동으로 바인딩하고 이벤트 리스너를 연결하는 것은 번거로울 수 있습니다. Vue3 공식문서 v-model은 form input값과 같은 컴포넌트 내부 상태(값)와 외부 반응형 값의 상태 동기화를 쉽게 만들어 줍니다. v-model의 비밀 이전 게시물에서 언급했듯이, 실제론 단방향 바인딩으로 컴파일 되어 처리합니다. 만약 v-model이 아니었다면 항상 저런 패턴으로 작성해야 합니다. v-model 쉽게 구현하기 컴파일러가 디폴트로 적용하는 modelValue를 넘어 한 컴..