본문 바로가기

TypeScript

React에서 OpenAPI 기반 API 클라이언트 자동 생성하기 React 애플리케이션에서 OpenAPI 스펙을 기반으로 API 클라이언트를 자동 생성하면 개발 생산성을 크게 향상시킬 수 있습니다. 본 글에서는 OpenAPI 스펙을 활용해 React 프로젝트 내에서 자동 생성된 API 클라이언트를 만드는 방법을 소개합니다.1. OpenAPI란?OpenAPI는 RESTful API를 구조화하여 표현하는 표준 명세입니다. API 요청, 응답, 인증 방식을 명확하게 정의해주므로 클라이언트와 서버 간 통신을 체계적으로 설계할 수 있습니다.2. API 클라이언트 자동 생성의 장점직접 API 요청 함수와 인터페이스를 작성할 필요 없이, OpenAPI 스펙을 읽어 자동으로 타입이 명확한 함수들을 생성합니다. 그 결과 다음과 같은 이점이 있습니다.타입 안정성 보장(TypeScrip.. 더보기
React와 tRPC를 활용한 타입 안전 API 통신 구축하기 tRPC는 타입스크립트 기반 애플리케이션에서 서버와 클라이언트 간 타입을 공유해, 별도의 스키마 생성 없이도 끝까지 타입 안전한 API 통신을 제공하는 솔루션입니다. React와 결합하면 생산성과 안정성을 모두 확보할 수 있습니다. 이 글은 Express + Vite(React)로 tRPC v10 기반 타입 안전 API를 빠르게 구축하는 실무 가이드입니다.1. 왜 tRPC인가tRPC는 REST나 GraphQL처럼 스키마/스펙을 별도로 관리하지 않아도 됩니다. 서버에서 정의한 라우터와 입력/출력 타입을 클라이언트에서 그대로 사용하므로, 변경이 즉시 컴파일 타임에 반영됩니다. 덕분에 다음과 같은 이점을 얻습니다.- 타입 불일치로 인한 런타임 에러 감소- 개발 속도 향상 및 중복 정의 제거- React Que.. 더보기
React에서 웹 브라우저 멀티 스레드(Web Workers) 활용하기 React 앱에서 스크롤 끊김, 입력 지연, 렌더링 프리즈가 발생한다면 CPU 바운드 작업을 메인 스레드에서 수행하고 있을 가능성이 큽니다. 브라우저의 Web Workers를 사용하면 무거운 계산을 별도 스레드로 분리해 UI 반응성을 유지할 수 있습니다. 실무에서 바로 쓸 수 있는 설정, 코드, 최적화 팁을 정리했습니다.1. 언제 Web Workers를 써야 하나요?다음과 같은 CPU 바운드 작업을 메인 스레드에서 분리할 때 적합합니다.- 대량 데이터 가공(집계, 정렬, 통계)- 이미지 처리, 압축/해제, 암호화- 복잡한 수치 연산(시뮬레이션, 경로 탐색)- JSON 대용량 파싱/검증DOM 접근은 워커에서 불가합니다. UI 업데이트는 메인 스레드에서만 수행해야 합니다.2. 번들러별 기본 세팅(Vite/C.. 더보기
React 앱에 GraphQL Federation 아키텍처 적용하기 GraphQL Federation은 여러 팀이 독립적으로 소유한 도메인 스키마를 하나의 Supergraph로 안전하게 결합해 단일 GraphQL 엔드포인트처럼 제공하는 아키텍처입니다. React 앱에서는 단일 클라이언트에서 다양한 백엔드 도메인을 유연하게 합성하고, 점진적 확장과 성능 최적화를 동시에 달성할 수 있습니다.1. Federation이 React 프런트엔드에 주는 이점단일 쿼리로 다양한 도메인의 데이터를 연결해 화면을 그릴 수 있습니다. 팀 별 독립 배포가 가능하며, 스키마 충돌은 컴포지션 단계에서 조기에 검출합니다. 클라이언트는 엔드포인트를 하나만 알면 되므로 라우팅과 캐싱 전략 수립이 단순해집니다.2. 핵심 용어 정리: Supergraph, Subgraph, Gateway/Router, E.. 더보기
React에서 복수 언어 번역 관리 자동화 툴 구축하기 복수 언어를 수동으로 관리하면 누락, 중복, 불일치가 잦습니다. 이 글은 React 프로젝트에서 번역 키 추출, 병합, 검증, 배포까지 자동화하는 실무 워크플로를 단계별로 구축하는 방법을 다룹니다. i18next + react-i18next를 예제로 사용하며, Node.js 스크립트로 키 관리 파이프라인을 만듭니다.1. 목표와 구조목표는 다음과 같습니다: (1) 코드에서 번역 키를 자동 추출, (2) 언어별 JSON 자동 병합/정렬, (3) 미번역/불일치 검증으로 PR 차단, (4) 런타임은 지연 로딩으로 성능 유지. 구조는 src/locales/{lng}/{ns}.json 형태의 네임스페이스 기반으로 권장합니다.2. 키 전략과 네임스페이스네임스페이스를 화면/도메인 단위로 나눕니다: common, hom.. 더보기
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와 Supabase로 풀스택 앱 구축하기 Supabase는 Postgres 기반 인증, 스토리지, 리얼타임을 제공하는 BaaS입니다. React와 결합하면 서버 없이도 보안이 적용된 풀스택 앱을 빠르게 구축할 수 있습니다. 본 글은 최소 구성으로 인증, CRUD, 리얼타임까지 연결하는 실무 중심 가이드입니다.1. 프로젝트 부트스트랩Vite로 React + TypeScript 프로젝트를 생성하고 필요한 패키지를 설치합니다.# 프로젝트 생성npm create vite@latest react-supa-app -- --template react-tscd react-supa-app# 라이브러리 설치npm i @supabase/supabase-js @tanstack/react-query react-router-dom2. Supabase 프로젝트와 테이블 .. 더보기
React에서 사용자 프로필 편집 페이지 제작하기 사용자 프로필 편집 페이지는 입력 폼, 파일 업로드, 서버 검증, 접근성까지 골고루 필요한 화면입니다. 이 글에서는 React Hook Form과 Zod를 사용해 빠르고 견고한 프로필 편집 페이지를 만드는 방법을 실무 관점에서 정리합니다.1. 무엇을 만들 것인가디스플레이 이름, 사용자명, 자기소개, 웹사이트, 위치, 아바타 이미지를 수정하는 폼을 만듭니다. 변경 사항이 있을 때만 저장 버튼이 활성화되며, 사용자명 실시간 중복 검사, 아바타 미리보기, 낙관적 업데이트를 적용합니다.2. 패키지 설치와 기본 구조React Hook Form과 Zod를 사용합니다. 프로젝트 구조는 api 유틸, 폼 컴포넌트, 페이지 컨테이너로 나눕니다.// 설치// npm i react-hook-form zod @hookform.. 더보기

티스토리툴바