라쿤의 끄적끄적

리팩토링 Instagram 클론 프로젝트 by Redux-toolkit03 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Social 로그..

리팩토링 Instagram 클론 프로젝트 by Redux-toolkit01 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Social 로그..

Redux 08 redux-tookit 사용법 createAction, createReducer 방식 store middleware등의 환경을 건들지 안고 바로 적용할 수 있는 방식 하지만, 크게 코드가 줄어 들진 않음 createAction() redux-actions에서 제공하고 있던 createAction()과 같은 방식으로 작동한다. 기존의 Action creator를 세부적으로 만들 필요 없이 actionCreator를 통해서 type, payload 형태의 Actoin을 만들어줌 import { createAction } from "@reduxjs/toolkit"; const getUsersStart = createAction("GET_USERS_START"); const getUsersSuc..

Redux 07 redux-actions 활용과 느낌 기존 환경 redux-actions를 사용하는 경우, 기본적으로 다른 여러가지 패키지들과 사용하게 된다. redux-actions : 리덕스 액션스는 덕스 패턴을 만들때 편하게 작성시켜 코드를 좀더 깔끔하게 해준다. react-redux : redux와 react를 연결할 때 쓰는 Provider, 그리고 react에서 state의 값을 가져오거나, 변경하고자 할때 요청을 useSeletor, useDispatch를 통해서 쉽게 사용할 수 있게함 redux-thunk : 비동기 작업을 Action으로 수행하고, 해당 작업을 통해 가져온 데이터 같은 것을 redux에 반영하게 할 수 있음 redux-devtools-extension : 리덕스 작업시 브..