node.js mongoDB 세팅 및 간단한 POST, GET처리

jangdu·2023년 3월 20일

목록 보기

6/11

MongoDB 세팅

Mongodb atlas홈페이지 가입
채우라는대로 대충 채워주고
무료티어 선택
서버위치선택
Database Access메뉴에서 DB접속용 아이디:비번 생성
admin:1234
Network Access메뉴에 IP추가
0.0.0.0/0이런거 ㅇㅇ
Database / collection 만들기

그렇게 대충 진행해준다음

server.js에 다음처럼 세팅

// 서버 기본형

// express라이브러리 첨부, 사용
const express = require('express');
const app = express();
app.use(express.urlencoded({extended: true})) 

// MongoDB 기본 세팅
const MongoClient = require('mongodb').MongoClient;

// mongodb홈페이지에서 conect에서 복사한 주소
MongoClient.connect('mongodb+srv://계정이름:비번@cluster0.8pqn8cj.mongodb.net/디비이름?retryWrites=true&w=majority', function(err, client){
  if (err) return console.log(err);
  //서버띄우는 코드 여기로 옮기기
  app.listen('8080', function(){
    console.log('listening on 8080')
  });
})


// // 8080이라는 포트에 서버 오픈
// app.listen(8080, function() {
//     console.log('listening on 8080')
// })

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html')
})

위처럼 전부 진행하게되면 db와 연결이 완료된것이다.
listening on 8080뜨면 ㅇㅇ

POST처리 간단하게 해보기

디비에 자료 저장해보기

저번에 작성했던 app.post() {}를 이용해서 한번 작성해보자
누군가 /add로 POST요청 시 DB에 저장하는 코드를 작성해보면

var db

//  { useUnifiedTopology: true } 이건 워닝메세지를 제거해줌
MongoClient.connect('mongodb+srv://admin:1234@cluster0.8pqn8cj.mongodb.net/todoapp?retryWrites=true&w=majority',  { useUnifiedTopology: true },  function(err, client){
  if (err) return console.log(err);

  // 이거만 추가
  // todoapp이라는 데이터베이스에 접속
  db = client.db('todoapp');

  //서버띄우는 코드 여기로 옮기기
  app.listen('8080', function(){
    console.log('listening on 8080')
  });
})

app.post('/add', function(req, res){
  console.log(req.body);
  // 전송에 성공하든 실패하든 뭐라도 보내야한다.
  res.send('전송완료')

  // collection에 자료 추가
  // post라는 컬렉션에 다음 데이터를 추가한다.
  //  db.collection('post').insertOne() 
  db.collection('post').insertOne( {title : req.body.todo_title, comments: req.body.todo_comments, date : req.body.todo_date} , function(){
    console.log('저장완료'); 
  });
});

위 처럼 작성하면된다.
해석해보면 누군가 /add에 접속해서 POST를 요청하면,
todoapp이라는 데이터베이스에 접속하고,
post라는 컬렉션안에 insertOne( { 요청된 데이터들 }안의 친구들을 저장해주고 다하면 콘솔에 '저장완료'를 띄워준다는 코드이다.

잘 진행해주면 디비에 잘 보관되는 모습을 볼 수 있다.

위처럼 전송하면,

잘 저장된다. 콘솔에도 물론 잘 출력된다.

GET처리 간단하게 해보기

/list로 방문 시 ejs 보내주기

그냥 HTML파일을 보내주면 정적페이지가 된다.
HTML에 실제 디비 데이터를 넣어서 보내줄 수 없기 때문에, EJS, Pug같은 템플릿 엔진을 사용한다.

이번에는 누군가 /list로 GET요청을 했을 때, MongoDB에서 데이터를 꺼내 list.ejs파일을

EJS

서버데이터를 html에 쉽게 넣을 수 있게 돕는 렌더링 엔진
이거로 한번 db데이터를 html에 넣어보자
```
>  npm install ejs
```
작업 폴더 내에 views라는 이름의 폴더를 만들고 list.ejs파일을 index.html그대로 넣어보자

EJS를 사용할 때 알아두자

변수명으로 데이터를 집어넣는거 ㄱㄴ
<h2><%= user.name %></h2>
js문법사용 ㄱㄴ
<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

MongoDB에서 데이터를 꺼내려면

db.collection('post').find()
db.collection('post').findOne()

위처럼 사용하면 된다.

ex) post 컬렉션의 모든 데이터를 가져올 때

// (server.js)
app.get('/list', function(req, res) { 
  // post컬렉션 전부 다 가져와서 어레이로 바꿔 result에 넣는 코드
  db.collection('post').find().toArray((err, result) => {
    console.log(result)
    res.render('list.ejs')
  })
})

app.get에서 위 코드처럼 활용하면 된다.

/list로 접속 시 위처럼 아주 잘 나온다
그리고 list.ejs코드로 구현된 화면도 잘나옴 ㅇㅇ

꺼낸 데이터를 ejs에 넣기

// (server.js)
...

app.get('/list', function(req, res) { 
  db.collection('post').find().toArray((err, result) => {
    console.log(result)
    // props랑 비슷한 느낌으로 보내깅
    res.render('list.ejs', { posts : result })
  })
})

ejs에는 테이블이런거 귀찮으니까 부트스트랩으로 대충 가져와서

// list.ejs

      <div class="table">
        <table class="table">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">title</th>
              <th scope="col">comment</th>
              <th scope="col">date</th>
            </tr>
          </thead>
          <tbody>
            <% for(var i = 0; i < 5; i++){ %>
            <tr>
              <th scope="row">1</th>
              <td><%= posts[0].title %></td>
              <td><%= posts[0].comments %></td>
              <td><%= posts[0].date %></td>
            </tr>
            <% } %>
          </tbody>
        </table>