타입스크립트 함수 오버로드 함수의 매개변수가 여러 타입을 가져서 리턴 값의 타입이 하나로 정해져있지 않을 때 사용할 수 있다. interface User { name: string, age: number; } function join(name: string, age: string): string; function join(name: string, age: number): User; function join(name: string, age: number | string): User | string { if(typeof age === 'number') { return { name, age }; } else { return "나이는 숫자로 입력해주세요."; } } const sam: User = join("S..
📖오늘 배운 것 Redux :Prop Drolling을 해결하기 위한 라이브러리 리덕스에서 사용되는 키워드 액션 : 상태에 변화가 필요할 때 액션을 발생 액션 객체에는 type 필드가 필수적이다. 액션 생성함수 : 액션을 만드는 함수. 파라미터를 바아와서 액션 객체 형태로 만들어준다. export const addTask = (content: string): Action => { return { type: "ADD_TASK", payload: { id: v4(), content, complete: false, }, }; }; 리듀서 :변화를 일으키는 함수 현재 상태, 전달받은 액션 두 가지 파라미터를 받아서 새로운 상태를 만들어 반환한다. useReducer를 사용하는 것과 똑같은 형태를 가지고 있다. ..
📖오늘 배운 것 forwardRef :상위 컴포넌트에서 전달받은 ref를 하위 컴포넌트로 전달하는 역할 useImperativeHandle :함수형 컴포넌트에서 forwardRef와 함께 사용할 때 부모 컴포넌트에서 자식 컴포넌트 ref에 설정한 메서드를 사용할 수 있다. 부모 컴포넌트에서 ref를 설정해서 자식에게 보낸다. function Parent() { const inputRef = useRef(); return ( inputRef.current.focus()}>Focus inputRef.current.clear()}>Clear ); } 자식 컴포넌트에서 부모에서 내려받은 ref를 받아서 useImperativeHandle을 이용해서 메서드를 설정할 수 있다. 그러면 부모컴포넌트에서는 이 로직에 ..
📖오늘 배운 것 Portals : 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 방법 첫 번째 인자는 렌더링 할 수 있는 React 자식을, 두번째 인자로는 자식을 렌더링할 DOM엘리먼트를 받는다. const el = useMemo(() => document.createElement("div"), []); useEffect(() => { document.body.appendChild(el); return () => { document.body.removeChild(el); }; }); return ReactDOM.createPortal( {children} ); useReducer : 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. reducer는 현재 ..
ResizeObserver :요소의 크기 변화를 감지하며 크기 변화가 일어날 때 발생할 수 있는 무한 콜백 루프와 순환 종속성을 방지한다. resize 이벤트와의 차이점은 resize는 브라우저의 크기를 기준으로 하는 반면 ResizeObserver의 경우 브라우저는 물론 특정 요소의 크기 변화를 감지할 수 있다. 또한 resize의 경우 변경도니 크기를 구하기 위해 getBoundingClintRect()메서드를 사용해야 했지만 ResizeObserver는 변경된 크기를 제공한다. new ResizeObserver로 생성하고 콜백함수로 크기가 변경됐을 때 실행할 함수를 넘겨준다. entry.contentRect : 요소의 크기, 위치 정보 등을 제공한다. ResizeObserver.observe() :..
📖오늘 배운 것 requestAnimationFrame() 애니메이션을 향상시킬 수 있는 방법 중 하나. 렌더링 최적화에도 사용될 수 있다. 특징 백그라운드 동작 및 비활성화시 중지 최대 1ms로 제한되며 1초에 60번 동작(프레임 비율을 모니터의 주사율에 맞추어서 실행) 다수의 애니메이션에도 각각 타이머 값을 상성 및 참조하지 않고 내부의 동일한 타이머 참조 이 함수는 스크롤 이벤트 최적화에 사용될 수 있는데 만약 스크롤 이벤트를 그냥 실행한다면 스크롤을 할 때마다 계속해서 이벤트가 실행될 수 있다. 이 때 최적화하는 방법으로는 쓰로틀링, 디바운스가 있고 그 외의 방법으로 requestAnimationFrame를 사용하는 방법이 있다. requestAnimationFrame 을 사용하면 브라우저가 렌더..
📖오늘 배운 것 new Image : 새로운 HTMLImageElement 인스턴스를 만든다. document.createElement('img')와 동일하게 작동한다. 이벤트 핸들러 onAbort: 사용자가 이미지 로딩을 중간에 멈출 때 발생하는 이벤트 onError: 이미지 로딩 중 에러가 발생했을 때 onLoad: 이미지가 성공적으로 로딩되었을 때 const [loaded, setLoaded] = useState(false); useEffect(() => { const image = new Image(); image.src = src; image.onload = () => setLoaded(true); }, [src]); Array.from :유사 배열 객체나 반복 가능한 객체를 얕게 복사해 새로운..
📖오늘 배운 것 navigator.clipboard.writeText() 텍스트를 클립보드에 복사할 수 있는 메서드이다. 매개변수로 복사할 문자열을 받는다. navigator.clipboard.writeText("복사할 텍스트") Context :단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. context는 props drilling을 해결하기 위한 하나의 방법이다. props drilling이란 컴포넌트 트리의 한 부분에서 다른 부분으로 데이터를 전달하기 위해 오직 props를 하위 컴포넌트로 전달하는 용도로 컴포넌트들이 사용되는 과정을 말한다. 이때 Context를 사용하면 중간 컴포넌트들을 거치지 않고 바로 원하는 컴포넌트에서 데이터를 전달받을 수 있다..
📖오늘 배운 것 호이스팅 호이스팅이란? : 코드가 실행되기 전에 변수, 함수 선언이 해당 스코프의 최상단으로 끌어올려진 것 같은 현상 > 자바스크립트는 코드 실행 전에 실행 컨텍스트를 위해 실행 가능한 코드를 형상화하고 구분하는 과정을 거친다. 그리고 이러한 과정에서 모든 선언이 스코프에 등록된다. >변수는 선언 - 초기화 - 할당 단계를 거치는데, var 변수의 경우 선언과 함께 undefined로 초기화되어 메모리에 저장되기 때문에 참조에러가 나지 않지만 let, const 변수는 선언과 초기화가 별개로 이루어져 선언만 되고 초기화는 되지 않은 상태에서 메모리에 저장되지 않는다. 따라서 초기화되어 있지 않아 변수를 참조할 수 없다. 변수 단계 -선언 단계 : 변수를 실행하여 컨텍스트 변수 객체에 등록..
