react33 [React/Redux] redux-saga redux-thunk에 이어서 또 다른 비동기 처리를 담당하는 리덕스 미들웨어 redux-saga를 알아보겠습니다. yarn add redux-saga 0. 발생자 Generator redux-saga 미들웨어는 Generator 문법을 사용해서 비동기 처리를 관리해줍니다. 그러므로 미들웨어를 공부하기 전에 발생자에 대한 문법과 개념을 알아두어야합니다. 발생자 문법과 설명은 아래 링크를 참조해주세요. 2022.01.11 - [Programming/Javascript] - [Javascript] Iterator(반복자), Generator(발생자) [Javascript] Iterator(반복자), Generator(발생자) 오늘 소개드릴 자바스크립트 문법은 반복자와 발생자 입니다. 두 문법 모두 es201.. 2022. 2. 3. [React/Redux] redux-thunk 리덕스의 또 다른 미들웨어인 redux-thunk에 대해 알아보겠습니다. redux-thunk는 가장 많이 다운로드된 리덕스 미들웨어입니다. 그 다음으로 많이 사용되는 redux-saga도 꽤 많은 다운로드 수를 보여주고 있지만 redux-thunk에 비하면 1/3가량 밖에 되지 않는 숫자입니다. 1. redux-thunk redux-thunk는 비동기 처리를 관리해주는 리덕스 미들웨어입니다. 비동기 처리에 대해 다시 짚고 넘어가자면 어떤 명령이 실행되는 동안, 다음 코드들은 그 명령이 완료될 때까지 기다리지 않고, 작업을 수행하는 것을 말합니다. thunk의 의미는 공식 깃허브에 올라와있는데, 특정 식을 함수로 래핑해 작업을 지연시키는 것을 의미합니다. 즉, 식은 정의해놓고 나중에 호출하고 계산함으로써.. 2022. 1. 26. [React/Redux] 리덕스 미들웨어 리덕스 미들웨어 리덕스 미들웨어는 액션과 리듀서 사이에서 동작합니다. 리덕스가 적용된 앱에서, 액션이 발생하면 리듀서가 변화를 발생시킵니다. 이때 미들웨어를 추가하면, 액션이 발생하고 리듀서가 변화를 일으키기 전에 미들웨어가 동작을 하게 됩니다. 따라서 리덕스 미들웨어는 액션과 리듀서 사이에서 동작하는 것이라고 볼 수 있습니다.그렇다면 무엇을 위해 미들웨어를 중간에 끼워넣어서 사용해야 할까요? 언급한대로라면 리덕스는 순서대로 동작합니다. 액션이 발생해야만 리듀서가 동작을 처리하고 그에 따른 상태를 반환하게 됩니다. 이러한 정해진 순서대로 동작하는 것만으로는 해결할 수 없는 일들이 존재합니다. 대표적으로 setTimeout의 역할 같은 시간 지연이나 API를 받아오는 비동기 작업들을 처리하기 위해서 리덕스.. 2022. 1. 18. [React/Redux] 리덕스 활용 2022.01.05 - [Programming/React] - [React/Redux] 리액트 리덕스 사용해보기 이전 포스트에서 리덕스를 활용하는 방법들을 알아보았습니다. 이번에는 지난번에 만든 앱에서 더 편한 코딩을 하도록 만들어주는 리덕스의 편의기능들을 알아보겠습니다. 1. redux-actions yarn add redux-action redux-actions은 action creator를 간결하게 작성할 수 있게 만들어줍니다. 우선 지난번에 작성한 액션과 액션 생성 함수입니다. const INCREASE = 'reduxCounter/INCREASE'; const DECREASE = 'reduxCounter/DECREASE'; export const increase = () => ({ type: I.. 2022. 1. 6. [Redux] 리덕스 1. 리덕스란? Redux 리덕스란 자바스크립트 상태 관리 라이브러리입니다. 상태 관리 라이브러리도 무수히 많지만 그 중에서 가장 많은 다운로드 수를 기록하고 있습니다. 앞에 소개에서 자바스크립트의 상태 관리 라이브러리라고 하는 만큼 리액트뿐만 아니라 바닐라부터 앵귤러, Vue 등 다양한 자바스크립트 라이브러리, 프레임워크에서 사용을 할 수 있는 것이 리덕스입니다. 리덕스를 통해 리액트는 전역 상태 관리를 편리하게 할 수 있습니다. 뿐만 아니라 리덕스는 다양한 도구들과 미들웨어 덕분에 리액트에서 중요한 상태관리를 편하게 만들어주는 도구이기도 합니다. 2. 리덕스의 기본 개념 리덕스에서 사용되는 몇 가지 기본적인 개념들을 짚고 넘어가겠습니다. 2-1. 액션 action 액션은 상태에 변화가 필요해지면 발생.. 2022. 1. 4. [클론 코딩] 뉴스 API와 UI 설계 이번 포스트에서는 우리가 활용할 뉴스 API를 준비하고 그에 대한 ui 설계를 다루겠습니다. 1. API 키 발급 아래 사이트에서 가입을 하고 API키를 발급 받겠습니다. https://newsapi.org/ News API – Search News and Blog Articles on the Web News API is a simple, easy-to-use REST API that returns JSON search results for current and historic news articles published by over 80,000 worldwide sources. Worldwide Scale Search through hundreds of millions of articles in 14 .. 2021. 12. 30. 이전 1 2 3 4 ··· 6 다음 300x250
