TIL : VITE 사용해보기 ( feat. 리액트 )

VITE 이용하여
리액트 프로젝트를
생성해보겠습니다.

 

 

들어가기에 앞서  VITE(에 대해서 알아보겠습니다.

 

왜  나오게 되었을까? 

VITE 공식문서를  참고하고  VITE가  나온이유에 대한  저의  생각입니다.

VITE 공식문서에 따르면   

                      모듈이  존재하는   프로젝트에서 있을 수 있는   문제

 

                     1.  성능 병목( = 교통 정체 생각하시면 됩니다. )  현상

                     2.  개발 서버를  가동하는데  오랜 시간이 걸리는  현상 

                     3. HMR ( 변경점만  갱신 ,  소스코드 수정시 브라우저 즉시 업데이트 ) 를  사용해도  올래걸리는 현상

   

                 이런 현상은  개발자분들이  힘들어하시지 않을까 라는  것을  개선하기 위해  나타난 것이   

                 VITE 라고 생각합니다.

 

 

VITE  를  활용하여  리액트  프로젝트를  생성해보자 (  https://ko.vitejs.dev/guide/  )

 

1.   참고 

1.  mkdir를  이용해서  viteProject를  설치합시다.   2.  생성된  프로젝트 폴더로  이동합시다.      3.  다음과  같이  명령어를  입력해주시면  됩니다. ( 코드 스니펫을 참고해주세요 )   4.   저는  javascript로  하겠습니다.

npm create vite@latest

 

2.  참고 

vite-project에  접근합시다.     npm install 을  이용해서  node_modules를 설치해줍시다.    npm run dev를  통해  프로젝트  실행합시다.

   

이와 같이 화면이  뜨면 성공입니다.