vite
-
[ TypeScript ] React + Vite 로 시작하는 TypeScriptTIL 2024. 3. 4. 22:56
이제 타입 스크립트를 배우게 되어 타입 스크립트 사용을 위한 패키지를 설치해야 하는데 나는 CRA (create-react-app) 방식이 아닌, vite를 사용한 react+ts 방법을 사용했다. vite의 자세한 설치 방법과 장점은 아래 글에서 확인할 수 있다. https://gggimmin-development-technology.tistory.com/39 [ React ] 빠른 Frontend 개발을 위한 툴, Vite ! Vite는 프론트엔드 개발을 위한 하나의 툴이다. Vite는 6가지의 장점을 내세우는데, 1. 즉각적인 서버 시작 : 네이티브 ESM을 이용한 번들링 없는 온디맨드 파일 제공. 2. 번개처럼 빠른 HMR : 앱 크기 gggimmin-development-technology.ti..
-
[ Vite ] React-Vite Error : If you are using JSX, make sure to name the file with the .jsx or .tsx extension.Troubleshooting 2024. 2. 21. 00:11
Vite 로 개인 프로젝트를 진행하던 도중 [plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension. 위와 같은 에러를 만났다. 처음엔 무엇이 문제인지 한참헤메다가 구글링을 통해 알아낸 것은 Vite는 기본적으로 .js 파일 내에서 JSX 구문 사용을 허용하지 않기 때문이다. https://stackoverflow.com/questions/74620427/how-to-configure-vite-to-all..
-
[ React ] 빠른 Frontend 개발을 위한 툴, Vite !TIL 2024. 2. 16. 20:59
Vite는 프론트엔드 개발을 위한 하나의 툴이다. Vite는 6가지의 장점을 내세우는데, 1. 즉각적인 서버 시작 : 네이티브 ESM을 이용한 번들링 없는 온디맨드 파일 제공. 2. 번개처럼 빠른 HMR : 앱 크기에 상관없는 Hot Module Replacement(HMR) 언제나 빠르게 작동. 3. 풍부한 기능 : 추가적인 모듈 설치 없이 TypeScript, JSX, CSS 등 사용가능. 4. 최적화된 빌드 : 웹앱 및 라이브러리 빌드 최적화를 위한 기본 설정 제공. 5. 범용 플러그인 : 개발 서버 및 빌드 과정 모두 사용 가능한 Rollup 플러그인 인터페이스 제공. 6. 완전한 유형의 API : 유연하게 작성된 API는 TypeScript 역시 완벽하게 지원. 내가 느끼기에 가장 좋았던 부분은..