forum-express : log 2

[lky473736]

forum-express : log 2

forum을 만들 테크는 아래와 같다.

• node.js : 런타임 프레임워크
• express : 서버 구현
• ejs : template engine (서버사이드 렌더링)
• mongoDB/mongoose : Atlas를 이용한 비관계형DB 구현
• AWS : 서버 배포
• socket.io : 채팅 서비스 구현

---

log 1에서는 express의 기본 틀을 다루었다면 log 2에선 DB 세팅과 ejs 세팅 및 동작 방식 등을 정리한다.

---

MongoDB vs RDB (관계형 데이터베이스)

• 세상의 모든 데이터베이스는 두 종류이다
  • 관계형 데이터베이스 : 엑셀이랑 똑같다 (속성, primary key, tuple...)
  • 비관계형 데이터베이스 : 조금 특이한 방식으로 저장한다 (redis나 MongdoDB)
• MongoDB와 RDB의 차이점
  • RDB는 tuple의 형태로 저장한다 + 정규화 작업을 해주는게 좋다 (현재 테이블의 주제와 맞지 않는 것들을 다른 테이블로 분리하는 것)
  • MongoDB는 Javascript 객체 형태로 데이터를 저장한다 -> Javascript로 작성하는 express를 사용하면서 접근성이 좋아진다 -> 인건비 줄인다 -> 스타트업에서 많이 쓴다
• MongoDB의 구조
  • Database > Collection > 많은 document
  • document가 일종의 tuple이라 생각하면 된다.
  • 데이터들을 바인딩할 수 있다는 점에서 장점
  • 각 document의 프로퍼티 중 최상단엔 각각의 document에 부여된 자동 id가 있다
  • 사용 방식 : 클라우드 호스팅 or local storage

  • 여기서는 Atlas를 써서 클라우드 호스팅할 예정 (AWS)

    MongoDB 연결 및 DB에 데이터 저장 / 데이터 불러오기

    1) server가 db랑 통신하는 법

  • 유저가 db랑 아무것도 거치지 않고 직접적으로 소통하다간 해킹 위험이 분명 있다
  • 따라서 중간의 검열 역할을 서버가 해주어야 한다
  • mongodb를 통하여 서버의 검열 역할을 해주자

// server.js

const { MongoClient } = require('mongodb');

let db;
const url = 'MongoDB 데이터베이스랑 연결할 수 있는 url';
new MongoClient(url).connect().then((client)=>{
  console.log('DB 연결 성공');
  // client가 url에 접속해서 연결했다면 db연결이 성공한 거다
  db = client.db('forum'); // forum이라는 DB에 접속

  // 보통은 db가 연결한 후에 포트를 연다 (listen)
  // 따라서 connect().then 이후에 listen 작업
  app.listen(8080, () => {
    console.log("http://localhost:8080 에서 서버가 실행 중입니다.");
  });
}).catch((err)=>{
  console.log(err);
});

2) DB에 무언가를 저장할 때

app.get('/post', (요청, 응답) => {
    // db.collection('저장을원하는콜렉션이름').insertOne({정보들});
    // == 저장을 원하는 콜렉션에 정보들을 하나 넣는다 
    db.collection('post').insertOne({sample : 'sample'});
    // sample : 'sample'이라는 document를 post라는 collection에 넣는다
});

// 위의 기능 : /post라는 세부 페이지에 입장하면
// db.collection 중 post라는 collection에
// sample : 'sample'이라는 document를 추가해라

3) DB에 있는 자료를 불러와야 할 때

app.get('/list', async (요청, 응답) => {
    // 응답.send('db에 있던 게시물');
    // db.collection('출력을원하는콜렉션이름').find().toArray();
    // == 특정 콜렉션의 document들을 전부 찾아서 배열 형태로 반환 (async, await 필요)

    // await : 다음 줄을 실행할 때까지 기다리기 (non-blocking i/o이기 때문에 처리가 오래걸리는 코드는 처리완료를 기다리지 않고 바로 다음 줄을 시행하기 때문에)
    // 따라서 db에 있는 자료를 모으기 위하거나 찾기 위해서는 프로그램이 잠깐은 기다려야 한다
    // await 말고도 콜백이나 then 써서 사용할 수는 있으나 mongo에서 계속 await 쓰라니깐 그렇게 한다
    let postlist = await db.collection('post').find().toArray();
    // 그러면 [{}, {}, ...] 이런 형식으로 list에 저장이 된 것이다
    console.log(postlist);

    // ejs 파일을 사용자에게 보내야함
    // 응답.render('ejs 파일명') 
    응답.render('list.ejs', {글목록 : postlist});
});

---

ejs 세팅 및 작성 방식

• ejs : html + template engine

• app.set을 사용하여 express에 세팅해야 함 app.set('view engine', 'ejs');

• template engine : html에 database에 있는 데이터들을 넣게 도와주는 라이브러리

• 서버사이드 렌더링 vs 클라이언트사이드 렌더링

  • 서버사이드 렌더링 : ejs와 같은 template engine을 이용하여 html data binding -> 유저에게 전송
  • 클라이언트사이드 렌더링 : 비어있는 html과 데이터를 유저에게 보냄 -> 유저 브라우저에서 html을 채움 (react 방식)

• 현재 이 포럼의 구현방식은 서버사이드 렌더링이다.

• views 폴더에 넣는 것이 관례

• 서버 데이터를 ejs 파일에 보내려면

  • 1) ejs파일로 서버데이터를 전송해야 함 -> 응답.render('ejs파일명', {보낼데이터의이름 : find()로불러온데이터} );
  • 2) ejs 파일 안에서 ejs 문법 사용해서 바인딩하기 -> <%= find()로불러온데이터.그데이터의key %>

[lky473736]

ejs 바인딩의 예시

    <div class="white-bg">
        <div class="list-box">
        <h4> <%= 글목록[0].title %> </h4> 
        <p> <%= 글목록[0].content %> </p>
    </div>
    <div class="list-box">
        <h4> <%= 글목록[1].title %> </h4>
        <p> <%= 글목록[1].content %> </p>
    </div>

[lky473736]

ejs 구문을 작성하는 방식 중 special tag는 아래와 같다

• <% ~~~~ %> : html 사이에 자바스크립트 문법을 사용할 때
• <%- ~~~~ %> : include 문법을 사용할 때 + 안에 있는 것이 html이라면 렌더링됨
• <%= ~~~~ %> : html에 db의 데이터를 넣을 때 + 안에 있는 것을 문자열로 취급하여 넣어줌

---

근데 만약 위 바인딩의 예시 html들이 db에 저장된 document 수대로 필요하다면 일일히 손으로 작성하기가 힘드니 ejs 문법으로 자동화한다.

<div class="white-bg">
        <%for(let i = 0; i < 글목록.length; i++){%>
            <div class="list-box"> 
                <h4><%= 글목록[i].title %></h4>
                <p><%= 글목록[i].content %></p>
            </div>
        <%}%>
/div>

• <% %>를 이용해 반복문을 사용하여 html 태그를 length 수대로 복사한다

• 자바스크립트가 사용된 모든 줄마다 special tag를 사용해야 함

  include 문법을 이용하여 다른 ejs 파일에 있는 html을 복붙할 수 있다. 보통 상단바와 같이 모든 url에 들어있어야 하는 것들을 일일히 ejs에 사용하기 힘드니 따로 상단바.ejs를 만들고 include로 복붙하여 사용한다.

<%- include ('nav.ejs') %> 
<!--nav.ejs에 있는 html 파일을 전부 여기에 복붙해라-->

• 이때 nav.ejs는 views 파일에 들어있다.