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

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

[인프런] 따라하며 배우는 노드, 리액트 시리즈 - 기본강의를 들으며 정리한 내용입니다. 로그아웃 Route 만들어서 로그아웃 하려는 유저의 토큰을 데이터베이스에서 삭제해주기(index.js) app.get('/api/users/logout', auth, (req, res) => { User.findOneAndUpdate({_id: req.user._id}, { token: "" }, (err, user) => { if(err) return res.json({ success: false, err }); return res.status(200).send({ success: true }) } })

[인프런] 따라하며 배우는 노드, 리액트 시리즈 - 기본강의를 들으며 정리한 내용입니다. 페이지 이동 때마다 로그인 되어있는지 안되어 있는지, 관리자 유저인지 등을 체크하기위해서 필요 글을 쓸 때나 지울 때, 해당 권한이 있는지 등의 체크시에도 필요함 쿠키에 넣어준 토큰과 서버에 저장된 데이터가 동일한지 체크하는 과정 1. middleware폴더 생성, auth.js 파일 생성 const { User } = require('models/User'); let auth = (req, res, next) => { // 클라이언트 쿠키에서 토큰을 가져온다. let token = req.cookies.x_auth; // 토큰을 복호화 한 후 유저를 찾는다. User.findByToken(token, (err, u..

[인프런] 따라하며 배우는 노드, 리액트 시리즈 - 기본강의를 들으며 정리한 내용입니다. login Route 만들기(index.js) - jsonwebtoken, cookie-parser 설치 필요(npm install jsonwebtoken cookie-parser --save) //index.js const cookieParser = require('cookie-parser'); app.use(cookieParser()); app.post('/login', (req, res) => { User.findOne({email : req.body.email}, (err, user) => { // 1. 요청된 이메일을 데이터베이스에서 있는지 찾는다. if(!user){ return res.json({ log..

[인프런] 따라하며 배우는 노드, 리액트 시리즈 - 기본강의를 들으며 정리한 내용입니다. 데이터를 받은 그대로 저장하면 안전하지 않기때문에 Bcrypt를 이용하여 비밀번호를 암호화 한 뒤 데이터 베이스에 저장해 줘야 한다. Bcrypt 설치하기 npm install bcrypt --save models/User.js 파일 수정 (bcrypt 사용방법 참고) const bcrypt = require('bcrypt'); const saltRounds = 10 //salt의 글자 수 userSchema.pre('save', function(next){ //user가 저장되기 전에 실행되는 함수 const user = this; if(user.isModified('password')){ //비밀번호가 변경될때만..