CRA 와 Vite 비교
CRA와 VITE의 특징 및 차이점 비교
Last updated
CRA와 VITE의 특징 및 차이점 비교
Last updated
리액트가 발표될 당시에는 리액트를 쉽게 시작할 수 있는 표준화된 템플릿이 존재하지 않았습니다.
리액트를 적용하기 위해서는 직접 npm install이나 CDN방식으로 HTML템플릿에 React 스크립트와 추가 패키지들을 직접 import해와서 작업을 해야 했습니다.
심지어 빠르게 변화하는 버전에 맞춰서 기존 코드들도 수정을 해줘야 했기에 리액트를 통한 유지보수는 더욱 어려웠죠.
이를 해결하기 위해 Create React App이 출시 되었습니다.
CRA는 리액트 프로젝트를 쉽게 시작할 수 있는 기본 템플릿을 제공합니다. CRA에는 리액트를 구동하기 위한 기본 설정, 로깅위한 도구 , 배포를 위한 설정 및 도구들을 하나의 패키지로 압축하여 제공합니다. CRA의 등장으로 개발자는 한줄의 간단한 명령어로 손쉽게 React 프로젝트를 시작할수 있게 되었고 , 이로인해 많은 개발자들이 리액트를 사용하게 되었습니다.
CRA로 리액트 프로젝트를 구성한다면 리액트 앱개발에 필요한 다양한 라이브러리가 기본구성으로 추가되어 있습니다. 대표적으로 Webpack과 Babel, ESLint등이 있습니다. 이 대표적인 구성 모듈들이 어떤 기능을 수행하는지 알아보도록 하겠습니다.
웹팩은 여러 자바스크립트 파일을 하나로 합쳐주는 역할을 하는 도구입니다. 리액트로 앱개발을 하다보면 상당히 많은 js파일을 사용합니다. Webpack은 이러한 js파일(모듈)들을 하나 혹은 설정에 따라 여러개의 묶음(bundle)으로 만들어 줍니다. 자바스크립트 번들러 라고도 불립니다.
자세한 기능은 Vite와 비교하면서 설명하도록 하겠습니다.
바벨은 TypeScript에서도 사용되었던 트랜스파일러입니다. 컴파일러라고 생각해도 좋겠죠. 바벨은 JSX문법이 적용된 JS파일을 브라우저환경에서 작동하는 JS파일로 변환해주는 역할을 합니다.
문법상의 오류나 에러가 발생할수 있는 코드, 사용하지 않는 변수 등 코드의 품질을 올려주기 위한 로깅 기능을 제공하는 모듈입니다. 팀프로젝트에서 문법작성 룰을 추가해서 일관된 코딩스타일을 강제로 적용시킬수 있습니다.
그 외에도 개발에 도움이 되는 다양한 도구들을 하나의 패키지로 압축해서 제공하는게 CRA입니다.
Vite는 CRA이후에 나온 프론트앤드 개발환경 설정 도구입니다. Vite는 React프로젝트 뿐 아니라 vue, angular등 다양한 프론트엔드 프로젝트의 템플릿을 생성하는데 사용합니다. Vite는 프랑스어로 "빠르다"라는 뜻 입니다.
의미 그대로 많은 부분에서 CRA방식의 프로젝트 보다 빠르게 동작하는데요, CRA와 비교하여 어떤 구성모듈의 차이로 빠른지에 대해 알아보도록 하겠습니다.
Vite는 네이티브 escript언어로 작성된 ESbuild를 통해 웹서버를 구축합니다.
CRA의 Webpack과 같은 js bundler입니다.
CRA와 Vite의 차이점에 알아보았습니다. CRA방식은 Vite방식에 비해 프로젝트 빌드도 느리고, 번들러의 압축용량도 크고, 서버 시작시간도 느리는 등 단점이 명확합니다.
따라서 프로덕션레벨의 애플리케이션을 만들어야 한다면 Vite방식이 좋습니다.
하지만 리액트를 공부하기 위해서는 CRA만한 패키지가 없습니다. 리액트앱을 구동하기 위한 모든 구성 모듈이 하나의 패키지에 모두 설치되어 있기 때문이죠.
따라서 리액트에 대해선 완벽히 알고 있다면 Vite방식으로 프로젝트를 생성하면 되겠고 공부를 위해서는 다양한 샘플과 튜토리얼이 존재하는 CRA방식으로 작업하는게 좋은 선택이라고 할 수 있습니다.
CRA와 Vite방식은 프로젝트 설정이나 import구문이 다르기 때문에 리액트 외적인 요소로 리액트를 학습하는데 방해가 될 수 있기 때문입니다. 여러분들은 리액트 공부는 CRA프로젝트로 진행하시고 문법에 대해 익숙해지시면 Vite방식으로 프로젝트를 진행하시면 되겠습니다.
