Tag

#React

8개의 글이 연결되어 있습니다.

// Project2026년 6월 22일 · 11 min read

공유 화면이 다른 도메인을 직접 import하고 있었다 — 의존성 역전으로 역의존 끊기

docker와 k8s가 같이 쓰는 host 목록 화면. 그런데 공유 구현이 docker/host에 있으면서 k8s 도메인을 직접 import하고 있었다. docker가 k8s를 아는 역방향 의존 7건을, 계약(HostExtension)만 남기고 도메인 조각을 주입하는 방식으로 0건까지 끊은 기록.

#Refactoring #Dependency Injection #Architecture #React #Next.js

// DevOps · Infra2026년 6월 14일 · 6 min read

Prometheus 시리즈 ④ 프론트 — 데이터를 uPlot 차트로 그리기

Prometheus 응답을 uPlot의 AlignedData로 바꾸는 변환과, 명령형 uPlot을 React에 얹는 법. 행 지향 vs 열 지향 데이터 형식 차이, 문자열·타임스탬프 함정, 인스턴스 재생성 원칙을 정리하며 시리즈를 마친다.

#Prometheus #uPlot #Chart #React #Frontend

// React / Next.js2026년 5월 16일 · 7 min read

Modal Config 패턴 비교 — 정적 Map vs Factory Map

Modal이 많은 도메인에서 Config을 어떻게 짤지 두 가지 패턴을 비교했다. 정적 Map과 Factory Map의 차이는 결국 Controller의 역할을 어디까지로 정의할 것인가의 문제였다.

#React #Modal #Redux #Architecture #Design Patterns

// React / Next.js2026년 5월 16일 · 10 min read

React와 Next.js에서의 동기와 비동기 — useEffect부터 Server Components까지

React 렌더링이 왜 동기인지부터 useEffect, Suspense, Server Components, Next.js fetch 캐시까지 React 생태계의 비동기 모델을 정리하고 실무에서 자주 만나는 함정을 함께 다룬다.

#React #Next.js #Async #Suspense #Server Components

// React / Next.js2026년 5월 3일 · 11 min read

Next.js App Router vs Pages Router — 최신 기준 비교

Next.js 16 기준으로 App Router와 Pages Router의 라우팅 구조, 데이터 패칭, 레이아웃, 서버 컴포넌트, API 작성 방식, 마이그레이션 기준을 비교했다.

#Next.js #App Router #Pages Router #React #Routing

// Frontend2026년 4월 19일 · 3 min read

낙관적 업데이트 — Optimistic UI를 쓰는 이유와 롤백 패턴

서버 응답을 기다리지 않고 UI를 먼저 업데이트하는 Optimistic UI 패턴이 왜 좋고, 실패 시 어떻게 롤백하는지 React와 Next.js Server Actions 기준으로 정리했다.

#UX #Optimistic UI #React #Next.js

// React / Next.js2026년 4월 19일 · 4 min read

CSR · SSR · SSG · ISR — 렌더링 전략 완전 비교

네 가지 렌더링 방식이 언제 HTML을 만들고, 데이터를 어디서 가져오며, 어떤 트레이드오프가 있는지 Next.js 기준으로 정리했다.

#Next.js #CSR #SSR #SSG #ISR #React

// React / Next.js2026년 4월 19일 · 4 min read

서버 컴포넌트를 쓰는 이유 — RSC가 해결하는 문제

React Server Components가 등장한 배경과 클라이언트 컴포넌트와의 차이, 실제로 어떤 기준으로 구분해서 써야 하는지 정리했다.

#React #Server Components #RSC #Next.js