atomicdev 님의 블로그

미들웨어 간소화Redux Toolkit의 createAsyncThunk 사용Redux Toolkit의 createAsyncThunk를 사용하면 비동기 작업과 관련된 코드가 크게 간소화됩니다. 이번 포스팅에서는 React 애플리케이션 생성부터 실행까지의 세부 과정과 파일 구조를 함께 설명하며, Redux Toolkit을 사용하여 비동기 작업을 어떻게 쉽게 구현할 수 있는지 살펴보겠습니다.1. React 애플리케이션 생성 및 Redux Toolkit 설치먼저 Redux Toolkit을 사용할 애플리케이션을 생성합니다.npx create-react-app my-redux-toolkit-appcd my-redux-toolkit-appnpm install @reduxjs/toolkit react-redux2. 전..

Redux Toolkit을 사용한 호환성 개선: 설치부터 실행까지이번 포스팅에서는 Redux Toolkit을 사용하여 React와 Redux 간의 호환성을 어떻게 개선할 수 있는지 알아보겠습니다. 실습을 통해 애플리케이션을 처음부터 구축하고, 모든 설정 과정을 자세히 설명하겠습니다.1. React 애플리케이션 생성 및 Redux Toolkit 설치먼저, Redux Toolkit을 사용할 React 애플리케이션을 생성하고 필요한 패키지를 설치합니다.npx create-react-app my-redux-toolkit-appcd my-redux-toolkit-appnpm install @reduxjs/toolkit react-redux위 명령어를 사용하여 my-redux-toolkit-app이라는 이름의 Re..

Redux Toolkit을 사용한 성능 최적화Redux Toolkit을 사용하여 복잡한 설정 과정을 간소화하고, 각 기능을 사용하여 성능을 최적화하는 방법을 알아보겠습니다. 이번 포스팅에서는 React 애플리케이션 생성부터 실행까지의 세부 과정과 파일 구조를 함께 설명하겠습니다.1. React 애플리케이션 생성 및 Redux Toolkit 설치먼저 Redux Toolkit을 사용할 애플리케이션을 생성합니다.npx create-react-app my-redux-toolkit-appcd my-redux-toolkit-appnpm install @reduxjs/toolkit react-redux2. 전체 파일 구조애플리케이션의 전체 파일 구조는 다음과 같습니다:my-redux-toolkit-app/├── sr..

i18next를 사용하면 번역 파일을 로컬에 저장하지 않고 REST API로부터 바로 받아서 사용하는 것이 가능합니다. 이를 위해 i18next-http-backend를 사용하여 서버에서 번역 데이터를 요청하고, 응답을 받아 번역을 처리할 수 있습니다.다음은 REST API를 사용하여 번역 데이터를 가져오는 방법을 설명하는 단계입니다.1. i18next-http-backend 설치먼저, i18next-http-backend 플러그인을 설치하여 REST API와 통합할 수 있도록 합니다.npm install i18next-http-backend2. i18n.js 설정 변경 (REST API 사용)i18n.js 파일에서 i18next-http-backend를 사용하여 번역 데이터를 REST API로부터 가져..