React Project 환경 셋팅 - Vite

Vite 는 프랑스어로 빠르다를 의미하며 발음은 veet와 비슷한 vit 라고 한다. 빠르고 간결한 모던 웹 프로젝트 개발경험에 초점을 맞춰 탄생한빌드 도구이며 JavaScript 와 TypeScript 를 지원하고 있다.

`Vite`는 버전 14.18+ 또는 16+ 의 Node.js 를 요구한다. 

Node.js

Node.js 는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다.

참고 : https://ko.wikipedia.org/wiki/Node.js

패키지 관리자는 알아본바로 아래 세가지가있으며 모든 패키지 기능은 거의 동일하다고 하니
npm 을 쓸것이다.

NPM :

$ npm create vite@latest

latest - vite의 최신버전으로 vite를 생성하겠다라는뜻

Yarn :

$ yarn create vite

PNPM :

$ pnpm create vite

프로젝트의 이름이나 템플릿을 지정해 프로젝트를 만들 수 있다.
타입스크립트를 사용할것이라 뒤에 ts를 붙였고 2.9.2 버전을 사용했다

$ npm create vite@^2.9.2 프로젝트이름 -- --template react-ts

이전 프로젝트에서 배운건 2 부분이 메이저 그뒤에 9 부분이 마이너 라고 배웠던 기억이 남았고
마이너의 경우 게임으로 치면 자잘자잘한 패치 메이저는 대규모 패치로 이해했다.

마이너의 경우 크게 상관없지만 메이저의 경우 바뀌면 호환이 안된다던가 기존프로젝트에서 문제가 될수있다 가령 이전 버전에선 잘되다가 안된다던가 문제가 생길수있기 떄문에 필요한경우가아니라 이번 프로젝트에서는 2.9.2 를 사용하기로 한다.

npm 으로 vite를 설치한후에

cd 프로젝트이름

반드시 프로젝트 이름으로 이동후 (해당 폴더에서)

npm install

설치후 잘설치 되었는지

npm run dev

로 실행해본다.

패키지매니저 vite를 사용해 react-ts 환경 초기세팅이 잘되었다.
다음 순서는 Github 을 사용해 프로젝트를 관리하고 올려볼것이다.