atomicdev 님의 블로그

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로부터 가져..

이번 포스팅에서는 Redux의 기본 요소인 Action, Reducer, Store를 사용하여 간단한 카운터 기능을 구현해 보겠습니다. 예제를 통해 Redux의 개념을 이해하고, 실제로 실행 가능한 애플리케이션을 만들어보겠습니다.1. React 애플리케이션 생성 및 Redux 설치먼저 React 애플리케이션을 생성하고 Redux를 설치합니다.React 애플리케이션 생성npx create-react-app redux-counter-appcd redux-counter-appRedux 및 React-Redux 설치 Redux와 React-Redux를 설치합니다.npm install redux react-redux 2. Action 정의Action은 상태가 어떻게 변해야 하는지를 나타내는 객체입니다. 증가와 감..

리덕스의 기본 컴포넌트 개념과 사용 방법이번 포스팅에서는 Redux의 핵심 개념인 스토어(Store), 액션(Action), **리듀서(Reducer)**를 설명하고, 이를 어떻게 사용하는지 실습 예제와 함께 알아보겠습니다. Redux는 React 애플리케이션에서 상태 관리를 효율적으로 처리할 수 있는 라이브러리로, 이 포스팅을 통해 Redux의 기본 구조와 활용법을 이해할 수 있습니다.1. 리액트 애플리케이션 생성 및 Redux 설치하기먼저 React 애플리케이션을 생성하고 Redux를 설치하는 방법을 알아보겠습니다.React 애플리케이션 생성npx create-react-app my-redux-appcd my-redux-appRedux 및 Redux Toolkit 설치 Redux와 Redux Tool..

Redux Toolkit의 createAsyncThunk를 사용한 비동기 처리와 미들웨어 간소화이번 포스팅에서는 Redux Toolkit의 createAsyncThunk를 사용하여 비동기 처리를 간소화하고, 미들웨어 설정을 어떻게 개선할 수 있는지를 Before -> After 형식으로 설명하겠습니다. createAsyncThunk는 비동기 작업을 위한 간편한 방법을 제공하여 코드의 복잡성을 줄이고 유지보수를 쉽게 만듭니다.1. 비동기 처리를 위한 미들웨어 사용의 필요성Redux에서 비동기 작업(예: API 호출)을 처리하기 위해서는 미들웨어가 필요합니다. 기존 Redux 방식에서는 Redux Thunk나 Redux Saga와 같은 미들웨어를 설정해야 하며, 이는 코드의 복잡성을 증가시키는 원인이 됩니다..

React와 Redux의 호환성 개선하기이번 포스팅에서는 React와 Redux 간의 호환성을 개선하는 방법을 알아보겠습니다. 특히 createSlice, createAsyncThunk, useSelector, useDispatch 같은 기능을 사용하여 컴포넌트와 Redux의 상호작용을 간소화하고 성능을 최적화하는 방법을 Before -> After 형식으로 설명합니다.1. 호환성 개선의 필요성React와 Redux를 함께 사용할 때 자주 발생하는 문제는 컴포넌트의 불필요한 리렌더링과 상태 구독의 비효율성입니다. 이러한 문제들은 성능을 저하시킬 뿐만 아니라 유지보수를 어렵게 만듭니다. Redux Toolkit의 다양한 기능들을 사용하여 이러한 문제를 어떻게 해결할 수 있는지 살펴보겠습니다. Before:..

Redux Toolkit을 사용한 성능 개선 방법이번 포스팅에서는 Redux Toolkit을 사용하여 Redux의 성능을 개선하는 방법을 설명합니다. 특히 createSlice, configureStore, useSelector, createAsyncThunk, Reselect 등을 사용하여 기존 방식과 비교하여 얼마나 성능을 최적화할 수 있는지를 Before -> After 형식으로 알아보겠습니다.1. 성능 최적화의 필요성Redux를 사용하는 애플리케이션은 전역 상태가 자주 변경될 경우 성능 문제가 발생할 수 있습니다. 이러한 문제를 해결하기 위해 Redux Toolkit을 도입하여 성능 최적화를 도모합니다. 이제 각 기능을 Before -> After 형식으로 설명합니다. Before: 기존 Redu..

Redux Toolkit을 사용해서 Redux 기능 개선하기이번 포스팅에서는 Redux Toolkit을 사용하여 Redux의 초기 설정 복잡성을 해결하는 방법을 설명합니다. 특히 createSlice와 configureStore를 사용하여 기존 방식과 비교하여 얼마나 간소화될 수 있는지를 Before -> After 형식으로 실습 코드 위주로 알아보겠습니다.1. 초기 설정의 복잡한 문제 해결 방법Redux를 처음 사용하는 개발자들은 초기 설정이 복잡하고 번거롭다고 느낄 수 있습니다. 기존 방식에서는 스토어, 리듀서, 액션 등을 여러 파일에 분리하여 작성해야 했지만, Redux Toolkit을 사용하면 이러한 과정을 간소화할 수 있습니다. 먼저 기존 방식과 Redux Toolkit 방식을 비교해 보겠습니다..

Next.js와 React는 둘 다 프론트엔드 웹 개발을 위한 인기 있는 라이브러리/프레임워크이지만, AWS 인프라를 구성할 때 몇 가지 중요한 차이점이 있습니다. 특히 서버 사이드 렌더링(SSR) 지원 여부와 배포 방식이 AWS 구성에 영향을 미치는데, 여기서는 두 가지 측면에서 AWS 인프라가 어떻게 달라지는지 설명드리겠습니다.1. 서버 사이드 렌더링(SSR) vs 클라이언트 사이드 렌더링(CSR)Next.js (SSR 지원)Next.js는 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 그리고 클라이언트 사이드 렌더링(CSR)을 모두 지원하는 풀스택 프레임워크입니다. AWS 인프라를 구성할 때, Next.js의 SSR 기능이 큰 차이를 만듭니다.SSR의 특징:페이지 요청 시 서버에서 HT..

React 애플리케이션을 GitLab을 사용한 CI/CD와 AWS를 통한 배포로 구성하는 방법을 단계별로 설명드리겠습니다. 이 구성에서는 GitLab CI/CD 파이프라인을 사용하여 React 애플리케이션을 AWS S3와 CloudFront에 자동으로 배포하는 인프라를 구축합니다.1. AWS S3와 CloudFront 설정Step 1: S3 버킷 생성S3 버킷 생성:AWS Management Console에서 S3로 이동한 후 새로운 버킷을 생성합니다.버킷 이름은 고유해야 하며, AWS가 지원하는 모든 리전에 걸쳐 사용됩니다.버킷을 정적 웹사이트 호스팅용으로 설정:S3 설정에서 '정적 웹사이트 호스팅'을 활성화하고, 인덱스 문서(index.html) 및 오류 문서(error.html)를 설정합니다.버킷 ..