MERN - 회원가입 라우터 추가, body-parser, bcrypt

bkboy·2022년 7월 21일
1

웹 개발

목록 보기
23/26
post-thumbnail

클라이언트/서버

클라이언트/서버는 두 개의 컴퓨터 프로그램 사이에 이루어지는 역할 관계를 나타내는 것이다. 클라이언트는 다른 프로그램에게 서비스를 요청하는 프로그램이고, 서버는 그 요청에 대한 응답을 해주는 프로그램이다. 클라이언트/서버 개념은 단일 컴퓨터 내에서도 적용될 수 있지만, 네트워크 환경에서 더 큰 의미를 가진다. 여러 다른 지역에 걸쳐 분산되어 있는 프로그램을 연결해 줄 수 있다.

현재는 서버를 만들고 있음을 다시 한번 기억하자!
서버가 클라이언트의 요청을 받아 올 때 필요한 것이 있다.

body-parser

요청의 본문을 지정한 형태로 파싱해주는 미들웨어(서로 다른 어플리케이션이 서로 통신하는데 사용되는 소프트웨어)이다.

app.get('/test', (req, res) => {
    res.send('test');
    console.log(req.body); // undefined
});

req.body는 기본적으로 undefined이지만 body-parser를 이용해 요청(request)의 body부분을 자신이 원하는 형태로 파싱하여 활용할 수 있다.

설치

npm install body-parser --save

사용

body-parser를 이용해 회원가입 라우터를 추가하는 코드를 작성한다.

//index.js
...
const bodyParser = require('body-parser');

// body-parser를 사용하기 위해 들어가야하는 부분
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

//post 메서드로 라우트 추가
app.post('/register', (req, res) => {
    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 });
    });
});

이젠 익숙한 패턴이다 다운 받은 라이브러리를 불러온다.

app.use부분은 body-parser를 사용하기위해 추가하는 코드라고 생각하자.

라우팅 부분을 살펴보자 엔드포인트를 지정하고 콜백을 받는다. 콜백 함수 내에서 생성하는 User는 mongoose로 만든 User 모델이다.

save는 mongoose의 메서드이다. body-parser로 파싱한 데이터를 사용해 새로운 모델을 만들고 그 모델을 저장한 뒤 성공와 실패의 처리를 각각해주었다. 성공했다면 연결해둔 몽고디비에 저장된 것을 확인할 수 있다.

bcrypt

암호를 그냥 저장한다면 보안 문제가 생길 수 있기 때문에 암호화를 거친다. 가장 많이 쓰는 암호화 라이브러리이다.

npm install bcrypt --save
// user.js
...
const bcrypt = require('bcrypt')
const saltRounds = 10;
...

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

    // password가 변횐될때만 암호화
    if (user.isModified('password')) {
        // salt 만들기
        bcrypt.genSalt(saltRounds, function (err, salt) {
             // salt 만들기 실패 next는 바로 register route save로 감.
            if (err) return next(err); 

            // 암호화
            bcrypt.hash(user.password, salt, function (err, hash) {
                if (err) return next(err); // 해쉬 실패

                user.password = hash;
                next();
            });
        });
    } else {
        next();
    }
});

user.js에서 추가하는 코드이다. pre함수는 어떤 동작에 앞서 실행되는 행동을 제어한다. save가 되기전 암호화를 해주는 것이다.

암호화하는 부분을 보면 비밀번호가 변경될 때 일어난다. 우선 salt라는 것을 만드는 이때 saltRounds라는 변수를 사용한다. 암호화 연산에 사용되는 수인데 높을 수록 암호화 연산이 증가한다. salt를 만드면 그 만들것을 이용해 암호화를 하고 성공한 값을 스키마에 넣어준다.

next는 index.js의 회원가입을 라우트하는 코드로 돌아가는데 에러가 생기면 에러를 인자로 보낸다.

참고

profile
음악하는 개발자

0개의 댓글