Javascript 97

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

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

[react][typescript] string[] 형식은 never[] 형식에 할당할 수 없습니다.

let arr = useRef([]); arr.current = text.replace(" ", "").split(","); // 에러 배열을 하나 만들어서 어떤 텍스트를 배열화한걸로 대체하려고 했는데 위와 같은 메세지가 뜨더라. arr가 []배열이라고 다 써놨는데 뭐가 문제지?? 1. 배열에 어떤 인자가 들어오는지 상세하게 알려주기 // useRef에 쓰는 예시 let arr = useRef([]); // 모르겠다 대충 넘어가자 let arr = useRef([] as any);

[typescript] 값 할당 시 문제

undefined 형식은 number 형식에 할당할 수 없습니다. undefined 형식은 string 형식에 할당할 수 없습니다. a = b 이렇게 a에 b를 할당하려고 하는데, a가 number고 b가 string이라 b를 숫자로 바꿔서 넣는다고 쳐보자. 근데 b가 또 undefined가 될 수 있다 이딴~~~소리를 하면서 에러가 뜨는데 그냥 이런건 조건 걸어서 걔가 undefined아닐때~ 이렇게 써주면 되는데 한줄로 쓰는 방법은 아래와 같음. 1. 한줄로 쓰는 법 const cnt = (settings.cnt !== undefined) ? parseFloat(setting.cnt) : 2; 넹

[typescript] localStorage, sessionStorage

타스로 쓰다보면 자꾸 빨간줄이 생기는데 일단 첫번째 1. getItem에 에러날 경우 const item = JSON.parse(sessionStorage.getItem(k)!); 뒤에 느낌표를 쓰기. 2. key에 에러날 경우 // 반복문이라서 i가 있음 const k = sessionStorage.key(i); if (k && k.includes('user')) {}; 첫번째는 따로 변수로 받아서 if문에서 갸가 있을 경우~를 써주고 처리하면 된다. if (sessionStorage.key(i)?.includes('user')) {} 변수로 처리하기 싫다면 이렇게 물음표를 key뒤에 붙이면 됨!

'정의되지 않음'일 수 있는 개체를 호출할 수 없습니다.

아 형 또 왜그래요 1. 좀 더 자세한 조건 추가 if (this.view.api?.getText) { this.view?.api?.getText(text); } 좀 더 설명하자면 view의 api에 아무것도 없다가 페이지가 로드되면 getText가 생기는데, 이 타이밍을 못기다리고 getText는 없다며 '정의되지 않음' 이하 경고멘트를 띄운 것임. 그렇기때문에 getText가 있을때~를 조건으로 걸고 그 안에 하고싶은걸 넣어주면 됨. 거의 다 이런식의 오류인듯.

[react][typescript] 'RefObject<HTMLElement>' 형식은 'LegacyRef<HTMLDivElement> | undefined' 형식에 할당할 수 없습니다.

잘 또 하다가 갑자기 발생하는 오류... 잘쓰던 useRef를 다른 엘리먼트로 옮긴것뿐인데 왜그러지 싶었는데 타입스크립트는 엘리먼트가 그냥 div냐 main header같이 다른 시멘틱 엘리먼트냐를 또 가르나봄. 나 열받게하지마라! 1. useRef값 확인 const wrapper = useRef(null); // 기존. 에 걸어뒀음. const wrapper = useRef(null); // 변경. 에 걸어둠.