내가 쓰고 있는 기술스택, 과연 최신 트렌드에 맞을까? 실제 프로젝트의
package.json을 까놓고 분석해봤습니다.
현재 기술스택 한눈에 보기
| 분류 | 라이브러리 | 버전 | 역할 |
|---|---|---|---|
| 코어 | React | 19 | UI 프레임워크 |
| 빌드 | Vite | 7 | 번들러 + 개발 서버 |
| 언어 | TypeScript | 5.9 | 타입 안전성 |
| 스타일 | Tailwind CSS | 4 | 유틸리티 CSS |
| UI 컴포넌트 | Shadcn + Radix UI | 4.x | 접근성 기반 컴포넌트 |
| 테이블 | TanStack React Table | 8 | 헤드리스 테이블 |
| 차트 | Recharts | 3 | 데이터 시각화 |
| 드래그앤드롭 | dnd-kit | 6~10 | DnD 인터랙션 |
| 날짜 | date-fns | 4 | 날짜 유틸리티 |
| HTTP | Axios | 1.13 | API 통신 |
| 캐러셀 | Embla Carousel | 8 | 슬라이더/캐러셀 |
| 토스트 | Sonner | 2 | 알림 메시지 |
| 드로어 | Vaul | 1 | 모바일 드로어 |
| 아이콘 | Phosphor Icons | 2 | 아이콘 세트 |
| 폰트 | Pretendard | 1.3 | 한글 웹폰트 |
| 다크모드 | next-themes | 0.4 | 테마 전환 |
| QR코드 | qrcode | 1.5 | QR 생성 |
| 패널 | react-resizable-panels | 4 | 리사이즈 패널 |
| 린트 | ESLint + Prettier | 9 / 3 | 코드 품질 |
평가: 얼마나 최신인가?
최신 트렌드에 잘 맞는 선택들
React 19 — 2024년 말 정식 출시된 최신 버전. Server Components, Actions, use() 훅 등 새 기능 포함. 현재 가장 최신.
Vite 7 — 빌드 도구의 사실상 표준. Webpack 대비 HMR 속도가 압도적. 최신 버전 사용 중.
Tailwind CSS 4 — 2025년 초 출시된 메이저 버전. Oxide 엔진으로 빌드 속도 대폭 향상. @tailwindcss/vite 플러그인까지 적용해서 최적.
Shadcn + Radix UI — 2024~2025년 가장 핫한 UI 솔루션. 복사해서 쓰는 방식이라 커스터마이징 자유도가 높고, 접근성(a11y) 기본 내장. 훌륭한 선택.
TanStack React Table — 헤드리스 테이블의 표준. 정렬, 필터, 페이지네이션을 자유롭게 구현 가능.
Sonner, Vaul — Shadcn 생태계와 잘 어울리는 경량 라이브러리. 트렌디한 선택.
검토해볼 만한 부분들
1. Axios → Fetch API 또는 ky
현재: axios ^1.13.6
대안: 네이티브 fetch 또는 kyReact 19 + Vite 7 환경이면 네이티브 fetch로 충분한 경우가 많습니다. axios는 여전히 좋은 라이브러리지만, 번들 사이즈(~13KB)를 줄이고 싶다면:
- 네이티브 fetch: 별도 설치 불필요, 인터셉터가 필요 없는 경우
- ky: fetch 래퍼, ~3KB, 재시도/타임아웃 내장
다만 axios의 인터셉터, 요청 취소, 진행률 추적 등을 활용 중이라면 그대로 유지하는 게 낫습니다.
2. Recharts → 용도에 따라 대안 검토
현재: recharts ^3.8.0
대안: @observablehq/plot, chart.js, echartsRecharts는 React 친화적이고 사용하기 쉽지만:
- 대시보드 수준의 복잡한 차트 → ECharts (Apache, 대규모 데이터 최적화)
- 가벼운 통계 차트 → Observable Plot (D3 기반, 선언적)
- 이미 잘 동작하고 있다면 → 그대로 Recharts 유지
3. 상태 관리 라이브러리 부재
현재 package.json에 전역 상태 관리 라이브러리가 없습니다. 프로젝트 규모에 따라:
- 소규모: React Context +
useState로 충분 (현재 접근법) - 중규모 이상: Zustand 추천 — 가볍고(~1KB), 보일러플레이트 최소, 2026년 현재 가장 인기
- 서버 상태: TanStack Query — API 캐싱, 재검증, 로딩/에러 상태 관리 자동화
4. 라우팅 라이브러리 부재
대안: react-router v7 또는 TanStack RouterSPA라면 라우터가 필요할 수 있습니다:
- React Router v7: 가장 대중적, Remix와 통합
- TanStack Router: 타입 안전 라우팅, 최근 주목받는 중
2026년 주목할 트렌드
RSC (React Server Components)
React 19의 핵심 기능이지만, Vite 단독으로는 RSC를 완전히 활용하기 어렵습니다. Next.js나 Remix 없이도 RSC를 쓸 수 있는 방법이 점점 늘어나는 추세입니다.
Biome (ESLint + Prettier 대체)
현재: ESLint 9 + Prettier 3 (설정 파일 2개)
대안: Biome (린트 + 포맷을 하나로, Rust 기반이라 빠름)ESLint + Prettier 조합이 잘 돌아가고 있다면 급하게 바꿀 필요는 없지만, 새 프로젝트를 시작한다면 Biome을 고려해볼 만합니다.
Bun 런타임
package.json과 별개로, 개발 환경에서 Bun을 런타임으로 사용하면 패키지 설치·스크립트 실행 속도가 크게 향상됩니다. 이미 사용 중이시죠!
총평
| 항목 | 평가 |
|---|---|
| 코어 (React + Vite + TS) | 최신 |
| 스타일링 (Tailwind 4 + Shadcn) | 최신 |
| 빌드 도구 | 최신 |
| UI 라이브러리 선택 | 트렌디 |
| HTTP 클라이언트 | 검토 여지 있음 |
| 상태 관리 | 규모에 따라 추가 검토 |
| 전반적 점수 | 9/10 |
전체적으로 2026년 기준 매우 최신 스택입니다. 핵심 기술(React 19, Vite 7, Tailwind 4, Shadcn)은 현재 프론트엔드 트렌드의 정석이라고 할 수 있습니다. 프로젝트 규모가 커지면 Zustand + TanStack Query 조합을 추가하는 정도만 고려하면 됩니다.
기술스택은 “최신이냐”보다 “프로젝트에 맞느냐”가 더 중요합니다. 유행을 쫓기보다는, 문제를 해결하는 데 가장 적합한 도구를 고르는 게 정답입니다.