Pandaman Blog

Utility 타입에 대한 궁금증에 내부 코드를 보았고, 내부 코드를 보는 순간 아 잘 모르겠다. 라는 생각으로 Mapped types 이란 것을 공부하기로 했다. Mapped Types 자바스크립트에서 map 메서드는 배열 내의 모든 요소 각각에 대해 순회하며 새로운 배열을 반환한다. ['1', '2', '3'].map(value => Number(value)); // [1, 2, 3] map 메서드를 통해서 각 문자열을 숫자로 맵핑하여 새로운 배열을 반환했다. 타입스크립트의 mapped type도 위와 마찬가지로 타입을 순회하며 새로운 타입으로 변환하는것을 의미한다. index signature 인덱스 시그니처는 타입의 속성 이름을 잘 모르지만 값의 타입을 알 경우 사용된다. 링크 type Perso..

타입스크립트에서는 여러 유틸리티 타입을 제공한다. 이 유틸리티 타입은 Global 하게 사용가능하다. 이번 시간에는 유틸리티 타입의 종류와 왜 사용하는지? 어떻게 구현할 수 있는지 확인해 보려고 한다. 1. Partial 제네릭을 통해 넘겨받은 타입의 모든 속성을 optional로 변형해 반환하는 타입이다. 매우 간단하다. 링크 interface Person { name: string; age: number; } function introduce(person: Partial) { return `my name is ${person.name} and ${person.age} years old.` } introduce({ name: 'coo' }); introduce({ age: 33 }); i..

함수 목표 함수를 설명하는 타입을 작성하는 방법에 대해 알아보고, 실제로 어떻게 적용하면 효과적인지 알아보자. 호출 시그니쳐 타입스크립트의 함수 타입 문법을 호출 시그니처라고 부른다. 그렇다면 함수 타입 문법은 무엇일까? 우리가 흔히 사용하고 있다. 예를 들어 아래와 같이 sum이라는 함수가 있다고 가정하자. function sum(a: number, b: number) { return a + b; } 이걸 타입 문법으로 변경하면? 아래와 같이 표현할 수 있다. (a: number, b: number) => number; (a: number, b: number): number; 매우 쉽다. 화살표 함수와 매우 유사하다. 함수에 함수를 인수로 전달하거나, React에서는 컴포넌트의 props로 함수를 전달..

1. Type Guard (타입 가드) 목표 타입 가드에 대해서 학습을 통해서 타입의 안전성을 높일 수 있는 방법들에 대해 알아보자. Type Guard 란? Type guard는 TypeScript만의 독특한 기능으로, 분기한 블록 안에서 해당 변수의 타입을 한정시켜주는 기능을 말한다. 다음은 타입 가드의 방법이다. 1) typeof 타입 스크립트는 typeof 연산자를 이해할 수 있다. 즉 조건문에 typeof를 사용하면 해당 조건문 블록 내에서 해당 변수의 타입이 다르다는 것을 이해한다. 타입 스크립트 컴파일러 과정에서 typeof를 타입 가드로 이해한다. 예를 들면 아래와 같다. 링크 const trimData = (data: string | number) => { if (typeof data =..

목표 이번 글에서는 WebPageTest로 웹 페이지를 진단하는 방법에 대해 알아보자. WebPageTest란? WebPageTest - Website Performance and Optimization Test Select Test Location Virginia - EC2Salt Lake City, Utah - GCECalifornia - EC2Toronto, Canada - EC2Sao Paulo, Brazil - EC2Ireland - EC2London, UK - EC2Paris - EC2Amsterdam, NL - GCEFrankfurt, Germany - EC2Milan, Italy - EC2Stockholm, Sweden - EC2Cape Town, www.webpagetest.org Web..

클래스형 컴포넌트를 함수형 컴포넌트로 변경하는 작업을 진행하면서 이전 상태를 알아야 하는 경우가 발생했다. react 공식 문서에서 확인해보면 아래와 같은 예제를 통해 알려주고 있다. function Counter() { const [count, setCount] = useState(0); const prevCountRef = useRef(); useEffect(() => { prevCountRef.current = count; }); const prevCount = prevCountRef.current; return Now: {count}, before: {prevCount}; } 해당 코드를 다시 Custom Hook으로 변경 가능하다. function Counter() { const [count, ..

1. action pulling이란? action pulling을 해석하면 action을 잡아당기는 것을 의미한다. saga에서의 action pulling은 take Effect를 의미한다. 그렇다면 take Effect는 무엇일까? 2. take effect 란? take는 이전 글에서 설명한 call Effect와 비슷한 점이 있다. call 이팩트는 Promise가 resolved 될 때까지 generator은 중지하도록 미들웨어에 지시한다. take도 마찬가지로 일치하는 액션이 dispatch 될 때까지 중지되도록 미들웨어에게 명령하는 것이다. takeEvery Helper 함수 같은 경우, 호출된 Task에 대해 호출 시기를 제어할 수 없고, 일치하는 각 작업에서 반복해서 호출된다고 한다. 왜..

1. Helper 함수란 redux-saga에서는 Task의 생성을 위해 내부 함수를 감싸는 헬퍼 이펙트를 제공한다. 이 헬퍼 함수는 Lower level API 기반으로 만들어졌다. Lower level API 기반으로 만들어졌다고 하는데, 아래에서 헬퍼 함수의 종류와 이 헬퍼 함수가 어떻게 동작하는지 알아보자. 2. Helper 함수의 종류 1) takeEvery takeEvery 헬퍼 함수는 디스 패치된 각 액션에 대해 사가를 실행한다고 한다. 다시 말해서 액션이 디스 패치될 때마다 비동기적으로 사가를 실행할 수 있다. 아래의 예제를 살펴보자. import { takeEvery } from 'redux-saga/effects' function* watchFetchData() { yield takeE..