Node.js, Express, MongoDB사용하여 DB저장하기

dongwon·2021년 5월 23일
expressmongodbnode.js
2

1. node.js 설치

2. VScode에서 프로젝트 폴더 만들어서 열기

3. 터미널을 열어서 npm init -y입력 (package.json파일 생성 - 설치한 라이브러를 기록해줌)

4. 터미널에서 npm install express 입력하여 express라이브러리 설치

5. 서버를 관리할 자바스크립트 파일을 하나 만들어줌( server.js )

6. server.js에 서버를 여는 기본 코트 작성

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

app.listen(8080, ()=>{
    console.log('포트번호 8080 서버접속')
})

7. 터미널에 node server.js를 입력하여 서버 열어보기

8. 웹페이지(크롬, 익스플로러 등...) url에 localhost:8080입력하여 서버열렸는지 확인

9. 코드 수정시 서버 재시작이 귀찮으면 자동으로 restart해주는 nodemon을 설치하자

npm install -g nodemon

10. 터미널에 nodemon server.js를 입력하여 서버 열어보기

11. get요청

app.get('/product', (req, res)=>{  //파라미터 req는 요청, res는 응답 
  res.send('상품페이지');
});

12. url에 localhost:8080/product 입력해서 페이지 확인

13. GET 요청시 HTML 파일로 보내주기위해 프로젝트에 html파일 생성(예 index.html)

(server.js와 같은 폴더에 index.html 생성 후 작성)

<!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <h4>index 페이지입니다.</h4>
  </body>
</html>

14. server.js파일에 GET요청 작성

(server.js)

app.get('/', (req, res)=>{ 
 res.sendFile(__dirname +'/index.html') //__dirname은 파일명(index.html)을 제외한 절대경로
});  					//__filename은 파일명을 포함한 절대 경로

15. url에 localhost:8080/ 입력하여 페이지 확인

16. POST 요청을 위해 적당히 input페이지를 만듬(input.html)

(server.js와 같은 폴더에 input.html 생성 후 작성)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <title>Document</title>
</head>
<body>
  <h4 class="container mt-4"><strong>input 페이지</strong></h4>
  <div class="container mt-3">
    <form action="/add" method="POST">    //action과 전송형식(POST형식)을 작성
      <div class="form-group">
        <label>제목</label>
        <input type="text" class="form-control" name="title"> // name="title"
      </div>
      <div class="form-group">
        <label>내용</label>
        <input type="text" class="form-control" name="content"> // name="content"
      </div>
      <button type="submit" class="btn btn-outline-secondary">Submit</button>
    </form>
  </div>


  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

17. server.js에 아래 코드 추가

app.use(express.urlencoded({extended: true}))

(server.js)

const express = require('express');
const app = express();
app.use(express.urlencoded({extended: true}))  //이 코드 추가

app.listen(8080, ()=>{
    console.log('포트번호 8080 서버접속')
})

app.get('/product', (req, res)=>{  
  res.send('상품페이지');
});

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

 app.get('/input', (req, res)=>{ 
  res.sendFile(__dirname +'/input.html')
});

app.post('/add', (req, res){  //post형식 전송 코드 작성
  console.log(req.body);
  console.log(req.body.title);  //input.js의 name="title"
  console.log(req.body.content);   //input.js의 name="content"
  res.send('전송완료');
});

18. url에 localhost:8080/input로 이동해서 input에 값을 입력하고 submit하기

19. 터미널에 console.log들이 잘 나타나는지 확인하기

20. MongoDB Atlas 가입 후 무료버전 cluster생성(가입 및 생성 방법은 구글검색)

21. 터미널에 mongoDB 라이브러리 설치

npm install mongodb

22. server.js상단에 아래 코드 추가

const MongoClient = require('mongodb').MongoClient;

23. server.js에 MongoDB 연결

(server.js)

const express = require('express');
const app = express();
const MongoClient = require('mongodb').MongoClient;  // 1.추가

let db; // 2. DB 변수 하나를 생성

app.use(express.urlencoded({extended: true}))  

//3. 아래 코드 수정
MongoClient.connect('mongoDB 클러스터에서 복사해온 URL',(error, client)=>{
  if (error) return console.log(error);
  db = client.db('디비제목'); //4. 클러스터 데이터베이스를 db변수에 저장(cluster-collections-add my own data 의 데이터베이스 제목)
  app.listen(8080, ()=>{
    console.log('포트번호 8080 서버접속');
  });
});

app.get('/product', (req, res)=>{  
  res.send('상품페이지');
});

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

 app.get('/input', (req, res)=>{ 
  res.sendFile(__dirname +'/input.html')
});

app.post('/add', (req, res)=>{     
  res.send('전송완료');
  //5. 아래 코드 추가하여 post로 input데이터를 MongoDB에 저장
  db.collection('post').insertOne({제목 : req.body.title, 내용 : req.body.content} , ()=>{
    console.log('저장완료');
  });
});

24. 웹페이지 localhost:8080/input 에서 input데이터 입력 후 submit하기

25. mongoDB - cluster - collections - DB에 저장 잘 됐는지 확인

26. DB에서 데이터를 가져와 읽기 위해 EJS 템플릿엔진 설치

npm install ejs

ejs는 자바스크립트로 HTML 마크업을 생성할 수 있는 간단한 템플릿 언어로 <% %> 형태의 태그를 이용해서 HTML 중간중간 필요한 로직 및 데이터를 추가할 수 있으며, for문, if문을 통해 서버 데이터를 바로 html로 만들 수 있다.

27. server.js파일 코드 수정

const express = require('express');
const app = express();
const MongoClient = require('mongodb').MongoClient; 
app.set('view engine','ejs');   					// ejs 추가

let db;
app.use(express.urlencoded({extended: true})) ; 

MongoClient.connect('mongodb+srv://admin:001@cluster0.szzbh.mongodb.net/myFirstDatabase?retryWrites=true&w=majority',(error, client)=>{
  if (error) return console.log(error);
  db = client.db('todoapp'); 
  app.listen(8080, ()=>{
    console.log('포트번호 8080 서버접속');
  });
});

app.get('/product', (req, res)=>{  
  res.send('상품페이지');
});

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

 app.get('/input', (req, res)=>{ 
  res.sendFile(__dirname +'/input.html')
});

app.post('/add', (req, res)=>{     
  res.send('전송완료');
  db.collection('post').insertOne({제목 : req.body.title, 내용 : req.body.content} , function(){
    console.log('저장완료');
  });
});

/// DB 읽기
// list로 GET요청으로 접속하면 실제 DB에 저장된 데이터들이 출력되는 HTML을 보여줌 
app.get('/list',(req,res)=>{

  //디비에 저장된 post라는 collection안의 데이터(제목 또는 내용 등)를 꺼내기
  db.collection('post').find().toArray( (err, rslt)=>{  //DB에서 데이터를 찾음
    console.log(rslt);
    res.render('list.ejs', { posts : rslt }); // 찾은 데이터를 ejs 파일에 넣음
  }); 
  
});

28. DB의 데이터를 보여줄 페이지를 list.ejs파일로 만듬

*프로젝트안에 views 폴더를 생성 - views 폴더 안에 list.ejs 파일 생성

29. list.ejs 파일에 html작성

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <% for(let i=0; i < posts.length ; i++){ %>
    <h4>제목 : <%= posts[i].제목 %></h4>
    <h4>내용 : <%= posts[i].내용 %> </h4>
  <% } %>
</body>
</html>

30. localhost:8080/list에 데이터가 잘 나오는지 확인

profile
dongwon
What?
이전 포스트

React-Router.2 Hooks

다음 포스트

this 키워드

0개의 댓글