공부하는 히욤이

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..

React-router-dom 설치 C:\practices\react-node\boiler-plate> cd client C:\practices\react-node\boiler-plate\client> npm install react-router-dom [App.js] import './App.css'; import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom'; import LandingPage from './components/views/LandingPage/LandingPage'; import LoginPage from './components/views/LoginPage/LoginPage'; import Registe..

React.js Library로 페이스북이 개발 Components로 이루어져 있어 재사용성이 뛰어남 Virtual DOM을 이용 Real DOM은 바뀐 부분이 있으면 다시 전부 다 불러오는데 Virtual DOM은 바뀐 부분만 찾아서 DOM에서 바꾸어 줌 Babel 최신 자바스크립트가 구형 브라우저에서도 돌 수 있게 ES6 문법으로 변형 시켜주는 역할 Webpack 복잡하게 된 파일이나 모듈들을 bundle로 묶어주는 역할 npm node package manger로 레지스트리 같은 저장소 역할 local은 프로젝트 안에 node_modules에서 다운이 되고, global은 컴퓨터 window 자체에 다운이 됨 npx disk space를 낭비하지 않을 수 있다. 항상 최신 버전을 사용할 수 있다. ..

로그아웃을 할 때는 토큰을 지워줌 토큰이 없으면 클라이언트에서 가져온 토큰과 맞지 않아 인증이 안됨 로그아웃 할 때, 토큰을 지워주면 로그인 기능이 풀려버림 [index.js] app.get('/api/users/logout', auth, function (req, res) { User.findOneAndUpdate({ _id: req.user._id }, { token: "" },(err, user) => { if (err) { return res.json({ success: false, err }) } else { return res.status(200).json({ success: true }) } }) }); findOneAndUpdate는 mongodb에서 제공하는 함수로 첫번째 object에는..