redux-saga call, fork
2021. 4. 22. 20:38
프로그래밍/React
call call은 동기 함수 호출(blocking) call을 하면 로그인 api가 return할 때까지 기다려서 result에 값을 넣어줌 call의 경우 👇 function* logIn() { try{ const result = yield call(logInAPI); axios.post('/api/login') .then((result) => { yield put({ type: 'LOG_IN_SUCCESS', data: result.data, }); }) } catch (err) { yield put({ type: 'LOG_IN_FAILURE', data: err.response.data, }); } } fork fork는 비동기 함수 호출(non blocking) fork를 하면 비동기이기 때문에..
제너레이터(generator)
2021. 4. 21. 20:41
프로그래밍/React
제너레이터(generator) Iterator를 생성함으로써 동기적으로 비동기 가능 제너레이터(generator)는 Iterator를 사용해 자신의 실행을 제어하는 함수 일반적인 함수는 매개변수를 받고 값을 반환하는데 함수를 호출하면 그 함수가 종료될 때까지 제어권이 없음 그러나 제너레이터(generator)를 사용하면 여러 개의 값을 필요에 따라 하나씩 반환(yield)할 수 있음 제너레이터 함수 제너레이터를 만드는 '제너레이터 함수’라 불리는 특별한 문법 구조가 있음 바로 function* function* generateSequence() { yield 1; yield 2; return 3; } 제너레이터 함수는 일반 함수와 동작 방식이 다름 제너레이터 함수를 호출하면 코드가 실행되지 않고, 대신 ..
Redux-thunk와 Redux-saga 비교
2021. 4. 20. 20:32
프로그래밍/React
Redux-thunk와 Redux-saga Redux-thunk와 Redux-saga는 둘 다 Redux의 미들웨어 라이브러리임 Redux 미들웨어는 dispatch()메소드를 통해 store로 가는 액션을 가로채는 코드 Redux-Thunk 표준 액션들을 디스패치하는 것 외에도 Redux-Thunk 미들웨어를 사용하면 thunks라고 불리는 특별한 함수를 디스패치할 수 있음 Thunks(in Redux)는 일반적으로 다음 구조를 가짐 👇 export const thunkName = parameters => (dispatch, getState) => { // 당신의 어플리케이션 로직을 여기에 적으세요 }; thunk는 (선택적으로) 일부 parameters를 인수로 취하고 또 다른 함수를 return하는..
redux-thunk란?
2021. 4. 19. 20:57
프로그래밍/React
redux-thunk redux-thunk는 리덕스에서 비동기 작업을 처리 할 때 가장 많이 사용하는 미들웨어 이 미들웨어를 사용하면 액션 객체가 아닌 함수를 디스패치 할 수 있음 redux-thunk는 리덕스의 창시자인 Dan Abramov가 만들었으며, 리덕스 공식 매뉴얼에서도 비동기 작업을 처리하기 위하여 미들웨어를 사용하는 예시를 보여줌 함수를 디스패치 할 때에는, 해당 함수에서 dispatch 와 getState 를 파라미터로 받아와주어야 함 이 함수를 만들어주는 함수를 우리는 thunk 라고 부름 thunk 사용 예시 👇 const getComments = () => (dispatch, getState) => { // 이 안에서는 액션을 dispatch 할 수도 있고 // getState를 사..
정규표현식 테스트 사이트
2021. 4. 16. 20:24
프로그래밍/관련 정보
RegExr(regular expression) 정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴 regexr.com에서 정규표현식 테스트가 가능함 정규표현식 테스트 사이트 URL 👇 regexr.com/ RegExr: Learn, Build, & Test RegEx RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp). regexr.com
npm 패키지 다운로드 비교 사이트
2021. 4. 15. 20:40
프로그래밍/관련 정보
npm trends npm trends 는 npm 에 등록되어있는 패키지의 download 수를 그래프로 시각화하고 비교까지 볼 수 있는 사이트 보통 업무적으로 사용될 ✨안정성을 필요로 하는 NPM package✨는 이렇게 검증한 뒤에 사용하는 것이 도움이 됨 사이트 URL 👇 https://www.npmtrends.com/ npm trends: Compare NPM package downloads Which NPM package should you use? Compare NPM package download stats over time. Spot trends, pick the winner. www.npmtrends.com
'React' must be in scope when using JSX 오류 해결
2021. 4. 13. 20:49
프로그래밍/React
'React' must be in scope when using JSX 오류 해결 방법 import React from 'react'; 를 제대로 했는지 확인 👇 import React, {Component} from 'react';
Redux DevTools와 연동 방법(브라우저 개발자 도구)
2021. 4. 12. 20:53
프로그래밍/React
Redux DevTools와 연동 방법(브라우저 개발자 도구) 1️⃣ 크롬 웹 스토어에서 Redux DevTools 추가 2️⃣ redux-devtools 설치 npm i redux-devtools-extension 3️⃣ store에 연동하는 코드 작성하기 import { applyMiddleware } from 'redux'; import { composeWithDevTools } from 'redux-devtools-extension'; const configureStore = () => { const middlewares = []; const enhancer = process.env.NODE_ENV === 'production' ? compose(applyMiddleware(...middlewar..