# redux saga
redux-thunk, redux-saga 이용하기
외주 프로젝트를 진행하다보니 컴포넌트 내부에 있었으면 하는 로직들이 saga쪽에 있게 되는 문제가 발생하였다. 완벽하게 문제를 해결하지는 못하였지만, 만들어놓은 helper함수와 같이 사용할 수 있는 방법을 찾았고 모두 동의하였다. (+프로젝트에서 redux를 어떻게
[사이드 프로젝트] Tindux 회원가입 컴포넌트 작업기📝
토이 프로젝트로 개발중인 블라인드 데이팅 서비스 Tindux의 회원가입 컴포넌트 작업이 어느정도 마무리되었다. 지금까지 만들어봤던 일반적인 회원가입 관련 컴포넌트에 비해 받아야할 항목들도 많고, 입력받은 항목들을 기반으로 컴포넌트 내에서 실시간으로 변화를 줘야 했다보니
Redux-Thunk vs Redux-Saga 한국어
본 게시물은 Medium의 Redux-Thunk vs Redux-Saga을 한글 번역한 글입니다. 약간의 의역이 포함되어 있습니다.요즘에는 많은 동적 웹 애플리케이션에서 비동기 작업을 사용합니다. 당신은 React 개발자로서 아마 경력 내내 Redux-Thunk를 사용
[Redux] Redux-Saga 기초 연습
Redux-Saga를 활용한 네트워크 요청. redux-saga의 흐름을 이해하기 위해 작성. 공식페이지의 튜토리얼을 추천. https://mskims.github.io/redux-saga-in-korean/introduction/BeginnerTutorial.html 1. redux-saga 설치 >$ npm install --save redux-sa...
[Redux] Redux-Saga
출처는 공식 페이지와 인프런 [리뉴얼] React로 NodeBird SNS 만들기, PoiemaWeb입니다. 공식 페이지 : https://mskims.github.io/redux-saga-in-korean/ 인프런 : https://www.inflearn.com/ PoiemaWeb : https://poiemaweb.com/ redux-saga는 red...
우아한 Tech React&TypeScript #7
컴포넌트 분할 외부 상태에 의존적인, 의존적이지 않은 컴포넌트를 분리한다. 외부 상태는 컴포넌트의 상태와 관련 된 비즈니스 로직을 말한다. 위의 컴포넌트는 props 만 받아 사용하는 비즈니스 로직이 없는 컴포넌트다. 상태가 존재하지 않는 컴포넌트의 경우 compo
Redux-saga #2
redux-saga 를 사용하여 api 요청을 해 보자.우선 api 를 받아올 공간을 생성하자 src 에 lib 폴더를 생성하고 api.js 를 만든다.modules 디렉터리에 sample.js 생성한다.여기서 GET_POST 액션의 경우에는 api 요청을 할 때 어떤
'리액트를 다루는 기술' 18장, 리덕스 미들웨어를 통한 비동기 작업 관리(2/2)
# 😎 비동기 작업을 처리하는 Redux-Saga # 😁 Redux-Saga가 필요한 상황 # 🤩 제너레이터 함수 이해하기 # 🥳 실전 코드 연습
Redux-Saga #1
redux-saga 는 비동기 작업 관련 미들웨어이다.redux-thunk 같은 미들웨어도 있지만 redux-saga 를 쓰는 이유는 까다로운 상황에 좀 더 유용하기 때문이다.예를 들어 다음과 같은 상황에서는 redux-saga 를 쓰는 것이 더 유리하다.기존 요청을
Generator
여러 개의 return 값을 가질 수 있다제너레이터의 반환 값은 generator객체이고 이 객체는 iterable/iterator이다따라서 iterator.next()로 generator객체를 실행하고그 결과값은 {value,done}을 가진 객체를 반환함수 키워드
react-native에 type + redux 사용
단순히 redux-saga 홈페이지에 있는 튜토리얼을 진행한 상태로 생각을 정리하는 글 입니다. RN 프로젝트를 진행하면서 기술스택을 정하다 한가지 고민거리가 생겼다.thunk 는 한번 사용해봤고, 요즘 많은 사람들이 thunk 로 작성한것을 saga 로 리빌딩 하는
초보자의 React.js (6) - CRUD[DELETE]
1-1. constants.js는 3편에서 이미 모두 작성했습니다.1-2. actions.js 추가 부분1-3. reducers.js 추가 부분error(CATE_DELETE)의 경우는 이 데이터에 연관된 데이터가 있을 시 그에 대한 처리를 위해 만들어두었습니다.1-4
초보자의 React.js (5) - CRUD[UPDATE]
이번에는 UPDATE를 작성하겠습니다.어차피 작성순서는 constants.js -> actions.js -> reducers.js -> Category.js(즉, 작성 중인 components파일을 의미합니다.)1-1. constants.js는 3편에서 이미 모두 작성
초보자의 React.js (4) - CRUD[CREATE]
이번에는 입력을 시도해 보겠습니다.1-1. constants.js는 3편에서 이미 모두 작성했습니다.1-2. actions.jsyear 및 semester라는 데이터를 stringify해서 /category/store이라는 URL을 기본 URL 추가하여 방향을 잡고 데
초보자의 React.js (3) - CRUD[READ]
API 통신을 이용한 CRUD를 해보겠습니다.예를 들어 category라는 학년 및 학기를 관리하는 하나의 components를 만들도록 하겠습니다. 파일구조는 제가 부장님에게 배운 방식으로 하다보니 마음에 들지 않는 다면 다른 방식으로 사용하셔도 무방합니다. impo