[React & TS] 프로젝트 기술 스택 선정

목차

1. Vite

2. React

3. TypeScript

4. Vite + React + TypeScript 장점

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

1. Vite

Vite는 최근 많은 개발자들 사이에서 주목받고 있는 빌드 도구입니다. 기존의 Webpack을 대체하는 대안으로, 빠른 빌드 속도와 개선된 개발 환경을 제공합니다. Vite를 선택한 이유는 다음과 같습니다.

• 빠른 개발 서버 : Vite는 코드 변경 시 전체 프로젝트를 다시 빌드하는 대신, HMR( 핫 모듈 리플레이스먼트)를 통해 변경된 부분만 빠르게 업데이트하기 때문에 개발 서버가 매우 빠릅니다. 이로 인해 개발 중에 빠른 피드백을 받을 수 있어 생산성이 크게 향상됩니다.
• ES 모듈 기반 : Vite는 ES 모듈을 기반으로 하여, 브라우저에서 직접 모듈을 불러오는 방식을 사용합니다. 빌드 과정에서 불필요한 번들링을 최소화하고, 코드가 빠르게 실행될 수 있도록 합니다. 더 이상 복잡한 번들링 설정에 시간을 낭비할 필요가 없고, 개발자는 모듈을 직접 다루는 편리함을 누릴 수 있습니다.
• 최적화된 빌드 : Vite는 생산 환경 빌드 시에 esbuild를 사용하여 매우 빠른 빌드 성능을 자랑합니다. esbuild는 Go 언어로 작성되어, JavaScript와 TypeScript 코드를 변환하는 데 있어 기존의 JavaScript 기반 도구들보다 월등히 빠릅니다. 이 덕분에 빌드 시간이 현저히 단축됩니다.

2. React

React는 현재 가장 인기 있는 JavaScript 라이브러리 중 하나로, 사용자 인터페이스(UI)를 구축하는 데 매우 효율적입니다. React를 선택한 이유는 다음과 같습니다.

• 방대한 생태계 : React는 방대한 커뮤니티와 생태계를 자랑합니다. 다양한 라이브러리와 도구들이 존재하고, 문제를 해결하는 데 있어 다양한 리소스를 쉽게 찾을 수 있습니다. 또한, React의 공식 문서가 잘 정리되어 있어, 학습이 용이합니다.
• 컴포넌트 기반 구조 : React의 컴포넌트 기반 아키텍처는 코드의 재사용성과 유지보수성을 크게 향상시킵니다. 각각의 UI 요소를 독립적인 컴포넌트로 작성하고, 필요한 곳에서 해당 컴포넌트를 재사용할 수 있기 때문에 복잡한 UI를 관리하는 데 유리합니다.
• 선언적 렌더링 : React의 선언적 렌더링 방식은 개발자가 UI의 상태를 쉽게 관리하고, UI가 자동으로 업데이트되도록 합니다. 상태 변경이 있을 때마다 UI를 어떻게 업데이트할지 명시적으로 작성할 필요 없이 UI를 자동으로 렌더링합니다.

3. TypeScript

TypeScript는 JavaScript에 타입을 추가하여 더 안전하고 예측 가능한 코드를 작성할 수 있게 도와주는 언어입니다. TypeScript를 선택한 이유는 다음과 같습니다.

• 정적 타입 체크를 통한 에러 사전 예방 : TypeScript는 컴파일 시점에 타입을 체크하기 때문에, 런타임에서 발생할 수 있는 많은 오류를 사전에 예방할 수 있습니다. TypeScript는 타입을 명시적으로 정의함으로써 코드의 일관성을 유지할 수 있습니다.
• 자동 완성 및 IDE 지원 : TypeScript는 코드 자동 완성과 강력한 IDE 지원을 제공합니다. 코드 작성 시 실시간으로 타입 정보를 제공하고, 잘못된 타입을 사용할 경우 경고를 표시해 줍니다. 이는 더 정확하고 빠르게 코드를 작성할 수 있게 도와줍니다.

4. Vite + React + TypeScript의 장점

Vite, React, TypeScript를 결합하면 각각의 기술이 제공하는 장점들이 합쳐져, 효율적이고 생산적인 개발 환경을 만들어냅니다.

 

• 빠른 빌드와 핫 리로딩
  : Vite의 빠른 빌드 속도와 핫 모듈 리플레이스먼트는 React와 TypeScript의 생산성을 크게 향상시킵니다. 코드를 변경하고 빠르게 결과를 확인할 수 있습니다.
• 타입 안전성
  : TypeScript는 React 컴포넌트의 상태나 props에 타입을 명시적으로 정의할 수 있게 해 주어, 런타임 오류를 최소화합니다. 또한, 큰 프로젝트에서도 코드가 어떻게 작성되었는지 명확하게 파악할 수 있어 유지보수성이 높아집니다.
• 편리한 개발 경험
  : Vite의 빠른 빌드 성능과 React의 컴포넌트 기반 구조, TypeScript의 정적 타입 시스템이 결합되면, 개발자는 더 적은 시간에 더 많은 기능을 구현할 수 있습니다.

 

[TS] 타입스크립트의 유용한 유틸리티 타입

 

[TS] 타입스크립트 주요 기능과 기본 문법 소개