Axios는 브라우저와 Node.js 환경에서 모두 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리입니다. 주로 API와의 통신을 쉽게 구현하기 위해 사용되며, RESTful API와 상호작용하는 작업에서 자주 사용됩니다. React, Vue, Angular 등 여러 프레임워크에서 널리 사용되고 있습니다.주요 기능Axios의 주요 기능은 다음과 같습니다:HTTP 요청:GET, POST, PUT, DELETE, PATCH와 같은 HTTP 요청을 쉽게 보낼 수 있습니다.Promise 기반:async/await 구문을 통해 비동기 요청을 간단히 다룰 수 있습니다.자동 JSON 데이터 변환:요청 본문이나 응답 데이터를 JSON으로 자동 변환하므로, JSON.stringify나 JSON.pars..

Promise 기반이란 비동기 작업의 완료 또는 실패 상태를 나타내기 위해 Promise 객체를 사용하는 방식을 의미합니다. 비동기 작업은 서버에 데이터를 요청하는 것처럼 시간이 걸리는 작업을 수행할 때 자주 사용되며, 이러한 작업의 성공 또는 실패를 처리하는 구조로 Promise가 사용됩니다.Promise란?Promise는 자바스크립트에서 제공하는 객체로, 비동기 작업이 끝난 후의 결과를 다루기 위한 패턴입니다. 약속된 값을 나타내며, 작업이 완료되거나 실패했을 때 해당 결과를 받을 수 있도록 해줍니다.Promise의 상태Promise는 다음과 같은 세 가지 상태를 가집니다:Pending (대기): 비동기 작업이 아직 완료되지 않은 상태입니다.Fulfilled (이행): 비동기 작업이 성공적으로 완료된..

1. yarn.lock, package-lock.json 등 lock 파일들을 삭제합니다2. 다음의 커맨드들을 실행한다.npm install -g npm@9.6.7npm install --legacy-peer-depsnpm install axios --legacy-peer-depsnpm install --save-dev ajv@^7 --legacy-peer-deps 3. React 애플리케이션을 시작npm start

Context API는 React에서 컴포넌트 간에 데이터를 전역적으로 공유할 수 있게 해주는 기능입니다. 일반적으로 React에서는 부모에서 자식 컴포넌트로 데이터를 props로 전달하지만, Context API를 사용하면 props를 거치지 않고도 여러 컴포넌트에 쉽게 접근할 수 있는 전역 데이터를 생성할 수 있습니다. 이 기능은 트리 구조가 깊은 컴포넌트들 간에 데이터를 공유해야 할 때 특히 유용합니다.Context API의 주요 개념과 사용법Context 생성 (React.createContext):createContext 함수를 사용해 새로운 Context를 만듭니다. 생성한 Context에는 기본값을 설정할 수 있습니다.import React, { createContext } from 'rea..

Hook은 React 16.8 버전에 추가된 기능으로, 함수형 컴포넌트에서 상태(state)와 라이프사이클 메서드 기능을 사용할 수 있게 해주는 함수입니다. 이전에는 클래스형 컴포넌트에서만 상태와 라이프사이클을 사용할 수 있었지만, Hook의 등장으로 함수형 컴포넌트에서도 이러한 기능을 활용할 수 있게 되었습니다.주요 Hook 종류와 설명useState:컴포넌트 내에서 상태를 관리할 수 있게 해주는 Hook입니다.useState는 상태 변수와 상태를 갱신하는 함수 두 가지를 반환합니다.import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( You ..

Redux는 자바스크립트 애플리케이션의 전역 상태 관리를 위한 라이브러리로, 특히 React와 함께 많이 사용됩니다. Redux는 애플리케이션의 상태를 한 곳에서 중앙 집중적으로 관리하여 상태의 일관성을 유지하고, 상태 변경을 예측 가능하게 만드는 것이 목표입니다.Redux의 핵심 개념은 "단일 상태 저장소(Single Source of Truth)"로, 모든 상태가 하나의 전역 스토어에 저장되고, 이 스토어를 통해 상태가 관리됩니다. 이 구조는 복잡한 애플리케이션에서도 상태 추적과 디버깅을 용이하게 합니다.Redux의 핵심 개념스토어(Store):Redux는 애플리케이션의 모든 상태를 단일 저장소(스토어)에 보관합니다. 이 스토어는 상태를 저장하고 관리하는 중앙 집중적인 역할을 합니다.React 애플리..