공부하는 히욤이

Redux 설치 C:\practices\react-node\boiler-plate> cd client C:\practices\react-node\boiler-plate>client> npm i redux react-redux redux-promise redux-thunk redux-thunk는 dispatch한테 function을 받는 방법을 알려주고 redux-promise는 promise가 들어왔을 때 처리해주는 미들웨어 React vs React Hooks React component 1. class Component 더 많은 기능 사용 가능 코드가 길고 복잡함 성능이 좀 더 느림 import React, {Component} from 'react'; export default class Hello..

CSS Framework 종류 for React.js Material UI React Bootstrap Semantic UI Ant Design Meterialize ant Design 설치 C:\practices\react-node\boiler-plate> cd client C:\practices\react-node\boiler-plate\client> npm i antd [index.js] import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import 'antd/dist/a..

Proxy Server IP를 임의로 바꿀 수 있음 보내는 데이터도 임의로 바꿀 수 있음 방화벽 기능 웹 필터 기능 캐쉬 데이터, 공유 데이터 제공 기능 Proxy Server를 사용하는 이유 회사에서 직원들 인터넷 사용 제어 캐쉬를 이용해 더 빠른 인터넷 이용 제공 더 나은 보안 제공 이용 제한된 사이트 접근 가능 Concurrently 여러개의 command를 동시에 작동시킬 수 있게 하는 tool concurrently 설치 C:\practices\react-node\boiler-plate> npm i concurrently [package.json] "scripts": { "start": "node index.js", "backend": "nodemon server/index.js", "test"..

Access to XMLHttpRequest at 'http://localhost:5000/api/hello' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. xhr.js:177 GET http://localhost:5000/api/hello net::ERR_FAILED createError.js:16 Uncaught (in promise) Error: Network Error at createError (createError.js:16) at XMLHttpRequest.handleError ..

axios react.js 부분에서 request를 보내게 되면 그때 사용할게 axios 라이브러리 jquery를 사용할때의 ajax같은 것 axios 설치 C:\practices\react-node\boiler-plate\client> npm install axios [client > LandingPage.js] import React, { useEffect } from 'react'; import axios from 'axios'; export default function LandingPage() { useEffect(() => { axios.get('/api/hello') .then(response => console.log(response.data)); }, []) return( LandingP..