React Create App
맞습니다. Create React App (CRA)는 React 프로젝트를 시작하기 위한 보일러플레이트로, 기본적인 설정 및 필수 라이브러리를 이미 포함하고 있어 React 애플리케이션을 빠르게 시작할 수 있게 해줍니다.
CRA의 장점
CRA를 사용하면 개발자는 초기 설정, webpack, babel 및 eslint와 같은 번거로운 작업에 시간을 투자하지 않고도 React 프로젝트를 빠르게 구축할 수 있습니다.
CRA를 사용하면 사용자가 직접 해당 라이브러리나 설정들을 유지보수 해주지 않아도 라이브러리 의존성, 업데이트 등을 자동으로 해줍니다.
react-scripts 패키지
이 패키지는 CRA 프로젝트의 빌드, 개발 서버, 번들링, Babel 및 ESLint 설정, 자동 접두사 처리 (Autoprefixer), HMR(Hot Module Replacement), 서비스 워커(PWA), React Router등과 같은 모든 필수 도구와 설정을 하나의 의존성으로 제공합니다.
Autoprefixer는 CSS 코드를 작성할 때 브라우저 호환성을 고려하여 CSS 속성에 자동으로 접두사를 추가하는 도구입니다. 다양한 브라우저에서 CSS 속성이 제대로 지원되도록 하기 위해 사용됩니다. 예를 들어, CSS 속성이나 값이 표준에 따라 "-webkit-" (WebKit 기반 브라우저용), "-ms-" (Internet Explorer용) 등과 같은 접두사를 갖는 경우, Autoprefixer는 이를 자동으로 처리하여 브라우저 간의 호환성을 유지하고 개발자가 이러한 접두사를 일일이 작성하지 않도록 도와줍니다.
CRA의 단점
CRA가 초기 설정을 추상화하고 숨김으로써 프로젝트 초기 셋팅을 간단하게 해주지만, 설정들이 숨겨져 있기 때문에 사용자가 설정을 바꿔 커스터마이제이션을 하기에는 제약이 있습니다.
이러한 단점은 eject를 통해 해결할 수 있습니다.
"eject"는 프로젝트의 설정을 수정하거나 사용자 정의 설정을 추가하려는 고급 사용자를 위한 옵션입니다. 이것은 CRA가 초기 설정을 추상화하고 숨기는 것을 해제하여 웹팩과 바벨 설정 등을 직접 편집할 수 있게 합니다. 예를 들어, CRA에서 eject를 수행하면 프로젝트 디렉토리에 "config"와 "scripts" 디렉토리가 생성되며, 여기에 설정 파일이 포함됩니다.
React Create App와 Vite는 둘 다 React 애플리케이션을 빠르게 설정하고 개발할 수 있는 도구이지만, 몇 가지 중요한 차이점이 있습니다.
React Create App:
-
Create React App(CRA): Create React App은 Facebook에서 제공하는 공식적인 React 앱 개발 도구로, 매우 간편하게 React 프로젝트를 초기화하고 설정할 수 있습니다.
-
Webpack: Create React App은 Webpack을 사용하여 프로젝트를 번들링하고 구성합니다. 기본적인 설정은 숨겨져 있으며, 개발자가 추가적인 설정을 하려면 eject(프로젝트 설정을 외부로 노출)해야 합니다.
-
설정 복잡성: Create React App은 설정을 간소화하고 개발자가 설정을 건드리지 않도록 하는 것을 중시합니다. 이것은 프로젝트 시작 단계에서는 편리할 수 있지만, 고급 사용자가 설정을 수정하려면 eject가 필요하고, 이것은 일부 사용자에게 제한을 가할 수 있습니다.
Vite:
-
Vite: Vite는 더 최근에 등장한 도구로, Vue.js의 개발 도구로 시작되었지만 React 및 다른 프레임워크와도 함께 사용할 수 있습니다. Vite는 기존 도구에 비해 더 빠른 개발 환경을 제공하고 성능이 우수하다는 특징을 가지고 있습니다.
-
ES Modules: Vite는 최신 브라우저에서 지원하는 ES 모듈을 사용하며, 번들링을 런타임이 아닌 빌드 시간에 처리합니다. 이로써 개발 환경이 더 빨라지고, 개발 시 빠른 새로고침과 모듈 번들링을 사용하여 프로덕션 빌드의 성능을 향상시킬 수 있습니다.
-
설정 수정: Vite는 사용자 정의 설정을 수정하기가 더 쉽습니다. 미리 구성된 설정을 제공하며, 개발자는 필요한 경우 설정을 직접 수정할 수 있습니다.
-
빠른 개발 서버: Vite는 HMR(Hot Module Replacement)과 함께 제공되어 수정한 코드를 빠르게 반영하여 더 빠른 개발 서버 경험을 제공합니다.
결론적으로, Create React App는 React 프로젝트를 빠르게 시작하고 간단한 설정을 제공하는 훌륭한 선택이지만, 더 많은 퍼포먼스와 설정 커스터마이제이션을 원하는 경우 Vite는 더 나은 선택일 수 있습니다. Vite는 더 빠르고 유연한 개발 경험을 제공하며, React와 다른 프레임워크를 위한 범용 도구로 사용할 수 있습니다.
