Vite로 React 프로젝트 시작해보기

보통은 React 프로젝트 생성할 때 속칭 ' CRA ' 라는 Create-React-App 명령어를 실행합니다. 하지만 CRA는 빌드하는데 시간이 너무 오래 걸리고 양이 커서 불편할 때가 있습니다.Vite 간결한 모던 웹 프로젝트 개발에 초점을 맞춘 빌드 도구입니다. 계속 CRA만 썼기 때문에 Vite로 조그마한 프로젝트를 만들어 보려고 합니다. 

 

 

 

Vite로 프로젝트 생성 과정 

 

 

npm create vite@latest

 

이후 이런 식으로  선택지를 통해 프로젝트 기초를 설정할 수 있습니다. Javascript 뿐만이 아니라 Typescript도 선택할 수 있었습니다. SWC가 뭔지 모르겠지만 한번 선택해 보았습니다. SWC에 대해서는 위의 카카오 블로그에서 잘 설명 되어있으니 내일 읽어보려고 합니다. 

 

* project name

* Package name

* Select a frame work

* Select a variant 

 

 

 

이후 npm을 설치하고 실행을 시키면 됩니다. 

npm install
npm run dev

*

*

 

 

이번 프로젝트 목표는 youtube API 적용해보기 입니다. 사실 아무생각 없이 되는지 안되는지 제대로 안 알아봤기 때문에 준비하면서 확인해보려고 합니다. 원래 이러면 안되느데 ㅎㅎ 

 

만약에 youtube api 적용하기가 안된다면 chat gpt open api 나 Single Sign On 연습이나 하는 프로젝트 해봐야겠습니다. 

 

 

 

+ What Diffrence between Vite and CRA. 

 

[1] Vite

 

Vue 제작자 Evan You 가 만든 Vite 는 CRA보다 개발 시 속도가 더 빠르고 메모리도 적게 잡아먹는다는 큰 장점이 있습니다. 

Vite는 esbuild를 이용해서 " 변경된 부분 " 만 새롭게 번들링을 합니다. 여기서 속도가 차이가 나게 되는 것이죠.

 

물론 Vite도 첫 실행에서는 전체 번들링을 진행(사전 번들링)하고 그 이후에는 변경된 부분만 새롭게 번들링 됩니다. 

 

> Vite가 변경된 코드만 번들링 하는 원리 
Native ESM 모듈을 통해 import 나 export 부분을 유심히 관찰하고 특정 import / export 가 코드가 변경됐다면 그 부분만 번들링 하는 방식입니다. 

실제 구현 방식은 변경되지 않은 모듈은 304 코드인 " not modified " 를 리턴해서 브라우저가 그냥 무시하는 방법으로 CommonJS 나 UMD 방식을 ESM 방식으로 변환(컨버팅)하기 때문에 ESM의 변경된 부분만 선별이 가능하다고 합니다. 


> 기초 
#  모듈이랑 1개 이상의 값(객체, 함수, 변수 등)을 내보내는 자바스크립트 파일을 의미. 
모던 웹 개발에서는 자바스크립트가 차지하는 비중이 매우 높아졌기 대문에 모듈을 통한 기능과 관심사의 분리는 필수적이기 대문에 자바스크립트 모듈 선언 포맷에는 AMD 와 CommonJS 가 있다. 

(1). AMD - Asynchronous Module Definition
: 코드 모듈을 선언하면서 그것이 의존하고 있는 모듈도 함께 명시하는 방식. 필요에 따라 비동기적으로 의존 모듈을 불러옵니다. 
(2). CommonJS 
: 웹 브라우저가 아닌 환경에서의 자스 모듈 포맷을 확립하기 위한 프로젝트.

AMD와 CommonJS는 방식만 다를 뿐 " 의존 모듈을 정의하고 새로운 모듈을 내보낸다 "와 같은 목적을 가지고 있다. 


* UMD 방식 : Universal Module Definition 패턴 
- 자스를 개발할 때 두 방식(AMD / ComomonJS ) 를 모두 지원해야 하는 상황이 옵니다. 대표적으로 오픈소스 라이브러리 모듈은 다양한 환경을 지원해야 할 필요가 있기 때문에 이때 UMD 를 사용해서 모듈을 선언할 수 있다. 

- 스펙이 아닌 코드 작성 패턴으로 다양한 패턴이 존재한다. 

참고 : UMD 패턴이란

 

또한 Vite는 Koa라는 작은 서버로 돌리는 반면 CRA는 express 서버를 이용하기 때문에 여기서 리소스 차이도 꽤 난다고 합니다. 

 

 

 

* 변경된 부분만 새롭게 번들링 

* Vite는 koa 라는 작은 서버 이용

* esbuild는 Go 가 만든 프로그램

 

* src/main.tsx

* import.meta.env.VITE_API_KEY

 

 

 

---

 

 

[2] CRA 

 

React 팀(페이스북) 에서 만든 Create React App  공식 보일러 플레이트 이죵. 

WebPack과 Babel 등을 이용해서 파일로더, 빌드 툴, ES6 문법 지원, esLint 등 기본적인 리액트를 이용한 개발을 할 수 있게 해줍니다. 

 

CRA는 WebPack 으로 번들링을 하는데 WebPack 번들링은 코드가 바뀌면 모든 자바스크립트 코드를 " 모두 새롭게 번들링 " 합니다. 

그렇기 때문에 앱과 프로젝트 규모가 커질 수록 HMR(Hot Module Reloading) 이 느려지는 것이라고 합니다. 

 

> WebPack 이란 
자바스크립트 모듈 번들러의 한 종류로 라이브러리 형태입니다. 
보통 어떤 웹 어플리케이션의 코드 수가 많아지면 협업 및 유지보수 등의 이유로 코드를 분할해서 관리하는데 이렇게 분할하면 웹 어플리케이션에서 수 많은 자바스크립트 파일을 로딩하게 되고 이는 곧 = 네트워크 비용의 증가를 의미합니다. 
따라서 자바스크립트 파일들을 모듈화 시켜서 관리하게 해주는 라이브러리가 WebPack 입니다. 

:: 자바스크립트 코드들을 모듈화하여 분할된 코드를 하나의 index 를 통해 실행하게 해서 이 index로 다른 파일들을 모아주는 역할 수행.

 

* 파일이 변경되면 전체 번들링 

* CRA는 개발 서버로 express 서버를 이용

* WebPack은 Node.js가 만든 프로그램 

 

* process.env.REACT_APP_API_KEY

 

 

 

 

> 참고 :Vite 문서 

> 참고 :  카카오 - 초보 웹 개발자를 위한 자바스크립트 빌드 툴과 SWC

> 참고 : CRA 말고 Vite로 React 앱 설정하기 

> 참고 : Vite JS 란 (React 앱에 대해 CRA 보다 Vite)

> (읽을 예정) - 참고 : (번역) ‘Create React App 권장을 Vite로 대체’ PR 대한 Dan Abramov의 답변