웹 개발자 도전기

Redux는 주로 React와 함께 사용되는 상태 관리 라이브러리 이다. 복잡한 애플리케이션에서 여러 컴포넌트 간에 데이터를 쉽게 관리할 수 있게 도와줍니다.Redux는 애플리케이션의 모든 상태를 하나의 중앙 저장소에서 관리하고 상태 변화를 예측 가능하게 만들어줍니다. 설치 방법npmnpm i redux react-redux @reduxjs/toolkityarnyarn add redux react-redux @reduxjs/toolkit Redux의 기본 개념state(상태) : 애플리케이션의 데이터가 저장되는 값(or변수)입니다.action(액션) : 액션은 애플리케이션에서 일어난 일을 설명하는 객체이고 보통 type 과 payload 로 구성됩니다.type 은 액션의 종류를 나타내는 문자열 , pay..

styled-components 는 CSS를 JavaScript 파일 안에서 직접 작성할 수 있게 해주는 도구 입니다.CSS-in-JS 라고 불리며 컴포넌트 마다 스타일을 독립적으로 관리할 수 있어 리액트 프로젝트에서 많이 사용합니다. 설치 방법npm npm i styled-componentsyarn yarn add styled-components styled-components를 사용하는 이유컴포넌트와 스타일을 한 곳에서 관리할 수 있습니다. 별도로 CSS 파일을 만들 필요가 없습니다.CSS 클래스 충돌을 방지 합니다. 각 스타일은 컴포넌트에 고유하게 적용되기 때문에 다른 곳에서 사용 중인 클래스 이름과 겹칠 일이 없습니다.동적 스타일링이 쉬워진다. 컴포넌트에 전달되는 props 에 따라 스타일을 쉽게..

useContext useContext는 리액트 내장 훅으로 컴포넌트 트리 전체에서 데이터를 쉽게 전달할 수 있게 해줍니다.일반적으로 로그인한 사용자 정보나 테마 같은 전역 상태를 관리할 때 사용합니다.useContext를 사용하면 컴포넌트에서 매번 props로 데이터를 전달할 필요 없이 원하는 곳에서 바로 사용할 수 있습니다. 장점리액트 기본 기능이라 별도 패키지가 필요 없다.설정이 간단하고 중소형 프로젝트에서 전역 상태 관리를 쉽게 할 수 있다.단점프로젝트가 커지면 useContext 만으로는 상태 관리를 복잡하게 만들 수 있다.useContext 자체는 전역 상태를 관리하는 기능이지 상태 업데이트에 대한 세밀한 제어나 효율적인 리렌더링 처리는 어렵다.    동작 방식User.jsx 에서 UserCo..

React Router는 리액트에서 네이게이션을 관리하는 라이브러리 입니다.다양한 경로를 정의하고 그 경로에 따라 컴포넌트를 렌더링할 수 있게 해줍니다. 설치 방법npm 사용npm i react-router-domyarn 사용yarn add react-router-dom React Router의 기본 개념BrowserRouter : 애플리케이션 전체를 감싸는 컴포넌트로 HTML5의 History API를 사용하여 URL을 관리합니다. 이 컴포넌트 안에서 라우팅이 이루어집니다.Routes : 여러 개의 Route를 감싸는 컴포넌트 입니다. 각 Route를 그룹화 하고 관리합니다.Route : 각 URL 경로에 해당하는 컴포넌트를 매핑할 때 사용합니다. 특정 경로에 들어가면 지정된 컴포넌트가 렌더링 됩니다...

모듈 설치npm i -S express cors npm i nodemon -Dnpm i http-proxy-middleware 등등express : node.js 기반의 서버 구축을 위한 간단한 웹 프레임워크cors : 다른 도메인에서 API 요청을 허용하기 위한 미들웨어nodemon : 파일 변경 시 서버를 자동으로 재시작해주는 도구http-proxy-middleware : 프록시 서버 설정을 위한 미들웨어 , API 요청을 다른 서버로 전달할 때 사  -S : 프로덕션 환경에서 필요한 모듈을 설치 (dependencies에 추가)-D : 개발 환경에서만 필요한 모듈을 설치 (devDependencies에 추가)  전체 폴더  back 쪽 src 폴더의 server.js 생성 const express ..