연습장/낙서장

[React/TS] 이벤트 핸들러 함수의 타입

React에서 이벤트 핸들러 함수를 선언할 때, 이벤트 타입 또는 함수 타입을 아래와 같이 선언한다. const handleClick = (event: React.MouseEvent) => { // }; const handleClick: React.MouseEventHandler = (event) => { // }; 여기서 MouseEvent는 반드시 React.MouseEvent를 사용해야 한다. JS에서 기본으로 제공되는 MouseEvent를 사용하면 React에서 사용할 때 타입 에러가 발생한다. (단, DOM 요소에 직접 addEventListener를 사용할 때에는 기본 제공되는 MouseEvent를 사용해야 한다) 제네릭에는 어떤 요소의 onClick(또는 onMouseOver, onDrag ..

[JavaScript] Array.prototype.splice 직접 구현하기

📝 Array.prototype.splice 명세 array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) 매개변수 1. start 배열 변경을 시작할 인덱스 - 정수 문자열은 정수로 변환 - 정수, 정수 문자열 외 다른 입력은 모두 0으로 간주 - 음의 정수(-n)는 배열의 마지막 요소부터 n번째 인덱스(array.length - n)로 변환 2. deleteCount 배열에서 제거할 요소의 수 - 자연수 문자열은 정수로 변환 - 자연수, 자연수 문자열 외 다른 입력은 모두 0으로 간주 3. item1, item2, ... 배열에 추가할 요소 반환값 제거한 요소를 담은 배열 기타 - Array.prototoype.splice는 원본 배열의 요소를 변경시..

[JavaScript] Array.prototype.map 직접 구현하기

📝 Array.prototype.map 명세 arr.map(callback(currentValue[, index[, array]])[, thisArg]) 매개변수 1. callback 새로운 배열 요소를 생성하는 함수 1. currentValue 현재 순회중인 배열의 요소 2. index 현재 배열 요소의 인덱스 3. array map()을 호출한 배열 2. thisArg (생략가능) callback 함수가 실행될 때 바인딩 될 this 값 반환값 배열의 각 요소에 대해 실행한 callback 함수의 결과를 모은 새로운 배열 기타 - 희소 배열의 경우 값이 정의되지 않은 인덱스에 대해서는 callback 함수가 호출되지 않는다. (undefined가 할당된 인덱스는 호출된다.) - callback 함수에..