Pandaman Blog

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..

Saga란 무엇인가? 1. 탄생의 배경 Saga는 본래 Long Live Transaction(LLT)의 문제점을 해결하기 위한 개념이다. LLT는 상대적으로 긴 시간 동안 데이터베이스 리소스를 사용하여 다른 트랜잭션의 종료를 지연시키는 문제가 있다. 많은 객체에 접근하기 때문에 많은 교착상태를 발생키며, 지연 가능성이 굉장히 높다. 2. Saga란? 특정 애플리케이션의 경우 데이터베이스의 일관성을 희생하지 않고 특정 LLT가 완료되기 전에 리소스를 기다리고 있는 트랜잭션들을 허가할 수 있다. 예를 들어서 확인해보자. 항공권 예약 트랜잭션을 (T)라고 생각해보면, 이 트랜잭션이 완료할 때까지 모든 리소스를 붙잡고 있을 필요는 없다. 비행기 좌석에 대한 예약을 T1이라고 하면 T1이 끝나고 바로 좌석 예약..

1. Redux-Saga란 redux-saga는 리액트/리덕스 애플리케이션의 사이드 이펙트, 예를 들면 데이터 fetching이나 브라우저 캐시에 접근하는 순수하지 않은 비동기 동작들을, 더 쉽고 좋게 만드는 것을 목적으로 하는 라이브러리입니다. Redux-saga에 대해 알아보기 전 Saga에 대해 알아보자. 2. Saga 배경지식 Saga란? 3. Redux-saga란 Redux-saga란 리액트/리덕스 애플리케이션에서 Side Effect(부수 효과)들을 더 쉽고 좋게 만드는 것을 목적으로 하는 라이브러리이다. 애플리케이션에서 어떤 스레드와 같은 역할을 한다. 기존 Saga의 의미는 다른 곳에서 시작되었는데, 데이터베이스 시스템에서 장기 트랜잭션의 관리, 실패가 발생했을 때 처리에 대한 효율적인 방..

Atomic Design 이란 물질의 개념을 웹에 적용하여 인터페이스를 세분화한 디자인 시스템을 만드는 방법론. Atomic Design에서는 컴포넌트를 atom, molecules, organisms, templates, pages로 세분화함 1) Atom(원자) 가장 기본적인 구성 요소(HTML Tag 또는 스타일 속성이 적용된 HTML Tag) 2) Molecules(분자) 원자의 조합으로 구성된 요소 3) Organisms(유기체) 분자 또는 원자 또는 유기체의 조합으로 구성된 요소 4) Templates 페이지의 레이아웃 형성하는 컴포넌트 5) Pages 템플릿 컴포넌트에 데이터가 포함된 컴포넌트 장점 1) 유지보수성 향상 2) 컴포넌트의 복잡도 낮춤 3) 디자인의 일관성 높임 4) Storyb..