React Event Handling은 React에서 사용자 인터페이스와 상호작용하는 이벤트를 처리하는 방법을 의미합니다. React에서는 브라우저의 DOM 이벤트와 유사한 방식으로 이벤트를 처리하지만, 몇 가지 중요한 차이점과 특징이 있습니다.주요 특징CamelCase 이벤트 이름:React에서는 DOM 이벤트 이름과 달리 CamelCase로 이벤트 프로퍼티를 작성합니다.예: onclick 대신 onClick, onmouseover 대신 onMouseOver함수로 이벤트 핸들러 전달:이벤트 핸들러로 함수를 전달하며, 문자열로 전달하지 않습니다.예: Click MeSyntheticEvent:React는 자체적으로 SyntheticEvent라는 래퍼 이벤트 시스템을 사용합니다.이는 브라우저 간의 호환성을 ..

React에서 컴포넌트와 JSX는 애플리케이션의 구조와 UI를 설계하고 구성하는 핵심 개념입니다.1. 컴포넌트(Component)란?컴포넌트는 React 애플리케이션의 UI를 구성하는 독립적이고 재사용 가능한 단위입니다. 컴포넌트는 React 애플리케이션을 작고 관리하기 쉬운 여러 조각으로 나누어, 각 조각이 자체적으로 동작하도록 합니다. 각 컴포넌트는 HTML, CSS, JavaScript를 포함하여 하나의 UI 요소를 나타내며, 다른 컴포넌트와 결합해 더 복잡한 UI를 구성할 수 있습니다.컴포넌트의 종류React 컴포넌트는 두 가지 종류로 나뉩니다:함수형 컴포넌트: JavaScript 함수를 사용하여 정의합니다. React Hooks와 함께 사용하여 상태와 라이프사이클 관련 기능을 처리할 수 있습니다..

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

Token웹 애플리케이션에서 클라이언트와 서버 간의 안전한 통신을 위해 토큰이 사용됩니다. HTTP는 상태 비저장(stateless) 프로토콜이기 때문에, 클라이언트의 로그인 상태를 유지하거나 사용자를 식별하기 위해 매번 인증이 필요합니다. 토큰은 사용자 인증과 권한 부여, 세션 관리 등을 보다 안전하고 효율적으로 처리하며, 이를 통해 웹 애플리케이션의 보안성과 확장성을 크게 향상시킵니다.토큰의 생성과 전송 과정인증 과정: 사용자가 로그인을 하면 서버는 사용자의 자격 증명을 확인하고, 이를 바탕으로 토큰을 생성하여 반환합니다. 이 토큰은 주로 JSON Web Token (JWT) 형식으로, 서버만이 검증할 수 있는 서명(Signature)과 인증에 필요한 정보를 포함하고 있습니다.토큰의 구조: JWT를 ..