분류 전체보기 (46) 썸네일형 리스트형 react redux 기초4(applyMiddleware, thunk) applyMiddleware는 redux에서 dispatch할 때, 값이 reducer에 전달되기 전, 그 사이에 API 호출할 수 있게 해주는 미들웨어라고 한다. 로깅, 충돌보고, 비동기 API 통신, 라우팅 등을 할 때 쓰는거라는데 안쓰면 어찌되는지 확인할 능력이 아직 없다 그래서 어찌 쓰느냐 import { applyMiddleware } from 'redux'; 리덕스에서 applyMiddleware 데려오면 미들웨어를 쓸 수 있다. 여기서 예제하나 돌려보자 const loggerMiddleware = (store: any) => (next: any) => (action: any) => { console.log("store", store); console.log("action", action); .. React Redux 기초3(Provider, useDispatch, useSelector) Provider는 React에서 Redux 사용할 때, Redux store를 중첩 요소 전역에서 액세스할 수 있도록 하는 것이라고 함 1. react-redux 설치 npm i react-redux --save 2. App 컴포넌트를 Provider로 감싸고, 만들어둔 store를 props로 전달하기 3. store에 값 전달하기 1) useDispatch 생성 import { useDispatch } from 'react-redux'; react-redux에서 useDispatch를 가져온다 const dispatch = useDispatch(); 변수에 할당한다. dispatch({ type: "ADD_TODO", text: todoValue }); dispatch의 매개변수로 객체를 할당한다. .. React Redux 기초 2 - reducer 여러개 쓰기(combineReducers) 저번 글에서 reducer는 state바꾸는 함수라고 알려줌 근데 저번 글처럼 만들면 reducer 1개밖에 못쓰잖음 그럼 app에서 전역변수는 1개 쓸꺼임? 그럴 때 쓰는게 combineReducers 이거임 쓰는 법 import { combineReducers } from 'redux'; import counter from './counter'; import todos from './todos'; const rootReducer = combineReducers({ counter, todos }); export default rootReducer; 1) redux에서 combineReducers 데리고옴 2) 변수하나 만들어서 combineReducers 호출하고 안에다가 넣고싶은 reducer 다 넣.. React Redux 기초(Counter App 만들기) with Typescript react와 typescript 설치하기 npx create-react-app . --template typescript create-react-app으로 react를 설치할 때 --template typescript 붙이면 typescript로 react 설치된다. redux 설치하기 npm i redux --save --save 붙이면 라이브러리 설치할 때 package.json에는 적용안되고 package-lock.json에는 적용되서 동작은 하는데 확인이 어려울 때를 방지할 수 있다. App.tsx 기본 구성 만들기기본 내용 지우고 글자랑 버튼 두 개를 만들어 줬다function App() { return ( Clicked: times + - ); } reducer 만들기const counter .. javascript 표준내장객체 표준 내장 객체 // .length // 문자의 길이(숫자)를 반환합니다. // const str = 'Hello world!'; // // 012345678901 // console.log(str.length); // 12 // .includes() // 문자의 포함 여부, true false 반환 // const str = 'Hello world!'; // // 012345678901 // console.log(str.includes('Hello', 1)); // // true, 대소문자 구분 된다 // // 2번째 인수 : 기본값 0, 0번째부터 확인한다는 뜻 // // 2번쨰 인수에 1을 넣으면, 해당 번째부터 포함 여부 혹인해서 false // .indexOf() // 대상 문자에서 주어진 문자.. javascript 문법 - class 클래스 자바스크립트는 클래스기반은 아니고 프로토타입 언어이다. // prototype // const fruits = ['Apple', 'Banana', 'Cheery']; const fruits = new Array('Apple', 'Banana', 'Cheery'); console.log(fruits); // ['Apple', 'Banana', 'Cheery'] console.log(fruits.length); // 3 console.log(fruits.includes('Banana')); // true console.log(fruits.includes('Orange')); // false // .length나 .includes 같은 것을 프로토타입 속성, 프로토타입 메소드라고 한다. // 프로토타입.. javascript 문법 - 함수 함수 // 함수(Function) // 함수 선언문(Declaration) // function hello() {} // 함수 표현식(Expression) // const hello = function () {} // 호이스팅(Hoisting), 유효범위 안에서 함수 선언부가 가장 위에 있도록 javascript가 동작되는 것, 함수 선언에서만 발생하고 함수 표현에서는 발생하지 않는다. hello(); // function hello() { // console.log('Hello!'); // } const hello = function () { console.log('Hello!'); } main.js:10 Uncaught ReferenceError: Cannot access 'hello' before .. NPM node --version npm --version -v clear or cls [NPM 프로젝트 시작] npm init package name : 그냥 엔터 누르면 폴더 이름 그대로 프로젝트명 version: (1.0.0)기본값 description: 기본값 없음, 안넣을 수 있음 entry poing: (index.js) 진입점, 공개용일때 test command: 모름 git repository: 기본값 없음, 안넣을 수 있음 keywords: 기본값 없음, 안넣을 수 있음 author: 기본값 없음, 안넣을 수 있음 license: (ISC) 안넣을 수 있음 Is this OK? (yes) package.json 파일 생김 처음 생성할 때 만든 내용들이 들어감 { "name": "signature.. 이전 1 2 3 4 5 6 다음