킹바구니 🦜

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

한번 혼자 처음부터 다 해보려는데 뭔소리고~~~~~~~~~~~~~~~~~~~~ 맨날 남이 기본 셋팅 해준걸로 시작하다보니 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..

Error: spawn undefined\System32\WindowsPowerShell\v1.0\powershell ENOENT 왜그런진 모르겠는데 npm run dev하려는 상황에서 갑자기 이런 에러가 뜨기 시작했음. 터미널이 파워쉘로 되어있어서 커맨트 프롬프트?로 바꿔봤는데도 안됨. 그래서 인터넷에서 뭐 환경변수를 어쩌고저쩌고까지 다 해봤는데도 안됨! 아니 다른 프로젝트는 잘만 되는데 이 프로젝트는 왜 안되는겨~~~~하다가 겨우 해결 1. git으로 열기 vscode에서 터미널(컨트롤+`)창에서 git bash로 하나 생성해서 npm 어쩌고를 하면 되긴 되더라. 이걸로 또 해볼 생각은 못했는데 신기쓰

그냥 만드려다가 부드러운 모션에 위치도 아래서부터 쌓이는걸 만들자니 복잡해서 그냥 라이브러리를 쓰기로 했는데 하란대로 했는데 멀쩡하던 화면이 캡쳐와 같이 우르르 틀어져버렸음. 도대체 뭐가 원인인가 찾다가 발견한 글에서 힌트를 얻음. react-toastify 라이브러리 말고 다른 라이브러리가 문제라면 2번 확인! 1. css 주입시키는 방법 import { injectStyle } from "react-toastify/dist/inject-style"; injectStyle(); 다행히도 해당 라이브러리에서 inject할 수 있는 함수를 제공해서 위와 같이 사용함. 나는 useEffect에 넣어서 실행했었음. 이거 아니면 다른 라이브러리 쓰기라는 방법도 있다 ㅋㅋㅋ https://github.com/fk..

npm install에서 divina-player-js을 설치하는 과정에서 무한로딩이 걸렸고, 이 오류가 은근 발생했던건지 친절하게 방법도 알려줬는데 정확하게 어떻게 하는건지 몰랐어서 기록해둠. 1. git bash 열기 일단 프리징된 상태에서 그냥 새롭게 git bash를 열어서 아래와 같이 복붙을 해줌. node scripts/package-lock-patch.js && cat package-lock.json | grep -i divina-player-js 난 이걸 어디다 써야하는건지 몰라서 조금 해맸음 파워쉘을 또 여는건지 커맨트 프롬프트인지 뭔지;; 2. 다시 npm install 그러면 쫙 진행되더니 divina-player-js에서 호로록 정상적으로 넘어감. 이제 다 된줄 알고 npm run ..

풀(update)받으려고 했는데 갑자기 저런 메세지가 떴음. 메세지 자세히 안봤으면 svn은 에러가 에러처럼 뽝!! 하고 안떠서 그냥 풀 잘된거같이 보이더라. 1. 개별 폴더에서 update 받기 폴더 안에 여러 폴더가 있었는데, 그 폴더마다 새로 받을 내용이 많아서 저랬던듯. 그래서 개별 폴더에 들어가서 받아주니까 딱 되더라!

특화된 드래그/회전 기능 등을 제공하는 라이브러리임. 화면에 뭔가 드래그&돌아가는걸 구현했어야해서 이걸 캔버스로 해야하나 싶었는데 다행히 라이브러리가 있었다. 참고로 보니까 한국인이신듯?? 아무튼 어떤 요소를 드래그나 회전을 열심히 하다가 reset버튼을 눌렀을 때 원래대로 돌아가게 하고 싶다면 아래와 같이 설정하면 된다. https://daybrush.com/moveable/ Moveable is Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Moveable is Draggable! Resizable! Scalable! Rotatable! Warpable! daybrush.com 1. reset하기 const reset = () => ..

swiper의 webcomponent를 활용하여 슬라이드를 구현하고 있었는데 슬라이드 앞뒤이동 버튼 색만 변경하려고하는데 !important를 줘도 아무리 안먹어서 뒤져보다가 정리함. 1. injectStyles 활용 먼저 html태그 swiper-container에 ref를 설정해주고 init값을 false로 둬야함. 그리고 watch에 ref가 들어왔을때 위와 같은 코드를 넣어주고 initialize()를 해주면 잘 적용된다. 참고로 onMounted는 안먹히니께 주의! 이게 공식 설명서에 있긴한데 묘하게 빠진 부분이 있어서 안먹힌단말이지..

ionic 아이오닉이라고 안드, 아이폰같은 동작을 지원하는 웹앱 툴킷인데(react, vue같은 웹 프로젝트를 앱 형식으로 말때 사용), 제스쳐를 사용하고 싶은데 gesture.enable()만 하면 자꾸 아래와 같은 오류가 떠서 짜증났는데 답은 다음과 같다. 아니 공식예시문서에는 마운트 코빼기도 안보이더니~~~~~ Cannot read properties of undefined (reading '__zone_symbol__addEventListener') 1. onmounted 이후 작성 const viewRef = ref(); onMounted(() => { const gesture = createGesture({ el: viewRef.value, onMove: (ev) => onMoveHandler..

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