전체 글

React Craco 설정하기 React에서 Craco를 이용하여 절대경로를 설정하는 방법에 대해 알아보겠습니다. 1. Craco Craco(Create React App Configuration Override)는 보다 쉽게 CRA 설정이 가능하도록 지원해주는 라이브러리입니다. GitHub - gsoft-inc/craco: Create React App Configuration Override, an easy and comprehensible configuration layer for create-rea Create React App Configuration Override, an easy and comprehensible configuration layer for create-react-app - G..

React Recoil 비동기 처리하기 React에서 Recoil을 이용하여 비동기 데이터를 처리하는 방법에 대해 알아보겠습니다. 1. Selector를 이용한 비동기 요청 사용하기 Recoil의 Selector를 이용하면 비동기 액션에 대한 처리가 가능합니다. 기존의 Redux에 비해 보다 간단하게 비동기를 처리할 수 있습니다. Asynchronous Data Queries | Recoil Recoil provides a way to map state and derived state to React components via a data-flow graph. What's really powerful is that the functions in the graph can also be asynchronou..

React Recoil 사용하기 React에서 Recoil을 사용하는 방법에 대해 알아보겠습니다. 1. Recoil Recoil은 메타(구 페이스북)에서 만든 상태 관리 라이브러리입니다. 기존의 Redux와 같은 상태 관리 라이브러리들은 store 구성을 위해 많은 boilerplate 코드들을 필요로 하였고 이로 인하여 설정이 복잡해지게 되었습니다. Recoil은 이러한 문제의 해결과 전역 상태 관리의 최적화 및 성능과 효율성 향상을 위해 만들어졌습니다. 또한 React를 공식적으로 지원하는 상태 관리 라이브러리이기 때문에 React 내부에 접근이 가능하며 Concurrent 모드, Suspense 등을 손쉽게 사용할 수 있습니다. 이전에 React의 Hooks를 사용해봤다면 쉽게 적응하여 사용할 수 ..

React Redux Toolkit 사용하기 React에서 Redux Toolkit을 사용하는 방법에 대해 알아보겠습니다. 1. Redux Toolkit Redux Toolkit은 Redux를 더 쉽게 사용하기 위해 만들어졌습니다. 리덕스는 Flux 아키텍처를 기반으로 잘 설계된 라이브러리이지만 다음과 같은 문제점을 보였습니다. 리덕스의 복잡한 스토어 설정 리덕스를 유용하게 사용하기 위해서 추가되어야 하는 많은 패키지들 리덕스 사용을 위해 요구되는 다량의 상용구(boilerplate) 코드들 이러한 문제점을 개선하기 위해 Redux Toolkit이 만들어지게 되었습니다. 리덕스 툴킷에서 제공하는 주요 함수들을 사용하면 기존 리덕스의 복잡도를 낮추고 사용성을 높여서 코드를 작성할 수 있습니다. Gettin..

React Proxy 설정하기 React에서 http-proxy-middleware를 사용하여 Proxy를 설정하는 방법에 대해 정리한 내용입니다. 1. React Proxy 설정 웹 애플리케이션에서 다른 리소스로 요청이 발생할 때 출처(도메인, 프로토콜, 포트)가 다른 경우에는 CORS(Cross-Origin Resource Sharing) 문제가 발생합니다. 교차 출처 리소스 공유 (CORS) - HTTP | MDN 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라 developer.mozilla.org 이러한 문제를 해결..

React TypeScript 적용하기 React에 TypeScript를 적용하는 방법에 대해 알아보겠습니다. 1. TypeScript 설치 리액트를 타입스크립트와 함께 설치하는 경우엔 아래 명령어를 실행해줍니다. $ npx create-react-app my-app --template typescript 기존에 생성한 리액트 프로젝트에 타입스크립트를 설치하는 경우엔 아래 명령어를 실행해줍니다. @types가 붙은 패키지는 타입스크립트를 지원하는 라이브러리입니다. $ yarn add typescript @types/node @types/react @types/react-dom @types/jest yarn add v1.19.1 warning package-lock.json found. Your proje..

React Redux 알아보기 React에서 많이 사용하는 상태 관리 라이브러리인 Redux에 대해 정리한 내용입니다. 1. Redux Redux는 상태 업데이트와 관련된 로직을 효율적으로 관리하는 라이브러리입니다. 여러 개의 컴포넌트에서 같은 상태를 공유할 때도 손쉽게 상태를 변경하고 관리할 수 있습니다. 프로젝트의 규모가 커지면 서로 다른 컴포넌트를 오가며 props와 state를 관리하는 것이 복잡해지기 때문에 외부에 store를 두고 관리하는 방식입니다. 전역 상태만 관리하고자 한다면 Context API를 사용하는 것으로 충분하지만, 프로젝트 규모가 큰 경우엔 리덕스를 사용하여 효율성과 유지 보수성을 높여주는 것이 좋습니다. 또한 리덕스는 리액트에 종속되는 라이브러리가 아니기 때문에 Angula..

React Immer로 불변성 유지하기 React에서 Immer를 사용하여 배열 또는 객체의 불변성을 유지하는 방법에 대해 알아보겠습니다. 1. 불변성 React의 컴포넌트에서 상태의 불변성을 유지하는 것은 매우 중요합니다. 불변성은 기존 값을 직접 수정하지 않으면서 새로운 값을 만들어내는 것을 의미합니다. 따라서 배열이나 객체의 값을 변경할 때는 새로운 배열이나 객체를 만들어 필요한 부분을 변경해주어야 합니다. 불변성이 유지되지 않으면 값이 변경되어도 감지하지 못하게 되고 렌더링 성능을 최적화하지 못하는 문제가 발생합니다. 주로 전개 연산자를 사용하여 배열이나 객체의 값을 복사합니다. const arr = [1, 2, 3, 4, 5]; const nextArr1 = arr; // 같은 배열을 가리키도록..

React Hooks 알아보기 React Hooks에 대해 알아보고 정리한 내용입니다. 1. Hooks React Hooks는 리액트 16.8 버전부터 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 기능을 제공합니다. useState, useEffect 등의 기능을 제공하여 클래스형 컴포넌트를 작성할 필요없이 다양한 작업을 가능하게 해줍니다. 1.1. useState useState는 함수형 컴포넌트에서 상태 관리를 위해 사용하며 가변적인 상태를 가질 수 있도록 해줍니다. 사용을 위해서는 상단에 import 해주고 다음과 같이 작성해줍니다. import React, { useState } from 'react'; ... const [value, setValue] = useState(..