# React 기술 스택 2025

> Clean Markdown view of GeekNews topic #19538. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=19538](https://news.hada.io/topic?id=19538)
- GeekNews Markdown: [https://news.hada.io/topic/19538.md](https://news.hada.io/topic/19538.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2025-03-03T10:52:01+09:00
- Updated: 2025-03-03T10:52:01+09:00
- Original source: [robinwieruch.de](https://www.robinwieruch.de/react-tech-stack/)
- Points: 53
- Comments: 1

## Summary

2025년을 위한 Full-Stack React 기술 스택에는 Next.js, Astro, Tailwind CSS, Shadcn UI, TypeScript, Zod, nuqs, Zustand, React Query, Prisma, Supabase, Lucia, S3, Inngest, React Email + Resend, Vercel, CloudFlare, Stripe 등이 포함됩니다. SaaS 또는 최소 기능 제품(MVP)을 개발하는데 필수적인 것들이므로 참고하세요.

## Topic Body

- 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를 사용함

## Comments



### Comment 35383

- Author: moon5g
- Created: 2025-03-04T06:22:50+09:00
- Points: 1

nuqs알아가네요 감사합니다.