FrontEnd (65) 썸네일형 리스트형 [FrontEnd]redux devtools 정의 및 설치 Reactotron과 같은 역할을 한다. 하지만 더 간편하고 많은 기능을 제공한다. 리액토트론에서 액션을 보고 입력할 수 있는 기능 뿐만 아니라 우리의 state을 차트로 표현해주기까지 한다. import { composeWithDevTools } from "redux-devtools-extension"; if(env === "development"){ store = initialState => createStore(reducer, composeWithDevTools(applyMiddleware(...middlewares)) ); 다음과 같이 패키지를 불러오고개발환경일때 스토어를 생성하게 되어 있다. [FrontEnd]Reactotron 정의 및 설치 What is Reactotron?A macOS, Windows, and Linux app for inspecting your React JS and React Native apps.Use it to:view your application stateshow API requests & responsesperform quick performance benchmarkssubscribe to parts of your application statedisplay messages similar to console.logtrack global errors with source-mapped stack traces including saga stack traces!dispatch actions like a governm.. [FrontEnd]React Router And History configureStore.js import { createStore , combineReducers, applyMiddleware } from "redux"import thunk from "redux-thunk"import { routerReducer, routerMiddleware } from "react-router-redux";import createHistory from "history/createBrowserHistory";import users from './modules/users' const env = process.env.NODE_ENV; const history = createHistory() const middlewares = [thunk,routerMiddleware(history.. [FrontEnd]React-Router Index.js import React from "react";import ReactDOM from "react-dom";import { BrowserRouter } from "react-router-dom";import App from "./App"; ReactDOM.render( , document.getElementById("root")); BrowserRouter 컴포넌트에 속한 컴포넌트는 라우터라는 기능을 사용 할 수 있게 되나보다. App.js import React from "react";import { Route , Link } from "react-router-dom" const App = () => ( ); const Header = () => ( My Contacts Home Cont.. [FrontEnd]미들웨어 Redux logger import { createStore , combineReducers, applyMiddleware } from "redux"import thunk from "redux-thunk"import users from './modules/users' const env = process.env.NODE_ENV; const middlewares = [thunk]; if(env === "development"){ const { logger } = require("redux-logger"); middlewares.push(logger);} const reducer = combineReducers({ users}); let store = initialState => createStore(reducer, applyMid.. [FrontEnd]미들웨어 Redux Thunk 1장. 미들웨어(Middleware) 이해하기리덕스를 사용 하면서 비동기 작업 (예: 네트워크 요청) 을 다룰 때는 미들웨어가 있어야 더욱 손쉽게 상태를 관리 할 수 있습니다. 우선, 미들웨어가 어떤 역할을 하는지, 그리고 어떻게 작동하는지 이해를 하면서 직접 미들웨어를 만들어보고, 다른 미들웨어들을 설치해서 사용하는 방법을 배워보겠습니다. 1-1. 미들웨어란?미들웨어는, 액션이 디스패치(dispatch) 되어서 리듀서에서 이를 처리하기전에 사전에 지정된 작업들을 설정합니다. 미들웨어를 액션과 리듀서 사이의 중간자라고 이해하시면 되겠습니다.리듀서가 액션을 처리하기전에, 미들웨어가 할 수있는 작업들은 여러가지가 있는데요. 단순히 전달받은 액션을 콘솔에 기록을 할 수도 있고, 전달받은 액션에 기반하여 액션을.. [FrontEnd] 리덕스 준비 src에 보기와 같이 리덕스 디렉토리를 생성하고 // imports // actions // action creators // initial state const initialState = { isLoggedIn : localStorage.getItem("jwt") || false}; //reducer function reducer(state =initialState, action){ switch(action.type){ default : return state; }} //reducer funtions //exports //reducer export export default reducer; 위와 같이 작성한다 이 때, const initialState는 초기 상태를 객체로써 기억하고 보통 스토어에 담길.. [ReactNative]Timer앱 모식도 이전 1 2 3 4 5 6 7 ··· 9 다음
