킹바구니

모바일에서는 터치 관련 이벤트가 click, mouseup 등이 아닌 touchstart, touchend 류로 들어옴. 그래서 이에 맞게 타입 처리를 해줬는데 instanceof로 타입 체크를 하는 도중에 TouchEvent가 아니라고 뱉어버리는 경우가 있음. 원인은- 브라우저 문제- touchstart이벤트인데 이벤트핸들러를 click으로 해버림- 타입 추론을 명시적으로 안해줌 라고 하는데 아니 나 다 제대로 했다고~~~~~~ 아무튼 타입이 뭐든 값은 제대로 나와줬으면 해서 type값을 직접 비교해서 clientX와 같은 좌표를 뽑아내고 있음.const getClientX = (event: MouseEvent | TouchEvent) => { if (event.type == 'touchend') {..

어떤 array형 변수가 하나 있는데 나는 타입 지정 안했는데 자기 마음대로 unknown이라 생각함. 그리고나서 변수.length하니까 에러를 열심히 띄우더라. const a: any[] = arr.map((aa) => ({ ...aa, name: 'hi' }));return a.length > 0 ? a : [];그래서 a:any[] 이런식으로 타입을 지정해줘도 unknown형식은 자꾸 뭘 할당할 수 없다고 떠서 열받...  1. 아래쪽에서 직접 타입 선언해주기const a = arr.map((aa) => ({ ...aa, name: 'hi' }));return (a as any[]).length > 0 ? a : [];부모가 정신을 못차리니 차라리 아래쪽에서 as로 타입을 다시 설정해주면 된다.

object로 된 요소를 바꾸려는데 저런 멘트가 뜬다면 타입으로 확실하게 명시해주면 된다. 1. 타입 정리interface Isomething { // 이거 [key: string]: boolean;}const [something, setSomething] = useState({ a: false, b: true,}) 여담으로 react에서 set함수로 변경할때 object를 어떻게 일괄/일부 변경하는지 적어두겠음. const [something, setSomething] = useState({ all: false, a: false, b: true,});// all의 상태에 따라 싹다 토글. 전체선택,해제 같은거에서 씀.const toggleAll = () => { const keyy = Ob..

setTimeout이 여러개 있는 경우 한 변수에 담아 forEach등을 이용하여 지우는 방법이 있다. 그러나 가끔 이 방법이 간헐적으로 되지 않아서 이리저리 찾다가 해결방법을 기록함. 1. 객체로 저장var timer = {};timer.t1 = setTimeout(() => {});for (var key in timer) { if (timer.hasOwnProperty(key)) { clearTimeout(timer[key]); }};사실 정확하게 이유는 모르겠으나 챗지피티님이 말씀하시길 타이머를 push할때 타이머ID가 덮어씌워져서 일부 타이머가 제대로 저장이 안되어서 그럴 수 있다고 하는게 제일 맞는거 같았음. 그래서 위 방법처럼 객체로 저장해서 for...in으로 지웠더니..

가끔 가다보면 mousedown이라든지 이벤트를 등록할 일이 생김. 근데 구조상 어쩌다보면 이게 중복으로 들어갈때가 있는데 이를 방지하기 위해서 아래와 같은 방법을 써보자.  1. onceel.addEventListener("mousedown", down, { once: true });간단하게 once값을 true로 넣어 한번만 이벤트가 실행되게 할 수 있는데, 코드는 이런 쉬운 방법으로 해결되어 주시지 않는다...  2. 저장해두고 불러오기let saveFunction;function setEvents() { if (saveFunction) { el.removeEventListener("mousedown", saveFunction); } saveFunction = down; el.a..

왜웹은나를힘들게하는가 1. 사용자 동작 있나 확인보통 이 케이스는 pc에서도 발생하는 문제인데, 브라우저가 거진 자동재생은 막기때문에 뭔가 click버튼을 만들거나 해서 play() 해줘야함.button.addEventListener("click", function() { audio.play();}  2. load() 했나 확인가끔 모바일에서는 load()먼저 해줘야한다고 들은게 있음.button.addEventListener("click", function() { audio.load(); audio.play();}  3. setTimeout안에 있지 않나 확인나는 이 경우였는데 일단 미리 url까지 넣어서 선언된 new Audio가 제일 바깥에 있었고, play()는 click함수 안에 있는 se..

setTimeout에서 뭔가 리턴하는데 그거 자체를 promise로 처리하고 싶다면 이렇게 쓰면 된다. 1. setTimeout 자체를 promise로 감싸기 return new Promise((res, rej) => setTimeout(async() => { return await this.something(); }, 6000)); 이로케~

1. React를 import 해주기 import React, { createContext, useState } from "react"; 앞에 import React 부분을 넣어주면 된다.

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

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