[인프런] 따라하며 배우는 노드, 리액트 시리즈 - 기본강의를 들으며 정리한 내용입니다. 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;

[인프런] 따라하며 배우는 노드, 리액트 시리즈 - 기본강의를 들으며 정리한 내용입니다. 폴더구조 정리하기

[인프런] 따라하며 배우는 노드, 리액트 시리즈 - 기본강의를 들으며 정리한 내용입니다. 바벨 : 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있게 변환 시켜 줌 웹팩 : 많은 모듈을 합해서 간단하게 만들어줌 (src폴더 내부만 관리) 👉 이전에 node로 작업했던 파일들은 server 폴더에 넣고 client 폴더를 만들어 리액트 설치하기 cd client (client 폴더로 이동) npx create-reacte-app . (현재 폴더 내에 설치) 이전엔 npm을 이용해 global로 다운받아야했지만 지금은 npx를 이용해 다운로드 없이 실행할 수 있다. npx가 npm registry에서 create-react-app을 찾아 다운로..