본문 바로가기
redux이론4. compose() 목차 compose() 메서드? 문법 인자값 반환값 1. compose() 메서드란? 단순히 함수를 조합하는 메서드 함수형 프로그래밍 유틸리티 주로 여러 저장소 인핸서들을 순차적으로 적용하기 위해 사용 2. 문법 import { compose } from 'redux' const store = createStore(reducer,compose(applyMiddleware(thunk), DevTools.instrument()) 3. 인자값 조합한 각각의 함수들이 인자값이며, 각각의 함수는 하나의 인자를 받아야 함 함수의 반환값은 왼쪽에 는 함수의 인자값으로 제공되는 식으로 연속됨 4. 반환값 오른쪽에서 왼쪽으로 조합된 최종 함수 2022. 5. 4.
sequelize 목차 환경설정 시퀄라이즈 객체 생성하기 접속하기 모델 정의하기 1. 환경 설정 1-1. 설치 $ npm i mysql2 sequelize 1-2. 가져오기 const {Sequelize} = require('sequelize') 2. 시퀄라이즈 객체 생성하기- 접속에 대한 정보 작성 인자값 4개 데이터 베이스명 DB 계정명 DB 계정의 비밀번호 객체 형태의 config 4-1. host: 'localhost' 4-2.dialect: 사용하는 DBMS의 종류 4-3. pool(옵션) const sequelize = new Sequelize('example','userid','password',{ host: 'localhost', dialect: 'mysql' }) 3. 접속 하기 3-1. promise로 .. 2022. 5. 4.
redux이론1. 기본 목차 Redux란? Redux 사용의 장점 Redux의 3가지 기본 원칙 Redux의 두가지 유형 리덕스의 사용법은 context API와 비슷하다. 근데 왜 리덕스를 많이쓸까? 바로 비동기처리 때문이다. 리덕스에는 미들웨어 존재하며, 리듀서가 state 반환 전 미들웨어에 먼저 들어가며 state를 바꿀 수 있는 내용을 미들웨어에서 결정한다. 그렇다면, 이번 게시글에서는 Redux 기본 개념에 대해서 알아보자 1. Redux란? JS 앱을 위한 예측 가능한 state 컨테이너 객체 const redux = require('redux') console.log(redux) // { // __DO_NOT_USE__ActionTypes: { // INIT: '@@redux/INITz.m.5.d.a.h.r', .. 2022. 5. 3.
redux이론3. combineReducers(reducers) 목차 combineReducers란? 작성예시 state의 key 제어 방법 combineReducers()의 인자값 리듀싱 함수들에 대한 규칙 앱이 점점 복잡해지면 코드가 길어지고, 길고 복잡한 코드는 가독성을 떨어트린다. 또한 모든 업데이트 로직을 하나의 reducer에 작성하는 경우 유지보수가 용이하지 않다. 그래서 이번 게시글에서는 reducer를 한번 분리해보자! 1. combineReducer란? 각기 다른 reducer를 값으로 가진 객체를 받아서 createStore의 매개변수로 전달할 하나의 reducer로 변환해줌 생성된 reducer는 내부의 모든 reducer를 호출하고 결과를 모아서 하나의 state 객체로 변환해줌 state 객체의 형태는 reducers로 전달된 키들을 따름 2.. 2022. 5. 3.
redux이론2. store 목차 store란? store 메서드(getState(), dispatch(), subscribe()) action 객체란? 1. store란? 1-1. 설명 앱의 전체 state 트리를 가지고 있는 저장소 저장소 안의 state를 바꾸는 유일한 방법은 action을 전달하는 것 저장소를 생성하기 위해서는 root reducing 함수를 createStore()메서드에 전달해야 함 객체 const store = createStore(reducer) //const [state,dispatch] = useReducer(reducer, initialState) // 두 코드는 비슷한 코드, store는 state와 dispatch라고 보면 됨 console.log(store) // store는 객체이다. //.. 2022. 5. 3.
redux실습2. reducer 기본 1. 환경 셋팅 1-1. 설치 $ npm install redux react-redux 1-2. 불러오기 const redux = require('redux') 3. 실습 3-1. 레벨1 (1) 코드 const redux = require('redux') const {createStore} = redux const reducer = (state, action) => { if (action.type === `O'brien`) { return { name: 'conan' } } else if (action.type === 'cases_up'){ return{ ...state, cases: state.cases +1 } } else { return { name: 'Edogawa', cases: 0 } } } .. 2022. 5. 3.
hook이론3. useContext() 목차 useContext() 메서드란? 문법 특징 이전 게시글에서 전역 데이터를 공유하기 위한 contextAPI에 대해 배운 적있다. https://yellow-w.tistory.com/254?category=1037018 오늘은 전역 데이터를 공유하기 위한 hook 메서드 인 useContext()에 대해서 알아보자. 1. useContext() 메서드란? 전역 데이터 공유를 위한 hook 메서드 context 객체(React.createContext에서 반환된 값)을 받아 그 context의 현재 값을 반환 context의 현재 값은 트리 안에서 이 Hook을 호출하는 컴포넌트에 가장 가까이에 있는 의 value prop에 의해 결정 2. 문법 2-1. 매개변수 context 객체 그 자체여야 함 .. 2022. 5. 2.
React 환경셋팅 4. Redux 1. 설치 커맨드 $ npm install redux react-redux 2. dev툴로 확인하기 위한 커맨드 $ npm install redux-devtools-extension 2022. 5. 2.
React 환경셋팅 2. React_router_DOM 목차 React_router_DOM이란? 라이브러리의 적용 범위 현재 기준 최신버전 설치 커맨드 불러오기 1. React_router_DOM이란? 웹 어플리케이션에서 클라이언트와 서버측 라우팅하는 리액트 라이브러리 UI를 구축하는 JS 라이브러리 2. 라이브러리 적용 범위 Routes 설정 LInk를 통한 경로 이동 레이아웃을 위한 라우터 분할 서버 렌더링 등.. 3. 최신 버전 설치(v6 -2021-12-17) $ npm install react-router-dom 4. 불러오기 BrowserRouter: 최상위 컴포넌트 link: a 태그 대신 써야하는 컴포넌트 Routes: 컴포넌트를 보여주게 함 Route: URI에 맞는 컴포넌트를 찾아주는 컴포넌트 import { BrowserRouter as .. 2022. 5. 2.

티스토리툴바