내가 쓰고 있는 기술스택, 과연 최신 트렌드에 맞을까? 실제 프로젝트의
package.json을 까놓고 분석해봤습니다.이 글은 2026년 3월에 쓴 글을 2026년 7월 기준 최신 동향으로 업데이트한 버전입니다.
현재 기술스택 한눈에 보기
| 분류 | 라이브러리 | 버전 | 역할 |
|---|---|---|---|
| 코어 | React | 19.2 | 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.2 — 2024년 말 정식 출시된 React 19 는 2026년 현재 19.2 대까지 패치가 이어지며 엔터프라이즈 프로덕션에서 검증이 끝난 상태입니다. Server Components 와 Actions 는 이제 실험 기능이 아니라 표준이고, React Compiler 가 빌드 파이프라인에서 메모이제이션을 자동 처리하면서 useMemo/useCallback 수동 최적화가 사실상 옛말이 됐습니다. 2026년 상반기의 가장 큰 체감 변화입니다.
Vite 7 — 빌드 도구 경쟁은 끝났습니다. 2026년 초 기준 주간 npm 다운로드 8천만 회를 넘기며 Webpack 을 완전히 밀어냈고, 모든 주요 프레임워크의 기본 빌드 도구가 됐습니다. 최신 버전 사용 중.
Tailwind CSS 4 — Oxide 엔진으로 빌드 속도를 대폭 끌어올린 메이저 버전. @tailwindcss/vite 플러그인까지 적용해서 최적. 2026년에도 유틸리티 CSS 의 표준 지위는 흔들림이 없습니다.
Shadcn + Radix UI — 복사해서 쓰는 방식이라 커스터마이징 자유도가 높고, 접근성(a11y) 기본 내장. 여전히 가장 무난하면서 강력한 선택입니다.
TanStack 생태계 — React Table 은 헤드리스 테이블의 표준. 그리고 2026년 들어 TanStack 은 테이블·쿼리를 넘어 풀스택 프레임워크(TanStack Start)까지 영역을 넓히는 중입니다(아래 트렌드 섹션 참고).
Sonner, Vaul — Shadcn 생태계와 잘 어울리는 경량 라이브러리. 트렌디한 선택.
검토해볼 만한 부분들
1. Axios → Fetch API 또는 ky
현재: axios ^1.13.6
대안: 네이티브 fetch 또는 ky
React 19 + Vite 7 환경이면 네이티브 fetch로 충분한 경우가 많습니다. axios는 여전히 좋은 라이브러리지만, 번들 사이즈(~13KB)를 줄이고 싶다면:
- 네이티브 fetch: 별도 설치 불필요, 인터셉터가 필요 없는 경우
- ky: fetch 래퍼, ~3KB, 재시도/타임아웃 내장
다만 axios 의 인터셉터, 요청 취소, 진행률 추적 등을 활용 중이라면 그대로 유지하는 게 낫습니다.
2. Recharts → 용도에 따라 대안 검토
현재: recharts ^3.8.0
대안: @observablehq/plot, chart.js, echarts
Recharts 는 React 친화적이고 사용하기 쉽지만:
- 대시보드 수준의 복잡한 차트 → ECharts (Apache, 대규모 데이터 최적화)
- 가벼운 통계 차트 → Observable Plot (D3 기반, 선언적)
- 이미 잘 동작하고 있다면 → 그대로 Recharts 유지
3. 상태 관리 라이브러리 부재
현재 package.json에 전역 상태 관리 라이브러리가 없습니다. 프로젝트 규모에 따라:
- 소규모: React Context +
useState로 충분 (현재 접근법) - 중규모 이상: Zustand 추천 — 가볍고(~1KB), 보일러플레이트 최소, 2026년 현재도 가장 인기
- 서버 상태: TanStack Query — API 캐싱, 재검증, 로딩/에러 상태 관리 자동화
4. 라우팅 라이브러리 부재
대안: react-router v7 또는 TanStack Router
SPA 라면 라우터가 필요할 수 있습니다:
- React Router v7: 가장 대중적, Remix 통합 이후로도 꾸준
- TanStack Router: 타입 안전 라우팅. 3월에는 "최근 주목받는 중"이라고 썼는데, 넉 달 사이 TanStack Start 의 부상과 함께 사실상 주류 후보로 올라왔습니다
5. ESLint + Prettier → Biome (3월엔 "고려해볼 만", 지금은 "적극 검토")
현재: ESLint 9 + Prettier 3 (설정 파일 2개, 의존성 다수)
대안: Biome 2.x (린트 + 포맷 단일 도구, Rust 기반)
3월 글에서는 "새 프로젝트라면 고려해볼 만하다" 수준으로 적었는데, 2026년 중반 기준으로는 무게가 확실히 옮겨갔습니다. Biome 2.x 는 ESLint 대비 수십 배 빠른 린트 속도에 포맷터까지 하나로 통합했고, AWS·Google·Microsoft·Cloudflare·Discord·Vercel 등이 프로덕션에 도입하면서 "실험적 대안"에서 "검증된 선택지"로 넘어왔습니다. 기존 프로젝트도 마이그레이션 도구가 성숙해져서 전환 비용이 많이 낮아진 상태입니다.
2026년 중반, 주목할 트렌드
React Compiler — 이제 기본값
3월에는 RSC 를 첫 번째 트렌드로 꼽았는데, 상반기를 지나며 실제 체감 변화가 더 컸던 건 React Compiler 쪽입니다. 컴파일 타임 자동 메모이제이션이 안정화되면서 성능 최적화 코드를 손으로 쓰는 일 자체가 줄었습니다. 신규 프로젝트라면 켜지 않을 이유가 없습니다.
RSC — 확산, 그리고 보안 사건
React Server Components 는 서버에서만 실행되어 클라이언트 번들 비용이 0이고, DB·파일시스템에 직접 접근할 수 있다는 장점으로 계속 확산 중입니다. Next.js 없이도 React Router, Waku, Parcel/Vite 계열 구현으로 RSC 를 쓸 수 있는 길이 넓어졌습니다.
다만 짚고 가야 할 사건이 하나 있습니다. 2025년 12월 RSC 구현체에서 원격 코드 실행(RCE) 취약점이 발견되어 React·Next.js 를 비롯해 RSC 를 구현한 여러 프레임워크(React Router, Waku, RedwoodSDK, Parcel/Vite 구현 포함)가 영향을 받았습니다. React 19.2.4(2026년 1월) 등 보안 패치가 배포됐으니, RSC 를 쓰는 프로젝트라면 런타임/프레임워크 버전을 패치 이후로 올렸는지 반드시 확인해야 합니다. "서버에서 실행되는 컴포넌트"라는 모델이 공격 표면도 서버로 옮긴다는 걸 보여준 사례입니다.
TanStack Start — Next.js 의 진짜 대항마
상반기의 프레임워크 뉴스는 단연 TanStack Start 입니다. 엔드투엔드 타입 안전성과 유연한 아키텍처를 내세워 빠르게 채택이 늘면서, Next.js·Remix 양강 구도에 실질적인 도전자로 올라섰습니다. "타입 안전이 최우선"인 팀이라면 신규 프로젝트에서 진지하게 평가해볼 가치가 있습니다.
Bun — 예상보다 빠른 확산
3월엔 "개발 환경에서 쓰면 빠르다" 정도로 적었는데, 확산 속도가 예상을 넘었습니다. 2025년 JavaScript Rising Stars 1위를 찍고, 2026년 5월 기준 주간 다운로드 150만 회를 넘겼습니다. 런타임·패키지 매니저·번들러·테스트 러너가 하나로 통합된 도구라는 포지션이 monorepo 환경에서 특히 강력합니다(대형 monorepo 패키지 설치 기준 npm 32초 vs Bun 1.2초 수준의 벤치마크도 나왔습니다).
도구의 Rust 화
Biome(린트/포맷), Oxide(Tailwind 엔진), Rolldown(Vite 차기 번들러 코어)까지 — 성능이 중요한 JS 인프라가 Rust 로 재작성되는 흐름이 2026년의 큰 줄기입니다. 개별 도구 선택보다도, "느린 JS 기반 도구는 교체 대상이 된다"는 방향성 자체를 읽어두는 게 좋습니다.
한 걸음 더: 셀프호스팅 GitLab 전체 레포로 본 풀스택
여기까지는 이 사이트(www) 하나의 package.json 이야기였다. 그런데 내 코드는 이 레포 하나가 아니다. 셀프호스팅 GitLab(gitlab.doksam.com)에는 미러·삭제 예정을 빼고 78개 레포가 있다. GitLab languages API 로 전부 긁어서 언어 분포를 내보면 이렇다.
| 언어 | 사용 레포 수 | 주 용도 |
|---|---|---|
| Shell | 36 | 운영 스크립트, podman Quadlet ops 레포 |
| JavaScript | 26 | 웹 프론트, 레거시 프로젝트 |
| TypeScript (+TSX) | 24 | Next.js/React 서비스, MCP 서버 |
| Python | 13 | LLM 파이프라인, 인프라 자동화 |
| Java (+JSP) | 10 | 업무 시스템, 레거시 |
| Go | 10 | 수집기·서버 데몬 |
| PLpgSQL | 5 | PostgreSQL 스키마·프로시저 |
| C++ / Rust | 3 | 문서 변환 엔진 |
| Swift / Kotlin | 4 | iOS·Android 네이티브 |
프론트엔드 트렌드 분석에서는 안 보이던 그림이 나온다. 가장 많은 레포에 들어 있는 언어는 React 도 TypeScript 도 아니고 Shell 이다.
계층별로 보면
웹 서비스 (TypeScript + Next.js/React) — 이 사이트(www)를 비롯해 디자인 시스템(doksam-ui), 문서 RAG 서비스(brain), 알림·모니터링 서버 프론트(alm-server), 주식·경마 분석 대시보드(kis, race, dok3node) 등. 위에서 분석한 React 19 + Tailwind 4 + shadcn 조합이 이 계층의 공통 표준이고, 시작점은 자체 스타터 템플릿(nextjs-starter)이다. 예외로 Svelte 가 한 레포(웹 디버깅 콘솔) 있다.
백엔드 데몬 (Go) — 뉴스 수집 포탈(news), 증권사 API 수집기(kiwoom), 이러닝 뷰어(kbitube), 알림 서버(alm-server 백엔드), 공유기 제어(iptime) 등 10개 레포. 크롤링·스케줄링·API 서빙처럼 "혼자 오래 도는 프로그램"은 전부 Go 다. 단일 바이너리 배포가 rootless podman 운영과 잘 맞는다.
데이터 (PostgreSQL) — 서비스마다 DB 를 따로 두지 않고 PostgreSQL 17 단일 클러스터를 전 서비스가 공유한다. PLpgSQL 이 잡히는 레포 5개가 그 흔적. 프론트가 어떤 프레임워크든 데이터는 한곳에 모인다.
AI/LLM (Python + TypeScript) — LLM 실험(llm), 문서 변환·RAG 파이프라인, 그리고 에이전트 인프라인 MCP 서버 모음(mcp-servers)과 Claude Code 부트스트랩 템플릿(claude-init), 세션 메모리 도구(claude-memory). 2026년 들어 가장 빠르게 늘어나는 계층이다.
네이티브·엔진 (C++/Rust, Swift/Kotlin) — 문서 포맷 변환 엔진(narak)은 C++와 Rust, 모바일은 iOS(Swift)·Android(Kotlin) 네이티브와 Capacitor 하이브리드가 섞여 있다.
업무·레거시 (Java/JSP, SAS) — 금융권 업무 지원 레포들. Spring·JSP 시대의 코드와 통계 처리용 SAS 까지, 트렌드 글에는 안 나오지만 실제 밥벌이 코드의 상당수가 여기 있다.
운영 (Shell) — 최다 계층. MinIO·ntfy·SonarQube·Grafana·LibreChat·Open WebUI 등 셀프호스팅 서비스마다 ops 레포를 하나씩 두고, rootless podman Quadlet 유닛 + 배포 스크립트 + GitLab CI 를 담는다. 서비스 하나 = ops 레포 하나 패턴이라 Shell 레포가 36개까지 불어났다.
이 그림에서 읽히는 것
- 트렌드 글과 인벤토리는 다르다. 프론트엔드만 보면 9/10 짜리 최신 스택이지만, 전체 레포의 절반은 Shell·Java·레거시다. 최신화는 "새로 짓는 것"의 속성이고, 포트폴리오는 역사가 쌓인 지층이다.
- 언어 선택이 역할별로 수렴했다. 웹은 TypeScript, 데몬은 Go, AI 는 Python, 운영은 Shell — 레포가 늘어도 조합은 이 네 축을 벗어나지 않는다. 트렌드를 쫓아 언어를 바꾸는 게 아니라, 역할이 언어를 고른다.
- 에이전트 시대의 부산물이 이미 지층 하나를 이룬다. MCP 서버, Claude 부트스트랩, 세션 메모리, ops 자동화 — AI 에이전트를 "쓰기 위한" 레포들이 2026년 상반기에만 여럿 생겼다. 다음 스택 분석 글에서는 이 계층이 별도 챕터가 될 것 같다.
총평
| 항목 | 평가 |
|---|---|
| 코어 (React 19.2 + Vite + TS) | 최신 |
| 스타일링 (Tailwind 4 + Shadcn) | 최신 |
| 빌드 도구 | 최신 |
| UI 라이브러리 선택 | 트렌디 |
| HTTP 클라이언트 | 검토 여지 있음 |
| 상태 관리 | 규모에 따라 추가 검토 |
| 린트/포맷 (ESLint + Prettier) | Biome 전환 적극 검토 |
| 전반적 점수 | 9/10 |
전체적으로 2026년 중반 기준으로도 매우 최신 스택입니다. 핵심 기술(React 19.2, Vite 7, Tailwind 4, Shadcn)은 여전히 프론트엔드 트렌드의 정석입니다. 3월과 달라진 점을 요약하면 — React Compiler 는 기본값이 됐고, Biome 은 "고려"에서 "적극 검토"로, TanStack Start 와 Bun 은 "지켜볼 것"에서 "실전 후보"로 올라왔습니다.
다만 전체 레포 전경에서 봤듯, 이 점수는 웹 프론트 계층의 이야기입니다. 실제 포트폴리오는 TypeScript 웹 + Go 데몬 + Python AI + Shell 운영의 네 축 위에 Java/JSP 지층이 깔린 모습이고, 그 전체가 하나의 PostgreSQL 과 셀프호스팅 GitLab CI 로 묶여 돌아갑니다.
기술스택은 "최신이냐"보다 "프로젝트에 맞느냐"가 더 중요합니다. 유행을 쫓기보다는, 문제를 해결하는 데 가장 적합한 도구를 고르는 게 정답입니다.