킹바구니

프로젝트를 시작할때 나는 현재 위치한 폴더에 바로 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..

왜웹은나를힘들게하는가 1. 사용자 동작 있나 확인보통 이 케이스는 pc에서도 발생하는 문제인데, 브라우저가 거진 자동재생은 막기때문에 뭔가 click버튼을 만들거나 해서 play() 해줘야함.button.addEventListener("click", function() { audio.play();}  2. load() 했나 확인가끔 모바일에서는 load()먼저 해줘야한다고 들은게 있음.button.addEventListener("click", function() { audio.load(); audio.play();}  3. setTimeout안에 있지 않나 확인나는 이 경우였는데 일단 미리 url까지 넣어서 선언된 new Audio가 제일 바깥에 있었고, play()는 click함수 안에 있는 se..

아니 오 ㅐ안대는거임? pc에서는 잘만 되는데 모바일로 가니까 드래그 자체는 되는데 따로 걸어둔 click이벤트들이 죄다 안먹혀서 열심히 고민하다가 찾아냄 1. touchend로 또 걸어주기이동별도로 이래이래 걸면 먹힌다. 왜 onTouchStart가 아니냐면... 잊었다 아무튼 start로 했더니 너무 민감해서 찾아보다가 end로 걸었는데 잘 되었기때문에 적어둠.https://ui.toast.com/posts/ko_20220106 터치와 클릭, 우리 깐부잖아.터치와 클릭을 사용하지 않는 하루를 상상해보자. 과연 어떨까? 필자는 두 동작 없는 하루를 이제는 상상할 수 없다. 사용자일 때는 무의식적으로 사용해서 이 두 동작의 관계에 대해 깊게 생각ui.toast.com이건거같기도   번외1. input창 ..

보통 설정에서 공통으로 잡을텐데 프로젝트별로 구조가 달라서 별도로 설정해줘야할때는 이렇게 하면 된다. 1. 루트 폴더에 .vscode 폴더 생성 프로젝트 열었을 때 제일 상위에 만들어주라는 의미. 앞에 온점 빼먹지 말고 넣어줘야함. 나같은 경우 이렇게 만들어주었음. 2. 그 안에 settings.json 파일 생성 { "liveSassCompile.settings.generateMap": false, "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "~/../" } ], } 그리고 원하는 설정을 넣어주면 된다.

iframe을 가지고 있는 페이지였는데 확대축소 기능을 넣어서 마우스로 끌어서 이동하는 기능을 넣었어야했음. 그때 가끔 간헐적으로 위에 짤처럼 화면이 긁히는 현상이 일어나서 어케 해결하지 하다가 발견함. 1. css 추가 .unselectable { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } 난 pointer-events: none 넣으면 되는줄 알고 이것만 줄창 해놓고 왜 안대제 하고 있었징~

setTimeout에서 뭔가 리턴하는데 그거 자체를 promise로 처리하고 싶다면 이렇게 쓰면 된다. 1. setTimeout 자체를 promise로 감싸기 return new Promise((res, rej) => setTimeout(async() => { return await this.something(); }, 6000)); 이로케~

리엑트에서 배열인 변수를 set함수를 통해 변경하려고 하는데 자꾸 이런 멘트가 떴음. 1. 초기값 셋팅해주기 반복기가 없다는 의민데 혹시 초기값이 undefined나 빈값인건가 체크해서 변경해주면 된다. const [arr, setArr] = useState(); // 이 부분에서 useState([]) 이렇게 변경해주기 setArr((prev) => ([...prev, {title: "제목", text: "내용"}]));

1. React를 import 해주기 import React, { createContext, useState } from "react"; 앞에 import React 부분을 넣어주면 된다.