공부하는 히욤이

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

auth route 만들기 로그인 여부나, 해당 권한이 있는지 등을 체크하기 위해서 클라이언트에서는 토큰을 쿠키에 넣어주고 서버에서는 User DB에 토큰을 저장함 server에서의 토큰과 client의 토큰이 일치하는지 계속 확인함 user._id + 'secretToken' = token을 만듦 => 'secretToken' => user._id 시크릿토큰을 디코드하면 user_id가 나옴 [index.js] app.get('/api/users/auth', auth, (req, res) => { // 미들웨어를 통과해 여기까지 왔다는 얘기는 Authentication이 true라는 말 res.status(200).json({ _id : req.user._id, isAdmin : req.user.rol..

[user.js] userSchema.pre('save', function( next ){ var user = this; if(user.isModified('password')) { // 비밀번호 암호화 bcrypt.genSalt(saltRounds, function(err, salt){ if(err) { return next(err); }; bcrypt.hash(user.password, salt, function (err, hash){ if(err) { return next(err); } else { user.password = hash; } // 일이 다 끝나면 next 함수로 index의 save로 보내버림 next(); }); }); } else { next(); } }); user.js의 pr..