React 그리고 Vite

https://kofearticle.substack.com/

Korean FE article | Han Jung(한정) | Substack

프론트엔드 기술에 관한 새로운 소식, 뉴스를 확인하기 위해 Korean FE article 팀의 아티클을 구독 중에 있다.

그중 2월 첫 아티클을 보고 궁금한 점이 생겼다. React 프로젝트를 시작하는 방법에 관한 이야기였는데, 아카데미에서 배우며 프로젝트를 시작할 때 또는 작은 테스트를 위한 프로젝트 생성을 할 때 아무 생각 없이 따라 쓰던 Create React App(CRA)와 Vite에 관한 내용이었다.

 

https://kofearticle.substack.com/p/korean-fe-article-2024-7d8

[Korean FE Article] 2024년에 리액트 프로젝트를 시작하는 방법

 

1. Create React App(CRA)

https://create-react-app.dev/docs/getting-started

Get started in seconds
Whether you’re using React or another library, Create React App lets you focus on code, not build tools.

(React를 사용하든 다른 라이브러리를 사용하든 Create React App을 사용하면 빌드 도구가 아닌 코드에 집중할
 수 있습니다.)

- 출처 : https://create-react-app.dev/ 

 

CRA의 소개글처럼 명령어 한 줄로 폴더 구조, 웹팩/바벨 설정 없이 React 개발환경을 쉽게 시작할 수 있다.

아카데미에서 처음 React를 배울 때도 CRA를 사용해 프로젝트를 시작했었다.

 

프로젝트를 생성하고, 필요한 라이브러리를 설치하고 로컬 환경에서 서버 실행/테스트까지 간단하게 수행할 수 있었다. 테스트 환경뿐만 아니라 배포를 위한 빌드까지 가능하다.

 

직접 사용하며 느꼈던 불편한 점이 비교적 작은 토이 프로젝트라도 빌드 시간이 오래 걸린다는 점이었는데 볼륨이 큰 실무를 하는 사람들은 큰 단점이 되었을 것 같다.

실제로 CRA에서 Vite로 마이그레이션 하는 후기들을 보면 대부분의 이유가 느린 빌드 시간이었다. 

 

2. Vite

Vite(프랑스어로 "빠르다(Quick)"를 의미하며, 발음은 "veet"와 비슷한 /vit/ 입니다.)는 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 가지 컨셉을 중심으로 하고 있습니다.

- 출처 : https://ko.vitejs.dev/guide/

 

이름부터 빠르다.

 

CRA의 단점을 보완하고자 Vue의 개발자에 의해 개발된 Vite는 이름처럼 빠른 개발 서버 시작, 빠른 핫 모듈 교체, 빠른 빌드를 제공해 준다.

여러 프레임워크를 지원한다.

https://esbuild.github.io/

웹팩을 사용했던 CRA에 비해 esbuild를 사용하는 Vite가 코드 변환에 수십 배 빠르다고 소개한다.

그리고 CRA로 생성했던 프로젝트를 Vite로 마이그레이션도 가능하다고 한다.

https://www.robinwieruch.de/vite-create-react-app/

Migrate to Vite from Create React App (CRA)

마이그레이션 과정을 살펴보니 상당히 간단해 보였다. 라이브러리를 설치하고 몇 가지 파일 생성, Index 경로 수정 등 보면서 따라 하기 쉬워 보인다. 그리고 트러블 슈팅을 보니 .js 확장자를 .jsx로 변경하지 않아 발생하는 경우가 많았다. 아마 Vite에선 JavaScript 파일(.js)와 HTML과 같은 문법을 사용할 수 있는 React 컴포넌트 파일(.jsx)를 명확하게 구분하기 위한 것으로 생각된다.

 

https://junghan92.medium.com/번역-create-react-app-권장을-vite로-대체-pr-대한-dan-abramov의-답변-3050b5678ac8

(번역) ‘Create React App 권장을 Vite로 대체’ PR 대한 Dan Abramov의 답변

 

https://github.com/reactjs/react.dev/pull/5487

 

3. ??? : "XXX 이제 망했다 더욱 강력한 OOO 등장 개발자 초비상"

채신기술

새로운 기술은 기존의 단점을 보완하려는 노력에서 탄생하며, 이 과정에서 자연스럽게 사장되는 기술과 이론이 생겨나게 될 것이다. 이는 개발의 본질적인 특성이기 때문에 끊임없이 반복될 것이라 생각한다. 그래서 개발자라는 직업이 정말 매력적으로 느껴진다.

고인 물은 썩기 마련이고 새로운 환경에 적응하지 못하면 뒤처지게 될 것이다. 때로는 새로운 기술이 내 상황에 적용하기 어렵거나 맞지 않을 수도 있지만, 그럼에도 불구하고 골머리를 앓고 있던 문제를 해결해 줄 기술이 등장한다면 개선하고 새로운 것을 만드는 것에서 보람을 느끼는 나에겐 행복한 상황이 될 것 같다.