본문 바로가기
코딩/NodeJS

nodejs로 mongodb랑 데이터 주고받기

뱁새의이중장부 2023. 1. 25. 12:16
반응형

 

자 지난번 포스팅이랑 이어집니다

 

혹시 처음 이 글을 본다거나

아니면 까먹었는데 돌아가기 귀찮은 사람들을 위해

server.js 파일에 넣어둔 코드 올림

// express로 서버 만들기 기본 셋팅
const express = require("express");
const app = express();
const bodyParser = require('body-parser');
// bodyparser 사용 설정
app.use(bodyParser.urlencoded({extended: true}));

// ejs 사용 설정
app.set('view engine', 'ejs');

// 몽고DB랑 연결해주는 코드
const MongoClient = require('mongodb').MongoClient;
var db;
MongoClient.connect('mongodb+srv://bebsae:비밀번호@cluster0.kotmhwt.mongodb.net/?retryWrites=true&w=majority', 
function(에러, client){
    if(에러) {
        return console.log(에러)
    }
    // 나는 몽고db atlas에 todoapp이라는 이름의 데이터베이스를 만들어둠
    // 이 코드로 todoapp이라는 데이터베이스에 접속 가능
    db = client.db('todoapp');

    app.listen(8080, function(){
        console.log('db connected')
    })
})

/*
// listen(서버 띄울 포트번호, 띄운 후 실행할 코드)
app.listen(8080, function () {
    console.log("서버 실행 중");
});
*/

// get('경로', 함수)
// function(요청, 응답)
app.get("/first", function (req, res) {
    res.send("첫번째 페이지임");
});

app.get("/second", function (req, res) {
    res.send("두번째 페이지임요");
});

// html파일 띄우는 소스
app.get("/", function (req, res) {
    res.sendFile(__dirname + "/main.html");
});

app.get("/write", function (req, res) {
    res.sendFile(__dirname + "/write.html");
});

// POST요청을 처리하는 소스
app.post("/add", function (req, res) {
    res.send('전송완료');
    console.log(req.body.title);
    console.log(req.body.date);
    var title = req.body.title;
    var date = req.body.date;

    // counter라는 collection에서 데이터 가져오는 코드
    // 게시물갯수 라는 이름의 데이터를 찾아서 가져옴
    db.collection('counter').findOne({name: '게시물갯수'}, function(에러, 결과){
        console.log(결과.totalPost)
        var 총게시물갯수 = 결과.totalPost;
        // 몽고db atlas에 post라는 collection도 만들었었음
        // db에 데이터 저장하는 코드임
        // 데이터 양식은 {키 : 밸류} 형태임
        // _id는 데이터의 인덱스값 같은거 적어주는거임
        db.collection('post').insertOne({_id : 총게시물갯수+1, 제목 : title, 날짜 : date}, function(에러, 결과){
            console.log('저장완료');
            // db의 값을 업데이트(수정)하는 코드
            // updateOne({수정할데이터},{$set : {수정값}},function(){})
            // $set이 update operator(연산자)임, 값을 바꿔줌
            // 연산자에는 $inc도 있음 이건 값을 더해줌
            db.collection('counter').updateOne({name:'게시물갯수'},{$inc : {totalPost:1}},function(에러, 결과){
                if(에러){
                    return console.log(에러)
                }
            });
        });
    });
});

// ejs파일 불러오는 코드
app.get('/list', function(req, res) {
    // post라는 collection에서 모든 데이터 꺼내오기
    db.collection('post').find().toArray(function(에러, 결과){
        console.log(에러);
        console.log(결과);
        // DB에서 가져온 데이터를 ejs파일에 넣어 줌
        // 데이터는 posts라는 변수에 넣어 줌
        res.render('list.ejs', {posts : 결과});
    });

});

다음은 write.html파일 코드입니다

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Bebsae</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
          </ul>
        </div>
        </nav>
        <div>
            <!--
                form 태그에 넣은 action="/add" method="POST"는
                버튼을 눌렀을 때 form에 있는 내용을 서버로 전달해주는 옵션
                GET 요청을 하고 싶으면 method를 GET으로 바꾸면 됨
                /add는 POST요청을 할 경로임
                위 코드에서는 폼에 작성한 내용을 /add 경로로 전달함
            -->
            <form style="margin: 20px" action="/add" method="POST">
                <div class="form-group">
                  <label for="exampleInputEmail1">할일</label>
                  <input class="form-control" aria-describedby="emailHelp" name="title">
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">duedate</label>
                  <input class="form-control" name="date">
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
              </form>
        </div>
      
     

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

이번엔 list.ejs파일임

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>할 일 리스트</h1>
    <% for (var i = 0; i < posts.length ; i++){ %>
      <h4>할 일 제목 : <%= posts[i].제목 %></h4>
      <h4>할 일 마감 날짜 : <%= posts[i].날짜 %></h4>
    <% } %>




    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

자 이제 코드 설명 들어갈건데 코드 설명 보기 귀찮으면 주석 보세여

 

1. server.js 코드

우선 db에 데이터 집어넣고 빼는 코드임

app.post("/add", function (req, res) {
    res.send('전송완료');
    console.log(req.body.title);
    console.log(req.body.date);
    var title = req.body.title;
    var date = req.body.date;

이건 /add라는 URL로 post요청을 했을때,

form태그에 들어있는 title이랑 date라는 name의 데이터를 각각 title이랑 date라는 변수에 저장한다는 코드임

    db.collection('counter').findOne({name: '게시물갯수'}, function(에러, 결과){
        console.log(결과.totalPost)
        var 총게시물갯수 = 결과.totalPost;

이번엔 db에서 데이터를 끄집어내는 코드임

mongodb atlas에서 post라는 collection 만들었던거 기억남??

자 그럼 counter라는 collection도 하나 더 만들어보세요

post라는 collection도 만들었으니깐 한개 더 만드는것도 할 수 있을거임

그리고 atlas웹페이지에서 counter collection에다가 totalPost : 0, name : 게시물갯수 요렇게 데이터 넣어보세요

이건 굳이 설명 안해도 할 수 있을거임

 

암튼 그렇게 만들었으면 이제 위에서 살펴본 코드를 실행할 수 있음

위 코드에서 findOne() 옵션은 DB에서 데이터를 찾으라는 의미임

어떤 데이터를 찾을지는 key, value값을 넣어주면 되는거고

나는 '총게시물갯수'라는 변수에 DB에서 찾은데이터를 할당해줌

콜백함수에 에러랑 결과라는 변수를 넣어줬는데

findOne옵션으로 찾은 데이터는 결과라는 변수를 통해 콜백 함수안에 들어감

그리고 결과.totalPost라는 코드를 이용해

db에서 찾은 데이터 중에서도

totalPost값만 '총게시물갯수' 라는 변수에 저장해준 것

 

말로 쓰니까 좀 장황한데 결국

특정 collection에서 특정 데이터를 찾아서 변수에 저장해주는 코드임

 

이번엔 DB에 데이터 저장하는 코드임

db.collection('post').insertOne({_id : 총게시물갯수+1, 제목 : title, 날짜 : date}, function(에러, 결과){
    console.log('저장완료');

아까 findOne으로 데이터 찾아왔는데

데이터 저장할때는 inserOne을 쓰면 됨

저장하는 데이터도 형식이 있는데 역시 key, value형태로 작성하면 됨

저기 _id항목이 뭐냐면 db에 데이터를 저장했는데,

나중에 데이터를 서칭하려면 각 데이터가 갖고있는 고유값을 알아야 함

그걸 id로 부여하는거임

 

근데 _id를 따로 설정 안해주면

이렇게 복잡하고 알기 어려운 값으로 들어가기 때문에

나중에 코드 짤때 편하도록 id를 임의로 지정해줍시다

 

방금전에 위에서 findOne으로 totalPost에 저장된 값을 불러온거 기억남??

이번에는 데이터를 저장할때마다 totalPost에 저장된 값+1인 값을 id로 부여해주는 코드를 짠거임

 

그리고 title이랑 date는 변수임 젤 첨에

    var title = req.body.title;
    var date = req.body.date;

이렇게 title이랑 date변수에 form에서 불러오는 데이터 할당했었잖음 그거임

            db.collection('counter').updateOne({name:'게시물갯수'},{$inc : {totalPost:1}},function(에러, 결과){
                if(에러){
                    return console.log(에러)
                }
            });

자 마지막은 게시물도 올렸겠다 totalPost 값을 1씩 증가시켜줘야겠죠?

그거하는 코드임

updateOne이 이미 저장되어있는 DB값을 수정해주는 역할을 함

$inc는 mongodb의 연산자인데

값을 더해줌

어떤 값을 어디에 더해주는지는 바로 뒤에 설정해줄 수 있고

나는 {totalPost : 1}이라고 작성해서 

totalPost에 있는 값을 1 증가시켜주도록 설정한거임

 

글로는 장황한데 따라해보면 금방임

코드 복붙해서 따라해보고 이해하세여

그리고 값 바꿔가면서 한번 해보셈

어차피 복붙하는 코든데 뭐 좀 오류나고 꼬이고 그럼 어때여

다시 복붙하면 되지뭐

 

2. write.html

write.html코드는 많이 살펴볼 필요 없음

<form style="margin: 20px" action="/add" method="POST">
	<div class="form-group">
		<label for="exampleInputEmail1">할일</label>
		<input class="form-control" aria-describedby="emailHelp" name="title">
	</div>
	<div class="form-group">
		<label for="exampleInputPassword1">duedate</label>
		<input class="form-control" name="date">
	</div>
	<button type="submit" class="btn btn-primary">Submit</button>
</form>

form 태그에 들어있는 애들 중에

input태그 2개 보임? 거기에 name이라는 속성이 들어가있음

그것만 잘 보세여

아까 db에서 title이랑 date 변수 할당했었는데 그 변수에 값을 입력하기 위해서 저렇게 name 지정해준거임

app.post("/add", function (req, res) {
    res.send('전송완료');
    console.log(req.body.title);
    console.log(req.body.date);
    var title = req.body.title;
    var date = req.body.date;

여기 보면 req.body.title을 title이라는 변수에 저장함

req는 콜백함수에 첫번째로 적어준 변수인데 요청값을 담는 변수임

그러니까 req.body.title이라는 코드는 body에 있는 title이라는 이름의 태그에 들어있는 값을 요청한다는 의미임

 localhost:8080/write에 접속하면 이런 form이 있음

거기다가 데이터 입력하고 [submit]버튼 누르면 데이터가 DB에 저장됨

데이터 저장된거 확인하고 싶으면 atlas 웹사이트에서 이렇게 확인 가능 

 

3. list.ejs

값을 잘 불러오고 저장도 했으니 웹에서 데이터 확인해봅시다

ejs확장자 처음보죠?

자 처음보는건 설치해야 함

npm install ejs

서버 끄고 이거 터미널에 입력해서 ejs 설치합니다

 

ejs는 html안에서 js문법 쓸 수 있도록 하는 라이브러리임

// ejs 사용 설정
app.set('view engine', 'ejs');

그리고 server.js에 이 코드 올리면 됨

그럼 설정 끝이예요

참고로 파일 확장자도 html이 아니라 ejs로 해줘야 함

 

우리 위에서 ejs코드 봤었는데

걍 HTML이랑 양식이 똑같음

근데 중간에 <% %> 이런거 봤나요?

저 안에 들어간걸 JS문법으로 처리해줌

    <% for (var i = 0; i < posts.length ; i++){ %>
      <h4>글 번호 : <%= posts[i]._id %></h4>
      <h4>할 일 제목 : <%= posts[i].제목 %></h4>
      <h4>할 일 마감 날짜 : <%= posts[i].날짜 %></h4>
    <% } %>

이렇게 HTML에서 반복문도 돌릴 수 있구요

참고로 <% %>안에 있는건 JS 문법으로 처리해주고

<%= %>안에 있는건 변수로 처리해주는거임

 

// ejs파일 불러오는 코드
app.get('/list', function(req, res) {
    // post라는 collection에서 모든 데이터 꺼내오기
    db.collection('post').find().toArray(function(에러, 결과){
        console.log(에러);
        console.log(결과);
        // DB에서 가져온 데이터를 ejs파일에 넣어 줌
        // 데이터는 posts라는 변수에 넣어 줌
        res.render('list.ejs', {posts : 결과});
    });

});

위에 올린 server.js코드를 보면 제일 밑에 저런 코드가 있음

/lists라는 URL에 접속하면 db에서 값을 가져오는 코드임

post라는 collection에서 find()를 이용해 모든 데이터를 다 찾아옴

그리고 res.render()옵션을 이용해서 ejs 파일에 데이터를 전달해주는거임

저기 {posts : 결과}라고 적힌게 뭐냐면

콜백함수에 들어있는 '결과'라는 변수에다가 db에서 가져온 데이터를 넣어줬고,

'posts'라는 변수를 만들어서 '결과'변수에 담긴 db데이터를 담아주는거임

 

그리고 list.ejs파일에서는

posts[i]._id 같은 형태로 'posts'변수에 담긴 데이터를 꺼내는거임

localhost:8080/list 로 접속해보면 이렇게 DB에 넣어준 데이터를 확인할 수 있음

 

오늘은 내용 진짜 많았다

그래도 따라해보면 금방임

반응형
저작자표시 비영리 변경금지

'코딩 > NodeJS' 카테고리의 다른 글

nodejs에서 Session-based 회원가입 구현하기  (0) 2023.01.28
nodejs+express 서버에 게시글 수정 요청하기  (0) 2023.01.27
nodejs랑 mongodb 연결해보기  (1) 2023.01.24
nodejs에서 웹으로부터의 요청 처리하기(feat. post)  (0) 2023.01.23
nodejs로 HTML 파일 띄워보기  (0) 2023.01.22

'코딩/NodeJS' Related Articles

티스토리툴바