유령이 나오는 젤리하우스

TIL

(22.01.03) Vite로 놀아보기

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄Vite는 dotenv를 이용하여 사용자가 지정한 환경변수를 가져올 수 있다🦄 🦄Vite는 react-ts 템플릿 프리셋을 제공하는데, 이는 vite.config.js에 React 프로젝트와 호환되는 plugin이 설치된 템플릿이다. 🦄 개요 몇일 전 Vite를 정말 빠른 빌드 툴이라고 설명했는데, 이게 얼마나 빠른지 직접 체험해보고 싶었습니다. 공식 문서를 확인해보니, create-vite는 타입스크립트를 사용한 React 프로젝트 템플릿도 지원한다고 합니다. 쇠뿔도 단김에 빼라고. 바로 간단한 프로젝트를 만들어서 실험에 돌입했습니다. Create-Vite vite는 버전 12.2.0 이상의 Node.js가 깔려있으면 패키지 매니저를 통해 간단하게 시작할..

TIL

(22.01.01) Vite

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄Vite는 브라우저에서 지원하는 ESModules를 활용한 Javascript 모듈화 도구로서, 빠른 개발서버 실행과 프로덕션 생산을 브라우저를 통해 제공한다🦄 모듈 번들러 웹 프론트엔드를 배우다보면, 번들러라는 단어는 한 번쯤은 들어봤을겁니다. 프로젝트 전역에 걸쳐 파편화 되어있는 javascript 파일들을 한데 뭉쳐, 하나의 파일로 만들어주는 도구라는 뜻으로 말입니다. 이런 모듈 번들러들은 파편화 된 파일들을 하나의 거대한 파일로 만들어 네트워크 비용을 줄이고, 글로벌 변수의 충돌의 위험도 줄여준다. 뿐만 아니라, 각종 로더들을 사용해 브라우저가 이해하지 못하는 scss 파일등을 css로 전환해주는 역할도 겸하고 있어 프론트엔드 개발에 필수 불가결한 ..