실전 압축 코딩

웹에서 3D 모델을 렌더링할 때, 파일 크기는 로딩 속도에 직접적인 영향을 미친다.GLB나 GLTF 모델은 고품질을 유지할 수 있지만, 메시(mesh)와 텍스처가 많을 경우 파일 크기가 수십 MB에 이르기도 한다.이 글에서는 Draco 압축(DracoLoader) 을 활용하여 GLB/GLTF 파일의 용량을 줄이고 Three.js에서 불러오는 방법을 정리하였다.🧩 1. GLB / GLTF란 무엇인가포맷설명장점GLTF (.gltf)JSON 기반의 3D 모델 포맷으로, 텍스처와 메시, 머티리얼을 별도 파일로 관리한다.구조가 단순하고 수정이 용이하다.GLB (.glb)GLTF를 하나의 바이너리 파일로 묶은 형태이다.요청이 적고 배포가 간단하다.프로덕션 환경에서는 일반적으로 GLB 포맷이 많이 사용된다.그러나 ..

⚙️ Vue의 Effect Scheduler와 React의 Concurrent Scheduling 비교반응형 시스템 vs 스케줄링 시스템의 본질적 차이1️⃣ 들어가며이전 글에서는 Vue 3의 runtime-core 내부 구조를 분석하며,React Fiber가 스케줄링 중심이라면 Vue는 의존성 기반 렌더링 시스템임을 살펴보았다.이번 글에서는 한 단계 더 들어가, 두 프레임워크가 “언제 렌더링할지를 결정하는가”를 비교한다.즉, Vue의 Effect Scheduler와 React의 Concurrent Scheduler가각각 어떤 전략으로 렌더링을 제어하는지를 분석한다.2️⃣ Vue의 Effect Scheduler란?Vue 3는 reactivity 시스템 내부에서 effect() 실행 시 scheduler 함..

🧩 Vue 3 runtime-core 내부 코드 뜯어보기React Fiber와 비교하며 reactive 시스템의 차이 분석1️⃣ Virtual DOM은 같지만, 철학은 다르다Vue와 React는 모두 Virtual DOM 기반 렌더링을 수행하지만, 내부 구조는 상당히 다르다.React는 Fiber Tree를 통한 스케줄링 중심, Vue는 Reactive Effect를 통한 의존성 기반 렌더링이 핵심이다.React의 목표가 “렌더링을 잘게 쪼개서 효율적으로 스케줄링하는 것”이라면,Vue의 목표는 “데이터 변화를 추적하여 최소한의 업데이트만 수행하는 것”이다.2️⃣ React Fiber의 핵심 구조 요약구성 요소역할비유Fiber Node컴포넌트 단위의 작업 단위“작업 스케줄러의 Task 단위”Lane / ..

“같은 자바스크립트인데 왜 동작이 다를까?”브라우저에서는 setTimeout과 fetch가 순차적으로 보이는데Node.js에서는 process.nextTick, setImmediate 등이 섞이면서 순서가 다르게 찍힌다.왜일까?자바스크립트는 “단일 스레드”지만,실행 환경(브라우저 / Node.js)에 따라 이벤트 루프 구현체가 다르다.브라우저는 WebApi,Node.js는 libuv 기반의 자체 Event Loop를 사용 한다.1. 브라우저의 이벤트 루프 구조브라우저는 Web APIs + Task Queue + Microtask Queue 기반으로 작동한다.Call Stack → Web APIs → Callback Queue(Task Queue) → Event Loop → Stack▶ Task (매크로태..

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

🎯 TypeScript: 타입 명시와 타입 추론, 균형점을 찾아서TypeScript를 사용하는 핵심적인 이유는 타입 안정성과 개발 편의성을 동시에 확보하는 데 있다. 이 두 마리 토끼를 잡기 위한 TypeScript의 강력한 무기가 바로 타입 명시(type annotation)와 타입 추론(type inference) 이다.하지만 "항상 타입을 명시하라"는 조언도, "추론이 있으니 명시할 필요 없다"는 주장도 모두 완벽한 정답이 아닐수 있다. 중요한 것은 상황에 맞는 적절한 균형을 찾는 것이다.이 글에서는 TypeScript에서 왜 타입 명시가 중요한지, 타입 추론의 숨겨진 비용은 무엇인지, 그리고 과도한 타입 명시가 오히려 독이 되는 이유까지, 다양한 관점에서 살펴보려 한다.✅ 타입 명시는 왜 적극 ..

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', ..