Daily Log

yield select 를 통해서 Reducer에 있는 상태를 Redux-Saga에서 바로 가져와서 사용할 수 있다. 컨테이너에서 useSelector를 통해 const { customerInfo } = useSelector(state => state.registerReducer) 위 처럼 가져오는 것과 비슷함 function* createCustomer() { const { customerInfo } = yield select(state => state.registerReducer) const { status, data } = yield call(api.createCustomer, { payload: {...customerInfo, rsdn: customerInfo.rsdn1 + customerInfo..

takeEvery, takeLatest 99%의 경우 Whilte(true) 를 뺄 이유가 없다. 항상 반복이 되어야 하는 동작이다. ex) 한번만 로그인하고 한번만 로그아웃 하지는 않음. 다른 유저가 접속했을 때 로그인후 로그아웃하고 다시 로그인 로그아웃을 해야하기 때문에 한번만 실행되는 액션은 없음! takeEvery 그래서 takeEvery라는 것을 지원함. 기존: import { all, fork, takeLastest, takeEvery, call, put, take, delay } from 'redux=saga/effects'; fucntion* watchHello() { while(true) { // 액션을 테이크하는 부분 yield take(HELLO_SAGA); // 실제 동작하는 부분 ..

이상적인 컴포넌트는? 1. 데이터를 및 함수는 모두 최상위 컨테이너로 빼고, 컴포넌트는 UI(HTML, CSS)만 그려주게 하는 것이 가장 이상적이다. 그래야 다른 컨테이너에서 데이터랑 함수를 고쳐서 해당 컴포넌트를 사용할 수 있기 때문이다. 2. 컨테이너가 너무 커진다 싶으면 컨테이너를 하나 더 만들면 된다. 컨테이너에서 -> 컨테이너 호출 (O) 컨테이너에서 -> 컴포넌트 호출 (O) 컴포넌트에서 -> 컨테이너 호출 (X)

onChange 함수 실행했다가 reRender 너무 많다고 뜰 때 ? handleVeryfyType('A') 라고 입력한 것을 () => handleVeryfyType('A') 로 변경 handleVerifyType('A')} />

Redux-saga의 필요성과 맛보기 로그인 버튼 클릭하는 순간 리덕스 state가 변경된다. 리덕스의 문제는 모든 것이 동기로 일어난다는 점 예를들면 아래가 실행시에 -> 서버쪽에 데이터 전달 -> 서버가 로그인 성공이라는 응답을 보내줌 -> 그걸 다시 받아서 로그인! { type: LOG_IN, data: { id: 'dadong', password: '1234' } } 하지만 리덕스에서는 동기적으로 데이터를 바꾸는 것 밖에 못함 => 리덕스로 dispatch해버리면 바로바로 실행되기 때문에 특정 시간, 또는 특정 동작 이후에 액션을 실행할 수가 없음. 그 중간에 서버에 데이터를 보냈다가, 응답을 보내주는 과정이 필요함. 이걸 리덕스가 못함 그래서 redux-saga를 씀! => 리덕스 기능을 확장할..

Redux-devtools 1. 아래처럼 설치해주기 다방사이트 dev-tool > redux 가면 전체적인 데이터의 구조가 다 보임 액션들이 다 보임 => 실제로는 열어놓는 것 비추! 데이터 구조가 너무 잘 보여서, 데이터 조작하거나 할 수가 있음 2. import { composeWithDevTools } from 'redux-devtools-extension'; 3. const enhancer = composeWithDevTools( applyMiddleware( firstMiddleware, thunkMiddleware, ), ); const store = createStore(reducer, initialState, enhancer); 4. 배포환경이랑 개발 환경이랑 구분해준다. 그래야 다방처럼 ..

리덕스 폴더구조 // 길어질만한건 action과 reducer 두 가지 reducers 라는 폴더 *보통 대표적인 애들이 index.js reducer.js - 모듈로 만들어주면 됨 - reducer.js 하단에 아래 코드 module.exports = reducer; actions 라는 폴더 action.js - 함수들은 acrion creator index.js에서 reducer, action 불러옴 const reducer = require('./reducer'); const { logIn, logOut, addPost } = require('./action'); 액션도 사용자액션 게시글에대한 액션 이렇게 나뉠 수 있음. 분리의 기준? 데이터! - 관련된건 최대한 묶어주기 - 보통 배열이 되고 덩치..

clg console.log(object) rafce (react arrow function component export) import React from 'react' const mobile = () => { return ( ) } export default mobile

Reducer - 변수의 개념, INIT_STATE - ex. JoinAgreeCustomer / RegisterCustomerInfo - reducer 정의 시 action에 정의된 type 필요 Actions - Reducer에 있는 init_state 변경 - ex. SaveJoinAgreeCustomer / UpdateRegisterCustomerInfo Dispatch - Container에서 Action 호출하여 Reducer값 변경! - action.js 에 정의해놓은 필요한 액션을 import 해와야 함 - dispatch할 때 이 action을 사용하여 reducer의 값을 변경함 - 호출되어 변경될 때마다 Reducer는 Redering됨 => 이때, 새로운 값으로 새로 만들어 지는 것..

Arrow Functuon 생략버전 확인 JavaScript - 화살표 함수(Arrow function) 화살표 함수는 ES6문법입니다. function 키워드 사용해서 함수를 만든 것보다 간단히 함수를 표현할 수 있습니다. 화살표 함수는 항상 익명입니다. 1. 화살표 함수의 기본문법 콜백 함수에서도 사용 velog.io Promise 사용법 getHen()이 성공하면 getHen()을 통해 받아온 hen을 getEgg(hen)으로 매개변수로 넣고 실행 그 hen은 getHen에서 resolve(성공시 리턴하는 값) 🐓 임 getEgg(hen) 이행시 해당 함수가 성공시 리턴하는 값 🐓 => 🥚을 리턴하고 그 리턴된 egg를 cook(egg)로 매개변수로 넣어주고 완료시 🐓 => 🥚 => 🍳 이 리턴됨...