[React & NodeJS]공부#1

jeje·2021년 6월 15일

React & Node

목록 보기

1/6

[Node.js]

1. node js 다운로드

node -v //버전확인
npm init

2. express js 다운로드

npm install express --save

[index.js] 파일 생성

const express = require('express');
const app = express();
const port = 5000;

app.get('/', (req, res) => res.send('Hello World!'));

app.listen(port, () => console.log(`Example app listening on port ${port}!`));

3. MongoDB 연결

클러스터 생성
몽고DB 유저 생성 (⚠️아이디/비번 기억할 것⚠️)
몽구스 다운

npm install mongoose --save

[index.js]에 몽구스 관련 코드 추가

const mongoose = require('mongoose');

mongoose.connect(config.mongoURI, {
    useNewUrlParser: true, useUnifiedTopology: true, useCreateIndex: true, useFindAndModify: false
}).then(() => console.log('MongoDB Connected'))
    .catch(err => console.log(err));

4. MongoDB Model & Schema

[models] - [User.js] 파일 생성

const mongoose = require('mongoose');

const userSchema = mongoose.Schema({
    name: {
        type: String,
        maxlength: 50
    },
    email: {
        type: String,
        trim: true,
        unique: 1
    },
    password: {
        type: String,
        maxlength: 50
    },
    role: {
        type: Number,
        default: 0
    },
    image: String,
    token: {
        type: String
    },
    tokenExp: {
        type: Number
    },
});

const User = mongoose.model('User', userSchema);

module.exports = { User };

5. body-parser

body-parser을 통해 client의 정보를 server로 받을 수 있음

body-parser 설치

npm install body-parser --save

[index.js]에 코드 추가

const bodyParser = require('body-parser');
const { User } = require("./models/User");

//application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));

//application/json
app.use(bodyParser.json());

app.post('/register', (req, res) => {
    //회원 가입 필요 정보 client to database

    const user = new User(req.body);
    user.save((err, doc) => {
        if (err) return res.json({ success: false, err })
        return res.status(200).json({
            success: true
        });
    });
});

postman으로 post 확인 가능

6. Bcrypt로 비밀번호 암호화

bcrypt 설치

npm install bcrypt --save

[models] - [User.js] 수정

const bcrypt = require('bcrypt');
const saltRounds = 10; // 사용할 암호화 개수

userSchema.pre('save', function (next) {
    var user = this;
	// 비밀번호 생성시에만(이메일 변경 등에서 암호화x)
    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)
                user.password = hash
                next()
            });
        });
    } else {
        next();
    }

});

7. 로그인 기능

[models] - [User.js] 수정

userSchema.methods.comparePassword = function (plainPassword, cb) {
    //plainPassword를 암호화 한 후 암호화 된 db 비밀번호와 확인
    bcrypt.compare(plainPassword, this.password, function (err, isMatch) {
        if (err) return cb(err),
            cb(null, isMatch)
    });
};

[index.js] 에 login router 생성

app.post('/login', (req, res) => {
    // 요청된 이메일은 db에서 검색
    User.findOne({ email: req.body.emal }, (err, user) => {
        if (!user) {
            return res.json({
                loginSuccess: false,
                message: "이메일에 해당하는 user가 없습니다."
            });
        };

        // 이메일이 db에 있다면 비밀번호 확인
        user.comparePassword(req.body.password, (err, isMatch) => {
            if (!isMatch)
                return res.json({
                    loginSuccess: false,
                    message: "비밀번호가 틀렸습니다."
                });
        // 이메일, 비밀번호 맞다면 토큰 생성

        });
    });
});

8. 토큰 생성

jwtwebtoken으로 토큰 만들기

npm install jsonwebtoken --save

[models] - [User.js] 수정

userSchema.methods.generateToken = function (cb) {
    var user = this;
    //jsonwebtoken을 이용해서 token 생성
    var token = jwt.sign(user._id.toHexString(), 'secretToken');

    user.token = token;
    user.save(function (err, user) {
        if (err) return cb(err)
        cb(null, user)
    });
};

토큰을 쿠키에 저장하기 위한 cookie-parser install

npm install cookie-parser --save

[index.js] 에 login router 수정

const cookieParser = require('cookie-parser');

app.post('/login', (req, res) => {
    // 요청된 이메일은 db에서 검색
    User.findOne({ email: req.body.emal }, (err, user) => {
        if (!user) {
            return res.json({
                loginSuccess: false,
                message: "이메일에 해당하는 user가 없습니다."
            });
        };

        // 이메일이 db에 있다면 비밀번호 확인
        user.comparePassword(req.body.password, (err, isMatch) => {
            if (!isMatch)
                return res.json({
                    loginSuccess: false,
                    message: "비밀번호가 틀렸습니다."
                });
            // 이메일, 비밀번호 맞다면 토큰 생성
            user.generateToken((err, user) => {
                if (err) return res.status(400), send(err);

                // 토큰 저장
                res.cookie("x_auth", user.token)
                    .status(200)
                    .join({ loginSuccess: true, userId: user._id })

            });
        });
    });
});