728x90 반응형 CRA2 [TIL] 11/8 React.ts 살펴보기 1. 리액트 프로젝트 생성: CRA vs ViteCRA 는 초기설정과 구성을 자동화해서 개발자가 빠르게 리액트 앱을 생성할 수 있도록 도와준다. 웹팩과 바벨을 사용해서 개발 서버를 실행하고 HMR(Hot Mode Reloading)을 제공해준다. 웹팩을 통해 빌드시 코드를 컴파일하고 압축하는 역할도 해준다. (가장 대중적으로 많이 쓰임)+ 환경변수: process.env.KEY Vite 는 빠른 속도와 효율로 최근에 많이 주목 받고 있다. 웹팩 대신 롤업을 사용해서 빌드하는데, 웹팩에 비해 속도가 크게 개선된 버전이다. 또 HMR 에서 굉장히 빠른 속도를 자랑한다. CRA 는 HMR 을 할 때 소스 전체를 빌드하지만 Vite 는 모듈 단위로 빌드해서 브라우저에 제공하기 때문에 CRA 보다 속도가 빠르다... 2024. 11. 8. [React/리액트] Vite 설치 및 사용 Vite 란? 모던 웹 프로젝트 개발에 초점을 맞춰 만들어진 빠르고 간결한 빌드 도구로, CRA 의 단점을 해결하기 위해 Esbuild 를 기반으로 만들어진 빌드툴이다. CRA 는 자바스크립트로 구성된 Wepack 을 사용하는데, 다소 속도가 느린 편이다. 평소에는 체감하지 못할 수 있지만, 코드의 양이 많아질수록 느린 속도를 체감할 수 있다. (참고로 Esbuild 는 Go 언어로 작성된 자바스크립트 빌드툴로 속도가 빠르다.) Vite 사용하기 아래 순서대로 따라하면 된다. - $ npm init vite- 프로젝트 이름 설정 - 프레임워크 설정 - variant 설정 -> 타입스크립트를 선택할 것인지 여부 - $ cd 프로젝트 이름- npm install- npm run dev $ npm .. 2024. 6. 22. 이전 1 다음 728x90 반응형
