React 기술 스택 2025
(robinwieruch.de)- 2025년을 위한 Full-Stack React Tech Stack
- SaaS 제품 또는 최소 기능 제품(MVP)을 개발하는 데 유용한 기술들을 소개
- Next.js: 리액트 기반의 프레임워크로, 라우팅, 캐싱 등 다양한 기능을 기본 제공하며, 서버 컴포넌트 및 서버 함수와 같은 최신 리액트 기능을 통해 백엔드와의 연결을 지원함
- Astro: 제품의 랜딩 페이지를 생성하기 위한 선택적 도구로, 빠른 랜딩 페이지 제작과 개발자 경험 향상을 위해 사용됨
- Server Components: 서버에서 실행되어 데이터베이스 접근 등을 가능하게 하는 컴포넌트로, 풀스택 리액트 애플리케이션 개발 방식을 혁신함
- Server Functions: 리액트 컴포넌트에서 서버 측 코드를 함수 호출만으로 실행할 수 있게 해주는 기능으로, API 엔드포인트를 자동 생성함
- Server Actions: 서버 함수의 하위 집합으로, 사용성을 높이기 위한 라이브러리가 존재하지만, 직접 구현도 가능함
- Tailwind CSS: 빠른 제품 개발과 장기적인 CSS 유지보수를 위해 추천되는 도구로, 익숙해지면 전통적인 CSS 방식으로 돌아가기 어려움
- Shadcn UI: Tailwind CSS와 원활하게 통합되는 UI 라이브러리로, 버전이 없는 시스템을 제공하여 UI 관리에 신선한 접근 방식을 제시함
- Lucide React: Shadcn UI와 함께 제공되는 아이콘 라이브러리로, 다른 대안이 나타나기 전까지는 교체 필요성이 낮음
- TypeScript: 자바스크립트 프로젝트의 산업 표준으로, 개발자 경험 향상, 버그 감소, 코드 유지보수성 향상에 기여함
- Zod: TypeScript와 잘 맞는 검증 라이브러리로, 주로 서버 측 검증에 사용되며, 클라이언트 측 폼은 네이티브 HTML 검증을 활용하여 복잡성을 줄임
- nuqs: Next.js에서 URL 상태(예: 검색, 정렬, 페이지네이션)를 타입 안전하게 관리하기 위한 도구로, 다른 프레임워크에서는 내장 기능이나 다른 라이브러리를 사용할 수 있음
- Zustand: 클라이언트 측 상태 관리를 위한 선택적 도구로, URL 상태, 클라이언트 측 데이터 캐싱, 서버 주도 리액트 애플리케이션의 발전으로 사용 빈도가 줄어듦
- React Query: 무한 스크롤 등 복잡한 클라이언트 측 데이터 페칭에 사용되는 선택적 도구로, 프로젝트 복잡도가 낮을 경우 서버 컴포넌트만으로도 충분함
- Prisma (ORM): 안정적인 ORM 선택으로, 최신 트렌드에 따라 Drizzle로 대체할 수 있으나, 현재는 Prisma를 선호함
- Supabase (데이터베이스): Postgres 데이터베이스를 제공하는 서비스로, 유연성을 위해 데이터베이스만 사용하고 Prisma로 연결하여 다른 데이터베이스로의 교체를 용이하게 함
- Lucia (인증): 더 이상 유지보수되지 않지만, Oslo, Argon2, Arctic 등을 활용한 인증 시스템 구축 학습 자료로 사용되어, 서드파티 솔루션에 의존하지 않는 맞춤형 인증 시스템을 구현할 수 있음
- S3 (파일 업로드): AWS S3, 프리사인드 URL, AWS IAM을 활용하여 유연하고 저렴한 파일 저장 솔루션을 구축할 수 있으며, 대부분의 서드파티 서비스도 동일한 API를 사용하므로 필요 시 제공자를 변경하기 용이함
- Inngest (큐): 백엔드에서 복잡한 작업 조율을 위해 사용되는 도구로, 시간에 민감하지 않은 백그라운드 작업에 적합하며, 설정과 유지보수가 용이한 큐 시스템을 제공함
- React Email + Resend: 전자는 리액트 컴포넌트로 이메일 템플릿을 생성하게 해주며, 후자는 이메일 전송을 위한 훌륭한 솔루션으로, 이전에 사용하던 Postmark에서 Resend로 전환하여 만족스러운 결과를 얻음
- Vercel (호스팅): 수년간 사용해 온 풀스택 애플리케이션 호스팅 솔루션으로, 자체 호스팅을 원할 경우 Hetzner/DigitalOcean과 Coolify를 추천함
- CloudFlare (도메인): 다양한 도메인 관리 경험 후, 현재는 CloudFlare의 우수한 UI와 DNS 레코드에 추가 정보를 첨부할 수 있는 기능으로 인해 만족스럽게 사용 중임
- Stripe (결제 게이트웨이): 수년간 사용해 온 결제 게이트웨이로, 훌륭한 문서와 API를 제공하지만, 기능과 API 범위가 확대되어 복잡해질 수 있음
- 테스팅 및 도구: React Testing Library와 Cypress/Playwright의 조합이 좋은 선택이며, ESLint(미래에는 Biome), Prettier를 추천함. UI 문서를 위해 여전히 Storybook을 사용하며, 터미널에서 TypeScript를 실행하기 위해 tsx를 사용함
GeekNews Weekly에 포함된 글입니다.
에디터 코멘트 보기