MERN 기본파일 만들기 - 1) node, express 실행하고 mongodb연결하기, BodyParser & Postman 이용해서 register생성

https://www.youtube.com/watch?v=yScMn7iBa1g&list=PL9a7QRYt5fqly7BrCxOS71BqLLb9OeXKd&index=1&ab_channel=JohnAhn

 

 

MERN공부를 할때 정말 도움이 많이 되는 사이트다. 

 

프로젝트를 진행할 때 항상 이 boiler - plate를 가져와서 만드시는데, 

이 기본 바탕을 생성하는 강의가 궁금해서 공부한다. 

 

 

제일먼저 프로젝트를 만들고 싶은 폴더에 terminal로 npm init을 실행해준다. 

description과 name만 설정해주고 다른건 모두 엔터.

 

 

vscode에서 실행 후 index.js파일을 만들어주고, 

npm install express --save,

npm install mongoose --save를 해준다.(mongoose는 mongodb 연결을 위해서)

 

 

https://expressjs.com/ko/guide/routing.html

Express 라우팅

 

 

익스프레스를 사용해서 index.js를 작성한다. 

const express = require('express');//익스프레스 모를 가져온다.
const app = express();//앱을 만든다.
const mongoose = require('mongoose');//mongodb와의 연결

const port = 5000//기본 포트 설정



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

 

 

다음 프로젝트, 클러스터 생성후 몽고디비를 연결한다. 

https://www.mongodb.com/

The most popular database for modern apps

 

 

 

몽구스를 연결한다. 

 

 

https://mongoosejs.com/

Mongoose ODM v5.12.10

index.js에 추가해준다.

 

mongoose.connect('',{useNewUrlParser:true, useUnifiedTopology:true})
    .then(()=>console.log('DB connected'))
    .catch(err=>console.error(err));

 

 

 

mongodb 모델과 Schema를 설정해주자.

 

스키마는 필요한 요소의 틀을 말한다. 

 

 

 

 

이후에 models폴더를 생성하고 가장 기본적인 사용자 등록 형식을 

user.js파일에 입력한다. 

 

 

1. 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,
        minlength:5
    },
    lastname:{
        type:String,
        maxlength:50
    },
    role:{
        type:Number,
        default:0
    },
    token:{//유효성 관리
        type:String,
    },
    tokenExp:{//토큰의 유효기간
        type:Number
    }
})

const User = mongoose.model('User', userSchema)//스키마를 유저모델로 감싸준다.

module.exports = {User}   //다른곳에서도 쓰이도록 보내준다.

 

 

회원 가입 기능을 만들기 전에 설정할 것들과 다운받아야 할 dependency가 있다. 

 

 

우리는 bodyparser를 이용해서 클라이언트가 보내는 자료들을 받을 것이다. 

지금은 클라이언트가 없기 때문에 클라이언트에 보내는 자료들을 보기 위해서 postman을 이용할 것이다. 

 

 

 npm install body-parser --save, 

npm install cookie-parser --save 도 실행해준다. 

 

 

2. index.js

const express = require('express');//익스프레스 모를 가져온다.
const app = express();//앱을 만든다.
const mongoose = require('mongoose');//mongodb와의 연결

const port = 5000//기본 포트 설정

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

const {User} = require('./models/User');//mongodb에 클라이언트가 입력한 정보를 저장하기위해서 user정보 가져온다. 

mongoose.connect('mongodb+srv://yunhalee:<password>@"연결할 mongodb cluster 주소 입력"', 
    {useNewUrlParser: true, useUnifiedTopology: true})
    .then(()=>console.log('DB connected'))
    .catch(err=>console.error(err));


app.get('/', (req, res)=>{//제일먼저 나오는 화면 연결 
    res.send('hello world')
})


//bodyParser 옵션도 준다.
//application/x-www-form-urlencoded로 되어있는 부분을 가져와서 해석해주는 것
app.use(bodyParser.urlencoded({extended:true}));//deprecation warning을 받지 않기 위해서 
//application/json타입으로 된 것을 가져와서 해석해주는 것
app.use(bodyParser.json());

app.use(cookieParser());


//클라이언트가 요구해온 정보에 대해서 서버가 답해야하한다. (클라이언트가 요구하는 모든 사항은 register로 가게된다.)
app.post('/api/users/register', (req, res)=>{//요구를 읽기 위해서는 json이 필요한데 우리는 bodyparser를 이용해서 json을 읽는다.
	
    //회원가입할 때 필요한 정보들을 client에서 가져오면 그것들을 데이터베이스에 넣는다
    
    const user = new User(req.body)//bodyparser를 이용해서 사용자를 새로 생성하고(클라이언트가 입력한 정보 읽어서)
    user.save((err, userData)=>{//몽고db에 저장한다. 
        if(err) return res.json({success:false, err})
        return res.status(200).json({//positive response(json형식으로 전달)
            success:true
        })
    })

})


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

 

 

 

이후 postman을 이용해서 사용자 정보를 입력해보자 .

 

 

 

이메일과 패스워드, 이름, 성을 입력해주고 send를 보내준다. 

 

 

여기서 sending에서 오류가 계속 발생한다면 

app.use(cookieParser())를 삭제하고 실행해본다. 

 

 

이후 mongodb의 collections에 가보면, 

다음과 같이 등록한 정보들이 db에 생성되어있음을 확인할 수 있다. 

 

 

등록정보 확인까지 완료!