NOW OR NEVER

Typescript redux middleware redux-thunk yarn add axios redux-thunk typescript 지원되서 따로 @types로 설치 안해도 됨 quicktype(https://app.quicktype.io/) 받아오는 json 결과물 무슨 타입인지 확인하는 법 json 결과물 복사해서 입력하면 typescript형태로 변환 가능 AxiosError : axios가 에러났을 때 사용하는 에러 객체의 타입 createAsyncAction : 비동기 작업시 사용하기 편한 액션 생성 함수 export const AsyncAction이름= createAsyncAction( 액션이름들 )(); ThunkAction keyof S : 상태가 지니고 있는 key github a..

Typescript React Context API 활용 state context : const context이름 = createContext( null ); dispatch context: const context이름 = createContext( null ); Context 생성 방법 context 안에서 관리할 값을 위한 type alias 선언 const context이름 = createContext(defaultValue값(=보통 null)); Provider 컴포넌트 생성 context 다 작성 provider props를 type alias로 작성 type typeAlias이름 = { children : React.ReactNode;} Provider 컴포넌트 생성, useReducer 선언..

리액트 리덕스 미들웨어 사용자 경험 개선 유틸함수 사용하는 이유 : 리액트와 리덕스를 함께 사용하게 될 때 api 연동하게 되는 경우 비슷한 코드를 자주 작성하게 되기 때문이다. redux-thunk에서의 react history Thunk에서 특정 경로로 이동하고 싶을 때 사용 import {createBrowswerHistory} from ‘history’; JSON server rest api를 json 파일로 호출 가능 연습 용이여서 실무에서 사용하면 안됨 json 파일 기반으로 서버 열기(port 4000으로) npx json-server json파일경로 --port 4000 개발 공부하거나 간단한 프로토 타입 만들 때 사용하면 유용 CORS와 webpack DevServer Proxy CORS..

리액트 리덕스 미들웨어 리덕스가 가지고 있는 핵심 기능 리덕스 사용시 미들웨어를 사용하지 않는 다면 context API 등과 다를 것이 없음 액션 -> 미들웨어 -> 리듀서 -> 스토어 액션 디스패치 될 때 미들웨어에서 특정 조건에 따라 무시할 수 있게 할 수 있다(리듀스에서 해당 액션을 처리하지 않는다는 뜻), 액션이 리듀서에 도달하기 전에 처리할 수 있음(액션 수정하거나 콘솔에 나타나게 함) 주로 비동기 작업을 처리 할 때 사용(redux-thunk, redux-saga) ex) API 요청 일반적으로 라이브러리로 만들어진 리덕스 미들웨어 사용 ex) redux-thunk, redux-saga, redux-observable, redux-promise-middleware(프로미스 기반 미들웨어) 등..

리액트 Redux 상태 조회 hook: useSelector const { number, diff } =useSelector(state => ({})) 여기서 state는 store.getState()로 조회한 값으로 리덕스의 현재 상태이다. 액션 디스패치 할 경우 useDispatch Hook 사용 디스배치 함수 사용 가능 프리젠테이셔널 컴포넌트와 컨네이너 컴포넌트 컨테이너와 프레젠테이셔널 컴포넌트를 따로 분리해서 작성하게 되면 프리젠테이셔널 컴포넌트의 재사용율도 높여줄 수 있고 관심사를 분리할 수 있어서 굉장히 유용한 패턴이다. 리덕스 사용시 이런 형태로 개발하는 것 정석이긴 하지만 무조건 답은 아니다 복잡한 상태 로직을 분리시키기 위함이지만 꼭 이렇게 분리해서 작업하지 않아도 된다. 디렉토리 상에서..

리액트 Router 리액트 라우터 라이브러리 Single Page Application(SPA) 라우팅을 클라이언트가 담당 단점 앱의 규모가 커지면 JS 파일의 크기가 너무 커질 수 있다.(해결책 : Code Splitting) 브라우저에서 자바스크립트가 구동되지 않으면 UI를 볼 수 없다.(해결책 : Server Side Rendering) ex) 검색엔진에서 크롤링 불가능 라우팅 : 어떤 주소에 어떤 UI를 보여줄지 규칙을 정하는 작업 리액트 라우터는 컴포넌트를 기반으로 라우팅을 한다. react-router-dom 설치 주요 컴포넌트 BrowserRouter : HTML5 History API 사용, 주소만 바꾸고 페이지는 다시 불러오지 않음, 가장 많이 사용 HashRouter : 옛날에 사용 하..