킹바구니 🦜

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 이걸 해주면 될듯. 2..

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-..