킹바구니 🦜

[javascript] setTimeout을 clearTimeout할 때

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값이 서로 달라서(아마..

왜~~~~~~~~~~~라고 하신다면 아래와 같이 수정 필요 1. 타입 따로 설정해주기 wrapper.querySelectorAll(".a").forEach((a: HTMLElement) => a.style.top = "10px"); 다른거는 잘만 추론하면서 이거는 또 HTMLElement라고 안써주면 에러를 뱉으신다.

sort로 정렬하려고 했는데 이런 에러가 뜬다면 이렇게 비교해주면 된다. 1. getTime 활용 data.slice().sort((a: any, b: any) => new Date(b.created).getTime() - new Date(a.created).getTime()) new Date()를 쓴다면 getTime으로 타입을 숫자로 뽑아주면 빼기가 가능해져서 에러가 사라짐.

간단하게 말해서 빠르게 쓸 수 있는 단축키같은거라고 보면 된다. 예를들어 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" // 설명 }, } 복붙해서 쓰면 되는데 단축어와 내용이 중요함. 특히 내용 안에..