아마존 E-commerce 클론 -10) MongoDB연결하고 user데이터 만들기

 

 

 

 

 

 

 

먼저 서버에 mongoose설치하자. 

제일 상위 디렉토리에서 npm install mongoose한다. 

 

이제 백엔드에 usermodel을 만들어 줄것이다. 

여기서 네가지 정보는 모두 필수적이다. 

import mongoose from 'mongoose';

const userSchema = new mongoose.Schema({
    name:{
        type:String,
        required:true
    },
    email:{
        type:String,
        required:true,
        unique:true
    },
    password:{
        type:String,
        required:true
    },
    isAdmin:{
        type:Boolean,
        default:false,
        required:true
    }

}, {timestamps:true})


const User = mongoose.model("User", userSchema);
export default User;

 

그다음 라우트를 만들어준다. 

먼저 데이터에 유저 정보를 추가해주자. 

비밀번호를 보호해주기 위해서 npm install bcryptjs해준다. 

또 여기서 추가로 데이터안의 상품의 아이디들은 데이터베이스에서 자동으로 생성하도록 만들것이므로, 

_id는 모두 지워준다. 

 

backend>data.js

import bcrypt from 'bcryptjs'
const data = {
  users:[
    {
      name:'Basir',
      email:'admin@example.com',
      password:bcrypt.hashSync('1234', 8),
      isAdmin: true,
    },    
    {
      name: 'John',
      email: 'user@example.com',
      password: bcrypt.hashSync('1234', 8),
      isAdmin: false,
    },
  ],
  products: [
    
  export default data;

이제 라우터에서 데이터베이스에서 유저를 가지고 와서 되돌려 보내주는 라우트를 생성한다. 

import express from 'express';
import data from '../data.js';
import User from '../models/userModel.js'
import expressAsyncHandler from 'express-async-handler'

const userRouter = express.Router();

userRouter.get(
    '/seed',
    expressAsyncHandler(async (req, res) => {
      // await User.remove({});
      const createdUsers = await User.insertMany(data.users);
      res.send({ createdUsers });
    })
  );
  

export default userRouter;

 

이제 몽고디비와 연결해보자. 

설치완료후 

server.js

(나는 혹시 몰라서 bodyparser랑 cookieparser설치해서 연결해놨다)

 

import userRouter from './routes/userRouter.js';
import productRouter from './routes/productRouter.js';

import express from 'express'
import mongoose from 'mongoose'
const app = express();

import bodyParser from 'body-parser'
import cookieParser from 'cookie-parser'

mongoose.connect('mongodb+srv://yunhalee:8!ehxhflanr@cluster0.xcabn.mongodb.net/myFirstDatabase?retryWrites=true&w=majority', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useCreateIndex: true,
  useFindAndModify:false})
    .then(()=>console.log('MongoDB Connected'))
    .catch(err=>console.log(err));


app.use(bodyParser.urlencoded({extended:true}));
app.use(bodyParser.json());
app.use(cookieParser());


const port =  5000;
app.listen(port, ()=>{
    console.log(`Serve at http://localhost:${port}`);
})

만약에 localhost:5000/api/users/seed에서 새로고침하면 오래 지속되는 현상이 있다면, 

async를 고쳐야한다. 

npm install express-async-handler를 설치해주고 

다음 과 같이 라우터를 수정해준다. 

(새로 유저정보 받아올때마다 중복되면 오류가 생기므로 만들기 전에 remove해서 없애고 다시 가져온다)

import express from 'express';
import data from '../data.js';
import User from '../models/userModel.js';
import expressAsyncHandler from 'express-async-handler'

const userRouter = express.Router();
userRouter.get('/seed',expressAsyncHandler(async (req, res)=>{
    await User.remove({});
    const createdUsers = await User.insertMany(data.users);
    res.send({createdUsers});
}));

export default userRouter;

server.js에서 만약 오류가 생긴다면 메세지 뜨도록 설정해준다. 

app.use((err, req, res, next)=>{
    res.status(5000).send({message:err.message});
})
 

const port = 5000;
app.listen(port, ()=>{
    console.log(`Serve at http://localhost:${port}`);
})

 

 

 

mongoDB에 상품 샘플들을 넣어보자. 

 

productModels.js를 만들어준다. 

import mongoose from 'mongoose'

const productSchema = new mongoose.Schema({
    name:{
        type:String, 
        required:true,
        unique:true
    },
    image:{
        type:String,
        required:true
    },
    brand:{
        type:String,
        required:true
    },
    category:{
        type:String,
        required:true
    },
    description:{
        type:String,
        required:true
    },
    price:{
        type:Number,
        required:true
    },
    countInStock:{
        type:Number,
        required:true
    },
    rating:{
        type:Number,
        required:true
    },
    numReviews:{
        type:Number,
        required:true
    },
},{timestamps:true})


const Product = mongoose.model('Product', productSchema);

export default Product;

 

 

data의 자료들을 가지고 오는 seed 라우트를 생성해준다. 

import express from 'express';
import expressAsyncHandler from 'express-async-handler';
import Product from '../models/productModel.js'
import data from '../data.js'


const productRouter = express.Router();


productRouter.get('/seed', expressAsyncHandler(async(req, res)=>{
    const createdProducts = await Product.insertMany(data.products);
    res.send({createdProducts})
}))




export default productRouter;

 

 

server.js에 다음과 같은 문구를 추가해준다. 

app.use('/api/users', userRouter);
app.use('/api/products', productRouter);

 

localhost:5000/api/users/seed를 실행하면 

 

입력한 데이터가 잘 뜬다. 

상품의 아이디도 저절로 생성이 된 것을 확인할 수 있다. 

product도 잘 뜬다. 

 

 

 

 

이제 우리가 server.js에 작성했던 product router들을 프로덕트 라우터안으로 옮겨준다. 

import express from 'express';
import expressAsyncHandler from 'express-async-handler';
import Product from '../models/productModel.js'
import data from '../data.js'


const productRouter = express.Router();

productRouter.get('/' ,expressAsyncHandler(async(req, res)=>{
    const products = await Product.find({});
    res.send(products);
}));

productRouter.get('/seed', expressAsyncHandler(async(req, res)=>{
    const createdProducts = await Product.insertMany(data.products);
    res.send({createdProducts})
}))



productRouter.get('/:id' ,expressAsyncHandler(async(req, res)=>{
    const product = await Product.findById(req.params.id)
    if(product){
        res.send(product);
    }else{
        res.status(404).send({message:'Product not Found'})
    }
}))

export default productRouter;

 

프론트엔드를 실행하고 안으로 들어가서 새로고침하면 

 

다음과 같이 네트워크안에 정보들이 뜨는 것을 확인할 수 있다. 

상품 아이디가 잘 생성된 것을 확인할 수 있다. 

 

 

 

 

 

db에도 잘 들어왔다. 

 

 

 

디테일 페이지도 매우 잘 작동!