👨💻 전체 글33 [TypeScript] 함수 - 다형성과 제네릭 들어가며 이번 포스팅은 타입스크립트 함수 파트를 정리한다. polymorphism(다형성)과 generic(제레닉)의 개념을 예시 code로 살펴보자. Polymorphism (다형성) poly란? => many, serveral, much, multi morphos란? => form, structure polymorphos란? => poly + morphos => 여러 다른 구조 다형성이란, 여러 타입을 받아들임으로써 여러 형태를 가지는 것을 의미한다. 💡 Concrete type (string, number, boolean... ) type SuperPrint = { (arr: number[]): void (arr: boolean[]): void (arr: string[]): void (arr: (n.. 2022. 12. 19. [TypeScript] 함수 - Call signature와 Overloading 들어가며 이번 포스팅은 타입스크립트 함수 파트를 정리한다. Call signature과 overloading의 개념을 예시 code로 살펴보자. Call signatures(호출 시그니처) Call(=Function) Signature란 함수의 매개변수와 반환 값의 타입을 모두 type으로 미리 선언하는 것이다. 함수에 마우스를 올리면 해당 함수의 type을 보여준다. 예를 들어 React에서 함수로 props를 보낼 때, Call signature로 어떻게 함수가 작동할지 미리 설계 가능하다. 함수의 구현이 아니라 함수의 인수 및 반환 값의 유형 JS로 컴파일되지 않음 여러 함수에 call signature 사용 가능 💡 함수 정의 const add = (a: number, b: number) => a.. 2022. 12. 18. [React] useCallback으로 useEffect 심화 활용 ✔ 들어가며 useCallback()은 함수를 메모이제이션(memoization)하기 위해서 사용되는 훅이다. 리액트의 useCallback를 useEffect와 함께 사용하여 여러방면으로 효율적인 코드를 구성할 수 있는 방법을 배워서 포스팅으로 정리해본다. useCallback은 useEffect와 생긴 것은 똑같지만, 역할은 조금 다르다. ✔ 예제로 보는 useEffect 심화 활용 const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]); 첫 번째 인자로 콜백함수를 넣어주고 호출해주고 있고, 두 번째로 의존성 배열을 넣어주고 있다. a나 b가 바뀌었을 때만 useCallback의 콜백 함수를 새로 생성하고, 그렇지 않을 경.. 2022. 12. 15. [React] useEffect hook 쉽게 알아보기 ✔ 들어가며 useEffect, 직역하면 효과를 이용한다. 그럼 무슨 효과냐면? state 바뀌면서 생기는 "side effect", 부가적인 효과들을 useEffect 훅 안에서 수행할 수 있게 해준다. (Side effect: component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과) ✔ 예제로 알아보는 useEffect 💡 exam count가 업데이트될 때 document.title에 count를 업데이트해줘! 하는 코드다. import React, { usestate, useEffect } from "react"; function Example() { const [count, setCount] = useState(0); useEffect(() => { document.titl.. 2022. 12. 15. [TypeScript] 타입스크립트 첫걸음 들어가며 자바스크립트는 에러를 보여주지 않으려 노력한다. 자바스크립트는 매우 유연한 언어로 어느 개발자가 정신 나간 코드를 작성해도 개발자를 이해하려고 한다. 아래의 예시를 살펴보자. 💡 exam Python & JS # Python def divide(a, b): return a / b print(divide(2, 3)) # 0.6666666666666666 print(divide("x", "y")) # TypeError: divide() missing 1 required positional argument: 'b' // JavaScript function divide(a, b) { return a / b } console.log(divide(2, 3)); // 0.6666666666666666 con.. 2022. 12. 11. 이전 1 2 3 4 ··· 7 다음
