실전 압축 코딩

Vite 기반으로 크롬 확장 프로그램 개발하기Vite를 사용하여 크롬 확장 프로그램을 개발하는 과정을 단계별로 자세히 설명하고, 배포까지의 팁을 알아보겠습니다.1. 왜 Vite를 사용해야 할까요?기존 크롬 확장 프로그램 개발은 웹팩(Webpack)과 같은 번들러를 사용하는 경우가 많았습니다. 하지만 Vite는 다음과 같은 장점으로 개발 경험을 크게 향상시킵니다.빠른 개발 서버: ES 모듈을 기반으로 온디맨드 컴파일을 수행하여 개발 서버 시작 및 핫 리로드 속도가 압도적으로 빠릅니다.간편한 설정: 복잡한 설정 파일 없이 바로 개발을 시작할 수 있습니다.다양한 프레임워크 지원: Vue, React, Preact 등 다양한 프레임워크를 기본적으로 지원합니다.최적화된 빌드: Rollup을 기반으로 최적화된 번들..

React에서 Render Props로 유연한 테이블 컴포넌트 구현 하기복잡한 UI 컴포넌트를 구현할 때 가장 먼저 고민되는 것은 "재사용성과 확장성" 이다.특히 테이블 컴포넌트는 데이터 구조와 디자인 요구사항이 다양하기 때문에, 단순한 하드코딩 방식으로는 금방 한계에 부딪히게 된다 이번 포스팅에서는 React의 Render Props 패턴을 활용해유연하면서도 타입 안정성이 높은 테이블 컴포넌트를 구현하는 방법을 소개 해보겠다.🧠 Render Props란?Render Props는 컴포넌트의 UI 일부를 외부에서 함수로 주입하여 렌더링을 위임하는 패턴 이다.이를 통해 컴포넌트의 내부 로직은 재사용하고, UI는 상황에 맞게 자유롭게 변경할 수 있게 된다. {data.name}} /> 이처럼 render라는..

D3.js의 핵심 개념인 enter(), update(), exit() 패턴과 이를 더욱 효율적으로 결합한 join() 메서드를 활용하여, 데이터가 추가되거나 변경되거나 사라질 때 바 차트가 어떻게 자연스럽게 전환되는지 보여주는 React 컴포넌트 코드를 자세히 살펴보려 한다. 데이터 변경에 대한 효율적인 대응의 중요성 일반적인 웹 애플리케이션에서 차트 데이터는 초기 마운트 시의 고정된 값이 아닌, 서버로부터 주기적으로 업데이트되거나 사용자 상호작용에 따라 동적으로 변경되는 경우가 많다. 이때 가장 단순한 방법은 새로운 데이터가 들어올 때마다 기존에 그려진 차트를 완전히 지우고( removeAll() ) 다시 그리는 것이다. 그러나 이 방법은 다음의 문제가 있다.비효율성: 매번 모든 DOM 요소를 생성하..

배치 처리가 왜 필요한가?현대 웹 애플리케이션에서 상태 관리는 가장 핵심적인 부분 중 하나 이다. React 개발팀은 초기 버전부터 여러 상태 업데이트를 효율적으로 처리하기 위해 배치(Batch) 업데이트 시스템을 도입하였다. 이 시스템은 단순한 성능 최적화를 넘어, React의 핵심 철학인 "예측 가능한 동작"을 구현하는 기반이 되었다.배치 처리의 중요성을 이해하기 위해 실제 시나리오를 살펴보겠다. 사용자가 장바구니에 상품을 추가하는 버튼을 클릭할 때 다음과 같은 일이 발생할 수 있다.장바구니 아이콘의 숫자 업데이트총 결제 금액 재계산추천 상품 목록 갱신할인 쿠폰 적용 가능 여부 확인이 모든 상태 변경이 개별적으로 처리된다면 불필요한 리렌더링이 4번 발생하게 된다. React의 배치 시스템은 이러한 연..

React의 렌더링 혁명React는 사용자 인터페이스를 구축하기 위한 강력한 라이브러리로, 그 핵심에는 Fiber 아키텍처가 자리잡고 있다. 특히 React 18에서 도입된 동시성 기능(Concurrent Features)의 기반이 되는 Lane 모델은 React의 성능을 한 단계 끌어올렸다. 이 글에서는 Fiber 아키텍처와 Lane 모델이 어떻게 작동하는지 깊이 있게 살펴보겠다.1. React Fiber 아키텍처 이해하기1.1 Fiber란 무엇인가?Fiber는 React 16에서 도입된 새로운 재조정(reconciliation) 엔진이다. 기존 스택 기반 재조정자의 한계를 극복하기 위해 설계되었다// 간단한 Fiber 노드 구조 예시const fiberNode = { type: 'div', ..

React에서 상태를 관리할 때 항상 setState를 직접 호출해야 값이 변경된다.React는 불변성(immutability)을 기본 철학으로 삼고 있으며, 명시적으로 상태를 변경하는 구조가 핵심 이기 때문이다.하지만 Vue.js를 써본 사람이라면, Vue(3)의 ref()나 reactive()처럼 값을 직접 변경하면 반응적으로 UI가 갱신되는 구조가 더 직관적이고 편리하게 느껴질 수도 있다. 예를 들어, Vue(3)에서는 아래처럼 쓸 수 있다.const state = reactive({ count: 0 });state.count++; // 자동으로 반응!   React에서도 이런 방식으로 상태를 관리해보고 싶다는 생각이 들어,Proxy 객체를 활용해 Vue처럼 동작하는 useReactive 훅을 구현..

https://ljy1011.tistory.com/225 [React.js 3D 에니메이션 만들기(2)] 3D text geometry 생성 및 조명 설정 with react three fiberhttps://ljy1011.tistory.com/224 [React.js] generator(제네레이터) 를 활용해 3D 에니메이션 만들기! with react three fiber/ framer-motion / react포트폴리오 제작중, 3d text mesh의 역동적인 움직임을 중심으로 나를 표현ljy1011.tistory.com이어서. React Three Fiber와 Leva로 조명 제어하기 3D 웹 애플리케이션을 만들 때 조명은 씬의 분위기를 설정하는 중요한 요소 이다. 이번 포스팅에서는 React ..

https://ljy1011.tistory.com/224 [React.js] generator(제네레이터) 를 활용해 3D 에니메이션 만들기! with react three fiber/ framer-motion / react포트폴리오 제작중, 3d text mesh의 역동적인 움직임을 중심으로 나를 표현 하는 3d 에니메이션을 만들어 보고 싶다는 생각이 들었다. 그래서 three.js 관련된 라이브러리를 사용해 구현해 보기로 하ljy1011.tistory.com이어서. 이번에는 react-trhee-fiber 를 활용해 3d text geometry를 생성해 보도록 하겠다. 설치 라이브러리npm i three three-stdlib @react-three/fiber @react-three/drei @re..

포트폴리오 제작중, 3d text mesh의 역동적인 움직임을 중심으로 나를 표현 하는 3d 에니메이션을 만들어 보고 싶다는 생각이 들었다. 그래서 three.js 관련된 라이브러리를 사용해 구현해 보기로 하였다.  설치 라이브러리npm i three three-stdlib @react-three/fiber @react-three/drei @react-three/rapier framer-motion framer-motion-3d 1. three설명: WebGL 기반 3D 그래픽을 쉽게 구현할 수 있는 JavaScript 라이브러리.용도: 3D 모델링, 애니메이션, 조명, 텍스처 맵핑 등 3D 그래픽의 기본적인 빌딩 블록 제공.2. three-stdlib설명: Three.js의 추가 유틸리티 모음.용도: ..

과거에 배포했던 npm package를 번들링 한뒤 배포해 보기로 했다. https://ljy1011.tistory.com/182 React 컴포넌트 Npm에 배포하기 (with TS)react 로 만든 컴포넌트를 npm 사이트에 배포해 보자! (typescript 적용) https://www.npmjs.com/package/react-divided-progress-bar react-divided-progress-bar A progress-bar which has divided section based on React.js. Latest version: 0.1.7, lljy1011.tistory.comhttps://ljy1011.tistory.com/203 [NPM에 배포한 React Package 개선..