Node.js와 Express를 이용해 게시판 만들기 ⑤ - View 만들기

View 쪽은 ejs를 사용해서 진행해보려고 한다.

이번 기회에 아주 조금이지만 ejs에 대해서 다뤄볼 수 있었다.

참고 ejs 문법

JS 코드
<% ... %>

변수 출력 (HTML escaped)
<%= ... %>

출처 - EJS Docs

---

View 쪽은 간단하게 구현한 코드만 올려놓을 예정이다.

views/board.ejs - GET /

views/write.ejs - GET /post

views/post.ejs - GET /post/:postId

views/editPost.ejs - GET /post/edit/:postId

✅ View 파일 확인하기 - Gibhub

랜더링할 ejs 파일을 모두 제작한 후
app.js 에서 view에 대한 설정을 해준다.

/📃app.js

const path = require('path');
…
app.set('view engine', 'ejs');
app.set('views', './views');

$ npm run dev

서버 및 DB 실행 후 http://localhost:${PORT}/board 로 결과를 확인한다.

---

(2021-07-30 추가)
서버 실행 후 포트 접속 시 아래와 같은 404 코드를 받을 수 있는데

ejs 파일에 연결한 css 파일이 존재하지 않기 때문이다.
ejs 파일의 상단에서 link 한 부분을 지워주면 된다.

<link rel='stylesheet' href='/css/style.css'/>

---

전체 코드 보기
📃 Node.js 와 Express로 게시판 만들기 - Github