지금 당장 스택 업그레이드가 필요한 이유
여전히 React 18, Node.js 20, TypeScript 5.3을 사용하고 있다면 이 글을 주목하라. 2026년 기준으로 이 조합은 지난 시대의 기본값이 됐다. 단순히 새 기능을 놓치는 게 아니다. 실질적인 비용이 발생하고 있다:
- 🔴 Node.js 20 EOL — 2026년 4월 지원 종료. 보안 패치 없음
- 🔴 번들 크기 20~30% 비대 — 최신 툴링 대비
- 🔴 TypeScript strict 모드로 잡힐 버그들이 런타임까지 살아남음
- 🔴 CI/CD 파이프라인 불필요하게 느림
이 글은 한 주말에 실전 프로젝트를 다운타임 없이 업그레이드하는 단계별 실전 가이드다.
2026 스택 업그레이드 로드맵 전체 개요
| 컴포넌트 | 현재 (구버전) | 목표 (2026 기준) | 주요 변경점 |
|---|---|---|---|
| Node.js | v20 (EOL) | v22 LTS | 성능 향상, 보안 패치 |
| TypeScript | 5.3 | 5.7 | strict 추론 강화 |
| React | 18 | 19 | 컴파일러, Actions |
| npm | v10 | v11 | lock 파일 성능 |
STEP 1: 업그레이드 전 현황 감사 (Audit)
무조건 건드리기 전에 먼저 현재 상태를 스냅샷으로 찍어라. 롤백 포인트를 만드는 것이다.
# 현재 상태 스냅샷
node -v > .stack-audit.txt
npm -v >> .stack-audit.txt
npx tsc --version >> .stack-audit.txt
# 오래된 패키지 확인
npm outdated >> .stack-audit.txt
# 보안 취약점 점검
npm audit >> .stack-audit.txt
TypeScript strict 모드 위반 건수를 먼저 파악하라. 많다고 당황하지 말고 우선순위를 정하면 된다:
# tsconfig 변경 없이 strict 모드 위반 개수 확인
npx tsc --strict --noEmit 2> ts-strict-errors.txt
wc -l ts-strict-errors.txt
# 50개 미만 → 주말 오전에 처리 가능
# 200개 이상 → TypeScript 먼저 고치고 나머지 진행
STEP 2: Node.js v22 LTS 업그레이드
런타임을 먼저 올려야 한다. 프레임워크보다 항상 런타임이 우선이다.
# nvm 사용 (권장)
nvm install 22
nvm use 22
nvm alias default 22
# 버전 확인
node -v # v22.x.x 출력되어야 함
# npm도 함께 업그레이드
npm install -g npm@11
# 네이티브 모듈 재빌드 (필수!)
npm rebuild
⚠️ 흔한 오류: better-sqlite3, bcrypt, sharp 등 네이티브 모듈에서 ABI 불일치 에러가 발생할 수 있다. 이때는 npm rebuild 모듈명으로 개별 재빌드하면 해결된다.
STEP 3: TypeScript 5.7 업그레이드
5.5나 5.6에 멈추지 말고 5.7로 직행하라. 5.7의 narrowing 개선 덕분에 strict 모드 위반 수정 작업이 훨씬 쉬워진다.
npm install -D typescript@latest
# tsconfig.json 2026 기본값으로 업데이트
권장 tsconfig.json 설정 (2026 기준):
{
"compilerOptions": {
"target": "ES2024",
"module": "NodeNext",
"moduleResolution": "NodeNext",
"lib": ["ES2024", "DOM"],
"strict": true,
"noUncheckedIndexedAccess": true,
"exactOptionalPropertyTypes": true,
"skipLibCheck": true
}
}
STEP 4: React 19 마이그레이션
React 19는 컴파일러가 핵심이다. useMemo, useCallback, React.memo를 수동으로 쓰던 최적화가 자동화된다. 그리고 Actions로 서버/클라이언트 폼 처리가 완전히 바뀐다.
npm install react@19 react-dom@19
# 마이그레이션 코드모드 실행 (자동 수정)
npx react-codemod@latest --list
npx react-codemod@latest update-react-imports
# 타입 정의 업데이트
npm install -D @types/react@19 @types/react-dom@19
React 19에서 달라진 핵심 API
- use() 훅 — Promise와 Context를 동기적으로 읽기
- useActionState — 폼 제출과 비동기 액션 상태 관리
- useFormStatus — 부모 폼의 제출 상태 접근
- useOptimistic — 낙관적 UI 업데이트 내장
- ref as prop — forwardRef 더 이상 필요 없음
STEP 5: 패키지 매니저 최적화
모노레포나 대형 프로젝트라면 pnpm v9으로 전환을 고려하라. npm 대비 디스크 공간 절약과 설치 속도에서 눈에 띄는 차이가 난다:
npm install -g pnpm@9
# 기존 프로젝트에 적용
pnpm import # package-lock.json → pnpm-lock.yaml 변환
rm -rf node_modules package-lock.json
pnpm install
업그레이드 후 검증 체크리스트
업그레이드 완료 후 반드시 확인해야 할 항목들:
- ☐
npm run build— 빌드 성공 확인 - ☐
npm run test— 전체 테스트 통과 확인 - ☐
npx tsc --noEmit— TypeScript 에러 0건 확인 - ☐ 번들 크기 비교 — 이전 대비 개선 확인
- ☐ Lighthouse 성능 점수 측정
- ☐ 스테이징 환경 배포 후 E2E 테스트
- ☐ 네이티브 모듈 정상 동작 확인
2026 추천 풀스택 조합 정리
SaaS / 콘텐츠 플랫폼
Next.js 15 + TypeScript 5.7 + Prisma 6 + PostgreSQL
서버 컴포넌트 + SSR로 SEO와 성능을 동시에. Prisma 6는 더욱 강화된 타입 안전성 제공.
API 서버 / 백엔드
Hono + Node.js 22 + DrizzleORM + Turso
초경량 엣지 친화적 프레임워크. Express 대비 10배 빠른 요청 처리.
실시간 앱
Bun 1.2 + ElysiaJS + Supabase Realtime
Bun의 네이티브 WebSocket과 Supabase 실시간 구독의 조합.
결론 — 지금이 업그레이드 적기
Node.js 20 EOL이 2026년 4월이다. 지금 당장 v22 LTS로 올려야 보안 패치를 계속 받을 수 있다. React 19의 컴파일러는 수동 최적화 코드를 대거 제거해 코드베이스를 가볍게 만든다. TypeScript 5.7 strict 모드는 잠재적 버그를 컴파일 타임에 잡는다.
한 주말이면 충분하다. 위 가이드대로 순서를 지키고, 각 단계마다 커밋하면 롤백도 안전하다. 지금 시작하자.