CRA에서 Vite로 전환, Vite 시작, Vite 설치하기

우리 팀에서는 프론트엔드 개발의 효율성과 성능을 개선하기 위해 지속적으로 노력해 왔습니다.

저는 이 과정에서 프론트엔드 팀의 리더로서, 기존의 Create React App(CRA)을 사용한 개발 방식에서 벗어나 더 나은 대안을 모색하게 되었습니다.

우리가 직면한 주된 문제 중 하나는 빌드 시간과 서버 과부하였습니다.

 

기존 상황의 문제점:

• 긴 빌드 시간: 우리의 프로젝트 빌드 시간은 평균 12분 정도였습니다. 이는 개발 속도를 늦추고, 팀의 생산성에 심각한 영향을 미쳤습니다.
• 서버 과부하: 빌드 과정에서 발생하는 서버 과부하로 인해, 백엔드(스프링부트)와 프론트엔드 개발 인스턴스를 내려야 하는 상황이 발생했습니다. 이러한 조치에도 불구하고 빌드 시간은 여전히 7분 정도로 길었습니다.

이러한 문제를 해결하기 위해 우리는 Vite로 전환하기로 결정했습니다.

Vite의 도입은 단순히 새로운 도구의 선택을 넘어서, 우리 개발 프로세스의 근본적인 변화를 의미했습니다.

 

Vite로의 전환 이후의 변화:

1. 즉각적인 서버 시작과 빠른 핫 모듈 교체(HMR): Vite는 개발 모드에서 눈에 띄게 빠른 서버 시작 시간과 핫 모듈 교체를 제공합니다. 이는 개발자들이 변경 사항을 즉각적으로 확인할 수 있게 해주어 생산성을 크게 향상시켰습니다.
2. 서버 과부하 감소: Vite의 효율적인 리소스 관리는 서버 과부하 문제를 상당 부분 해결해 주었습니다. 이로 인해 백엔드와 프론트엔드 개발 인스턴스를 안정적으로 운영할 수 있게 되었습니다.
3. 빌드 시간의 혁신적 단축: Vite를 사용한 후, 우리 프로젝트의 빌드 시간은 기존의 절반 이하로 단축되었습니다. 이는 개발 팀의 작업 흐름과 프로젝트의 전반적인 진행 속도에 긍정적인 영향을 미쳤습니다.

Vite 프로젝트 시작하기

프로젝트 폴더 생성:

우선, 프로젝트들을 모아놓을 새 폴더를 생성합니다. 이 폴더는 모든 프로젝트 파일을 담게 될 공간입니다.

 

터미널에서 Vite 프로젝트 초기화:

터미널을 열고, 프로젝트 폴더로 이동합니다.

다음 명령어를 입력하여 Vite 프로젝트를 생성합니다:

이 명령어는 Vite의 최신 버전으로 새 프로젝트를 생성하라는 지시입니다.

npm create vite@latest

 

프레임워크 선택:

명령어 실행 후, 몇 가지 옵션이 제시됩니다. react를 프레임워크로 선택합니다. 이는 프로젝트가 React 기반으로 구성될 것임을 의미합니다. 

 

TypeScript 및 SWC 선택:

다음 단계에서는 프로젝트 설정에 TypeScript를 사용할지 묻습니다. 여기서 TypeScript를 선택합니다.

추가적으로, Vite는 최신 JavaScript 변환 도구인 SWC를 지원합니다. 이를 사용하려면, 해당 옵션을 선택합니다.

 

 

Vite 설치 및 프로젝트 설정

프로젝트가 초기화되고, 필요한 설정을 선택한 후에는 몇 가지 단계를 통해 Vite를 설치하고 프로젝트를 설정할 수 있습니다.

1. 의존성 설치:
   • 프로젝트 폴더로 이동한 후, 다음 명령어를 실행하여 필요한 의존성을 설치합니다:

npm install

1. 개발 서버 시작:
   • Vite는 개발 중에 빠른 리로딩과 모듈 교체를 지원하는 개발 서버를 제공합니다. 다음 명령어로 개발 서버를 시작할 수 있습니다:

npm run dev

 

Vite의 최초 진입지점 파일

Vite 프로젝트의 최초 진입지점은 기본적으로 index.html 파일입니다.

이 파일은 프로젝트의 루트 디렉토리에 위치하며, 애플리케이션을 로드하는 데 필요한 모든 자원을 참조합니다.

• index.html은 애플리케이션의 HTML 구조를 정의합니다.
• 이 파일 내에서, <script type="module" src="/src/main.tsx"></script>와 같은 태그를 사용하여 애플리케이션의 메인 JavaScript 파일을 연결합니다. 이 파일명은 프로젝트 설정에 따라 다를 수 있으나, TypeScript를 사용하는 경우 main.ts 또는 main.tsx가 될 수 있습니다.
• Vite는 이 진입 파일을 기반으로 개발 서버를 시작하고, 필요한 모든 모듈을 로드합니다.