[React JS] 1. Node.js

[React JS] 1. Node.js

 

1.Node.js

자바스크립트를 크롬이나 IE가 아닌 서버사이드에서도 사용할 수 있게됨

java와 같이 서버사이드에서 사용할수있는 javascript

 

Express JS?

---

2. boiler plate Project

---

3. Express.js 

npm install express --save

const express = require('express')
const app = express()
const port = 3000

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

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

  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

npm run start

---

4. Mongo DB 연결

- mongoose 설치- mongodb 연결

const express = require('express')
const app = express()
const port = 3000

const mongoose = require('mongoose')
mongoose.connect('mongodb+srv://okol4561:password@first.2owuq.mongodb.net/?retryWrites=true&w=majority', {}).then(() => console.log('MongoDB Connected...')).catch(err => console.log(err))


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

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

---

5. Model이란

- Model : schema를 감싸주는 역할

- 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: 5
    },
    lastname: {
        type: String,
        maxlength: 50
    },
    role: {
        type: Number,
        default: 0
    },
    image: String,
    token: {
        type: String
    },
    tokenExp: {
        type: Numebr
    }
})

const User = mongoose.model('User', userSchema)
module.exports = { User }

---

6. BodyParser

- Client와 Server간 통신

-> Request with Body (the JSON, buffer, String and URL encoded data)

-> body 데이터를 분석(parse)해서 req.body로 출력해주는 것

-> body-parser dependency (서버에서 클라이언트의 정보를 받을때 body parser dependency를 이용)

npm install body-parser --save

* client가 없기 때문에 POSTMAN을 사용해서 데이터 보내기

 

-> Register Route만들기

const  { User } = require("./models/User");
// 클라이언트에서 오는 정보를 서버에서 분석해서 가져올 수 있게 해주는 것
const bodyParser = require('body-parser');

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

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

app.post('/api/users/register',(req,res)=>{   
  //회원가입할 때 필요한 정보들을 client에서 가져오면,
  //그 정보들을 DB에 넣어준다.
  const user = new User(req.body);
  //user모델에 정보가 저장됨
  //실패 시, 실패한 정보를 보내줌
  user.save().then(()=>{
      res.status(200).json({
          success:true
      })
  }).catch((err)=>{
      return res.json({success:false,err})
  });

})

---

7. Nodemon 다운

npm install nodemon --save-dev

- 서버를 끄지 않아도 반영이 되게끔

 

nodemon으로 시작하는 script 추가

"backend": "nodemon index.js",

---

8. Config 설정

mongoURI 숨기는 설정 (gitignore)

---

9. Bcrypt 패스워드 암호화

npm install bcrypt --save

save 전에 암호화시켜줘야함

(User.js에서)

 

saltRounds = salt를 이용해서 비밀번호를 암호화 -> 솔트 생성 -> 솔트를 이용해서 비밀번호를 암호화

 

userSchema.pre("save", function (next) {
  var user = this;

  // 비밀번호를 변경할때만
  if (user.isModified("password")) {
    // 비밀번호 암호화
    // salt 생성
    bcrypt.genSalt(saltRounds, function (err, salt) {
      if (err) return next(err);

      //비밀번호 생성됐다면
      bcrypt.hash(user.password, salt, function (err, hash) {
        if (err) return next(err);

        //암호화 성공되면 hash된 비밀번호로 변경
        user.password = hash;
        next();
      });
    });
  }else{
    next()
  }
});

---

10. 로그인

토큰 생성하기 위한 jsonwebtoken 설치

npm install jsonwebtoken --save

쿠키에 토큰 저장위한 cookie-parser 설치

npm install cookie-parser --save

 

로그인

index.js

app.post("/api/users/login", (req, res) => {
  // 요청된 이메일을 데이터베이스에 있는지 찾는다
  User.findOne({ email: req.body.email })
    .then((user) => {
      if (!user) {
        return res.json({
          loginSuccess: false,
          message: "없는 아이디입니다.",
        });
      }

      // 요청된 이메일이 데이터베이스에 있다면, 비밀번호가 일치하는지 확인
      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)
            .json({ loginSuccess: true, userId: user._id });
        });
      });
    })
    .catch((err) => {
      return res.status(400).send(err);
    });
});

 

User.js

userSchema.methods.comparePassword = function (plainPassword, cb) {
  // 비밀번호 비교
  bcrypt.compare(plainPassword, this.password, function (err, isMatch) {
    if (err) return cb(err);
    //에러는 없고 맞으면 isMatch true
    cb(null, isMatch);
  });
};

userSchema.methods.generateToken = function (cb) {
  var user = this;

  var token = jwt.sign(user._id.toHexString(), "secretToken");
  user.token = token;
  /*
  user.save(function (err, user) {
    if (err) return cb(err);
    cb;
  });
  */
  user
    .save()
    .then((user) => {
      cb(null, user);
    })
    .catch((err) => {
      return cb(err);
    });
};

---

11. Auth 기능 만들기

토큰을 만든 후 유저정보(서버)와 쿠키(브라우저)에 넣어줌

두가지 토큰이 서로 맞는지 지속적으로 체크

-> 어떻게 하냐? 시크릿 토큰을 넣으면 유저 아이디가 나오는데 그 아이디를 db에서 찾아서 해당 유저의 토큰을 확인

 

*get요청 받을 때 middle ware 'auth' 추가

미들웨어란? : 엔드포인트에서 req받은 후 콜백펑션 하기전에 중간에서 해주는 것

 

index.js

app.get("/api/users/auth", auth, (req, res) => {
  // 여기 왔다는 건 auth 통과했다는 의미
  res.status(200).json({
    _id: req.user._id,
    isAdmin: req.user.role === 0 ? false : true,
    isAuth: true,
    email: req.user.email,
    name: req.user.name,
    lastname: req.user.lastname,
    role: req.user.role,
    image: req.user.image,
  });
});

auth.js

const { User } = require("../models/User");

let auth = (req, res, next) => {
  // 인증처리
  // 쿠키에서 토큰 가져옴
  let token = req.cookies.x_auth;

  // 토큰을 복호화한 후 유저를 찾음
  User.findByToken(token, (err, user) => {
    if (err) throw err;
    if (!user) return res.json({ isAuth: false, error: true });

    req.token = token;
    req.user = user;
    next();
  });
};

module.exports = { auth };

User.js

userSchema.statics.findByToken = function (token, cb) {
  var user = this;

  // 토큰을 decode
  jwt.verify(token, "secretToken", function (err, decoded) {
    // 유저아이디를 이용해서 유저를 찾은 후 클라이언트 token과 db 토큰 일치 여부 확인
    user
      .findOne({ _id: decoded, token: token })
      .then((user) => {
        cb(null, user);
      })
      .catch((err) => {
        return cb(err);
      });
  });
};

---

12. 로그아웃 기능 만들기

로그아웃하려는 유저를 아이디로 찾아서 해당 유저의 토큰을 지워주면됨

아이디 가져오는 법은 auth를 거치기 때문에 내가 가진 브라우저 쿠키의 토큰으로 찾은 user정보가 req에 담겨서 넘어옴

 

index.js

app.get("/api/users/logout", auth, (req, res) => {
  User.findOneAndUpdate({ _id: req.user._id }, { token: "" })
    .then((user) => {
      return res.status(200).send({ success: true });
    })
    .catch((err) => {
      return res.json({ success: false, err });
    });
});