React - React Router Dom 사용하기
목차 Redux Saga Redux Middleware 만들기 Redux 사용하기 - 계산기 만들기 Redux 사용하기 React Router Dom 추가하기# npm 사용npm install react-router-dom# yarn 사용yarn add react-router-dom
목차 Redux Saga Redux Middleware 만들기 Redux 사용하기 - 계산기 만들기 Redux 사용하기 React Router Dom 추가하기# npm 사용npm install react-router-dom# yarn 사용yarn add react-router-dom
목차 Redux Saga Redux Middleware 만들기 Redux 사용하기 - 계산기 만들기 Redux 사용하기 Redux Saga 액션을 모니터링하고 있다가 특정 Action 이 발생하면 특정 작업을 진행한다. 비동기 작업을 진행할 때 기존 요청을 취소 할 수 있다. 특정 Action 이 발생했을 때 다른 액션을 디스패치 하거나 자바스크립트 코드를 실행할 수 있다. Generator 에 기반한 미들웨어 Generator 함수의 흐름을 특정 구간에 멈춰 놨다가 다시 실행 할 수 있다.return 값을 여러번 보낼 수 있다. import { delay, put, takeEvery, takeLatest } from "redux-saga/effects";const SET_DIFF = "counter/SET_DIFF";const INCREASE = "counter/INCREASE";const DECREASE = "counter/DECREASE";const INCREASE_ASYNC = "NCREASE_ASYNC";const DECREASE_ASYNC = "DECREASE_ASYNC";export const setDiff = (diff) => ({ type: SET_DIFF, diff });export const increase = () => ({ type: INCREASE });export const decrease = () => ({ type: DECREASE });export const increaseAsync = () => ({ type: INCREASE_ASYNC });export const decreaseAsync = () => ({ type: DECREASE_ASYNC });function* increaseSaga() { yield delay(1000); yield put(increase()); // put 은 dispatch 와 비슷한 개념}function* decreaseSaga() { yield delay(1000); yield put(decrease());}export function* counterSaga() { yield takeEvery(INCREASE_ASYNC, increaseSaga); yield takeLatest(DECREASE_ASYNC, decreaseSaga);}const initialState = { number: 0, diff: 1,};export default function counter(state = initialState, action) { switch (action.type) { case SET_DIFF: return { ...state, diff: action.diff, }; case INCREASE: return { ...state, number: state.number + state.diff, }; case DECREASE: return { ...state, number: state.number - state.diff, }; default: return state; }} import React from "react";import { useSelector, useDispatch } from "react-redux";import Counter from "./Counter";import { increase, decrease, setDiff, increaseAsync, decreaseAsync,} from "../modules/counter";const CounterContainer = () => { const { number, diff } = useSelector((state) => ({ number: state.counter.number, })); const dispatch = useDispatch(); // const onIncrease = () => dispatch(increase()); // const onDecrease = () => dispatch(decrease()); const onIncrease = () => dispatch(increaseAsync()); const onDecrease = () => dispatch(decreaseAsync()); const onSetDiff = (diff) => dispatch(setDiff(diff)); return ( <Counter number={number} diff={diff} onIncrease={onIncrease} onDecrease={onDecrease} onSetDiff={onSetDiff} /> );};export default CounterContainer;
목차 Redux Saga Redux Middleware 만들기 Redux 사용하기 - 계산기 만들기 Redux 사용하기 Redux Middleware 만들기Middleware 생성Dispatch 되는 이력을 콘솔로 찍는 로거를 만든다. const myLogger = store => next => action => { console.log(action); const result = next(action); // 반환하는 result 는 Container 에서 Disaptch 됐을 때 결과 물이 result return result;}export default myLogger; Middleware 적용applyMiddleware 함수를 이용해 Redux 에 미들웨어를 적용한다. import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';import { createStore, applyMiddleware } from 'redux';import rootReducer from './modules';import { Provider } from 'react-redux';import myLogger from './middlewares/myLogger';const store = createStore(rootReducer, applyMiddleware(myLogger));ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root'));reportWebVitals();
목차 Redux Saga Redux Middleware 만들기 Redux 사용하기 - 계산기 만들기 Redux 사용하기 라이브러리 설치 yarn add react-redux Action Type 정의/* 액션 타입 만들기 */// Ducks 패턴을 따를땐 액션의 이름에 접두사를 넣어주세요.// 이렇게 하면 다른 모듈과 액션 이름이 중복되는 것을 방지 할 수 있습니다.const SET_DIFF = "counter/SET_DIFF";const INCREASE = "counter/INCREASE";const DECREASE = "counter/DECREASE"; Action 생성 함수/* 액션 생성함수 만들기 */// 액션 생성함수를 만들고 export 키워드를 사용해서 내보내주세요.export const setDiff = (diff) => ({ type: SET_DIFF, diff });export const increase = () => ({ type: INCREASE });export const decrease = () => ({ type: DECREASE }); Reducer
목차 Redux Saga Redux Middleware 만들기 Redux 사용하기 - 계산기 만들기 Redux 사용하기 라이브러리 설치Action 정의하기export const INCREASE = "counter/INCREASE" as const;export const DECREASE = "counter/DECREASE" as const;interface increaseAction { type: typeof INCREASE;}interface decreaseAction { type: typeof DECREASE;}export type CounterType = increaseAction | decreaseAction; Action 생성 함수export const increase = (): increaseAction => ({ type: INCREASE,});export const decrease = (): decreaseAction => ({ type: DECREASE,}); Stateinterface CounterState { value: number;}const initialState: CounterState = { value: 0,};
목차 Redux Saga Redux Middleware 만들기 Redux 사용하기 - 계산기 만들기 Redux 사용하기 Redux 사용하기 하나의 애플리케이션 안에는 하나의 Store 가 존재 State 는 읽기 전용 불변성 을 지켜줘야 한다. 객체의 경우 Spread 연산자 를 사용해 기존 객체를 덮어써준다. 배열의 불변성을 지켜주는 내장함수를 사용해야 한다. 불변성을 지켜야만 Component 들이 제대로 Rerendering 된다. 변화를 일으키는 함수, Reducer 는 순수한 함수 여야 한다. Reducer 는 이전 상태 와 Action 객체 를 파라미터로 받는다. 이전 상태를 변경하지 않고 새로운 상태를 만들어 반환한다.(불변성 유지) 똑같은 파라미터로 호출된 리듀서는 언제나 똑같은 결과값을 반환해야 한다. Redux 모듈 설치yarn add react-redux Action 상태의 변화가 필요할 경우 Action 을 일으킨다.
참고 GitHub Packages - Gradle 레지스트리 작업 🧑💻 무료로 Artifact 저장소를 사용하고 싶다!회사가 아닌 개인 프로젝트를 할때, 라이브러리를 개발해서 다른 프로젝트에서 사용하고 싶은 경우, 라이브러리 저장을 위한 Nexus 저장소를 별도로
참고 Spring interceptor에서 Response 수정하기 “HttpServletResponse is committed” mean? 📝 후처리에서 메뉴 데이터를 Response 객체에 데이터를 넣어주세요개발 요구사항 중 페이지 접근시 전처리에서 접근 권한을
목차 [Docker] 이미지 history [Docker] 이미지 레이어 [Docker] 이미지 Build 참고 Docker History 명령어 공식문서 ✅ 이미지 historyDocker 이미지를 받아서 사용하다보면 은근, 해당 이미지가 어떻게 생성 됐는지, 어떤
목차 [Docker] 이미지 레이어 [Docker] 이미지 Build 참고 Docker 공식 문서 - 이미지 레이어 이해하기 Docker 공식 문서 - Storage drivers 🔍 이미지 레이어란?Docker 이미지의 핵심적인 특징 중 하나는 레이어 기반 구조 입
🔍 Docker Build 란?Docker Build 는 서비스를 격리된 환경에서 실행할 수 있도록 운영체제 및 필요한 의존성과 설정, 실행 파일등을 하나의 이미지로 패키징하는 것을 의미합니다. 이미지 Build 는 Dockerfile 을 기반으로 수행되며, Dock