킹바구니

그냥 만드려다가 부드러운 모션에 위치도 아래서부터 쌓이는걸 만들자니 복잡해서 그냥 라이브러리를 쓰기로 했는데 하란대로 했는데 멀쩡하던 화면이 캡쳐와 같이 우르르 틀어져버렸음. 도대체 뭐가 원인인가 찾다가 발견한 글에서 힌트를 얻음. react-toastify 라이브러리 말고 다른 라이브러리가 문제라면 2번 확인! 1. css 주입시키는 방법 import { injectStyle } from "react-toastify/dist/inject-style"; injectStyle(); 다행히도 해당 라이브러리에서 inject할 수 있는 함수를 제공해서 위와 같이 사용함. 나는 useEffect에 넣어서 실행했었음. 이거 아니면 다른 라이브러리 쓰기라는 방법도 있다 ㅋㅋㅋ https://github.com/fk..

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" // 설명 }, } 복붙해서 쓰면 되는데 단축어와 내용이 중요함. 특히 내용 안에..

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

예를들어 검색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..

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

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; 넹

타스로 쓰다보면 자꾸 빨간줄이 생기는데 일단 첫번째 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가 있을때~를 조건으로 걸고 그 안에 하고싶은걸 넣어주면 됨. 거의 다 이런식의 오류인듯.

버튼 클릭시 a가, 더블클릭시 b가 실행되야하는데, 더블클릭 시 처음에 클릭 이벤트가 한번 실행 되고 그 다음에 더블클릭 이벤트가 실행되는게 보여서 방법이 없나 하고 찾아봄. 슬쩍 보니까 한 요소에 이렇게 클릭+더블클릭 이벤트를 동시에 거는건 비추한다고 하는거같았음. 중간에 리엑트식 해결방법이 있어서 저장해둠. 1. 커스텀 훅 만들기 import { useState, useEffect } from 'react'; function useSingleAndDoubleClick(actionSimpleClick, actionDoubleClick, delay = 250) { const [click, setClick] = useState(0); useEffect(() => { const timer = setTimeo..