킹바구니

간단하게 말해서 빠르게 쓸 수 있는 단축키같은거라고 보면 된다. 예를들어 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..

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

useRef로 element좀 써주려고 하면 이렇게 뜬다. 그냥 current가 있을 때를 조건으로 걸어주면 된다. 1. 미리 걸러주기 if (inputRef.current) { // 이곳에 코드 쓰기 } 참고로 나는 정의할때 이렇게 썼음 const inputRef = useRef(null); +추가로 이렇게 썼는데 여전히 그 밑에서 current가 null일 수 있다 이소리를 한다면 느낌표를 활용하자. if (inputRef.current) { gotoPage(inputRef.current!.value); } 느낌표의 의미는 'null일리없으니까 그대로 진행시켜'라는 의미라고 함.