Proxy에 대해 알아보자 Proxy는 CORS 정책을 우회할 수 있는 React 라이브러리, 혹은 Webpack Dev Server에서 제공하는 기능입니다. 이 기능이 필요한 이유를 알려면 CORS 정책이 필요한 이유를 먼저 알아야 합니다. CORS 정책이 필요한 이유가 뭘까요 ? 브라우저에서 API를 요청할 때는 브라우저의 현재 주소와 API 주소의 도메인이 일치해야만 데이터를 접근할 수 있습니다. 만약 다른 도메인에서 API를 요청해서 사용할 수 있게 하려면 CORS 설정이 필요합니다. 로컬 환경에서 개발한 앱은 기본적으로 localhost:3000 으로 시작합니다. 그러나, 나중에 로컬 환경에서 개발한 실제 서비스 및 프로젝트의 클라이언트에서 서버의 API로 요청하게 되면,이 포트로 요청하는 것이..
Redux 기초 알아보기 Redux란, Redux는 React 애플리케이션에서 전역 상태 관리를 위한 라이브러리이다. React의 props와 state를 통해 컴포넌트 간에 데이터를 주고 받는 것보다 Redux를 사용하면 데이터의 흐름이 명확하게 구조화된다. 유지보수와 디버깅을 쉽게 만들어줌 FLUX 패턴을 따르고 있다. FLUX 패턴은 React에서 상태 관리를 하기 위한 아키텍처 패턴 중 하나로, 단방향 데이터 흐름을 따른다. Redux 장점 전역 상태를 관리하므로 상태 업데이트가 효율적이다. 상태의 흐름이 명확하게 구조화되어 있어 유지보수와 디버깅이 쉽다. 개발자 도구를 통해 상태 변화를 쉽게 추적할 수 있다. 미들웨어를 통해 비동기 작업을 처리할 수 있다. Redux 단점 초기 설정과 학습 곡선..
Props 알아보기 Props 란 ? 외부로부터 전달받은 값 / 부모 컴포넌트로부터 전달받은 값 / 변하지 않는 값 컴포넌트의 속성(property)을 의미 객체 형태 Props 사용법 const Parent = () => { const itemOne = "myossi는"; const itemTwo = "React를 배우고 있습니당"; return ( ); }; const Child = (props) => { return {props.text}; }; export default Parent; 간단 설명 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다. props를 이용하여 정의된 값과 속성을 전달한다. 전달받은 props를 렌더링한다. 풀어서 보자. 부모 컴포먼트에서 itemOne , i..
State 알아보기 State 란 ? 컴포넌트 내부에서 변할 수 있는 값 애플리케이션의 상태라고 할 수 있다. 쇼핑몰 장바구니를 예시로 들어보면, 장바구니내에서 체크 된 상태와 체크 되지 않은 상태로 상태를 구분할 수 있다. State hook, useState useState는 React에서 state를 다루는 방법 중 하나이다. useState 사용 1. 사용 할 파일내에서 react에서 useState를 import 해야 한다. import { useState } from "react"; 2. 컴포넌트 안에서 useState 호출 1. 수도 코드 const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값); 2. 문법 예시 function CheckboxExampl..
React 알아보기 React ? 리액트는 자바스크립트 기반의 라이브러리이다. 사용자 인터페이스 (UI)를 구축하기 위한 라이브러리로,HTML,CSS등과 함께 사용 되어 웹 애플리케이션을 만드는데 활용된다. 리액트에서 모든 UI 요소들은 컴포넌트로 이루어져 있으며, 이러한 컴포넌트들이 결합되어 전체 애플리케이션을 구성한다. 주로 자바스크립트 언어와 함께 사용된다.(문법,함수,객체,배열 등과 같은 요소들을 활용하여 리액트 애플리케이션을 구현한다.) 헷갈리지 않을 것 ! 리액트는 자바스크립트 기반의 라이브러리이지만,자바스크립트 언어 자체의 일부분은 아니며, 자바스크립트 코드를 작성할 때 리액트 라이브러리를 사용하여 필요한 기능을 구현하는 것 입니다. 컴포넌트 ? React에서 제일 중요한 부분을 맡고 있다...
