[설계 문서] TypeScript를 선택한 이유 (vs JavaScript)

이번에 기술 선택 이유를 고민해보면서 TypeScript와 버전 선택이 서비스 안정성과 유지보수에 미치는 영향을 생각해보게 되었습니다. 또 서비스 구조와 데이터 흐름을 미리 분석하며, 정적 타입 검사와 명확한 인터페이스 정의가 런타임 오류를 줄이고 개발 효율성을 높일 수 있다는 점을 확인헤 명확한 이유를 가지고 기술을 선택한 경험이 좋았습니다.

무작정 개발 먼저 들어가거나 좋아하는 기술이라는 이유로 사용하기보다는, 설계 단계에서 타입 시스템과 프레임워크 환경을 충분히 검토하는 것이 대규모 서비스 개발의 안정성과 효율성을 결정짓는 요소가 될 것이라고 생각합니다.

---

2. TypeScript 5.4.4

2-1. 선정 이유

• 튜닝 서비스는 유저 기반 데이터와 인터랙션, 서버와의 비동기 통신 등 복잡한 데이터 상태와 흐름을 다루는 구조이기 때문에 런타임 오류 방지를 위한 정적 타입 체크가 중요합니다.
• `React 18` 및 `Next.js 15` 환경에서 TypeScript 사용을 표준으로 권장하고 있으며, tsx, useState(), React.FC 등의 타입 정의를 통해 컴포넌트 단위의 타입 안정성을 확보할 수 있습니다.
• TypeScript는 JavaScript와 달리 정적 타입 검사가 가능하며, 런타임 오류 감소 및 리팩토링 시 안정성 확보, 자동완성으로 개발 생산성 증가, 코드 안정성을 사전에 검증할 수 있다는 점, 명확한 인터페이스를 가지고 있다는 장점이 있습니다.
• GitHub Octoverse 2024 기준 - 전체 JavaScript 프로젝트의 80% 이상이 TypeScript를 사용하며, 대형 프레임워크 (Vite, Next, Zustand, React Query 등) 대부분의 프론트엔드 대부분의 생태계가 TypeScript를 공식 지원합니다.

2-2. JavaScript vs TypeScript 

항목	JavaScript	TypeScript
타입 검사	없음 → 런타임 오류 가능성이 높음	컴파일 단계에서 타입 오류 감지 가능 → 안정성 확보
자동완성 지원	제한적	강력한 IDE 지원 → 자동완성, 타입 추론, 개발 생산성 향상
인터페이스 설계	암묵적, 불명확	명시적 타입 정의 → 협업 시 오류 방지, 코드 명확성 증가
리팩토링 안정성	예측 어려움, 오류 유발 가능	타입 기반 추적 가능 → 구조 변경 시 안정적
프로젝트 규모 적합성	소규모 프로젝트에 적합	중대형 프로젝트에 안정적 적용 가능
런타임 오류 위험	높음	낮음 (컴파일 단계에서 사전 검출)
학습 곡선	낮음	약간 높음 (타입 개념 학습 필요)
유연성	동적, 자유로운 문법	정적 타입 강제 → 유연성 제한, 안정성 증가

 

JavaScript는 웹 개발에서 가장 널리 사용되는 언어지만, 동적 타입 특성 때문에 런타임에서만 오류가 발견됩니다. 작은 프로젝트에서는 빠르고 유연하지만, SSR 기반 유저 맞춤 데이터와 복잡한 인터랙션을 다루는 대규모 서비스에서는 런타임 오류 가능성이 높아집니다.

 

TypeScript는 정적 타입 언어로, 컴파일 단계에서 오류를 미리 감지할 수 있어 안정성이 높습니다. React 컴포넌트의 props, 상태 관리(useState, useReducer 등)에 타입을 부여하면 컴포넌트 단위 안정성을 확보할 수 있고, 리팩토링도 안전하게 진행할 수 있습니다. 또한 자동완성, 타입 추론, 인터페이스 기반 설계 등 IDE 지원이 강력해 개발 생산성을 높이고 협업 시 코드 구조를 명확히 합니다.

 

튜닝 서비스는 매칭 조건 분기, 상태 기반 인터랙션, 서버 통신 로직이 복합적으로 얽혀 있어 타입 안정성과 유연성이 동시에 필요합니다. TypeScript는 조건부 타입, 제네릭, NoInfer 등을 활용해 복잡한 비즈니스 로직도 안전하게 처리할 수 있습니다. 실제로 Next.js, React, Vite, Zustand, TanStack Query 등 대부분의 프론트엔드 라이브러리가 TypeScript를 공식 지원하며, GitHub Octoverse 2024 기준 전체 JavaScript 프로젝트의 80% 이상이 TypeScript를 사용합니다.

 

결론적으로 JavaScript는 빠른 개발과 유연성을 제공하지만 안정성과 협업 효율에서는 한계가 있습니다. 반면 TypeScript는 정적 타입 검사와 명확한 인터페이스 설계로 대규모 SSR 기반 서비스에 최적화되어 있으며, 튜닝 서비스처럼 복잡한 데이터 흐름을 다루는 환경에서 안정성과 생산성을 동시에 보장합니다.

---

2-3. TypeScript 버전 선정 - 5.4.4

TypeScript 버전 비교하기

항목	TypeScript 5.3	TypeScript 5.4.4	TypeScript 5.8.3 ⭐️
릴리즈 일자	2023.11.20	2024.03.06	2025.02.28
주요 기능	import attributes, 모듈 해상도 개선	조건부 타입 정확도, NoInfer, 안정성	최신 JS 대응, 커스텀 모듈 설정, 새로운 문법 지원
조건부 타입 개선	제한적	조건부 타입의 정확성 향상	조건부 반환 타입 추론 향상
NoInfer 타입	없음	새롭게 도입됨	유지됨
최신 ECMAScript 기능	일부 (import attributes 등)	Object.groupBy, Map.groupBy 지원	Symbol.metadata, @decorator 지원
Next.js 15.3.0 호환성	호환되나 기능 제한	안정적 호환	공식 호환 (React 19 및 App Router 기반)
안정성 / 운영 적합성	기능은 적지만 안정적	기능 + 안정성 균형 우수	안정화된 최신 버전

왜 TypeScript 5.8.3이 우리 서비스에 더 적합한가?

1. 최신 문법 + 안정성 확보

• TypeScript 5.8.3은 5.8 버전의 최신 안정 릴리즈 버전으로, @decorator, Symbol.metadata, using 등 최신 문법이 반영됨과 동시에 내부 버그 수정 및 성능 최적화가 완료된 버전입니다.
• 특히 5.8.0 대비 일부 호환성 이슈와 안정성 개선이 이루어져, 서비스 적용 시 리스크를 최소화할 수 있습니다.

 

2. Next.js 15.3.0 + React 19와의 최적의 호환성

튜닝 서비스는 Next.js 15.3.0 + React 19 기반 SSR 서비스이며, TypeScript 5.8.3는 해당 환경에서 공식적으로 완전 호환되며, App Router, 서버 컴포넌트, React Server Actions 등과도 잘 작동합니다.

기술 스택	5.8.3 지원 여부	최소 요구 버전 (권장 이상)
Next.js 15.3.0	호환	>= 5.4 이상
React 19	호환	>= 5.4 이상
Vite	호환	>= 5.0
TanStack Query	호환	>= 5.0
Tailwind CSS 4.0	호환	>= 3.3
Zustand	호환	>= 4.3
shadcn/ui	호환	>= 0.5
기타	Framer Motion, React Hook Form 등 모두 호환	–

 

3. 대규모 서비스에 적합한 타입 시스템 강화

• Tuning은 매칭 조건 분기, 상태 기반 인터랙션, 서버 통신 로직이 복합적으로 얽혀있어 타입 안정성과 유연성이 동시에 필요한 경우가 많습니다.
• 5.8.3은 조건부 타입 추론이 개선되어 있고, NoInfer를 통해 제네릭 추론 제어가 가능하여 복잡한 비즈니스 로직을 정밀하게 다룰 수 있게 해줍니다.

→ TypeScript 5.8.3은 2025년 4월 기준 최신 안정 릴리즈로, 우리 서비스가 요구하는 최신 기능, 높은 타입 안정성, Next.js 환경과의 완전 호환을 모두 만족시킨다. 따라서 복잡한 SSR 기반 인터랙션 중심 구조에서도 가장 이상적인 선택으로 생각됩니다.