킹바구니 🦜

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라는 빌드 도구를 활용하여 설치하는 방법임. 이때 명령어 뒤에 띄어쓰기 한칸 하고 온점을 입력하면 현재 폴더에 바로 깐다는 의미가 된다.

단순하게 import하는거면 png든 뭐든 다 된다. 하지만 컴포넌트 형식으로 쓰고싶다면 직접 컴포넌트로 바꿔주거나(https://www.svgviewer.dev/) 해야하는데 일일히 저 사이트 들어가서 변환해줘야하니 그냥ort하는거면 png든 뭐든 다 된다. 하지만 컴포넌트 형식으로 쓰고싶다면 직접 컴포넌트로 바꿔주거나(https://www.svgviewer.dev/) 해야하는데 일일히 저 사이트 들어가서 변환해줘야하니 그냥 라이브러리를 사용해보자.  1. 라이브러리 설치esbuild-plugin-polyfill-nodehttps://www.npmjs.com/package/esbuild-plugin-svgr esbuild-plugin-svgrA plugin for esbuild that enables ..

가끔 가다보면 mousedown이라든지 이벤트를 등록할 일이 생김. 근데 구조상 어쩌다보면 이게 중복으로 들어갈때가 있는데 이를 방지하기 위해서 아래와 같은 방법을 써보자.  1. onceel.addEventListener("mousedown", down, { once: true });간단하게 once값을 true로 넣어 한번만 이벤트가 실행되게 할 수 있는데, 코드는 이런 쉬운 방법으로 해결되어 주시지 않는다...  2. 저장해두고 불러오기let saveFunction;function setEvents() { if (saveFunction) { el.removeEventListener("mousedown", saveFunction); } saveFunction = down; el.a..