실전 압축 코딩

배치 처리가 왜 필요한가?현대 웹 애플리케이션에서 상태 관리는 가장 핵심적인 부분 중 하나 이다. 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://leetcode.com/problems/decode-string/description/?envType=study-plan-v2&envId=leetcode-75 간만에 올리는 알고리즘 포스팅 이번 문제는 leetcode의 394. Decode String 이다. 문제를 보자마자 기존에 접했던 괄호 채우기 stack 유형을 떠올렸다. 그런데 디테일한 로직을 짜려고 하니 머리가 너무 아팠다. 공간 지각 능력이 좀 부족해서  이런 문제를 풀때는 시물레이션을 돌리면서 차근 차근 로직을 세워 푸는것이 좋다.  로직을 세워 보자! 우선 for loop으로 문자열 s를 순회해 주자. 순회 시, 문자열 s의 character 마다 분기처리를 해주어야 한다. 1. digit은 괄호 [] 안에 들어갈 문자열의..

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의 추가 유틸리티 모음.용도: ..

Next.js 에서.glsl 확장자 shader 파일을 import 해보기 next.config.js 에서 webpack loader 설정next.config.js에서 webpack 로더 설정을 커스터마이징하려면 next에서 제공하는 webpack 함수 를 확장하여 사용할 수 있다.next.config.js 파일 내에서 module.rules에 새로운 로더 설정을 추가하는 방식으로 원하는 파일 형식에 대해 로더를 설정 하면 된다. /** @type {import('next').NextConfig} */const nextConfig = { reactStrictMode: false, webpack: (config, options) => { config.module.rules.push( //..

과거에 배포했던 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 개선..

보호되어 있는 글입니다.