Dev갱이 Dev갱이

Redux관련 디펜던시를 먼저 받아주자. // client 폴더로 이동후 client> npm install redux react-redux redux-promise redux-thunk --save 여기서 redux-promise와 redux-thunk를 쓰는 이유는, 원래 store는 객체만 받을 수 있는데 promise와 function도 받을 수 있게 해주기 위해. cleint/src/index/js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { Pr..

여기서부터 진짜배기 리액트 공부. 리덕스, Hook은 제대로 공부해야될듯. 1. Redux개요 2.Redux State관리 3. Redux Action.

리액트 css프레임워크 경험하기. https://ant.design/ Ant Design - The world's second most popular React UI framework ant.design 공식 홈페이지. // /client폴더로 이동후 client> npm install antd --save 설치 완료후 홈페이지에 있는 컴포넌트들 가져다가 쓰면됨.

client와 server를 동시에 키고 끌 수 있께 하는 라이브러리를 설치 /BOILER-PLATE에서 npm install concurrently --save 서버에 해당하는 package.json에서 "dev" : "concurrently \"npm run nodemon\" \"npm run start --prefix client\"" 이걸 넣는다. 이렇게하면 server와 client 둘다 동시에 키기 성공!

//client 폴더로 이동후에 npm install http-proxy-middleware --sasve 로 설치. //cleint/src에서 setupProxy.js생성 // src/setupProxy.js const proxy = require('http-proxy-middleware'); module.exports = function(app){ app.use( '/api', proxy({ target: 'http://localhost:3001', changeOrigin:true, }) ) } 이런오류가 뜬다 그래서 홈페이지에 접속해서 보니 버전업으로 인해 바뀐듯하다. https://create-react-app.dev/docs/proxying-api-requests-in-development/ P..

전체적인 데이터 flow이고, // axios를 받아주자! npm install axios --save Server와 연동하기 위해 테스트 코드를 작성하자. LandingPage.js에서 // LandingPage.js import React, { useEffect } from 'react' import axios from "axios"; function LandingPage() { useEffect(()=> { axios.get('/api/hello') .then(response => console.log(response.data)) }, []) return ( LandingPage ) } export default LandingPage; 그리고 서버에서도 테스트 코드를 작성하자. server/inde..

// react-router-dom을 설치한다! npm install react-router-dom --save // app.js에서 import React from "react"; import LandingPage from "./components/views/LandingPage/LandingPage"; import LoginPage from "./components/views/LoginPage/LoginPage"; import RegisterPage from "./components/views/RegisterPage/RegisterPage"; import {BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; function ..