react4 📚 [React] Redux 연결하기 (+ redux-promise, redux-thunk) Redux는 state를 관리해주는 툴 입니다. state는 컴포넌트 안에서 데이터를 교환하거나 전달을 할때 사용하며, mutable이기 때문에 컴포넌트 안에 자유롭게 state를 변경 할 수 있습니다. Redux 설치 - redux 설치와 동시에 redux 를 잘 쓸 수 있도록 도와주는 미들웨어인 redux-promise, redux-thunk 함께 설치 npm install redux react-redux redux-promise redux-thunk --save 프로젝트에 Redux 연결 1. 크롬 확장 프로그램 설치 2. client/src/index.js 아래 코드 작성 // client\src\index.js import React from 'react'; import ReactDOM from.. 2023. 3. 21. 📚 [node.js + react] 클라이언트와 서버 동시에 실행 - concurrently 📚 [node.js + react] 클라이언트와 서버 동시에 실행 - concurrently 원래는 따로 npm strat 해야 하지만 concurrently를 설치해 준다면 그럴 필요가 없어진다. npm install concurrently --save 기존 package.json에서 아래의 코드처럼 추가 작성 해줘야 한다. { "name": "react", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "node sever/index.js", "backend": "nodemon sever/index.js", "test": "echo \"Error: no test specified\" && exit 1",.. 2023. 3. 17. 📚 [React] 리액트 프록시 설정 (Proxy) 클라이언트 호스트와 서버 호스트가 다를때! CORS정책때문에!! 두개의 다른 포트를 가지고 있는 서버는 아무 설정없이 리퀘리스트를 보낼 수 없음 해결방법은 여러방법 중 Proxy를 사용하는 방법이 있다!!!!! 먼저 나의 서버의 호스트는 8080, 클라이언트 호스트는 3000이다. client > src > components > views > LandingPage > LandingPage.js 에 /api/hello로 요청을 보내고 요청을 받았다면 콘솔에 받은 데이터를 출력해달라고 한다. import React, { useEffect } from "react"; import axios from "axios"; function LandingPage() { useEffect(() => { axios.get.. 2023. 1. 26. 📚 [React] 리액트 라우터 돔 설정 (react-router-dom) * react-router-dom v5 사용 (v6를 사용 할 경우 오류 발생) 터미널 경로가 리액트를 설치한 프론트단으로 되어있어야 함. 아래 npm으로 react-router-dom 설치 npm install react-router-dom --save package.json에서 react-router-dom 버전이 아래와 같이 5가 아닌 6이라면 해당 명령어로 다운그레이드 npm i react-router-dom@5.2.0 App.js에서 react-router-dom을 import 시켜주고 라우터 설정 2023. 1. 26. 이전 1 다음
