Node.JS_TIL

2022/07/03

처음에는 단순히 채팅방 하나만 만들려했는데
막상 하다보니 필요한 기초 문법 지식들이 필요해
추가적으로 공부하게 되었다.

• node 문법으로 하는 Get 요청
• node 문법으로 수행하는 Post 요청
• 부트스트랩을 이용한 디자인 구현
• REST API 기초 지식
• MongoDB 연결 후 JSON객체 형태( {K:V} ) 데이터 저장.
• EJS 파일 형식

---

GET / POST 요청 처리

app.get("/", function (요청, 응답) {
    응답.sendFile(__dirname + '/index.html')
})
app.get("/write", function (요청, 응답) {
    응답.sendFile(__dirname + '/write.html')
})

---

bootstrap

헤더 연결

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

body 연결

<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>

결과물

---

MongoDB 연결

필요한 요소 연결 구문

//Mongo DB 연결용 객체
const MongoClient = require('mongodb').MongoClient;

DB와 연결하는 구문

//어떤 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('저장완료');   });

---

EJS

html와 동일하지만 DB의 태그를 사용할 수 있게 도와주는 형식
뷰 , 리엑트 , 앵귤러 쓸 줄 알면 안써도 된다.

//DB 조회시 수행
app.get("/list", function (req, resp) {
    resp.render('list.ejs')
  	sendFile이 아니라 render으로 보내야 한다.
});

• npm install ejs으로 설치
• 파일은 반드시 views 폴더 내부에 있어야 한다( 그래야 찾아내는듯)