230316 - React - Redux-persist, 중첩라우팅

오늘 내가 배운 것 1. 전역 상태로 관리하기 2. Redux-persist 3. 중첩라우팅 1. 전역 상태로 관리하기 리액트에서의 상태는 쉽게 생각해 보면 자바스크립트의 변수일뿐이다. 변수이기 때문에 새로고침, 페이지를 이동하게 되면 상태가 초기화가 되어 다시 그 페이지를 봤을 때, 초기 상태로 되어있다. 이러한 특징 때문에 생기는 가장 큰 문제가 사용자가 이용 중에 새로고침을 하게 되면 로그인이 풀리는 상황이 있다. 이 문제를 해결하기 위해서 Redux를 사용해서 전역으로 상태를 관리하여 상태를 유지할 수 있었다. 하지만 Redux에서 store를 이용하여 해결하는 방법은 전역 페이지의 이동에 대해서는 해결할 수 있지만, 새로고침은 전체 파일을 다시 읽어서 재렌더를 하는 상황으로 번들링 된 파일들 다..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 3. 16.
• textsms

230315 - React - Redux middleware

오늘 내가 배운 것 1. Reducer action.type 관리하기 2. Redux middleware 3. Reducer action 만들기 1. Reducer action.type 관리하기 action의 type을 작성할 때, string으로 되어있기 때문에, 오타로 인해 원하는 결과를 얻지 못할 수 있다. 그렇기 때문에 이를 해결하기 위해서 변수로 관리하는 방법이 있다. /store/types export const CATEGORY_REQUEST_START = "CATEGORY/REQUEST_START" export const CATEGORY_REQUEST_SUCCESS = "CATEGORY/REQUEST_SUCCESS" export const CATEGORY_REQUEST_ERROR = "CAT..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 3. 15.
• textsms

230314 - React - Redux, 서버를 이용한 상태관리

오늘 내가 배운 것 1. npm package 2. 전역 상태 만들기 3. 초기 상태 만들기 1. npm package 1-1. Redux 상태 관리를 위한 라이브러리로, 하나의 객체(store)를 이용하여 전체 상태를 저장하고, 상태를 업데이트하기 위해 사용한다. 1-2. React-redux redux를 이용하여 만든 store를 react와 연결하기 위해서 사용하는 라이브러리이다. redux는 react 컴포넌트가 아니기 때문에 react-redux안에 있는 Provider 컴포넌트를 이용하여 하위 컴포넌트에게 store을 전달할 수 있게 해 준다. 1-3. Redux-thunk redux의 미들웨어 중 하나로, 액션의 인자값의 데이터타입이 함수 일 때, 그 함수를 실행하고, 그 결과를 다시 객체로..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 3. 15.
• textsms

230313 - React - Redux

오늘 내가 배운 것 1. Redux 2. Redux-thunk 3. NodeJS로 Redux-thunk 구현하기 4. Action 1. Redux 리덕스는 상태 관리 라이브러리 중 하나이다. 기존에 전역으로 상태 관리하기 위해서 react에서 `useContext`,`createContext`를 이용한 `Context API`를 이용하여 상태를 관리했지만 큰 문제가 없지만, Redux를 사용하면 상태 관리를 효과적으로 할 수 있다. 1-1. Redux middleware `Redux`를 사용하는 가장 큰 이유는 `미들웨어`기능이다. 미들웨어 기능을 이용하여 액션을 처리하기 전에 추가기능을 구현할 수 있다. 저번 로그인 로직구현하는 페어코딩을 할 때 사용했던 코드이다. // 예시코드 const handle..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 3. 14.
• textsms