본문 바로가기

전체 글

 (214)
모던 자바스크립트 튜토리얼 | 이벤트 위임 캡처링과 버블링을 활용하면 강력한 이벤트 핸들링 패턴인 이벤트 위임(event delegation)을 구현할 수 있습니다. 이벤트 위임은 비슷한 방식으로 여러 요소를 다뤄야할 때 사용됩니다. 이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있습니다. 공통 조상에 할당한 핸들러에서 event.target을 이용하면 실제 어디서 이벤트가 발생했는지 알 수 있습니다. 이를 이용해 이벤트를 핸들링합니다. 예제를 살펴봅시다. 다음은 고대 중국 철학에서 유래한 팔괘도입니다. HTML은 대략 다음과 같습니다. Bagua Chart: Direction, Element, Color, Meaning Northwest Metal ..
모던 자바스크립트 튜토리얼 | 버블링과 캡처링 버블링 버블링(bubbling)은 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품(bubble)과 닮았기 때문입니다. 거의 모든 이벤트는 버블링이 됩니다. focus이벤트와 같이 버블링이 되지 않는 이벤트도 있습니다. event.target 부모 요소의 이벤트 핸들러는 이벤트가 정확히 어디서 발생했는지 등에 대한 자세한 정보를 얻을 수 있습니다. 이벤트가 발생한 가장 안쪽의 요소는 타깃(target) 요소라고 불리고, event.targ..
프레임워크 없는 프론트엔드 개발 | 렌더링 모든 웹 애플리케이션에서 가장 중요한 기능 중 하나는 데이터의 표시이다. 좀 더 명확하게 말해 데이터를 표시한다는 것은 요소를 화면이나 다른 출력 장치에 렌더링한다는 것을 의미한다. W3C(World Wide Web Consortium)은 프로그래밍 방식으로 요소를 렌더링하는 방식을 문서 객체 모델 DOM(Document Object Model)로 정의했다. 문서 객체 모델 DOM은 웹 애플리케이션을 구성하는 요소를 조작할 수 있는 API이다. 자세한 내용은 W3C 규격 페이지를 참조. What is the Document Object Model? What is the Document Object Model? Editors Jonathan Robie, Texcel Research Introduction ..
[번역] Widget Driven Development Widget Driven Development | Alexey Antipov Decomposition of UI applications into self-contained widgets leveraging streamlined Data Management alexei.me 우리가 애플리케이션을 개발할 때 컴포넌트를 조합합니다. 각 UI 컴포넌트는 기본적으로 마크업, 범위가 지정된 스타일, 일부 UI 로직의 조합입니다. 데이터 관리는 빈번하게 컴포넌트 제어에서 제외되어 복잡한 데이터 흐름이 있는 복잡한 아키텍처를 초래합니다. 이 글에서는 컴포넌트를 데이터 로직과 UI를 모두 완벽하게 제어할 수 있는 자율적으로 분리된 위젯으로 변환하는 방법을 보여드리겠습니다. The History of Components ..
프레임워크 없는 프론트엔드 개발 | 프레임워크에 대한 이야기 프레임워크는 필요 없다. 중요한 것은 그림이지 프레임(그림틀)이 아니다. - 클라우스 킨스키 프레임워크란? 캠브리지 사전의 정의는 다음과 같다. 무언가를 만들 수 있는 지지 구조 이 정의는 소프트웨어 프레임워크의 일반적인 개념과 일치한다. 앵귤러 애플리케이션의 구조를 생각해 보면 이 정의와 정확히 일치하는 것을 알 수 있다. 앵귤러는 서비스, 구성요소와 파이프 같은 기본 요소를 사용해 애플리케이션을 빌드하는데 필요한 구조를 제공한다. 실제 애플리케이션에서 스택은 다른 요소들을 포함한다. loadash를 사용해 배열이나 객체를 조작하거나 moment.js를 사용해 날짜를 파싱할 수 있다. 이것이 프레임워크 도구일까? 자바스크립트 커뮤니티는 이를 라이브러리라고 부른다. 그렇다면 라이브러리와 프레임워크의 차이..
The Best React State Management Tools for Enterprise Applications 아래 글을 번역 했습니다. React State Management Tools for Enterprise Applications | Toptal® State management is important in any React project, but it is crucial in enterprise-level applications. Here’s how the most popular React state management tools compare in an enterprise setting. www.toptal.com 엔터프라이즈 레벨 리액트 애플리케이션 개발자들은 일관된 사용자 경험을 위해 상태관리가 얼마나 중요한지 알고 있습니다. 하지만 상태 관리의 영향을 받는 것은 사용자만이 아닙니다. 리액트 개발자..
4 Reasons Why You Should Prefer Vite Over Create-React-App 아래 글을 번역한 것입니다. 4 Reasons Why You Should Prefer Vite Over Create-React-App (CRA) - Semaphore Unlike CRA, Vite does not build your entire application before serving, instead, it builds the application on demand. It also leverages the power of native ES modules, esbuild, and Rollup to improve development and build time. semaphoreci.com CRA는 대부분의 개발자가 리액트 프로젝트를 scaffold하고 개발 서버를 설정하는데 사용해온 도구입니다. 별..
React Components, Elements, and Instances 아래 글을 번역한 글입니다. React Components, Elements, and Instances Many people get confused by the difference between components, their instances, and elements in React. Why are there three different terms… medium.com 많은 사람들이 리액트에서 컴포넌트, 그 인스턴스, 엘리먼트의 차이 때문에 혼란스러워합니다. 화면에 그려지는 것을 지칭하는 용어가 세가지나 되는 이유는 무엇일까요? 리액트를 처음 사용한다면 클래스 컴포넌트와 인스턴스만 사용해보셨을 것입니다. 예를 들어, 클래스를 생성하여 Button 컴포넌트를 선언할 수 있습니다.프로그램이 실행 중일 때 ..

티스토리툴바