이번 프로젝트에서 늘 사용하던 CRA가 아닌 Vite를 사용해보았다. Vite가 개발 서버 구동이 빠르다는 것과 리액트마저 CRA 대신 Vite를 추천할 정도라 사용하긴 했지만 구체적으로 어떤 원리에서 빠르다고 하는건지 알지는 못했다.
CRA(Create-React-App) 보다는 Vite 를 사용하는건 어떨까? 글을 읽었지만 'Esbuild(Go lang 으로 만들어짐)기반', 'production 빌드시에는 Rollup 을 사용하여 빌드' 등 처음 보는 용어가 많아 와닿지 않았다.
그래서 일단 ChatGPT v3.5 심층 면접으로 CRA와 Vite에 대한 막연한 궁금증을 해결해 보았다.
Vite를 사용하는 이유
cra와 비교해서 vite를 사용하는 이유에 대해 설명해 주세요
Vite와 Create React App(CRA)은 모두 프론트엔드 개발 환경을 구성하기 위한 도구이지만, 몇 가지 주요 차이점이 있습니다.
- 개발 서버 시작 시간: Vite는 서버 시작 시간이 CRA에 비해 매우 빠릅니다. 이는 Vite가 모듈을 요청할 때마다 동적으로 변환하는 방식 때문입니다. 반면 CRA는 개발 서버를 시작할 때 모든 모듈을 한 번에 변환합니다.
- 모듈 번들링: Vite는 개발 모드에서는 ES 모듈을 사용하여 브라우저에서 직접 모듈을 로드합니다. 이를 통해 HMR(Hot Module Replacement)이 매우 빠르게 이루어집니다. 반면 CRA는 Webpack을 사용하여 모든 코드를 번들로 만듭니다.
- Vue.js 지원: Vite는 Vue.js의 창시자 Evan You에 의해 만들어졌으므로 Vue.js와 더욱 잘 호환됩니다. 반면 CRA는 기본적으로 React를 지원하며, Vue.js를 사용하려면 추가 설정이 필요합니다.
- 빌드 속도: Vite는 Rollup을 사용하여 빌드하며, CRA보다 빌드 속도가 훨씬 빠릴 수 있습니다.
- 환경 설정: CRA는 설정이 모두 미리 구성되어 있어 편리하지만, 사용자 정의 설정을 추가하려면 eject 과정을 거쳐야 합니다. 반면 Vite는 사용자 정의 설정을 쉽게 추가할 수 있습니다.
이러한 이유로 인해, 특히 개발 서버 시작 시간, HMR 속도, Vue.js 지원 등을 중요하게 생각하는 개발자들이 Vite를 선택할 수 있습니다. 하지만 CRA도 그 자체로 매우 강력한 도구이며, 많은 커뮤니티와 예제 코드를 제공하므로, 어떤 도구를 선택할지는 프로젝트의 요구사항과 개인의 선호에 따라 달라질 수 있습니다.
'Vite는 Rollup을 사용하여 빌드해서 빠르다' 라는 말이 어떤건지 잘 모르겠어요
먼저, Rollup이라는 것은 JavaScript 모듈 번들러입니다. Webpack과 비슷한 역할을 하지만, 라이브러리와 애플리케이션의 번들링에 특화되어 있습니다.
Vite가 Rollup을 사용하면서 빌드 속도가 빠르다는 것은, Rollup의 특징과 Vite의 동작 방식 때문입니다.
Rollup의 특징: Rollup은 코드를 가능한 한 작은 번들로 만들기 위해 'tree-shaking'이라는 기법을 활용합니다. 이는 사용되지 않는 코드를 제거함으로써 최종 번들의 크기를 줄이고, 따라서 로딩 시간을 단축시키는 효과가 있습니다.
Vite의 동작 방식: Vite는 개발 모드에서는 모듈을 동적으로 변환하고, 빌드 시에만 Rollup을 사용합니다. 이렇게 함으로써 Vite는 개발 과정에서 빠른 HMR을 제공하면서, 빌드 시에는 Rollup을 통해 효율적인 번들을 생성합니다.
이 두 가지 조합이 Vite의 빌드 속도를 빠르게 만드는 주요 요인입니다. 이 외에도 Vite와 Rollup은 모두 ES 모듈 기반으로 작동하므로, 브라우저의 네이티브 모듈 시스템을 최대한 활용하여 성능을 향상시킵니다.
'Vite는 개발 과정에서 빠른 HMR을 제공한다'는 말이 어떤건지 잘 모르겠어요.
HMR은 Hot Module Replacement의 약자로, 웹 애플리케이션을 실행하는 동안 실시간으로 모듈을 업데이트하고 적용하는 기능을 말합니다. 이 기능은 웹 페이지를 새로고침하지 않고도 코드 변경 사항을 즉시 확인할 수 있게 해주어 개발 효율성을 크게 향상시킵니다.
Vite가 빠른 HMR을 제공한다는 것은, Vite가 코드 변경 사항을 감지하면 해당 모듈만을 즉시 재컴파일하고 브라우저에 전달하여 적용한다는 것을 의미합니다. 이는 전체 애플리케이션을 재컴파일하거나 페이지를 새로고침하는 것보다 훨씬 빠르기 때문에, 개발 과정에서 시간을 절약할 수 있습니다.
또한, Vite는 개발 모드에서 모듈을 동적으로 변환하기 때문에, 변경된 모듈만을 재컴파일하고 브라우저에 즉시 전달할 수 있습니다. 이는 Vite가 HMR을 빠르게 처리하는 또 다른 이유입니다.
첫 번째 질문에 대한 답변에서 '환경 설정: CRA는 설정이 모두 미리 구성되어 있어 편리하지만, 사용자 정의 설정을 추가하려면 eject 과정을 거쳐야 합니다. 반면 Vite는 사용자 정의 설정을 쉽게 추가할 수 있습니다.' 라고 했는데 사용자 정의 설정이 필요한 예시를 알려주세요
사용자 정의 설정이 필요한 경우는 여러 가지가 있습니다. 아래에 몇 가지 예시를 제시해 보겠습니다.
-
웹팩 설정 변경: Create React App (CRA)은 웹팩을 기반으로 동작합니다. 하지만 CRA는 내부적으로 웹팩 설정을 감추고 있어, 이를 변경하려면 eject 과정이 필요합니다. 웹팩 설정 변경이 필요한 경우는 다음과 같습니다.
◦ 특정 파일 형식에 대한 로더(loader) 설정 변경
◦ 플러그인 추가
◦ 번들링 최적화 설정 변경 -
환경 변수 설정: 프로젝트가 실행될 환경에 따라 다른 설정값을 사용해야 할 때, 이를 환경 변수로 관리하곤 합니다. 이 경우에도 CRA는 기본적으로 제공하는 환경 변수 외에 추가적인 환경 변수를 설정하려면 eject가 필요합니다.
-
Babel, ESLint 설정 변경: CRA는 Babel과 ESLint 설정도 기본적으로 제공합니다. 그러나 특정 Babel 플러그인을 사용하거나, ESLint 규칙을 사용자가 원하는 대로 변경하려면 이 또한 eject 과정이 필요합니다.
위 예시와 같이 사용자 정의 설정이 필요한 경우는 프로젝트의 요구사항이나 개발환경에 따라 다양합니다. Vite 같은 도구를 사용하면 이러한 설정을 보다 쉽게 추가할 수 있습니다.
CRA에 대해 추가 질문
- CRA의 eject에 대하여
- cra는 절대경로 alias를 적용하기 위해서 eject로 직접 설정하거나 craco 라이브러리를 이용해야한다
CRA에서 Craco로 Alias 절대경로 설정하기
'CRA는 기본적으로 제공하는 환경 변수'에는 어떤게 있나요?
Create React App(CRA)은 기본적으로 다음과 같은 환경 변수를 제공합니다.
- PUBLIC_URL: public 폴더의 절대 경로를 지정합니다. 이 경로를 통해 public 폴더 내의 리소스에 접근할 수 있습니다.
- NODE_ENV: 현재 환경을 지정합니다. "development", "test", "production" 등의 값이 존재하며, 이 값에 따라 다른 동작을 수행하는 코드를 작성할 수 있습니다.
- REACTAPP: CRA는 "REACTAPP"으로 시작하는 환경 변수들을 자동으로 인식하여 애플리케이션에서 사용할 수 있게 합니다. 이를 통해 사용자가 직접 추가한 환경 변수를 애플리케이션 내에서 사용할 수 있습니다.
이런 환경 변수들은 .env 파일에 저장하거나, 애플리케이션을 실행할 때 커맨드라인에서 직접 지정할 수 있습니다. 예를 들어, package.json의 scripts 섹션에서 "start": "REACT_APP_SECRET_CODE=abcdef npm start"와 같이 사용할 수 있습니다.
환경 변수를 사용하면 서버 주소, API 키 등의 설정을 소스 코드 외부에서 관리할 수 있어, 보안성을 높이고, 다른 환경에서 애플리케이션을 실행할 때에도 손쉽게 설정을 변경할 수 있습니다.
cra를 사용하면 eject를 이용해 eslint, prettier를 커스텀해야한다고 했는데, eject를 사용하지 않고도 설정을 할 수 있지 않나요?
네, 맞습니다. CRA에서는 eject를 하지 않고도 ESLint나 Prettier와 같은 도구의 설정을 커스텀하는 것이 가능합니다.
ESLint의 경우, 프로젝트의 루트 디렉토리에 .eslintrc 파일을 생성하고 여기에 필요한 설정을 작성하면 됩니다. CRA는 이 파일을 자동으로 인식하여 해당 설정을 적용합니다.
Prettier 역시 마찬가지로, 프로젝트의 루트 디렉토리에 .prettierrc 파일을 생성하고 설정을 작성하면 됩니다. Prettier는 이 설정 파일을 인식하여 코드 포맷팅을 수행합니다.
하지만 주의할 점은, CRA가 기본적으로 제공하는 ESLint 설정이나 웹팩 설정 등을 직접 변경하려는 경우에는 eject가 필요하다는 것입니다. 이 경우에는 CRA의 내부 설정을 직접 수정해야 하기 때문에, 이를 위해 CRA는 eject라는 과정을 제공합니다.
'CRA가 기본적으로 제공하는 ESLint 설정이나 웹팩 설정 등을 직접 변경하려는 경우에는 eject가 필요하다'고 했는데 직접 변경해야하는 경우의 예시를 알려주세요
CRA의 기본 설정을 직접 변경해야 하는 몇 가지 예시는 다음과 같습니다:
- 웹팩 설정 변경: CRA는 기본적으로 웹팩 설정을 감추고 있어, 웹팩 설정을 직접 수정하려면 eject 과정이 필요합니다. 예를 들어, 이미지 파일을 Base64로 인코딩하여 번들에 직접 포함시키는 대신 별도의 파일로 분리하려는 경우, 이를 위해 웹팩의 file-loader 설정을 수정해야 합니다.
- Babel 설정 변경: CRA는 Babel 설정도 기본적으로 제공합니다. 그러나 특정 Babel 플러그인을 사용하거나, Babel의 설정을 사용자가 원하는 대로 변경하려면 eject 과정이 필요합니다.
- ESLint 설정 변경: CRA는 Airbnb의 ESLint 설정을 기본적으로 사용합니다. 이를 변경하려면, 예를 들어 다른 ESLint 설정을 사용하거나, 특정 ESLint 규칙을 무시하려면 eject 후 .eslintrc 파일을 수정해야 합니다.
위 예시와 같이 CRA의 기본 설정을 변경하려는 경우, eject 과정을 거쳐야 합니다. 하지만 이는 프로젝트의 구조를 복잡하게 만들 수 있으므로, 꼭 필요한 경우에만 사용하시는 것이 좋습니다.
마무리
이렇게 CRA와 Vite의 전반적인 비교와 CRA에 대한 추가적인 궁금증까지 해소해 보았다. 여기서 모듈 번들링을 ES 모듈을 사용하는 것과 그렇지 않은 점, HMR 용어, Rollup을 사용하여 빠르게 빌드 된다는 의미 등을 추가적으로 공부하고 정리해보고자 한다. 전반적인 빌드 도구 생태계와 용어부터 공부한 뒤 다시 돌아와 읽어보면 고개를 끄덕이며 읽어나갈 수 있지 않을까?
