본문 바로가기

TypeScript

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.. 더보기
React에서 Highcharts로 데이터 시각화하기 실무 대시보드에서 빠르게 신뢰성 있는 차트를 붙여야 한다면 Highcharts는 훌륭한 선택입니다. React에서 공식 래퍼를 사용하면 설정만으로 라인, 컬럼, 영역, 파이 차트를 쉽게 구현할 수 있습니다. 이 글은 설치부터 동적 업데이트, 반응형, 내보내기, 접근성, SSR(Next.js) 이슈까지 실무 팁 중심으로 정리합니다. 상업적 사용은 라이선스를 확인하시기 바랍니다.1. 설치# npmyarn add highcharts highcharts-react-official# oryarn add highcharts highcharts-react-official2. 가장 빠른 라인 차트 예제import React, { useMemo } from 'react'import Highcharts from 'high.. 더보기
React Native와 웹 React 코드 재사용 전략 모바일과 웹을 동시에 개발할 때 핵심은 공통 코드를 최대화하고, 플랫폼 차이를 얇은 경계로 격리하는 것입니다. 이 글은 실무에서 바로 적용할 수 있는 구조, 설정, 컴포넌트/로직 분리, 빌드/테스트 전략을 정리합니다.1. 원칙과 목표- UI는 플랫폼 차이를 흡수하는 공통 프리미티브 위에 올립니다.- 비즈니스 로직, 상태, 데이터 접근은 100% 공유를 목표로 합니다.- 플랫폼별 차이는 파일 분기(.native/.web)나 얇은 어댑터로 처리합니다.- 모노레포로 단일 소스 오브 트루스와 일관된 버전 관리를 유지합니다.2. 모노레포와 폴더 구조Yarn Workspaces 또는 PNPM으로 앱과 공통 패키지를 한 저장소에 둡니다.// repo 구조 예시.├─ apps/│ ├─ mobile/ //.. 더보기
React Hooks로 커스텀 훅 설계하기 커스텀 훅은 비즈니스/뷰 로직을 깔끔하게 재사용하도록 만드는 가장 실용적인 수단입니다. 이 글에서는 실무에서 바로 쓰는 기준, API 설계 원칙, 비동기/구독/성능/테스트/타이핑까지 커버하는 설계 패턴과 예시 코드를 제공합니다.1. 언제 커스텀 훅을 만들까- 컴포넌트들 사이에 반복되는 상태/이펙트/콜백이 있을 때입니다.- DOM이나 외부 상태(브라우저, 스토어)를 구독해야 할 때입니다.- 복잡한 비동기 흐름(취소, 중복 요청, 로딩/에러 관리)이 필요할 때입니다.2. 기본 원칙 체크리스트- 훅 이름은 use로 시작합니다(useXxx).- 훅 내부에서 다른 훅 호출은 항상 동일한 순서를 보장합니다(조건부 호출 금지).- 훅은 UI를 반환하지 않습니다(JSX 리턴 금지). 데이터, 상태, 콜백만 노출합니다... 더보기
React와 TypeScript를 함께 사용할 때의 베스트 프랙티스 React와 TypeScript를 함께 사용하면 안정적이고 확장성 있는 프론트엔드 애플리케이션 개발이 가능합니다. 하지만 올바른 방법을 모르면 생산성이 떨어지고 코드가 복잡해질 수 있습니다.1. 컴포넌트 props에 인터페이스 활용하기props에 명확한 타입을 선언해 코드 자동완성과 타입 검사를 적극 활용해야 합니다. 보통 interface나 type alias를 사용합니다.interface ButtonProps { label: string; onClick: () => void; disabled?: boolean;}const Button: React.FC = ({ label, onClick, disabled }) => ( {label});2. React Hooks 타입 지정useState와 use.. 더보기
React에서 Context API로 전역 상태 관리하기2 Context API는 컴포넌트 트리 깊숙한 곳까지 props를 계속 전달하지 않고도 데이터를 공유할 수 있게 해주는 React 내장 기능입니다. 실무에서는 전역 테마, 인증 정보, 사용자 설정처럼 업데이트 빈도가 낮고 앱 전역에서 필요한 값에 적합합니다.1. Context가 필요한 순간다음과 같은 경우 Context 사용을 고려합니다.- 여러 레벨을 거쳐 같은 props를 전달하는 prop drilling이 발생합니다.- 전역 테마, 로케일, 인증 사용자, 기능 플래그 등 전역 의존 값이 있습니다.- 업데이트 빈도가 높지 않습니다. (입력값, 스크롤 위치처럼 자주 바뀌는 값은 Context에 넣지 않는 것이 좋습니다)반대로 다음 케이스는 다른 도구가 더 적합합니다.- 서버 상태: React Query .. 더보기

티스토리툴바