사전 준비
mongoDB 설치
예전에 설치했떤거같은데 혹시몰라서 재설치했다.
homebrew로 4.4버전을 설치했고, mongodb compass도 설치해주었다.
설치참고: https://velog.io/@fcfargo/TIL-MongoDB-Mongoose
mongodb 권한 참고: https://hyunki1019.tistory.com/166
박두현님 강의
views/post.ejs
<!DOCTYPE html>
<html lang="en">
<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>
<!-- GET, POST, PUT, DELETE -->
<form action="/expost/addbook" method="post">
<input type="text" name="bookname" id="">
<input type="text" name="author" id="">
<input type="number" name="price" id="">
<input type="date" name="date" id="">
<input type="submit" value="전송하기">
</form>
</body>
</html>input 칸 4개, submit 버튼 1개를 만든다.
models/book.js
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
// schema: 값들의 모음
const book = new Schema({
bookname: String,
author: String,
price: {
type:Number,
default: 5000
},
publish: Date,
sales: {
type:Boolean,
default: true,
}
})
const bookData = mongoose.model('book', book);
// 'book' 이건 collection 이름임
module.exports = bookData;mongoose는 ODM이다.
장고를 할때는 ORM 이라는 개념을 사용했는데, 검색을 해보니 둘이 RDB냐 아니냐의 차이일뿐 같은 역할을 하는 것이였다.
Schema를 new생성자로 book에 할당하여 사용하는데, 생긴게 마치 typescript의 interface같다. 약간 form? 처럼 사용하는듯
default의 경우 말그대로 기본값이긴한데 정확하게는 수업때 안다뤄서 잘모르겠다.
models/index.js
const mongoose = require('mongoose');
const connect = require('../dbconfig');
const url = 'mongodb://' + connect.username + ':' + connect.password
+ '@' + connect.url + '/' + connect.dbname;
const dbconnect = () => {
mongoose.connect(
url,
error => {
if (error) {
console.log("mongodb connect error", error);
} else {
console.log("mongodb-connect-success");
}
}
);
};
mongoose.connection.on('error', error => {
console.log('mongodb connection error', error);
});
mongoose.connection.on('disconnected', () => {
console.error('mongodb disconnected try reconnect....');
});
module.exports = dbconnect;dbconfig.json은 mongoDB에서 생성한 계정 정보가 담겨있는 파일이다.
그냥 mongodb랑 연결하는 코드인데, 이건 코치님이 복붙하라해서 그렇게 했다.
routes/post.js
const express = require('express');
const BookSchema = require('../models/book');
const router = express.Router();
router.get('/', (req, res) => {
res.render('post');
})
router.post('/', (req, res, next) => {
const name = req.body.name;
const phone = req.body.phone;
const date = req.body.date;
res.json({name:name, phone:phone, date:date});
// next();
});
// router.post('/', (req, res) => {
// res.redirect('/expost');
// })
router.get('/bookinfo/:id', (req, res) => {
const authorname = req.params.id;
// Movie.find({ year: { $gte: 1980, $lte: 1989 } }, function(err, arr) {});
// BookSchema.findOne({ auther: authorname }, (err, result) => {
// if (result) {
// return res.json(result);
// } else {
// return res.send('등록된 작가가 없습니다.');
// }
// });
BookSchema.find({author:authorname})
.then(result => {
res.json(result);
}).catch(err => console.log(err));
});
router.post('/addbook', (req, res) => {
const bookname = req.body.bookname;
const author = req.body.author;
const price = req.body.price;
const date = req.body.date;
let bookData = new BookSchema({
bookname: bookname,
author: author,
price: price,
publish: date
});
bookData.save();
res.redirect('/expost');
});
router.get('/del', (req, res) => {
res.render('delete');
})
router.delete('/del/:id', (req, res) => {
const bookname = req.params.id;
BookSchema.findOneAndDelete({bookname: bookname})
.then(result => {
res.json({redirect:'/expost'});
}).catch(err => console.log(err));
});
// router.post('/del/:id', (req, res) => {
// const bookname = req.params.id;
// BookSchema.findOneAndDelete({bookname: bookname})
// .then(result => {
// res.json({redirect:'/expost'});
// }).catch(err => console.log(err));
// });
module.exports = router;book에서 만든 BookSchema를 가져온다.
ejs파일에서 bookname, author, price, date 데이터를 폼으로 /expost/addbook에 넘기므로 라우팅을 /addbook으로 해준다.
폼에서 넘어온 저 4가지 정보는 req.body에 있으므로 req.body.bookname와 같이 변수로 할당하고 BookSchema를 new 생성자로 생성하며 각각의 데이터를 객체로 할당한다.
.save() 메소드는 mongoose.model('collection이름', 스키마)의 메소드이다. -> ODM명령어 인듯
.model은 이 collection에 이 스키마를 넣겠다는 말이다.
/del은 말그대로 삭제하는거고 약간 알고리즘이 특이하게되어있는데 아주간단하게 기능을 구현한것이라 그렇다
:id로 스키마의 findOneAndDelete로 데이터를 찾아 지우고 /expost로 redirect한다. redirect는 URL이라서 localhost:3000/ 이 기본주소라 결국 localhost:3000/expost로 이동한다.
views/delete.ejs
<!DOCTYPE html>
<html lang="en">
<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>
<a data-doc="개미" class="delete">지우기</a>
</body>
<script>
const trashcan = document.querySelector('a.delete');
trashcan.addEventListener('click', (e) => {
const endpoint = `/expost/del/${trashcan.dataset.doc}`;
fetch(endpoint, {
method: 'DELETE',
})
.then(response => response.json())
.then(data => window.location.href = data.redirect)
.catch(err => console.log(err));
});
</script>
</html>이코드는 정말 간단하게 만든 코드지만 맘에안든다.
body>a data-doc 태그의 "개미" 이거만 찾아서 지우는거다
views/index.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>이 파일은 home화면을 보여주는건데 <%= %> 이걸 써서 변수로 받게 해준다
routes/index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
여기서부터 <%= %>에 데이터가 넘어가는건데, res.render의 첫번째 인자는 index.js이고 두번째는 넘길 데이터이다.
마치 장고의 {% 변수 %} 이거와 비슷해보인다.
mongoDB compass
New Connection -> Advanced Connection Options -> Authentication -> Username/Password
Username과 Password는 mongodb에서 db생성후 생성한 계정 정보고 Authentication Database는 db이름이다.
ejs 폼에서 스키마에서 정의한 값 하나를 입력하지 않아도 null로 입력되어 db에 저장된다.
코치님 강의
엘리스 실습문제 풀이
