기술 버전
런타임 Node 22.13.0
언어 TypeScript 5.7.3
코어 Next.js, React.js 15.3.1, 19.0.0
스타일링 TailwindCSS, tailwind-variants 4.1.4, 1.0.0
아키텍처 FSD
상태관리 Zustand 5.0.3
빌드 Webpack, Turbopack
패키지 매니저 Pnpm YarnBerry
인증 Next-auth 4.24.11
테스트 Jest(Unit)/Playwright,Cypress(E2E) 29.7.0/ 1.52.0. 14.3.2
애니메이션 Framer-motion 12.9.2
유효성 검사 Zod, React-hook-form 3.24.3, 7.56.1
디자인시스템 Shadcn 29.7.0
Mocking Postman Mock Server v11
기타 eslint,es-toolkit, prettier, js-conefetti 9.25.1, 1.36.0, 3.5.3, 0.12.0

비지니스 상황 + 기술적인 맥락

1. 언어

검토: JavaScript, TypeScript

JS가 아닌 TS를 선택한 이유는, 빌드 시간에 미리 오류를 찾아냄으로써 휴먼 에러를 방지하고 웹 서비스를 안정적으로 운영하는 데에 큰 도움이 됩니다.

예측 불가능한 버그를 사전에 방지함으로써 서비스 안정성과 유지보수성을 높이기 위한 선택입니다.

버전 (TypeScript v5.7.3)

2025년 2월 28일 v5.8.3 출시 및 Stable 버전

하지만, 2주전까지 버그에 대해 활발히 수정이 진행 중이어서 추후 크리티컬한 문제를 방지하기 위해 한 단계 다운그레이드하여 v5.7.3을 선정하였습니다.

<aside> ❓

단순히 좋은 테스트 코드와 코드 컨벤션으로도 비슷한 안정성을 얻을 수 있다고 생각하는데, TypeScript가 이러한 단점들을 상쇄할 만큼 실질적인 가치를 제공할까?

TypeScript는 분명 추가적인 개발 시간과 빌드 복잡성이라는 비용이 있습니다. 하지만 제 경험상 이 투자는 중장기적으로 큰 가치를 창출합니다.

테스트 코드와 컨벤션만으로는 잡아내기 어려운 문제들이 있습니다.

예를 들어, 이전 프로젝트에서 API 응답 형태가 변경되었을 때, JavaScript였다면 런타임에서만 발견되었을 오류를 TypeScript는 즉시 컴파일 단계에서 발견해 수십 개의 잠재적 버그를 사전에 방지했습니다.

또한, 초기에는 개발 속도가 다소 느려졌지만 프로젝트 규모가 커질수록 버그 수정과 기능 추가 시간이 오히려 단축되어 장기적으로는 개발 생산성이 향상되었습니다.

따라서, 물론 모든 프로젝트에 TypeScript가 필요하진 않지만, 복잡하고 장기적인 프로젝트에서는 그 가치가 투자 비용을 크게 상회한다고 생각합니다.

</aside>

버전 5.8.3을 선택한 이유

우리 프로젝트에서 사용하는 Next 15는 최소 TypeScript 5.1.3 이상의 버전이 요구됩니다.

정확한 타입 추론 return 문 내의 조건부 반환 타입에 대한 향상된 검사로 오류 방지
향상된 성능 프로젝트 로딩 및 업데이트 시의 속도 개선
모듈 호환성 강화 ESM과 CommonJS 간의 원활한 상호 운용성 제공
유연한 실행 옵션 --erasableSyntaxOnly를 통한 런타임에 영향 없는 구문 제거 가능

tsconfig.json 설정

안정성, 최적화, 생산성 향상을 위한 옵션 설정 정리

{
  "compilerOptions": {
    "target": "ES2022", // 최신 JS 문법 사용을 위한 설정
    "module": "ESNext", // 트리쉐이킹과 번들러 호환성 확보
    "strict": true, // 타입 안정성 극대화 및 버그 예방 (개발모드)
    "noUnusedLocals": true, // 불필요한 코드 제거 및 유지보수성 향상
    "noUnusedParameters": true, // 사용하지 않는 인자 제거로 코드 명확성 향상
    "moduleResolution": "bundler", // bundler 기반 환경(Vite, Next.js 등)에 최적화
    "esModuleInterop": true, // CommonJS 모듈 호환성 확보 (import 사용 시 유연성 증가)
    "forceConsistentCasingInFileNames": true, // OS 간 경로 대소문자 충돌 방지
    "resolveJsonModule": true, // JSON import 가능 (환경 설정, 메시지 등 유용)
    "baseUrl": ".", // 절대 경로 기반 import를 위한 전제 설정
    "paths": { // 경로 별칭 설정 (추후 추가)
      "@app/*": ["./src/app/*"],
      "@components/*": ["./src/components/*"],
      "@lib/*": ["./src/lib/*"],
      "@public/*": ["./public/*"],
      "@service/*": ["./service/*"]
    }
    "isolatedModules": true, // 파일 단위 트랜스파일을 위한 필수 옵션(Next에서 이점)
    "skipLibCheck": true // 외부 타입 검사 생략으로 빌드 속도 개선
  }