본문 바로가기

FrontEnd

(437)
[Vue3] Vue3로 접근성 고려한 Form(양식) 개발하기 Vue3로 접근성을 고려한 Form(양식)을 개발하는 방법의 기초를 학습해 봅시다. 전체 소스 코드 보기 https://github.com/Code-Pop/Vue-3-Forms/tree/l9-end GitHub - Code-Pop/Vue-3-Forms Contribute to Code-Pop/Vue-3-Forms development by creating an account on GitHub. github.com 양식(form)의 기초 1. HTML에서 양식의 기본 동작은 브라우저 탐색(navigation) 이벤트를 트리거하여 지정된 URL로 많은 데이터를 보내는 것입니다. Axios와 같은 라이브러리를 사용하지 않으면 HTML 양식 제출시 브라우저가 완전히 새로운 페이지를 로드하게 합니다다 페이지를 지..
[번역] layout 성능 정확하게 측정하기 해당 글을 의역한 글입니다. https://nolanlawson.com/2018/09/25/accurately-measuring-layout-on-the-web/ Accurately measuring layout on the web Update (August 2019): the technique described below, in particular how to schedule an event to fire after style/layout calculations are complete, is now captured in a web API proposal called reques… nolanlawson.com 2019년에 WebKit은 Chrome 및 Firefox에 맞게 requestAnimationF..
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번에 ..