일반 함수에서는 var, let 등의 변수를 선언 후 setTimeout 값을 넣어 사용한다. const debounce = (func, delay) => { let timeoutId = null; return function (...args) { clearTimeout(timeoutId); timeoutId = setTi...

리액트에서 useRef를 사용하여 debounce를 구현하려 했지만 잘 안되었다.. const debounce = () => { if (timerRef.current) clearTimeout(timerRef.current); timerRef.current = setTimeout(() => { console.log("debou...

Expected an assignment or function call and instead saw an expression no-unused-expressions 함수 코드를 작성하다가 위와 같은 에러가 난다면 잘못된 화살표 함수 표현을 사용했을 수 있다. 화살표 함수에서 소괄호 () 와 중괄호 {} 사용 () const Button = ...

npm 라이브러리를 사용하는 프로젝트에서 라이브러리의 리액트 컴포넌트를 import 하면 Minified React error #321 에러 발생 라이브러리의 webpack.config.js 파일에 externals 속성 추가 externals: ["react", "react-dom"],

npm 라이브러리를 만들었지만 이미지 파일을 라이브러리에 빌드하는 방법을 찾지 못했다.. /node_modules/내라이브러리/ 경로에 이미지 폴더가 생성되지 않는다. 그래서 file-loader가 아닌 url-loader를 사용하게 되었다. file-loader는 파일을 build 폴더에 생성시켜주는 역할을 한다. public 혹은 src 폴...

모듈 등을 import 할 때 경로 차이가 많이 나면 ../../../../../Components/ 이런식으로 매우 복잡해진다. jsconfig.json 혹은 tsconfig.json 파일을 열어 아래 코드를 추가한다. { "compilerOptions": { "baseUrl": "src" }, "includes": ["src"...

Painter 라이브러리 만들며 javascript로 마우스 포인터에 이미지를 넣는 작업을 했다. but 웹팩 빌드를 돌려도 이미지 파일이 로드되지 않았다. file-loader를 사용해도 마찬가지. 이유는 javascript에서 style.curser = url(경로, auto) 이 부분에 경로를 바로 집어넣어서, 이미지를 로드하지 않은 것 같...

clientX, clientY clientX : 브라우저 페이지에서의 X좌표 위치를 반환하나 스크롤은 무시하고 해당 페이지의 상단을 0으로 측정합니다. clientY : 브라우저 페이지에서의 Y좌표 위치를 반환하나 스크롤은 무시하고 해당 페이지의 상단을 0으로 측정합니다. offsetX, offset ...

스택 (Stack) LIFO (Last In First Out) : 후입선출 구조 한쪽 끝에서만 자료를 넣고 뺄 수 있는 접시처럼 쌓아올린 형태의 구조 삽입 (Push) : top에 데이터가 저장된다. 삭제 (Pop) : top의 데이터가 삭제된다. 자료가 없을 때 pop 하는 오류를 stack underflow, 스택의 크기...

tsconfig 설정 { "compilerOptions": { "target": "es5", "module": "commonjs", "declaration": true, "outDir": "./dist", "strict": true } } 기존 tsconfig 설정에 "declaration": true ...