전체 글 247

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

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

[vscode] 간편한 snippet 등록하기

간단하게 말해서 빠르게 쓸 수 있는 단축키같은거라고 보면 된다. 예를들어 dq라고 입력하고 탭키를 누르면 document.querySelector()가 자동으로 써진다거나 이러한 기능이다. 1. 파일 - 기본 설정 - 사용자 코드 조각 구성 열으시오 js.code-snippets 검색 후 엔터 2. 원하는 스니펫 추가 { "Print to console": { // 제목 "scope": "javascript,typescript", // 적용 범위 "prefix": "cd", // 단축어 "body": [ "console.dir($1);", // 내용 ], "description": "Log output to console" // 설명 }, } 복붙해서 쓰면 되는데 단축어와 내용이 중요함. 특히 내용 안에..

Javascript 2024.02.01

[React] textarea에서 defaultValue가 안될 때

모달에 textarea를 하나 넣어서 초반에 data객체에 어떤 값이 있으면 그걸 출력하고, 없으면 빈칸을 출력하는 뭐 그런 간단한걸 하려고 했는데 이상하게 있는 값을 출력을 안해줘서 찾다보니 아래와 같은 요소를 추가해줬어야했었다. 1. key 추가 일단 사정상(?) 해당 값을 useState로 사용 불가했고, useEffect도 안되는 상황이였음(커스텀 훅이랑 연결을 시켰더니 뭔가 에러가 난모양인데 어렵다어려버). 암튼 그런 상황에서 이친구가 담아야할 값이 변했고 이를 렌더링 해주라는 의미에서 key를 넣어줬더니 훌륭하게 작동됨. 사실 key는 리엑트 공부할때 배열로 데이터 뿌리면서 나오는 요소긴 하다만, 이럴때 되면 또 여기에 적용할 생각이 뒤늦게야 든단말이지...ㄷ; https://kentcdodd..

react 2024.01.30

[React][typescript] React.KeyboardEvent React.MouseEvent 동시에 쓸때

예를들어 검색input과 검색버튼에 같은 함수를 건거라고 보면 됨. 그 대신 input은 keydown이벤트로, 버튼은 click이벤트로 걸어서 keydown일때는 엔터키 체크하고 click은 그냥 검색하고 뭐 그런식으로 하려는데 자꾸 에러가 나는 것임. 1. as로 걸어주기 if (e.type == "keydown" && e.code == "Enter") { gotoPage(v); return; } if (e.type == "click") { gotoPage(v); } 이건 고치기 전임 if (e.type == "keydown" && (e as React.KeyboardEvent).code == "Enter") { gotoPage(v); return; } if (e.type == "click") { g..