# vite
Vite Env Variables, IntelliSense for TypeScript, Modes
vite의 env variables와 typescript를 통한 env 타입정의 그리고 HTML 에서 환경변수 접근법, 모드 변경법에 대한 정리이다.
Vite Plugin, base Path, Custom Build, File Change Rebuild
vite plugin과 base Path에 대한 간단요약.플러그인을 사용하려면 devDepencies 에 플러그인을 추가하고, vite.config.js 설정 파일의 plugins 배열에 해당 플러그인을 포함시켜야 한다.ex) @vitejs/plugin-legacy다른
[react-vite] 환경변수 설정 및 index.html에 동적으로 주입방법
vite-react로 사이드 프로젝트를 하던중 환경변수 설정을 할 때 삽질을 좀 했다..env파일에 환경변수를 설정할때 cra같은경우 "REACT_APP"이라는 키워드를 써서 환경변수를 설정했다면 vite는 "VITE"라는 키워드를 써야했다.ex) VITE_KAKAO_
Vite
node_modules 폴더 용량이 큼 → 서버에 그대로 배포하면 비효율적임import/require 문법은 브라우저 친화적이지 않음→ 모든 js파일을 하나로 합쳐 사용(번들링)필요한 코드만 뽑아만 합쳐줌(용량 절약)결과물은 js파일 하나이므로 import/requir
vite - 환경 변수와 mode
개발 환경에서 아직 API가 제공되지 않는 상황에서 로컬 환경에서는 목업 데이터를 반환하고, 실제 프로덕션 환경에서는 API로부터 데이터를 받을 수 있도록 Vite의 환경 변수와 모드를 다르게 구성하기 위하여 vite의 환경 변수와 모드를 사용하였습니다. Vite의 환
Vite+React
이번에는 Next.js를 사용하기 이전에 설치 하는 방식도 바뀌었고, 새로운 library인 twin.macro를 적용할 것이기 때문에 이번에는 vite방식으로 한번 설치해보겠다!
Vite Feature
vite의 특징에 대해서 알아보자.Native ES import는 bare module imports를 지원하지 않는다.위 코드는 브라우저에서 오류가 발생한다. vite는 제공되는 모든 소스파일에서 이러한 bare imports를 감지하고 다음을 수행한다.프리번들링을
AWS EC2 vite react 배포
react를 공부하면서 실 배포를 경험해보고자 route53와 ec2를 이용해서 배포를 시도해 보았다.우선 aws에 가입후 Region을 서울로 골라줘야 한다. 전 회사에서 이거로 벙찐기억이 있다. 우선 내 프로젝트를 배포하기 위해서는 도메인이 필요하니 구매를 해주자
01. vite / firebase 연동
환경변수 설정 create-react-app 이 아니라 vite 로 프로젝트를 생성했기 때문에, 환경변수 사용이 조금 다릅니다. REACTAPP${변수명} 이 아니라 VITE_${변수명} 환경변수를 호출하는 곳에는 process.env.REACTAPP${변수명} 이 아니라 import.meta.env.VITE_${변수명} 으로 사용합니다. 이런 자잘...
vite로 리액트 프로젝트 초기 세팅하기 #1 (with. typescript, eslint, prettier, husky, 절대경로)
프로젝트를 여러 명이서 진행하거나 가독성 좋은 코드를 위해 코딩 컨벤션을 지켜야한다.해당 포스팅에서는 vite로 react 프로젝트를 만들어서 다음과 같은 초기 세팅을 진행할 예정이다.eslintprettier절대 경로huskyvite 프로젝트를 생성한다.
[GanG.GG] Vite로 만든 프로젝트에 TaiilwindCSS 설치하기
요즘 가장 많이 쓴다는 디자인 프레임워크인 TailwindCSS는 뭘까? Vite 프로젝트에 적용해보자!
Vite & axios CORS 해결하기
최근 과제테스트에서 API 요청으로 데이터를 받아와야 했는데 API KEY와 쿠키 허용까지 했는데도 CORS 에러가 발생해서 문제를 해결하지 못하고 제출한 경험이 있다. 다음에도 같은 상황에서 해결하지 못하면 안되기 때문에 이번에 해결방법을 정리하고자 한다.자바스크립트
[JS]Dynamic Import의 동작방식(feat. Vite, Cypress)
Dynamic Import란 자바스크립트 모듈을 필요할 때 불러오는 방식입니다.Javascript는 ECMAscript 표준으로 dynamic import를 다음과 같이 지원하고 있습니다.