전체 글 240

[React][typescript] 형식에는 반복기를 반환하는 '[Symbol.iterator]()' 메서드가 있어야 합니다.

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

React 2024.03.20

[typescript] 'this'에는 형식 주석이 없으므로 암시적으로 'any' 형식이 포함됩니다.

타스에서 뭔가 작업하다보면 this에 위와 같은 에러가 뜸. 빠른 수정에는 화살표 함수를 쓰면 된다는데 그래도 에러는 사라지지 않는다. 이럴때 해결하는 방법! 1. tsconfig 수정 { "noImplicitThis": false } compilerOptions안에 있는 noImplicitThis를 false로 바꿔주면 된다. 아니면 this에 타입을 any말고 정확하게 짚어주면 됨.

input에서 enter쳤는데 두번 실행될 때

이상하게 검색할때 간헐적으로 뭔가 이상하게 돌아가는거 같아서 증상 재현을 위해 수십번 해보고, 내부 돌아가는 코어에 뭔가 문제가 있나 뒤지다가 인제보니 헐 무려 이벤트가 두번 들어가서 그랬던거시다... 처음에는 keydown keyup문젠가 싶었다가 또 무슨 리엑트 문젠가 싶다가 머야머야 하면서 event.prevent뭐시기도 해보고, 디바운스도 해보고, 찾다보니 또 한글일때 영어일때 이런 경우가 많이 나오더라 근데 난 이경우가 아닌데.. 하다가 발견함. 1. 막아주기 if (e.code == "Enter" && e.key == "Enter") { search(); } event에서 keycode가 13, 229번일때 code가 둘다 "Enter"라서 그랬던 것임. 대신 서로 key값이 서로 달라서(아마..

Javascript 2024.02.22

[vite] src경로를 @로 쉽게 쓰는 법

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

vite 2024.02.14

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
반응형