728x90 반응형 vite3 [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.js] 1주차 - Node.js, React.js 1. Node.js 1.1. Node.js 와 javascript자바스크립트 실행 환경(Run Time) = 구동기자바스크립트는 웹 내부에 필요한 간단한 기능만을 개발하기 위한 스크립트 언어였지만, node.js 로 인해 더 많은 걸 할 수 있게 됨1.2. 패키지 (pakage) 일반적으로 프로젝트가 특정 목적을 갖는 프로그램의 단위라면 node.js 에서는 패키지라는 단어를 프로그램의 단위로 사용한다. npm(node pakage manager)으로 패키지를 쉽게 설치하고 관리할 수 있다. 2. 모듈 (Module)기능 별로 나누어진 파일Javascript 의 모듈 시스템: Common JS(CJS), ES Module(ESM) 2.1. Common JS (CJS)function add(a, b) .. 2024. 10. 7. [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 반응형
