[인프런] 따라하며 배우는 노드, 리액트 시리즈 - 기본강의를 들으며 정리한 내용입니다. Redux란? predictable state container for JavaScript apps. 상태관리 라이브러리 Props VS State Props State 부모→자식으로 전달만 가능하다. 각 컴포넌트 안에서 state를 통해 데이터를 전달받아 사용가능하다. 전달받은 데이터는 수정불가능 데이터 수정 가능, 데이터 수정시 리렌더링됨 1. react-redux, redux-promise, redux-thunk 설치하기 cd client npm install react-redux redux-promise redux-thunk --save *redux-promise, redux-thunk (redux middl..

[인프런] 따라하며 배우는 노드, 리액트 시리즈 - 기본강의를 들으며 정리한 내용입니다. 프론트와 백 서버를 동시에 킬 수 있게 해준다. 1.concurrently 설치하기 npm install concurrently --save 2. 루트폴더에 있는 package.json 파일에 스크립트 추가하기 "dev": "concurrently \\"npm run backend\\" \\"npm run start --prefix client\\""

[인프런] 따라하며 배우는 노드, 리액트 시리즈 - 기본강의를 들으며 정리한 내용입니다. Proxy의 기능 IP를 Proxy Server에서 임의로 바꿀 수 있어서 인터넷에서는 접근하는 사람의 IP를 모르게 할 수 있다. 보내는 데이터도 임의로 바꿀 수 있다. 방화벽 기능 웹 필터 기능 캐쉬 데이터, 공유 데이터 제공 기능 Proxy를 사용하는 이유 회사에서 직원들, 혹은 집에서 아이들의 인터넷 사용을 제어할 수 있다. 캐쉬를 이용해 더 빠른 인터넷 이용을 제공한다. 더 나은 보안을 제공한다. 이용 제한된 사이트에만 접근하도록 할 수 있다.

[인프런] 따라하며 배우는 노드, 리액트 시리즈 - 기본강의를 들으며 정리한 내용입니다. CORS(Cross-Origin Resource Sharing) 정책 때문에 보안을 위해서 서로 다른 오리진을 가진 서버끼리는 정보를 주고받을 수 없다. 여러 방법이 있지만 이 강의에서는 Proxy를 사용해 해결한다. 참고문서 1. http-proxy-middleware 설치하기 npm install http-proxy-middleware --save 2. src폴더에 setupProxy.js 파일을 생성한다 const createProxyMiddleware = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api', cre..

[인프런] 따라하며 배우는 노드, 리액트 시리즈 - 기본강의를 들으며 정리한 내용입니다. 1. axious 다운받기 cd client npm install axios --save 2. LandingPage.js 파일에 axios 구문을 추가해준다. 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 LandingPage; } 3. server/index.js 파일에 아래 구문 추..

[인프런] 따라하며 배우는 노드, 리액트 시리즈 - 기본강의를 들으며 정리한 내용입니다. react-router-dom 설치하기 cd client npm install react-router-dom --save reactrouter 사이트 참고해서 app.js 파일에 Router 설정하기 import React from "react"; import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom"; import { LandingPage, LoginPage, RegisterPage } from "./index"; function App() { return ( ); } export default App;