[20.09.15 Node_bbs] 부트스트랩, mongoDB연동, Moment모듈

Node_bbs

//- 한글 안깨지게 해주는
meta(charset="utf-8")
//- 스마트폰 기기용, PC기기용에서 같은 화면을 보이게 하는 속성
meta(charset="viewport", content="width=device-width, initial-sacle=1")

모든 웹브라우저에서 공통으로 사용되는 친구

 

• jquery

script.
    $(function(){
      // nav 내부의 ul 내부의 li tag가 클릭되면
      $("nav ul li").click(function(){
        // 클릭된 li의 보이는 문자열을 추출하여 text 변수에 담고
        let text = $(this).text()
        // 그 문자열이 "MEMO" 이면
        if(text == "MEMO") {
          // bbs/list로 URL 점프 하라
          document.location.href= "/bbs/list";
        }
      })
    })

>> layout.pug

---

app.js에서

순서가 그렇제 중요하지 않다지만

먼저 임포트를 하는 작업을 하고

그 다음에 라우터를 입력해주는게 프로젝트가 원할하게 작동한다.

 

mongoDB 연동하기

 

 dbConn : 감시를 하고 있는 친구라고 보면 된다.

// id이름이 설정된 tag를 클릭했을 때 수행할 event 핸들링
// $("#id").on(click,function())
// $("#id").click(function())
// mongoose를 통하여 db에 연결을 시도했을 때 정상적으로 open이 되면
// db open이 성공하면 console 메시지를 보여라,
dbConn.once("open", function () {
  // console에 문자열을 보여주라는 코드
  console.log("MongoDB Open OK");
});
// db와 연결하여 CRUD를 수행하는 과정에서
// 오류가 발생을 하면 그 오류메시지를 console에 표시하라
dbConn.on("error", function (error) {
  console.err(error);
}); // mybatis에서 sqlSessionFactory, sqlSessionTemplate이하는일을 한다고 보면 됌

once : 한번만 보여주라는 함수

on : 계속 감시를 하고 있다가 이벤트를 발생 시키는 것

mongoose.connect("mongodb://localhost/mybbs", {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

경고문을 없애기 위해 이 두개를 넣어줌

이렇게 넣어주면

콘솔창에서 ctrl + c  nodemon종료해주고

다시 nodemon 쳐주면 메시지가 깔끔하게 나온다.

>> app.js

---

/**
 * Table 구조를 생성하는 형태
 * VO 객체로서 역할을 수행하게된다.
 */
var schema = mongoose.Schema;

NoSQL인 MongoDB를

RDBMS처럼 사용하기 위해 Schema 생성

// bbsVO생성
// JSON 데이터 구조로 bbsVO의 table(Schema)를 생성하기 위한 객체 선언
var bbsVO = new schema({
  // 칼럼이름: 데이터 Type 형식
  b_date: String,
  b_time: String,
  b_title: String,
  b_write: String,
  b_text: String,
  b_count: Number, // 조회수 // 제일 마지막 , 는 상관 없음 오류 안남
});

JSON 데이터 구조로 bbsVO의 table(Schema)를 생성하기 위한 객체 선언

이러한 타입을 쓰겠다!

칼럼이름 : 데이터 Type

module.exports = mongoose.model("tbl_bbs", bbsVO);

mongoose의 model() 함수를 사용하여
tbl_bbs table을 만들고 그 구조를 bbsVO에 선언된 형태로 만들겠다.
model을 다른 모듈에서 사용할 수 있도록 export한다.
tbl_bbs라는 이름으로 table을 만들겠다 라고 선언을 했다.
실제로 mongoDB에 생성되는 table은 복수형으로 이름이 선언된다.

 

tbl_bbs 는 실제 데이터가 저장될 mongoDB의 Table역할을 수행

bbsVO가 데이터를 저장할 때 사용될 구조

 

>> models/bbsModel.js : mongoose를 통해서 mongoDB에 연결하게 될 schema

 

이게 모델파일의 구조이다!

---

mongo 명령어

 

mongo라고 cmd에 입력하면 mongo가 잘 깔렸는지 확인 할 수 있다.

show dbs : 우리가 설정한 데이터베이스가 있는가 없는가 확인

 

data를 입력하게 되면 mybbs라고 생성이됌

데이터를 그대로 확인 할 수 있음

---

        form(method="POST")
            .form-group
                input(name="b_title", placeholder="제목", value= bbsVO.b_title).form-control
            .form-group
                input(name="b_write", placeholder="작성자", value= bbsVO.b_write).form-control
            .form-group
                input(name="b_text", placeholder="내용",  value= bbsVO.b_text).form-control
            .form-group
                button.btn.btn-info 전송

div.form-group, input.form-control : input box의 디자인이 변경이 된다.

www.w3schools.com/bootstrap4/bootstrap_forms_input_group.asp

Bootstrap 4 Form Input Group

참고!

---

// bbsModel에 선언된 Schema를 가져와서 bbsVO 모델 생성
var bbsVO = require("../models/bbsModel");

router.post("/write", function (req, res) {
  // req.body 객체에 b_date, b_time, b_write, b_count 변수를 생성하고
  // 각각의 변수에 값을 세팅하라
  req.body.b_date = moment(new Date()).format("YYYY-MM-DD");
  req.body.b_time = moment(new Date()).format("HH:mm:ss");
  req.body.b_count = 0;

  // form에 전송받은 데이터를 통째로 bbsVO(data) 객체로 생성하라
  // data에는 form에서 입력하여 전송한 데이터(작성자, 제목, 내용)와
  // 서버에서 임의로 추가한 데이터(날짜, 시간, count)를 모두 모아서
  // 하나의 vo 객체로 생성을 하고
  // 거기에 DB CRUD와 관련된 함수들을 함께 추가하여 객체로 생성을 한다.
  let data = new bbsVO(req.body);

  // Data create 하기 (즉, 저장을 하기)
  data
    .save() // 생성한 bbsVO(data)에 저장된 데이터를 mongoDB의 table에 insert
    .then(function (bbsVO) {
      // insert가 성공하면
      // res.json(bbsVO); // client에게 다시 데이터를 보여라
      res.redirect("/bbs/list"); // 완료가 되면 리스트 화면으로 점프
    })
    .catch(function (error) {
      // insert 가 실패하면
      console.error(error); // 오류메시지를 콘솔에 보여라
      // 웹하면에 데이터 추가가 잘못되었다는
      // 메시지를 보여주는 코드를 수행해야한다.
    });
});

form에서 전송받은 데이터를 통째로 bbsVO(data)객체로 생성

 

save() : mongoDB는 데이터를 insert하게 되면(create)

id라는 칼럼을 하나 임의로 생성하고 PK로 등록해놓는다.

 

 현재까지 사용중인 프로그래밍 언어에서
 날짜,시간과 관련하여 수없이 많은 issue들이 있다.
 JS(node) Date 라는 내장 클래스가 있다.
 이 내장 클래스도 issue가 있어서
 실제로 DB와 연동하여 사용할 때
 문제를 일으킨다.

 그래서 내장 Date 클래스가 있음에도 불구하고,
 NodeJs 에서는 moment 외부모듈을 거의 표준적으로 사용하여
 날짜와 시간을 관리한다.

 1. Date 클래스를 날짜와 숫자 형태의 문자열로 변환하는 일 수행
 2. 날짜와 관련된 여러가지 연산을 수행하는 기능이 내장되어있다.

const moment = require("moment");

req.body.b_date = moment(new Date()).format("YYYY-MM-DD"); // 현재 날짜
req.body.b_time = moment(new Date()).format("HH:mm:ss"); // 현재 시각

>> bbsRoute.js