2022/07/03
처음에는 단순히 채팅방 하나만 만들려했는데
막상 하다보니 필요한 기초 문법 지식들이 필요해
추가적으로 공부하게 되었다.
- node 문법으로 하는 Get 요청
- node 문법으로 수행하는 Post 요청
- 부트스트랩을 이용한 디자인 구현
- REST API 기초 지식
- MongoDB 연결 후 JSON객체 형태( {K:V} ) 데이터 저장.
- EJS 파일 형식
app.get("/", function (요청, 응답) {
응답.sendFile(__dirname + '/index.html')
})
app.get("/write", function (요청, 응답) {
응답.sendFile(__dirname + '/write.html')
})
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<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.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Todo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="write">Write</a>
<a class="nav-link" href="#">TEMP</a>
</div>
</div>
</nav>
//Mongo DB 연결용 객체
const MongoClient = require('mongodb').MongoClient;
//어떤 DB에 저장할건지
let db;
MongoClient.connect('mongodb+srv://ID:PASSWORD @cluster0.uztxq.mongodb.net/?retryWrites=true&w=majority', function (에러, client) {
if (에러) { return console.log(에러); }
//todoapp에 접근하겟다라는 의미
db = client.db('todoapp');
// 서버 구동
app.listen(5000, function () {
console.log("Run on Server 5000");
console.log("DB연결 완료");
});
/add 로 요청이 들어올 경우 DB에 값을 INSERT
db.collection('post').insertOne({ _id: time, 제목: todo, 날짜: day }, function () {
console.log('저장완료'); });
html와 동일하지만 DB의 태그를 사용할 수 있게 도와주는 형식
뷰 , 리엑트 , 앵귤러 쓸 줄 알면 안써도 된다.
//DB 조회시 수행
app.get("/list", function (req, resp) {
resp.render('list.ejs')
sendFile이 아니라 render으로 보내야 한다.
});