[Express/node] EJS

(Udemy) The Web Developer 부트캠프 2023 :: 섹션 34. 템플레이팅으로 동적 HTML 구성하기

(EJS 공식 사이트) https://ejs.co/

 

341. 템플레이팅이란?

제목, 찬성, 반대 이미지, 댓글, 공유 정확히 같은 형식이며 한 번에 하나씩 수동으로 만든 게 아니고 템플릿을 사용한 거죠.
항상 같은, 정적인 HTML 코드를 쓰는 대신에 정보와 로직을 넣어서 루프로 여러 번에 걸쳐 템플릿의 일부를 반복할 수 있죠.

우리가 사용할 것은 EJS인데 Embedded JavaScript의 약자입니다. 많은 옵션이 있죠.
다른 인기 있는 것 중 Handlebars가 있습니다. Jade, Pug, Nunjucks 등 이름이 이상하죠
이들은 Express로 사용할 수 있는 JavaScript 템플레이팅 엔진에만 해당하므로 이들 중 아무거나 사용할 수 있죠.

EJS의 경우 템플릿 안에 실제 JavaScript를 넣는 겁니다.

342. EJS용 Express 구성하기

이제 할 일은 앱에 EJS를 사용한다고 알리는 겁니다. 앱에 특별한 메서드가 있습니다
app.set인데 두 개의 인수를 수용합니다. 설정하려는 키와 해당 값 혹은 특성과 해당 값 app.set에 대한 설명이 있고 다른 특성이 꽤 있어서 query parser이나 view engine 등을 바꿀 수 있죠
우리가 원하는 거군요 EJS를 지정합니다 
app.set('view engine')

//index.js 

app.set('view engine', 'ejs');

ejs 설치

npm i ejs

home.ejs 파일 생성

mkdir views
touch views/home.ejs

---

343. 뷰 디렉토리 설정하기

파일 경로를 찾고, 

cd ../
node
process.cwd()

//index.js

const path = require('path')

app.set('views', path.join(__dirname, '/views')); //home.ejs 파일 경로 지정

344. EJS 보간 구문

vscode ejs 확장 설치: EJS language support

<!-- home.ejs -->

<h1>The Home Page <%= 5+ 1+ 2 %> <%= 'hello world'.toUpperCase() %></h1>

설정하면~

The Home Page 8 HELLO WORLD

 

<%= %> : 자바스크립트를 평가하고 결과 값을 임베드함.

 

345. 템플릿에 데이터 전달하기

//index.js 

app.get('/rand', (req, res)=>{
  const num = Math.floor(Math.random()*10) +1;
  res.render('random', {rand: num})
})

>> num: num 이름 같으면 num 하나만으로 가능~

<!-- random.ejs -->

<h1>How many people are coming to the party? <%= rand %></h1>

346. 서브레딧 템플릿 데모

//index.js

app.get('/r/:subreddit', (req, res) =>{
  const {subreddit} = req.params;
  res.render('subreddit', {subreddit})
})

 

347. EJS의 조건문

    <% if(num %2 === 0) {%>
    <h2>that is an even number!</h2>
    <% } %>

348. EJFS의 루프

    <h1>All The Cats</h1>
    <ul>
      <% for(let cat of cats) { %>
      <li><%= cat %></li>
      <% }%>
    </ul>

//index.js

app.get('/cats', (req, res) => {
  const cats = [
    'Blue', 'Rocket', 'Monty', 'Winston'
  ]
  res.render('home', {cats})
})

결과 ↓

All The Cats

• Blue
• Rocket
• Monty
• Winston

 

349. 복잡한 서브레딧 데모 더 알아보기

 

//index.js

const Data = require('./data.json')

app.get('/:reddit', (req, res) => {
  const { reddit } = req.params
  const data = Data[reddit]
  res.render('home', {...data})
})

//data 없을 때 오류 처리 - 조건절 추가, notfound.ejs 만들기
if(data) {
    res.render('home', {...data})
  } else {
    res.render('notfound', {reddit})
  }

---

350. Express의 정적 Assets 사용하기

express.static(root, [options]) //미들웨어

app.use(express.static('public'))

public 폴더 아래 css 파일 생성해서, home.ejs에 스타일시트 불러오니 적용됨~

 

351. 부트스트랩과 Express

352. EJS와 파일 분할

<%- include('partials/head')%>

분할 easy 굳.