개발이야기 썸네일형 리스트형 크롬 134와 135 업데이트: 당신이 몰랐던 혁신적인 변화들! 📌 크롬 134: 사용자 경험을 향상시키는 새로운 기능들1. 대화상자의 가벼운 닫기 동작 적용이전까지는 팝오버(Popover)에서만 지원되던 가벼운 닫기 동작이 이제 요소에도 적용됩니다. 이를 통해 개발자는 사용자 인터페이스를 더욱 유연하게 설계할 수 있게 되었습니다. 새로운 closedby 속성은 다음과 같이 동작합니다:closedby="none": 사용자가 대화상자를 닫을 수 없습니다.closedby="closerequest": ESC 키나 기타 닫기 트리거로 대화상자를 닫을 수 있습니다.closedby="any": 대화상자 외부 클릭이나 ESC 키로 대화상자를 닫을 수 있습니다.이러한 기능은 사용자 경험을 향상시키는 데 큰 도움이 될 것으로 보입니다.2. Web Locks API의 공유 저장소 .. 더보기 웹팩보다 10배 빠른 Rspack, 도대체 뭐길래? 프론트엔드 개발을 해본 사람이라면 웹팩(Webpack)의 느린 빌드 속도에 한 번쯤 짜증을 내본 경험이 있을 거예요. 코드 몇 줄만 바꿨을 뿐인데 몇 초, 길면 몇 분씩 기다려야 하는 상황… 답답하죠. 그런데 최근 ‘웹팩보다 최대 10배 빠르다’는 빌드 툴이 등장했습니다. 바로 Rspack입니다.Rspack이 왜 이렇게 빠른지, 웹팩과 비교했을 때 어떤 차이가 있는지 정리해볼게요.1. 웹팩과 Rspack, 기본 개념부터 살펴보기✅ 웹팩(Webpack)이란?웹팩은 프론트엔드 프로젝트에서 모듈 번들러(module bundler) 역할을 하는 도구예요. 쉽게 말해 여러 개의 JS, CSS, 이미지 파일 등을 하나의 번들 파일로 합쳐서 브라우저가 효율적으로 로딩할 수 있도록 도와줍니다.웹팩의 대표적인 기능은 다.. 더보기 React 고급 기술 익히기 - 11편: React 서버 컴포넌트(Server Components) 완벽 정리 1. Server Components란?1.1 Server Components 개요**Server Components(서버 컴포넌트)**는 서버에서 렌더링되고, 클라이언트에서 실행되지 않는 React 컴포넌트입니다. 기존 SSR(Server-Side Rendering), SSG(Static Site Generation) 방식과는 다르게 동작하며, 클라이언트에서 불필요한 JavaScript 번들 크기를 줄일 수 있습니다.1.2 Server Components vs Client Components특징Server ComponentsClient Components실행 위치서버에서 실행브라우저에서 실행번들 크기번들에 포함되지 않음브라우저로 전송됨상태(State)불가능가능 (useState, useEffect 사용.. 더보기 순수 자바스크립트로 리액티브한 변수 만들기 리액트(React)의 useState나 솔리드(Solid)의 createSignal처럼 순수 자바스크립트에서 리액티브한 변수를 만들려면 어떤 방법이 있을까? 내부적으로 활용할 수 있는 주요 기술과 직접 구현해보는 방법을 정리해보았다.1. Proxy를 활용한 반응형 변수Proxy 객체를 활용하면 속성 접근과 변경을 감지하여 반응형 변수를 만들 수 있다.function createReactive(initialValue) { let listeners = new Set(); const state = new Proxy({ value: initialValue }, { get(target, prop) { if (prop === 'subscribe') { return (callback) .. 더보기 Redux vs MobX vs Jotai vs Zustand 비교 (동작 방식 & 원리 차이점) 리액트(React)에서 상태 관리는 중요한 개념이며, 다양한 라이브러리가 존재합니다. 대표적인 상태 관리 라이브러리로 Redux, MobX, Jotai, Zustand가 있으며, 각각의 철학과 동작 방식이 다릅니다. 이번 글에서는 이 네 가지 라이브러리를 비교하여 어떤 프로젝트에 적합한지 살펴보겠습니다.1. Redux - Flux 아키텍처 기반의 중앙 집중 상태 관리🔹 원리Redux는 Flux 패턴을 기반으로 한 상태 관리 라이브러리입니다.단일 전역 상태(store) 를 유지하고, 순수 함수인 리듀서(reducer) 를 통해 상태를 변경합니다.상태 변경 시 불변성(Immutability) 을 유지해야 하며, 액션(action) → 리듀서(reducer) → 새로운 상태의 흐름을 따릅니다.React 컴포.. 더보기 React의 renderToString 실행 여부 감지 방법 React에서 renderToString을 사용하여 서버 사이드 렌더링(SSR)을 수행할 때, 해당 코드가 서버에서 실행 중인지 클라이언트에서 실행 중인지 구분해야 할 경우가 있다. 이를 확인하는 방법을 정리한다.1. window 객체를 활용한 감지브라우저 환경에서는 window 객체가 존재하지만, 서버 환경(Node.js)에서는 존재하지 않는다. 이를 이용하여 실행 환경을 구분할 수 있다.const isServer = typeof window === "undefined";true: 서버에서 실행 중 (renderToString이 실행될 가능성이 있음)false: 클라이언트에서 실행 중2. useEffect를 활용한 감지React의 useEffect는 클라이언트에서만 실행되므로 이를 활용하여 SSR 여부.. 더보기 🚀 렌더링 최적화: Virtual DOM, Incremental DOM, Signal 비교 및 Angular의 변화 렌더링 최적화는 UI 성능을 개선하고 불필요한 연산을 줄이는 핵심 기술이다. 본 글에서는 Virtual DOM, Incremental DOM, Signal을 비교하고, Angular가 어떻게 렌더링 방식을 최적화하고 있는지 살펴본다. 과연 리엑트는 올바른 길을 가고 있는 것인가. 1️⃣ Virtual DOM: 기존의 렌더링 방식✅ 개념Virtual DOM(VDOM)은 실제 DOM의 가상 복사본을 생성하여 변경 사항을 비교한 후 최소한의 업데이트만 반영하는 방식이다.React가 주로 사용하는 방식이다.🔹 동작 방식상태가 변경되면 새로운 Virtual DOM을 생성.기존 Virtual DOM과 비교(Diffing)하여 변경된 부분을 찾음.변경된 부분만 실제 DOM에 업데이트(Reconciliation).⚡.. 더보기 React 고급 기술 익히기 - 10편: React Hooks의 모든 것 React의 Hooks는 컴포넌트의 상태 및 생명 주기 기능을 클래스 없이도 사용할 수 있도록 만든 기능입니다. React 16.8에서 처음 도입되었으며, 이후 버전에서도 지속적으로 개선되고 있습니다. 특히 React 19에서는 새로운 훅이 추가되면서 더 강력한 기능을 제공하고 있습니다.이번 글에서는 Hooks의 기본 개념, 등장 배경, 내부 동작 원리, 모든 Hook의 기능과 사용법, 그리고 앞으로의 방향성에 대해 다룹니다. 🚀1. Hooks의 등장 배경과 동작 원리1.1 Hooks는 왜 등장했을까?React에서 클래스 기반 컴포넌트는 다음과 같은 문제점을 가지고 있었습니다.상태 관리가 복잡: this.state를 계속 관리해야 하며, 상태 변경 로직이 흩어져 있음재사용성이 낮음: 같은 로직을 여러 .. 더보기 이전 1 2 3 다음
