Pandaman Blog

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

React Hook은 상태 로직의 재사용성을 높이고, class 형태의 React Component의 복잡도를 낮추기 위해 만들어졌습니다. Hook을 사용하면 class형 컴포넌트에서 사용하던 lifeCycle에 대해 달달 외우지 않아도 됩니다. 코드의 로직을 이해하면서 상태을 눈으로 쉽게 파악할 수 있습니다. 우리는 React에서 기본적으로 제공하는 Hook이 무엇이 있는지 확인해보고, 재활용은 어떻게 할 수 있는지 확인해보는 시간을 갖도록 하겠습니다. useState useState는 class형 컴포넌트에서 사용하는 setState 함수와 비슷한 역할을 합니다. useState의 두 개의 요소를 리턴합니다. 첫 번째 요소는 현재 상태, 두 번째 요소는 그 상태를 갱신할 수 있는 함수를 리턴합니다. ..

개발자에게 꼭 필요한 것은 바로 편리한 에디터입니다. 에디터를 사용하면 프로젝트 관리 용이하고 개발할 때 여러 가지 편리한 기능을 지원하기 때문이죠. 하지만! 편리한 기능을 제공하는 에디터는 정액제로 우리의 소중한 돈을 써야 하는 경우가 생깁니다. 왜 Visual Studio 인가? 저도 처음 접하게 된 에디터는 Jetbrain사의 WebStorm이란 에디터였습니다. 굉장히 다양한 기능을 제공하고 퀄리티 높은 에디터입니다. 하지만 저에게 가격이 부담스럽게 느껴졌습니다. 첫 한 달은 무료지만 말이죠. 허허 오늘 기준 환율을 계산해보면 15만 8,541원이네요. 저렴하다면 저렴할 수 도 있고 개인마다 차이는 있다고 생각합니다. 또 다른 좋은 에디터가 있을까? 하고 찾아보던 중 MS사의 Visual Studi..

Redux toolkit은 Redux를 좀 더 편리하게 사용할 수 있도록 만들어진 라이브러리입니다. 사용방법도 매우 간단합니다. 이전 포스팅에서 만들어본 todoList를 Redux toolkit에서 제공하는 함수를 사용해보겠습니다. 설치 # NPM npm install @reduxjs/toolkit # Yarn yarn add @reduxjs/toolkit configureStore createStore 함수와 동일하게 루트 리듀서 함수를 호출하여 리덕스 스토어 생성하는 역할을 합니다. configureStore는 인자로 object를 받으며 아래와 같이 작성할 수 있습니다. // 이전 const store = createStore(rootReducer, devTools); // 이후 const sto..

TodoList 만들기 이전 포스팅에서 Redux의 3원칙을 간단하게 학습했다. 오늘은 3가지 원칙을 활용해 TodoList를 만들어 리덕스를 이해해보자. Redux 설치 예제를 시작하기 앞서 Redux와 React-Redux 설치가 필요하다. 터미널에 아래와 같이 입력한다. npm install --save redux 또는 yarn add redux 그리고 리액트 애플리케이션에서 Redux의 사용을 편리하게 할 react-redux도 설치하자. react-redux는 redux와 react 컴포넌트를 연동하여 store에 저장된 상태를 props로 전달하도록 도와준다. npm install --save react-redux 또는 yarn add react-redux Directory 구성 index.j..

Redux란? Redux는 javascript application을 위한 예측 가능한 상태 컨테이너이다. 리덕스는 상태를 단일 저장소에 저장한다는 아이디어에서 출발한다. 단일 저장소에 저장한다면 큰 이점이 있을까? Single source of truth 각 컴포넌트가 상태를 업데이트하기 위해 setState 함수를 호출하여 state 업데이트한다. 컴포넌트가 많을수록 state가 업데이트된 이유를 알기 위해 컴포넌트 트리를 추적한다. 이러한 과정은 개발의 효율성을 매우 떨어트린다. Redux는 단일 저장소에 상태를 저장하여, 상태 관리를 단순화시켜준다. State 읽기 전용 state는 읽기 전용이다. 그렇다면 어떻게 상태를 갱신할 수 있을까? state를 변경하기 위해서는 명령이 필요하다. 이를 리..