2021.08.05 오늘의 코드

바밤 오늘은 몽고 디비를 이용해 CLUD를 입혀보는 작업을 하겠습니다....(이것부터 볼걸...)

 

https://www.youtube.com/watch?v=vjf774RKrLc 

 

저것부터 보실 분들은 보시고~~~

 

이제 완성된 코드에서 변경만 있는 것이라 코드에다 설명만 해야겠습니다.

 

app.js에 몽고 디비 연결하는 것을 추가하였습니다.

import express from 'express';
import mongoose from 'mongoose';
import _ from 'dotenv/config';
import usersRoutes from './routes/users.js';
import cors from 'cors';

const app = express();
const PORT = 5000;
const mongoo = mongoose;
const envs = process.env;

const url = 'mongodb+srv://'+envs.DB_USER_NAME+':'+envs.PASSWARD+'@cluster0.frnbm.mongodb.net/'+envs.DB_NAME+'?retryWrites=true&w=majority'

mongoo.connect(
    url,
    { useNewUrlParser: true },   
    ()=> console.log('Connect DB'));

app.use(cors());

app.use(express.json());

app.use('/users', usersRoutes);

app.get('/',(req,res) => res.send('Hello from Homepage.'));

app.listen( PORT, () => console.log('Server Runnirg on prot: http://localhost:5000'));

본래 코드에서는 import를 reqire('fromName')를 사용했었다...

왜지... 여기서 추가된 것은 

터미널에서 사용했던 것은 

npm install dotenv / npm install cors / npm install mogoose / npm install mongodb 

 

첫 번째는. env 파일을 사용할 수 있게 해 주었고 

두 번째는 https://codepen.io/ 에 접속할 수 있게 도와주는 것이었고

나머지 두 개는 그냥 몽고 디비 연결할 때 쓰는 lib~~

 

우선 몽고 디비를 사용해야겠지? 

데이터베이스 서버를 

https://mlab.com/

저기를 클릭하고 google아이디로 간편하게 로그인하자.

database access로 들어가 유저 설정하고

Network access로 들어가 허용할 IP를 설정하자

그리고 이제 몽고 디비랑 JS랑 연결해줄 코드를 찾아야죠

 

다시 첫 화면 DB대시보드로 들어가면 Connect버튼을 누르자

두 번째 클릭하고 사용할 언어를 선택하고 밑에 나오는 코드를 가지고 오면 끝!

다시 코드를 설명해보면

const envs = process.env;

const url = 'mongodb+srv://'+envs.DB_USER_NAME+':'+envs.PASSWARD+'@cluster0.frnbm.mongodb.net/'+envs.DB_NAME+'?retryWrites=true&w=majority'

mongoo.connect(
    url,
    { useNewUrlParser: true },   
    ()=> console.log('Connect DB'));

이 부분이 추가되었다. 

 

보면 대충 이해될지 모르겠지만 url부분에

유저 아이디 / 유저 패스워드 / 데이터베이스명을 받고 

몽고 디비를 연결할 때 무슨 기능을 true로 주고 완료되면 로그를 찍어주는 코드이다.

 

나중에 보시는 분은 그냥 url부분만 몽고 DB 홈페이지에서 가져온 url 그대로 사용하고 패스워드만 바꾸어주면 된다.

 

본 영상에서는 url부분을 변수로 두었지만 난 유저 아이디 패스워드 데이터베이스를 어떻게 설정하는지 확인하다가

발견해서 변경하였다.

연결이 되었으니 확인해야지 

잘된다...ㅎㅎ 다행이네 

 

전에 만들었던 CLUD를 보면 routes 부분은 똑같으니 넘어가도록 하겠다.

import express from 'express';
import { createUser, getUser, getUsers, deleteUser, updataUser } from '../controllers/users.js';


const router = express.Router();

router.post('/', createUser);

router.get('/', getUsers);

router.get('/:id', getUser);

router.patch('/:id', updataUser);

router.delete('/:id', deleteUser);

export default router;

혹시 모르니 코드

 

이제 데이터베이스를 연결했으니 테이블에 접근하는 코드를 만들어야 된다.

위 동영상은 영어 독해가 가능하다면 아주 좋은 영상인 거 같다.

그러나 난 독해가 불가능해 따라 쓰고 이 코드가 무슨 뜻인지 다 작성하고 고민하고 알았다.

import mongoose from 'mongoose';
import _ from 'dotenv/config';

const postSchema = mongoose.Schema({
    title: {
        type: String,
        required: true
    },
    description: {
        type: String,
        required: true
    },
    date: {
        type: Date,
        default:Date.now
    }
});

export default mongoose.model(process.env.DB_COLLECTION_NAME, postSchema);

일단 데이터베이스에 접속한 상황입니다.

 

저장할 데이터를 정의를 합니다. 

필수 값을 정하고 싶으면 위와 같이 required를 true로 정하면 되고

아니면 이와 같이 표현할 수 있다.

 

const postSchema = mongoose.Schema({
    title: String,
    description: String,
    date: Date.now
});

JSON의 타입은 총 6개 그 외 3개로 이루어져 있으며

String / Number / Object / Array / Boolean / null 이렇게 정하면 되고 

 

다른 값들은 function / Date / undefined 스트링으로 변형되어 입력되는 것으로 알고 있는데 틀리면 알려주세요...

 

제가 알고있는 데이터베이스 테이블의 이름은 맨 밑줄 모델을 정의할 때 선택되는 거더라고여 찾는데 10분씩이나 걸렸어... 보고 따라하시는거라면 process이부분을 "<테이블이름>"으로 바꾸어주세요

 

이제 전에 썼던 코드에서 변경해야지

import { v4 as uuidv4 } from 'uuid';
import models from '../models/post.js';

export const getUsers = async (req, res) => {
    try{
        const allUser = await models.find();
        res.json(allUser);
    }catch(err){
        res.json({message: err});
    }
};

export const getUser = async (req, res) => {
    try{
        const findUser = await models.findById(req.params.id);
        res.json(findUser);
    }catch(err){
        res.json({message : err});
    }
    
};

export const createUser = async (req, res) => {
    
    const user = req.body;
    const schema = models({
        title: user.title,
        description: user.description
    })
    console.log(schema);
    try{
        const createdUser = await schema.save();
        res.send(createdUser);
    }catch(err){
        res.send(err);
    }
};

export const deleteUser = async (req, res) => {
    try{
        const removeUser = await models.remove({_id: req.params.id});
        res.json(removeUser);
    }catch(err){
        res.json({massage : err});
    }
    
};

export const updataUser = async (req, res) => {

    try{
        const updataUser = await models.updateOne({_id: req.params.id}, {$set:{title: req.body.title} });
        res.json(updataUser)
    }catch(err){
        res.json({massage : err});
    }
};

몽고 함수를 쓰니 무언가 좀더 간결해졌다랄까...ㅎㅎ 아주 좋아하면서 코딩했었다.

 

첫번째부터 모든 유저 불러오기 models는 이제 데이터베이스연결했고 테이블까지 연결했지요 그러니 이제 find()하면 저장되어있는 모든정보를 가지고옵니다. 그리고 req 요청 res 응답에 응답으로 json을 날려주는 코드입니다.

[ SELECT * FROM TABLENAME; ]

두번째도 아주 해석하기 쉽죠 테이블에서 아이디를 찾을게요 그것은 응답으로온 url중 id의 부분

router.get('/:id', getUser); 여기에 id 이부분이죠 이분을을 가지고 찾는다는 것이죠 

[ SELECT * FROM TABLENAME WHERE id = id; ]

세번째는 정보가 담겨진 body에 정보를 우리가 정의해논 스키마에 입력하는것이죠 그리고 save 

[ INSERT INTO TABLENAME VALUE(val1, val2, val3); ]

네번째는 지우는 쿼리를 대신해주죠?

[ DELETE FROM TABLENAME WHERE id = id; ]

다섯번째는 이제 WHERE문을 먼처 주고 뒤에 변경할 값을 넣어주는것이죠 

[ UPDATE TABLENAME SET col1=value WHERE id = id; ]

 

이렇게 몽고디비를 이용해서 CLUD 를 만들어봤는데 이제 완전 초급단계죠....

 

다음은 웹상에도 띄어볼것이고 fluter를 이용해서도 한번 해볼라고여