라이브러리 22

[react-router-dom] React Router Future Flag Warning 경고창 없애기

열받게 갑자기 자꾸 콘솔창에 나옴. 프로젝트 2개가 있는데 하나는 그래도 안뜨는데 다른(최신) 하나가 자꾸 뜨더라. future옵션에 뭘 막 추가해줘도 안됐는데 드디어 되서 기록함.   1. RouterProvide에 future 추가  2. createBrowserRouter에 future 옵션 추가const options = { future: { v7_relativeSplatPath: true, v7_fetcherPersist: true, v7_normalizeFormMethod: true, v7_partialHydration: true, v7_skipActionErrorRevalidation: true, },}export const router = createBrows..

라이브러리 2024.11.26

[react][react-query] ~~유형에 'InvalidateQueryFilters' 유형과 공통적인 속성이 없습니다.

'"isLogin"' 유형에 'InvalidateQueryFilters' 유형과 공통적인 속성이 없습니다. invalidateQueries쓰는데 자꾸 키 에러가 뜬다 띠바 날 열받게하지마시오 1. 키 그대로 맞춰 써주기export const isLogin = () => { return useQuery({ queryKey: ['isLogin'], // 이거 생긴대로 });}return useMutation({ onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['isLogin'] // 이렇게 써주기 }); }})

라이브러리 2024.07.11

[react][react-query] '() => void' 형식은 'MutationFunction<unknown, void>' 형식에 할당할 수 없습니다.

'() => void' 형식은 'MutationFunction' 형식에 할당할 수 없습니다. react-query쓰는데 mutationFn에서 자꾸 에러가 난다.. 어쩔티비아니냐거 1. promise 반환return useMutation({ mutationFn: () => { // 뭔가 하기 return new Promise((res) => res(true)); }, onSuccess: () => { }})mutationFn안에서 프로미스 해주셈 보통 api보내는건 어차피 자동반환되니까 상관없는데 아닌거는 따로 해줘야함.

라이브러리 2024.07.11

[react][react-query] useMutation 쓰는 법

'() => Promise' 유형에 'UseMutationOptions' 유형과 공통적인 속성이 없습니다.내지invailed hook 에러이라는 에러가 뜨는데 아니 타입이 유동적일수도 있어서 그런데 왜 자꾸 이러시죠? useEffect에 바로 안쓰고 함수로 감아줬는데도 왜이러시죠?  1. 이렇게 쓰기const App = () => { useEffect(() => { mutate(); // 한번 불러주기 }, []) const run = () => { // 뭔가 데이터 가져오는 함수 return res.data; } const { mutate } = useMutation({ mutationFn: run, onSuccess: (data: any) => { }, ..

라이브러리 2024.07.03

[esbuild][react] svg를 컴포넌트 형식으로 쓰기

단순하게 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 ..

라이브러리 2024.06.13

[react-draggable] 모바일에서 click 안 먹을 때

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

라이브러리 2024.05.08

WindowsPowerShell ENOENT 에러

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

라이브러리 2024.02.08

[react-toastify] css 안먹히는 이슈

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

라이브러리 2024.02.08

thorium-reader 설치 오류

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

라이브러리 2023.12.06