[노드 리액트 기초 강의] #6 SSH를 이용해 GITHUB 연결 ~ #10 Bcrypt로 비밀번호 암호화 하기

#6 SSH를 이용해 GITHUB 연결

git과 github의 차이

깃은 소스코드를 관리할 수 있는 툴 , 깃헙은 깃을 사용하는 서비스이다.

우선 깃과 우리 노트북이 안전하게 연결될 수 있도록 ssh를 설정한다. 이 사이트로 가서 ssh 키를 생성한다. 그리고 생성한 ssh 키를 깃헙에 add하기 위해 다음 사이트로 가서 과정을 따라한다.  ssh키는 생성한 깃헙 레포지토리의 settings에 가서 넣어준다.

그리고 깃의 코드에 나오는 코드를 vscode의 터미널에서 한줄씩 따라 쳐준다. 그러면 다음과 같이 권한 부여가 뜨는데 허락을 누르면 깃이 완료된다. 

 

 

#7 BodyParser & PostMan & 회원 가입 기능

우선 클라이언트와 서버에 대해 설명을 해보면 클라이언트는 브라우저라 할 수 있다. 브라우저에서 아이디 비밀번호를 입력하면 서버에 데이터를 보내야한다. 이때 서버가 받아야하는데 여기서 body-parser를 사용한다. body-parser는 데이터의 내용을 형식에 맞춰 파싱해준다.

body-parser를 다운받기 위해 vscode터미널에 npm i body-parser 를 입력한다.

이제 서버 데이터를 통제하는 postman을 다운받아준다.(링크) 

그리고 index.js에 다음코드를 작성한다.

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

const {User}=require("./models/User");
const bodyParser=require('body-parser');
//body-parser가 클라이언트에서 오는 정보를 서버에서 분석해서 받을 수 있도록 한다. 이때 다음과 같이 분석하여 가져올 수 있도록 한다.
//application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({extended:true})); 
//application/json
app.use(bodyParser.json());

const mongoose =require('mongoose')
mongoose.connect(' mongodb+srv://<   >.<  >@boilerplate.jhjtj.mongodb.net/<  >?retryWrites=true&w=majority', {
    useNewUrlParser:true, useUnifiedTopology:true, useCreateIndex:true,useFindAndModify:false
}).then(()=> console.log('몽고디비 연결됨....'))
.catch('mongoodb error')

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

app.post('/register', (req,res)=>{
    //회원가입시 필요한 정보들을 클라이언트에서 가져오면 
    //그것들을 데이터 베이스에 넣어준다.

    //body-parser가 가져온 정보들을 데이터베이스에 넣는다. 데이터 형식은 req.body에 있는 형식대로 넣어진다.
    const user =new User(req.body)
    user.save((err, userInfo)=>{ 
        if(err) return res.json({success:false, err}) //에러 발생시
        return res.status(200).json({ //성공시
            success:true
        })
    })
})
//post 메소드를 이용한다. 엔드 포인트는 router이다.
app.listen(port,()=> console.log(`Example app listening on port ${port}`)) 

그리고 npm run start를 터미널에 넣어 실행시켜본다.

postman을 열어서 +를 눌러 창을 열고 주소를 넣고 User 형식대로 아이디 이메일 비번을 넣으면 아까 코드에 넣었던 대로 다음과 같이 성공했다고 뜬다.

 

 

 

#8 Nodemon 설치

이제 코드에 변경사항이 생길 때마다 서버를 내리고 재 시동할 필요 없이 소스의 변화를 감지해 변경사항을 반영할 수 있도록 하는 nodeman을 설치해보자. 터미널에 npm i nodemon --save-dev를 실행시킨다. -dev를 붙이는 이유는 로컬에서만 실행한다는 의미이다.

그리고 package.json에 들어가서 scripts에 다음을 추가한다.

"scripts": {
    "backend":"nodemon index.js"
  },

이제 npm run backend를 터미널에 넣어보자. 이제 코드가 변경되면 자동으로 업데이트 되는 것을 볼 수 있다.

 

#9 비밀 설정 정보 관리

우리가 index.js에 작성한 코드를 보면 mongodb 주소가 남들에게 보일 수 있다. 이것을 감추기 위해 config라는 폴더를 생성하고 dev.js 파일을 생성한 후 다음 코드를 넣어준다.

그런데 여기서 로컬에서 돌릴 때는 이게 가능하지만 production으로 돌릴때에는 따로 분기하도록 하여 HEROKU에서 변수를 넣는 방식으로 관리해주어야한다. 따라서 다음과 같은 파일을 추가하고 코드를 작성한다.

config > key.js

config > prod.js

그리고 index.js의 몽고db연결 부분을 다음과 같이 수정한다.

const mongoose =require('mongoose')
const config=require('./config/key');
mongoose.connect(config.mongoURI, {
    useNewUrlParser:true, useUnifiedTopology:true, useCreateIndex:true,useFindAndModify:false
}).then(()=> console.log('몽고디비 연결됨....'))
.catch('mongoodb error')

이제 dev.js 파일이 깃에 올라가지 않도록 gitignore에 dev.js를 추가한다.

저장해보면 서버가 잘 돌아가는 것을 볼 수 있다.

그리고 터미널에 git add . > git commit -m "(메세지)" > git push origin main 으로 깃에 넣으면 gitignore에 제외시킨 파일을 뺀 나머지 파일이 잘 올라간 것을 볼 수 있다.

 

 

몽고db를 열어보면 비밀번호와 같은 데이터들도 모두 암호화 처리 없이 바로 저장된 모습을 볼 수 있다.

이제 비밀번호와 같은 중요한 개인정보를 암호화 처리하여 저장하는 방법을 알아보자.

암호화를 해주는 bycrpt를 다운받기 위해 npm i bcrypt를 터미널에 실행시키자. 

그리고 데이터베이스에 클라이언트에서 가져온 데이터를 저장하기 전에 암호화를 시켜주자. const user =new User(req.body)를하고 user.save()를 실행하기 전에 뭔가 액션을 취할 수 있도록 User.js의 코드를 수정한다.

const mongoose =require('mongoose');
const bycrpt =require('bcrypt')
const saltRounds=10;

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

})


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

    if(user.isModified('password')){
        bycrpt.genSalt(saltRounds, function(err,salt){
            if(err) return next(err)
            bycrpt.hash(user.password,salt,function(err,hash){
                if(err) return next(err)
                user.password=hash
                next()
            })
        })
    }
})

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

module.exports={User}

이 코드는  'save'를 하기 전에 function을 실행한다. 즉 저장하기 전에 함수를 실행하고 저장하도록 한다. 함수는 next라는 인자를 가지고 next()로 'save'로 넘어가게 된다. 함수 안은 복호화를 시키게 되는데 우선 위에서 salt를 생성하고 생성한 salt를 가져와서 saltRound 수만큼의 자리수로 암호화한다.

이런 암호화는 User의 비밀번호가 바뀔 때에만 일어나도록 조건을 설정해준다. 이후 postman에 실행해보면

이렇게 잘 암호화 되어 들어간 것을 볼 수 있다.