본문 바로가기

SSR

React에서 스타일링을 위한 CSS Modules 활용하기 CSS Modules는 컴포넌트 단위로 스타일을 로컬 스코프화하여 클래스 충돌을 방지하고 유지보수를 쉽게 만드는 실전 친화적 방법입니다. CRA, Vite, Next.js에서 기본 지원되어 설정이 가볍고, CSS-in-JS 대비 빌드/런타임 오버헤드가 적은 편입니다. 아래에서 바로 적용 가능한 패턴과 주의점을 정리합니다.1. 가장 빠른 시작 (Vite/CRA/Next.js 공통)파일명은 반드시 *.module.css로 작성합니다. 컴포넌트에서 import하여 className에 매핑합니다./* src/components/Button.module.css */.button { padding: 8px 12px; border-radius: 6px; border: none; cursor: pointer; .. 더보기
React 앱에서 테마 변경 기능 다중 지원하기 라이트/다크를 넘어 세피아, 하이 콘트라스트 등 다중 테마를 지원하면 접근성(가독성), 브랜드 일관성, 사용자 선호 반영을 동시에 달성할 수 있습니다. 이 글은 CSS 변수와 React Context를 활용해 확장 가능한 다중 테마 토글을 구현하고, 초기 깜빡임 방지, 시스템 테마 연동, 대규모 테마 최적화까지 실무 팁을 정리합니다.1. 설계 원칙첫째, CSS 변수 토큰 기반으로 설계합니다. 둘째, DOM 루트에 data-theme 속성으로 테마 상태를 단일 소스로 관리합니다. 셋째, React에서는 테마 이름만 관리하고 스타일은 CSS 변수로 위임해 리렌더 비용을 줄입니다. 넷째, 시스템 테마와 동기화하며 사용자가 선택한 테마는 localStorage로 지속화합니다.2. 토큰 기반 CSS 변수 정의(다.. 더보기
React 앱에 GraphQL 캐싱 전략 도입하기 GraphQL은 필요한 데이터만 요청할 수 있다는 장점이 있지만, 캐싱 전략을 설계하지 않으면 네트워크 비용과 렌더링 지연이 커집니다. 이 글은 React 앱에 실무적으로 적용 가능한 GraphQL 캐싱 전략을 단계별로 정리합니다. Apollo Client 중심으로 설명하고, urql/Relay 대안도 간단히 비교합니다.1. 캐싱이 어려운 이유와 목표GraphQL 응답은 뷰에 최적화된 형태로 조합되기 때문에, 전통적인 REST 경로 기반 캐싱이 어렵습니다. 목표는 다음과 같습니다: 1) 엔티티 단위 정규화로 중복을 제거합니다. 2) fetchPolicy로 UX와 신선도를 균형 있게 관리합니다. 3) 페이지네이션/뮤테이션 시 캐시 정합성을 유지합니다. 4) 앱 재실행/SSR에도 캐시를 재활용합니다.2. 어.. 더보기
React에서 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR) 차이 분석 SSR와 CSR은 동일한 React 컴포넌트를 어디서 렌더링하느냐(서버 vs 브라우저)에 따라 사용자 경험, SEO, 성능 프로파일이 달라집니다. 프로젝트 특성과 트래픽 패턴에 따라 전략을 섞는 것이 실무에서 일반적입니다.1. 개념 요약CSR(Client-Side Rendering)은 서버가 최소한의 HTML과 번들 JS를 보내고, 브라우저가 최초 렌더와 데이터 요청, 이벤트 바인딩까지 모두 수행합니다. 초기 TTFB는 빠를 수 있으나, JS 다운로드/파싱/데이터 로딩 전까지 빈 화면이 보일 수 있습니다.SSR(Server-Side Rendering)은 서버가 요청 시 HTML을 만들어 보내고, 브라우저는 즉시 마크업을 표시한 후 JS가 로드되면 하이드레이션으로 상호작용을 활성화합니다. 초기 인지 성능과.. 더보기
React Hooks로 커스텀 훅 설계하기 커스텀 훅은 비즈니스/뷰 로직을 깔끔하게 재사용하도록 만드는 가장 실용적인 수단입니다. 이 글에서는 실무에서 바로 쓰는 기준, API 설계 원칙, 비동기/구독/성능/테스트/타이핑까지 커버하는 설계 패턴과 예시 코드를 제공합니다.1. 언제 커스텀 훅을 만들까- 컴포넌트들 사이에 반복되는 상태/이펙트/콜백이 있을 때입니다.- DOM이나 외부 상태(브라우저, 스토어)를 구독해야 할 때입니다.- 복잡한 비동기 흐름(취소, 중복 요청, 로딩/에러 관리)이 필요할 때입니다.2. 기본 원칙 체크리스트- 훅 이름은 use로 시작합니다(useXxx).- 훅 내부에서 다른 훅 호출은 항상 동일한 순서를 보장합니다(조건부 호출 금지).- 훅은 UI를 반환하지 않습니다(JSX 리턴 금지). 데이터, 상태, 콜백만 노출합니다... 더보기

티스토리툴바