태그: React
39편
-
Vite 빌드 도구: ESM 개발 서버·esbuild·Rollup 구조와 설정·플러그인·Webpack 비교
Vite가 개발 중에는 네이티브 ESM과 esbuild 사전 번들링으로, 프로덕션에서는 Rollup으로 빌드하는 구조를 설명하고, vite.config 설정, 환경 변수와 mode, React·Vue 프로젝트 구성, 플러그인 훅, 코드 분할과 빌드 튜닝을 예제로 다룹니다.
-
Qwik 프레임워크: Resumability와 Hydration의 차이, Qwik City 라우팅·서버 액션
Qwik이 Hydration 대신 Resumability로 서버에서 직렬화한 상태를 이어받는 원리를 설명하고, useSignal·useStore 반응성, Qwik City 라우팅과 로더, server$·routeAction$ 서버 액션, React에서 옮길 때의 주의점을 예제로 다룹니다.
-
Remix 프레임워크: Loader·Action 중심 데이터 흐름과 Next.js 비교
Remix 중첩 라우트에서 loader로 데이터를 읽고 action으로 폼 제출을 처리하는 흐름을 예제로 설명합니다. 폼 검증, useFetcher를 이용한 Optimistic UI, Progressive Enhancement와 Next.js와의 차이도 다룹니다.
-
SolidJS: Signal 기반 세밀한 반응성과 React와의 근본적 차이
SolidJS의 createSignal·createEffect·createMemo가 Virtual DOM 없이 바뀐 DOM만 갱신하는 원리와, 컴포넌트가 한 번만 실행되는 데서 오는 React와의 차이를 설명합니다. Show·For, Store·Context, Solid Router도 다룹니다.
-
Tauri 데스크톱 앱 개발: Rust 백엔드 호출, 빌드·배포, Electron과 비교
Rust 기반 데스크톱 앱 프레임워크 Tauri를 정리합니다. Chromium을 번들하지 않고 OS의 WebView를 쓰기 때문에 설치 파일이 작아지는 구조, React/Vue 프론트에서 Rust 명령을 호출하는 방법, 빌드·배포와 Electron과의 차이를 예제로 다룹니다.
-
React 실무 정리: Hooks 심화, Fiber 아키텍처, Suspense·에러 처리, Context, 성능 최적화
Vite로 React 18 프로젝트를 시작해 useState·useEffect 실무 패턴과 useMemo·useCallback 사용 기준을 정리하고, Fiber의 렌더·커밋 단계와 동시성 렌더링을 설명합니다. Error Boundary, Suspense, Context 최적화, 가상화도 다룹니다.
-
Remix & React Router v7 가이드 — 웹 표준·SSR·Progressive
React Router v7(구 Remix)에서 loader로 데이터를 읽고 action과 Form으로 변경을 처리하는 흐름을 보여줍니다. useNavigation 로딩 UI, useFetcher, ErrorBoundary, 스트리밍, 쿠키 세션, Cloudflare Pages 배포도 담았습니다.
-
Effect-TS로 Promise의 한계 넘기: 에러를 타입으로, Context 의존성 주입, Fiber 동시성
Effect-TS 정리. Promise·async/await의 한계를 넘어 에러를 타입으로, 의존성을 Context로, 동시성을 Fiber로 표현하는 함수형 TypeScript 런타임과 React·Node 적용 예제를 다룹니다.
-
GraphQL API 만들기: 스키마와 리졸버, 뮤테이션, DataLoader로 N+1 해결, Apollo Client
GraphQL로 API를 만드는 방법. REST 대비 장점, 스키마와 리졸버, 쿼리와 뮤테이션, DataLoader로 N+1 문제 해결, Apollo Client 사용, Subscription 실시간 데이터를 예제로 다룹니다.
-
shadcn/ui: 설치 대신 소스를 복사하는 컴포넌트 키트, 테마·다크 모드, CLI, 커스터마이징
shadcn/ui CLI로 컴포넌트 소스를 프로젝트에 복사해 쓰는 방식과 Next.js 설치, CSS 변수 테마와 다크 모드, Dialog·Form·Data Table·Command 사용법, cva variant 커스터마이징, CSS 변수 미적용 같은 트러블슈팅을 다룹니다.
-
Liveblocks로 실시간 협업 기능 붙이기: Presence, CRDT Storage, Comments, 화이트보드 예제
Liveblocks로 실시간 협업을 구현하는 방법. Presence, Storage(CRDT), Comments, Notifications와 React·Next.js 통합, 화이트보드 예제까지 정리했습니다.
-
TanStack Router: 경로·검색 파라미터·로더를 타입으로 묶는 라우팅, React Router와 비교
TanStack Router로 경로·검색 파라미터·로더까지 타입 안전하게 다루는 방법. 파일 기반 라우팅, Zod 검증, 데이터 페칭, 코드 스플리팅, React Router 비교, SPA 설계까지 정리합니다.
-
Playwright Component Testing: 실제 브라우저에서 React·Vue·Svelte 컴포넌트 테스트하기
Playwright Component Testing(CT)은 단일 컴포넌트를 실제 브라우저에서 마운트하고, Playwright의 Locator·Assertion으로 상태와 스타일까지 검증하는 테스트 방식입니다.
-
Remix 2로 옮기기: Vite 기반 빌드, Future Flags, Flat Routes, 타입 개선과 배포
Remix 2.0의 Vite 플러그인, Classic Compiler 종료 방향, Node 20+, Future Flags, Flat Routes, 실무 마이그레이션 절차를 다룹니다.
-
Million.js 가이드 — React 성능 최대화와 Virtual DOM·Block·For·Next.js
Million.js의 핵심 개념, 컴파일러·Block·For, Next.js App Router 통합, 마이그레이션·벤치마크·제약을 다룹니다. Million.js는 React 16 이상과 Node 18 이상을 전제로 하는 오픈소스 최적화 스택입니다.
-
Zustand 상태 관리: 셀렉터로 리렌더 줄이기, 미들웨어, Slice 패턴, vanilla 스토어, Next.js SSR
셀렉터와 shallow 비교로 필요한 컴포넌트만 리렌더되게 Zustand 스토어를 구성하는 법을 다룹니다. persist·devtools·immer 미들웨어, Slice 패턴 타입, vanilla 스토어, Next.js App Router에서의 스토어 공유도 설명합니다.
-
Testing Library로 사용자 관점 테스트: 쿼리 우선순위, User Events, 비동기 대기, 폼, Vue
Testing Library로 사용자 중심 테스트를 작성하는 방법. 설치와 설정, React 기본 테스트, 쿼리와 변형(getBy·queryBy·findBy), User Events, 비동기 테스트, 폼 테스트, Vue 통합을 예제로 정리합니다.
-
Three.js로 3D 웹 만들기: Scene·Camera·Mesh, 조명, 카메라 컨트롤, 텍스처, React Three Fiber
Three.js로 3D 웹을 만드는 방법. 기본 Scene·Camera·Renderer 설정, Geometry와 Material, 조명, 카메라 컨트롤, 텍스처, 애니메이션, React Three Fiber를 예제로 정리합니다.
-
Storybook으로 컴포넌트 개발하기: Story 작성, Args·Actions, Decorators, Addons, 비주얼 테스트
Storybook으로 UI 컴포넌트를 개발하고 문서화하는 방법. 설치와 설정, Story 작성, Args와 Actions, Decorators, Parameters, Addons, Vue 통합, 비주얼 테스트를 예제로 정리합니다.
-
styled-components 사용법: props 기반 스타일, 상속과 as Prop, 테마, 전역 스타일, attrs
styled-components로 CSS-in-JS를 구현하는 방법. Tagged Template Literals, props 기반 스타일, 상속, as Prop, Theming, Global Styles, css 헬퍼, attrs, SSR을 예제로 정리합니다.
-
Swiper로 터치 슬라이더 만들기: React·Vue 통합, 반응형 breakpoints, 효과, 이벤트
Swiper를 Vanilla JS로 붙이는 기본 설정부터 autoplay·pagination·navigation 모듈, React의 Swiper와 SwiperSlide 컴포넌트, Vue 통합, 화면 폭별 breakpoints, fade·cube 전환 효과, 슬라이드 이벤트 처리까지 예제로 구현합니다.
-
TanStack Query 캐싱이 실제로 동작하는 방식: staleTime·gcTime, select로 리렌더 줄이기, 커스텀 훅
TanStack Query(React Query)로 서버 상태를 관리하는 방법. 캐싱 동작 원리, useQuery와 useMutation, Optimistic Update, 무한 스크롤과 Prefetch, 커스텀 훅 캡슐화, select와 staleTime으로 리렌더 줄이기를 다룹니다.
-
React Router로 SPA 라우팅: 중첩 라우트, Loader·Action, 보호 라우트, Error Boundary
React Router로 SPA 라우팅을 구현하는 방법. 설치와 기본 설정, 중첩 라우트, Loader로 데이터 불러오기, Action으로 폼 처리, 보호 라우트, Error Boundary, 네비게이션을 예제로 정리합니다.
-
React Hook Form으로 폼 만들기: register·handleSubmit, Zod 검증, Controller, 배열 필드
React Hook Form으로 폼을 구현하는 방법. register와 handleSubmit, 검증 규칙, Zod 통합, watch와 control, Controller로 커스텀 컴포넌트 연결, 배열 필드, 복잡한 폼 예제를 정리합니다.
-
React & Next.js 입문 가이드
JSX와 컴포넌트, props와 state 구분, useState·useEffect·useContext·useReducer로 React 기초를 다진 뒤 Next.js App Router의 폴더 기반 라우팅과 Server Components로 넘어갑니다. ES6 문법 같은 사전 지식도 먼저 짚습니다.
-
Nx 모노레포 시작하기: Workspace 생성, 프로젝트·라이브러리 구성, Task 실행과 캐싱, 의존성 그래프
Nx Workspace를 만들고 React·Next.js·Nest.js 앱과 공유 라이브러리를 나누는 방법, affected 명령으로 변경된 프로젝트만 빌드·테스트하는 계산 캐싱, nx.json 설정, 의존성 그래프, Nx Cloud 원격 캐시를 다룹니다.
-
Jest 실전 테스트 가이드 | 플레이키 테스트·Mock·Snapshot·Coverage 트러블슈팅
jest.mock 호이스팅 때문에 mock이 적용되지 않는 문제, Fake Timers와 MSW로 테스트를 결정적으로 만드는 방법, 스냅샷 남용과 커버리지 숫자의 함정, 종료되지 않는 Jest 프로세스를 --detectOpenHandles로 찾는 법을 다룹니다.
-
Leaflet으로 인터랙티브 지도 만들기: 마커·팝업, GeoJSON, React·Vue 통합, 좌표계
Leaflet으로 지도를 띄우고 마커·팝업과 GeoJSON 레이어를 그리는 방법, React Leaflet과 Vue 통합, markercluster로 많은 마커를 처리하는 법, EPSG:3857 좌표계의 내부 동작과 SSR 환경에서의 주의점을 다룹니다.
-
MUI로 React UI 만들기: 레이아웃, sx Prop, 테마와 다크 모드, 폼 예제
MUI로 React 화면을 만들 때 기본 컴포넌트와 Grid·Stack 레이아웃, sx prop으로 스타일을 입히는 법, createTheme 토큰 커스터마이징과 다크 모드 전환, 폼 구성과 아이콘 사용, TypeScript 설정을 예제 코드로 정리했습니다.
-
Next.js App Router 구조: 파일 규약, 서버·클라이언트 컴포넌트 경계, 캐싱, 스트리밍, 고급 라우팅
Next.js App Router 정리. Pages Router와의 차이, 파일 규약과 라우팅, 서버 컴포넌트와 클라이언트 컴포넌트 경계, 레이아웃, 데이터 페칭과 캐싱, Server Actions, Suspense 스트리밍, Parallel·Intercepting Routes를 다룹니다.
-
Framer Motion으로 React 애니메이션: Variants, 제스처, 레이아웃 애니메이션, 스크롤
motion 컴포넌트의 기본 사용법, Variants로 부모와 자식 애니메이션을 조율하는 방법, hover·tap·drag 제스처를 예제로 설명합니다. layout 속성과 AnimatePresence로 만드는 레이아웃·퇴장 애니메이션, useScroll과 useInView를 이용한 스크롤 연동도 다룹니다.
-
Electron 데스크톱 앱: Main Process와 IPC, React 통합, 자동 업데이트, Chromium·Node 구조
Electron으로 크로스 플랫폼 데스크톱 앱을 만드는 방법. 프로젝트 구조, Main Process, IPC 통신, React 통합, 파일 시스템 접근, 자동 업데이트, 빌드와 배포, Chromium과 Node.js 통합 구조를 다룹니다.
-
Emotion으로 React 스타일링: CSS Prop, props 기반 스타일, 테마, SSR 설정
Emotion으로 CSS-in-JS를 구현하는 방법. CSS Prop, Styled, props 기반 동적 스타일, Theming, TypeScript 타입, 전역 스타일, Composition, Next.js SSR 설정을 예제로 정리합니다.
-
Convex로 실시간 백엔드 만들기: 스키마, Query와 Mutation, Action, 파일 스토리지
Convex에서 스키마를 정의하고 Query와 Mutation을 작성한 뒤 React의 useQuery로 실시간 구독을 붙이고, 외부 API 호출은 Action으로 분리하며, 파일 스토리지에 업로드하는 흐름을 예제로 따라갑니다.
-
Ant Design으로 관리자 대시보드 만들기: Form·Table·테마 커스터마이징
Ant Design으로 엔터프라이즈 관리자 UI를 만드는 방법. Layout, Form, Table, Theming, Modal·Drawer, TypeScript 활용을 사용자 관리 화면 예제로 정리합니다.
-
Chakra UI 실전: 스타일 props, 테마 토큰, 다크 모드와 Emotion 스택의 비용
Chakra UI의 스타일 props로 레이아웃과 폼을 구성하고, 테마 토큰 확장과 다크 모드, 반응형 배열 문법을 적용한 뒤, Next.js SSR 하이드레이션과 Emotion 기반 스타일링이 번들 크기에 주는 영향을 점검합니다.
-
Next.js 15 정리: App Router 렌더링 결정, 캐싱 레이어, Server Actions, Turbopack, PPR
Next.js 15의 변경점과 App Router 구조 정리. 서버 컴포넌트, 정적·동적 렌더링이 결정되는 방식, 캐싱 레이어, Server Actions, Turbopack, Partial Prerendering, React 19 대응을 예제로 다룹니다.
-
React useMemo와 useCallback, 언제 쓰면 이득인가 | 렌더링 최적화 실전
비싼 리스트 필터링에는 useMemo, memo 처리된 자식에 넘기는 콜백에는 useCallback을 쓰는 식으로 메모이제이션이 실제 이득을 주는 조건을 코드로 구분합니다. Context 값 분리, useEffect 의존성 안정화, React Compiler와의 관계, Profiler 검증도 다룹니다.
-
Contentful로 헤드리스 CMS 구성하기: Content Model 설계, API, Next.js 통합, 다국어
Contentful 헤드리스 CMS 실전 정리. Content Model 설계, GraphQL/REST API 활용, Next.js·React 통합, 다국어·버전 관리, 웹훅과 마이그레이션, Strapi·Sanity 비교까지 다룹니다.