[🐼 express] 코딩애플 - mongoDB에서 데이터 받아오기

서버 열고 GET 요청 보내기

기본으로 서버를 가져오기 위해서는 다음과 같이 작성한다.

const express = require('express'); 
const app = express(); 

app.listen(8081,(res,req)=>{ //app.listen으로 서버 열기 
  console.log('서버 오픈 완') // 몇번째 포트 열건지, 열고 어떤 실행 할것인지
})

app.get('/pet',(res,req)=>{ // app.get(이 주소로, 저 요청을 할게)
  req.send('펫용품 쇼핑할 수 있는 페이지 입니다.')
})

이제 저 서버에/pet으로 접속하면 다음과 같은 화면을 보내준다.

---

서버에 HTML 화면 보내기

HTML 파일을 보내기 위해서는 sendFile을 사용한다.

// 홈 경로로 접속시 HTML 파일을 보여줘!
app.get('/',(res,req)=>{
  req.sendFile(__dirname + '/index.html')
})

app.get('/write',(res,req)=>{ // app.get(이 주소로, 저 요청을 할게)
  req.sendFile(__dirname + '/write.html')
})

이제 /write로 접속하면 아래와 같이 작성 페이지를 함께 보여준다.

---

<form> 태그 기능 개발

submit 버튼을 누르면 form에 입력한 제목과 날짜를 서버로 전달해보자.
form을 서버로 전달하기 위해서는 action, method가 반드시 필요하다.
input 태그들에는 name을 적어준다.

write.html

<div class="container mt-3">
  // 글 발행을 위해서는 POST 요청
  // 어느 경로로 전달해줄지? 
      <form action="/add" method="POST">
        <div class="form-group">
          <label>오늘의 할일</label>
          <input type="text" class="form-control" name="title"> // input에 name을 적어주기 
        </div>
        <div class="form-group">
          <label>날짜</label>
          <input type="text" class="form-control" name="date">
        </div>
        <button type="submit" class="btn btn-outline-secondary">Submit</button>
      </form>
    </div>

그리고 작성한 요청은 다음과 같이 적어서 처리한다.
그럼 의문점이 든다. 우리가 input 태그 안에 적은 내용은 어디에 저장되는 거지?
바로 res에 저장되어 있다.
이 저장된 것을 꺼내 쓰기 위해서는 body-parser가 필요하다.

body-parser는 요청 데이터(body) 해석을 쉽게 도와준다.

body-parser를 설치해주자.

npm install body-parser 

server.js

const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: true}));

...

app.post('/add',(res,req)=>{
  req.send('전송완료');
  console.log(res.body.title);
})

res.body라고 적으면 요청했던 form에 적힌 데이터를 수신 가능하다.
우리는 위에 input태그에 name = title 로 적은 값을 출력하고 싶으면 위와 같이 작성하면 된다.
서버 콘솔창에 잘 뜬다.

---

DB에 정보를 영구 저장시키기

이제 위 데이터를 DB에 영구로 저장시켜보자.
.txt 파일은 대용량 데이터를 저장하기에 불충분하므로 사용하지 않는다.

Mongo DB

• 관계형 DB : MySQL,Oracle,MariaDB
  -> SQL언어를 사용해야하며, 3차원 데이터의 저장이 어렵다.
• NoSQL : MongoDB, Dynamo, Redis, Cassandra 등
  -> Object 자료형으로 입출력 가능

무료 호스팅을 받아서 써보자!

mongoDB에 접속해서 필요한 정보를 모두 입력하면 된다.

✅ 만든 데이터 베이스 접속하기

connect > connect your application > 버전 맞춰서 선택하기
아래에는 db를 연결해줄 code가 나온다. 저 코드를 이용해서 연동시켜보자.

우선 mongodb를 설치해준다.
원하는 버전을 작성하기 위해서는 다음과 같이 작성해준다.

npm install mongodb@3.6.4

server.js

서버와 연결해주기 위해서는 mongodb를 불러온다음,
MongoClient.connect(나의 url,콜백함수)
이렇게 작성해준다.
url에서 password는 내가 설정한 admin의 pw값으로 수정해준다.

const MongoClient = require('mongodb').MongoClient; 
MongoClient.connect('mongodb+srv://admin:qwer1234@cluster0.qwx5x01.mongodb.net/?retryWrites=true&w=majority',
function(error,client){})

서버가 잘 뜨는지 확인하기 위해서 이전에 만들어둔 app.listen 함수를 저 안으로 옮겨보자.

const MongoClient = require('mongodb').MongoClient; 
MongoClient.connect('mongodb+srv://admin:qwer1234@cluster0.qwx5x01.mongodb.net/?retryWrites=true&w=majority',
function(error,client){
  app.listen(8081,(res,req)=>{
    console.log('서버 오픈 완')
  })
})

서버가 정상적으로 잘 실행된 듯하다.!

✅ 에러처리

두번째 인자로 콜백함수를 주었는데,
콜백함수의 error는 에러가 발생했을 경우 어떤 에러인지 알려주는 역할을 수행한다.

MongoClient.connect('mongodb+srv://admin:qwer1234@cluster0.qwx5x01.mongodb.net/?retryWrites=true&w=majority',
function(error,client){
  if(error){
    return console.log(error)
  }

✅ collection

browse collection > collection 이름 설정

collection은 일종의 엑셀 파일들이다.

collection 안에 파일들을 생성했다.
이곳에 데이터들을 쭉 저장가능하다.

✅ 데이터 저장하기

collection 파일도 생성했으니, 이제 실제 데이터를 저장해보자.

(1) 우선 데이터베이스에 저장시킬 변수를 하나 지정해준다. -> db
(2) 어떤 데이터 베이스 폴더를 연결할지 설정한다. -> db = client.db('todoapp');
(3) 어떤 collection에 어떤 값을 저장할지 객체 형태로 저장해준다.

server.js

var db; // 어떤 데이터 베이스에 저장시킬지
const MongoClient = require('mongodb').MongoClient; 
MongoClient.connect('mongodb+srv://admin:qwer1234@cluster0.qwx5x01.mongodb.net/?retryWrites=true&w=majority',
function(error,client){
  if(error) return console.log(error);
  

  db = client.db('todoapp'); // todoapp 이라는 db 폴더에 연결해
  db.collection('database').insertOne({이름:'su',나이:'20'},function(에러, 결과){
    console.log('저장완료');
  });
  app.listen(8081,(res,req)=>{
    console.log('서버 오픈 완')
  })
})

이제 mongoDB 화면을 새로고침해보면...!? 다음과 같은 화면이 뜬다.

objectId는 뭘까?

자료 저장시 _id를 꼭 적어야 한다.
안그러면 자동으로 부여해준다. 데이터를 구분하기 위해서 적는 것!
중복 id값으로 서버에 요청을 보내면, db에는 기존 id의 값만 남아있다.
이점을 주의하자.

이렇게 작성하면 폼에서 데이터를 입력하면,
서버에서 전송완료 페이지가 뜨고, db에 내용이 제대로 저장된다

  app.post('/add',(res,req)=>{
    req.send('전송완료');
    db.collection('database').insertOne({할일:res.body.title,날짜:res.body.date,_id:3},function(에러, 결과){
      console.log('저장완료');
  })
  })

server.js 코드 중간 완성본

const express = require('express'); 
const app = express(); 
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: true}));

var db; // 어떤 데이터 베이스에 저장시킬지
const MongoClient = require('mongodb').MongoClient; 
MongoClient.connect('mongodb+srv://admin:qwer1234@cluster0.qwx5x01.mongodb.net/?retryWrites=true&w=majority',
function(error,client){
  if(error) return console.log(error);
  

  db = client.db('todoapp'); // todoapp 이라는 db 폴더에 연결해
  app.listen(8081,(res,req)=>{
    console.log('서버 오픈 완')
  })

  app.post('/add',(res,req)=>{
    req.send('전송완료');
    db.collection('database').insertOne({할일:res.body.title,날짜:res.body.date,_id:1},function(에러, 결과){
      console.log('저장완료');
  })
  })

    //HTML 파일을 보내기 위해서는 sendFile을 사용한다. 
  app.get('/',(res,req)=>{
    req.sendFile(__dirname + '/index.html')
  })

  app.get('/write',(res,req)=>{ // app.get(이 주소로, 저 요청을 할게)
    req.sendFile(__dirname + '/write.html')
  })
  
})

---

실제 저장된 데이터들을 GET요청을 통해 받아오기 (with ejs)

GET 요청시 실제 저장된 데이터 목록들을 예쁘게 꾸민 HTML 페이지에 받아와보자.
우선 기존 index.html 파일들을 전부 복사해서 list.html 파일에 새로 생성 후 붙여넣기 해주었다.

서버 데이터를 편하게 집어넣을 수 있는 EJS 라이브러리를 사용해보자.

ejs 설치 하기!

npm install ejs

server.js에 ejs를 사용할 것임을 명시해주자.

app.set('view engine','ejs')

그리고 list.html -> list.ejs와 같이 .html 확장자명을 .ejs로 바꿔준다.
그러면 이제 ejs 문법을 이용해서 서버 데이터를 삽입할 수 있다.
(리액트, 뷰 등을 사용한다면 그냥 데이터 바인딩을 하면 되는 듯 하다.)

기본 형태는 <%= %> 이렇게 생겼다!
중요한 점은 ejs 파일들은 views 폴더를 생성해서 그 안에 넣어주어야 한다.

데이터를 for문을 이용해서 꺼내보자!

아래 코드는 /list 페이지를 방문하게 되면,
db에서 데이터를 꺼내서 결과를 반환하는 코드이다.
렌더링하고 싶은 값을 req.render에 담아서, 경로를 적고 원하는 결과를 두번째 인자로 적는다.

server.js

  app.get('/list',(res,req)=>{ 
    db.collection('database').find().toArray(function(error,결과){
      console.log(결과);
      req.render('list.ejs',{posts:결과});
    });
  })

list.ejs

<h2>서버에서 가져온 할일 리스트💛</h2>
<% for(let i=0;i<posts.length;i++){ %>
  <h4>할일제목:<%= posts[i].제목 %></h4>
  <p>할일 마감날짜: <%= posts[i].날짜 %></p> %>
<% } %> 

---

id 속성을 달아주기

총 게시물 + 1을하면 id에 맞게 생성될 듯 .. 했으나
생각해보면 게시물이 삭제 / 수정되는 경우 오류가 발생할거같다!

따른 파일을 만들어서 관리하자
collections에서 새롭게 counter를 추가한다.

아래와 같이 설정해주었다.

그리고 아래와 같이 작성해준다.
mongodb 기본 명령어들이 여러개 나온다.
너무 직관적이라 필요할 때마다 찾아보면 될거같다.

findOne -> 하나의 값만 찾기
insertOne -> 하나의 값을 삽입
updateOne -> 하나의 값을 수정
updateMany -> 여러개의 값을 수정

다양한 쿼리 operator들이 있다.
찾아보면서 공부하자.
https://blog.naver.com/PostView.naver?blogId=shino1025&logNo=221294664013&redirect=Dlog&widgetTypeCall=true&topReferer=https%3A%2F%2Fwww.google.com%2F&directAccess=false

server.js

  app.post('/add',(res,req)=>{
    req.send('전송완료');
    db.collection('counter').findOne({name:'게시물갯수'},function(error,결과){
      console.log(결과.totalPost);
    db.collection('database').insertOne({_id: 결과.totalPost+1 ,할일: res.body.title, 날짜: res.body.date},function(에러, 결과){
        console.log('저장완료');
        db.collection('counter').updateOne({name:'게시물갯수'},{$inc:{totalPost:1}},function(error,결과){
          if(error) {return console.log(error)}
        }) 
    });
  })
  })

이렇게 하면 대강 id 속성을 잘 달아줄 수 있다.
누군가 add로 post 요청을 하면
counter collection에서 name이 게시물갯수인 것의 이름을 찾아서 결과를 반환하고,
그 결과값을 database collection의 id로 업데이트 해주자.
그리고 게시물의 갯수를 하나 더 증가시켜주면 완료!

---

글 삭제기능 구현하기

글 목록마다 삭제버튼을 만들어서 삭제를 해보자!
삭제는 Delete 요청을 하는데,
html상에서는 delete가 불가능하다.
form 에서 method로 줄 수 있는 값은 'POST','GET' 요청 뿐이다.

이 점을 해결하려면
(1) method-override 라이브러리 이용
(2) JS AJAX를 이용

AJAX를 이용해서 삭제해보자!

AJAX는 새로고침 없이 서버에 요청하는 것을 도와주는 JS 문법
이때 JQuery 라이브러리의 도움을 받으면 AJAX를 활용하기 더 쉬워진다.
-> 당연히 JQuery 라이브러리 설치 필요!

부트스트랩을 설치했다면 아래 작성되어있다.

// 부트스트랩 설치 
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

// ajax 기본 문법
    <script>
      $.ajax({
        method:'DELETE', // DELETE 요청을 할 것이다. 
        url: '/delete', // 어떤 경로로 요청할 것인지 
        date : '게시물번호' // 어떤 게시물 번호를 삭제할지 전달해주기 위해서 
      }).done(function(결과){ // ajax 요청 성공시 실행할 코드

      })
    </script>