# vite

176개의 포스트

Vite Env Variables, IntelliSense for TypeScript, Modes

vite의 env variables와 typescript를 통한 env 타입정의 그리고 HTML 에서 환경변수 접근법, 모드 변경법에 대한 정리이다.

어제
·
0개의 댓글
·

Vite Plugin, base Path, Custom Build, File Change Rebuild

vite plugin과 base Path에 대한 간단요약.플러그인을 사용하려면 devDepencies 에 플러그인을 추가하고, vite.config.js 설정 파일의 plugins 배열에 해당 플러그인을 포함시켜야 한다.ex) @vitejs/plugin-legacy다른

2일 전
·
0개의 댓글
·

[react-vite] 환경변수 설정 및 index.html에 동적으로 주입방법

vite-react로 사이드 프로젝트를 하던중 환경변수 설정을 할 때 삽질을 좀 했다..env파일에 환경변수를 설정할때 cra같은경우 "REACT_APP"이라는 키워드를 써서 환경변수를 설정했다면 vite는 "VITE"라는 키워드를 써야했다.ex) VITE_KAKAO_

2일 전
·
0개의 댓글
·
post-thumbnail

Vite

node_modules 폴더 용량이 큼 → 서버에 그대로 배포하면 비효율적임import/require 문법은 브라우저 친화적이지 않음→ 모든 js파일을 하나로 합쳐 사용(번들링)필요한 코드만 뽑아만 합쳐줌(용량 절약)결과물은 js파일 하나이므로 import/requir

3일 전
·
0개의 댓글
·
post-thumbnail

04. 파일 업로드

cloudinary 연동 후 파일 업로드

4일 전
·
0개의 댓글
·

vite - 환경 변수와 mode

개발 환경에서 아직 API가 제공되지 않는 상황에서 로컬 환경에서는 목업 데이터를 반환하고, 실제 프로덕션 환경에서는 API로부터 데이터를 받을 수 있도록 Vite의 환경 변수와 모드를 다르게 구성하기 위하여 vite의 환경 변수와 모드를 사용하였습니다. Vite의 환

6일 전
·
0개의 댓글
·
post-thumbnail

Vite+React

이번에는 Next.js를 사용하기 이전에 설치 하는 방식도 바뀌었고, 새로운 library인 twin.macro를 적용할 것이기 때문에 이번에는 vite방식으로 한번 설치해보겠다!

2023년 6월 3일
·
0개의 댓글
·

Vite Feature

vite의 특징에 대해서 알아보자.Native ES import는 bare module imports를 지원하지 않는다.위 코드는 브라우저에서 오류가 발생한다. vite는 제공되는 모든 소스파일에서 이러한 bare imports를 감지하고 다음을 수행한다.프리번들링을

2023년 6월 2일
·
0개의 댓글
·

Vite Pre-bundling

vite의 프리번들링에 대해 알아보자.

2023년 6월 2일
·
0개의 댓글
·
post-thumbnail

AWS EC2 vite react 배포

react를 공부하면서 실 배포를 경험해보고자 route53와 ec2를 이용해서 배포를 시도해 보았다.우선 aws에 가입후 Region을 서울로 골라줘야 한다. 전 회사에서 이거로 벙찐기억이 있다. 우선 내 프로젝트를 배포하기 위해서는 도메인이 필요하니 구매를 해주자

2023년 5월 31일
·
0개의 댓글
·
post-thumbnail

Vite로 React 앱 설정하기

Vite와 CRA 초기 설정의 차이

2023년 5월 29일
·
0개의 댓글
·
post-thumbnail

03. url 필터

url 필터

2023년 5월 27일
·
0개의 댓글
·
post-thumbnail

02. 권한 설정

admin 설정

2023년 5월 27일
·
0개의 댓글
·
post-thumbnail

01. vite / firebase 연동

환경변수 설정 create-react-app 이 아니라 vite 로 프로젝트를 생성했기 때문에, 환경변수 사용이 조금 다릅니다. REACTAPP${변수명} 이 아니라 VITE_${변수명} 환경변수를 호출하는 곳에는 process.env.REACTAPP${변수명} 이 아니라 import.meta.env.VITE_${변수명} 으로 사용합니다. 이런 자잘...

2023년 5월 27일
·
0개의 댓글
·
post-thumbnail

00. vite / firebase 연동시작

vite, firebase 연동

2023년 5월 26일
·
0개의 댓글
·
post-thumbnail

도감 페이지 vite로 마이그레이션하기

도감 페이지 vite로 변경하기

2023년 5월 26일
·
0개의 댓글
·
post-thumbnail

vite로 리액트 프로젝트 초기 세팅하기 #1 (with. typescript, eslint, prettier, husky, 절대경로)

프로젝트를 여러 명이서 진행하거나 가독성 좋은 코드를 위해 코딩 컨벤션을 지켜야한다.해당 포스팅에서는 vite로 react 프로젝트를 만들어서 다음과 같은 초기 세팅을 진행할 예정이다.eslintprettier절대 경로huskyvite 프로젝트를 생성한다.

2023년 5월 24일
·
0개의 댓글
·
post-thumbnail

[GanG.GG] Vite로 만든 프로젝트에 TaiilwindCSS 설치하기

요즘 가장 많이 쓴다는 디자인 프레임워크인 TailwindCSS는 뭘까? Vite 프로젝트에 적용해보자!

2023년 5월 24일
·
0개의 댓글
·
post-thumbnail

Vite & axios CORS 해결하기

최근 과제테스트에서 API 요청으로 데이터를 받아와야 했는데 API KEY와 쿠키 허용까지 했는데도 CORS 에러가 발생해서 문제를 해결하지 못하고 제출한 경험이 있다. 다음에도 같은 상황에서 해결하지 못하면 안되기 때문에 이번에 해결방법을 정리하고자 한다.자바스크립트

2023년 5월 21일
·
0개의 댓글
·
post-thumbnail

[JS]Dynamic Import의 동작방식(feat. Vite, Cypress)

Dynamic Import란 자바스크립트 모듈을 필요할 때 불러오는 방식입니다.Javascript는 ECMAscript 표준으로 dynamic import를 다음과 같이 지원하고 있습니다.

2023년 5월 17일
·
0개의 댓글
·