킹바구니

1. 설치npm i vite-plugin-remove-console  2. vite.config.ts에 추가export default defineConfig({ plugins: [{ ...react(), ...removeConsole({ includes: ["log", "warn", "error", "info", "debug"] }), apply: 'build' }],})빌드할때만 안나오게 처리하고싶어서 vite를 찾아보니 플러그인에 저렇게 쓰면 된다고 함.

원래 예시에는 my-app같은 폴더명을 쓰게 되어있는데 그거 말고 그냥 현재 폴더에 생성하고 싶다면 이렇게 쓰면 된다. 1. 뒤에 경로 추가npm create vite@latest ./이렇게 하고 실행하면 된다.

이보시오! 왜 안된다는 말이오! 라고 한다면 혹시 vite를 쓰고 있지 않는가? 1. vite에 맞춰서 써주기// .envREACT_APP_API_KEY='something'VITE_API_KEY='something'// 호출process.env.REACT_APP_API_KEYimport.meta.env.VITE_API_KEY각각 위에꺼 말고 아래꺼로 써줘야함.

font, image, style 등등을 public이 아닌 어딘가에 두고 작업을 한다 치자. 그리고 빌드를 했을때 dist/asset 폴더 안에 폰트는 fonts, 이미지는 images 뭐 이런식으로 모여서 쌓이길 바랄때 vite 옵션을 아래와 같이 설정하면 된다.  1. vite.config.ts 추가export default defineConfig({ build: { rollupOptions: { output: { assetFileNames: ({ name }) => { if (/\.(gif|jpe?g|png|svg)$/.test(name ?? '')){ return 'assets/images/[name]-[hash][extname..

프로젝트를 시작할때 나는 현재 위치한 폴더에 바로 src나 public 등이 왔으면 좋겠는데, 프레임워크/라이브러리를 깔다보면 최상위에서 프로젝트명폴더를 한번 더 들어가서 src,public과 같은 파일이 올 때가 있음. 그럴때 어떻게 해야할까  1. 뒤에 온점 입력npm create vite@latest .이 명령어는 vite라는 빌드 도구를 활용하여 설치하는 방법임. 이때 명령어 뒤에 띄어쓰기 한칸 하고 온점을 입력하면 현재 폴더에 바로 깐다는 의미가 된다.

한번 혼자 처음부터 다 해보려는데 뭔소리고~~~~~~~~~~~~~~~~~~~~ 맨날 남이 기본 셋팅 해준걸로 시작하다보니 config파일이고 뭐고 다 어렵다 어려워 1. vite.config.ts 수정import path from 'path';export default defineConfig({ plugins: [react()], resolve: { alias: { '@': path.resolve(__dirname, 'src'), }, },}) import path를 추가하고, resolve부분을 복붙해주면 된다. 참고로 import 부분에 에러가 난다면 마우스 대고 빠른 수정 눌러서 type node를 추가(설치)하거나 npm install --save @types/node 이..

Failed to resolve component: swiper-slide Failed to resolve component: swiper-container swpier.js는 vue, react 버전 가이드를 따로 제공하는데 그대로 따라하다가 어느순간 보니 해당 버전들은 앞으로 버전에서는 삭제될테니 web component 형태로 쓰라고 하더라. 근데 자꾸 저 경고창이 뜨는데다 구글에서는 방법도 안나와서 발동동하다가 찾아냄. 1. vite 설정 변경 export default defineConfig(({ mode }) => { return { plugins: [ vue({ template: { compilerOptions: { isCustomElement: (tag) => tag === "swiper-..