웹개발 복습 정리 28 : 템플레이팅, 동적 HTML, EJS

Kimhojin_Zeno·2023년 4월 12일

ejs express html 템플레이팅

웹개발 복습 정리

목록 보기

28/30

템플레이팅

템플레이팅은 미리 셋팅된 템플릿을 만든느 것

항상 같은 html 정적 코드를 쓰는 대신에 정보와 로직을 넣어서

루프로 여러번에 걸쳐 템플릿의 일부를 반복할수 있게 해준다

ex) 각각 다른 주제로 같은 디자인을 가지는 게시판들

EJS를 사용한다 Embedded JavaScript

EJS는 템플릿 엔진. 서버에서 가져온 데이터를 미리 정의된 템플릿에 넣고 html을 그려서 클라이언트에 전달해준다. 즉 정적인 부분과 동적인 부분을 따로 하기 위해 사용한다.

정적인 HTML 코드를 쓰는 대신에 정보와 로직을 넣어서 루프로 여러 번에 걸쳐 템플릿의 일부를 반복할 수 있다

동적인 부분(로그인하면 로그인 버튼 자리에 로그아웃이 나타남)

EJS

EJS 사용 세팅

먼저 ejs 모듈을 설치한다

npm install ejs

그 다음 ejs를 사용하기 위한 설정

const express = require('express');
const app = express();
const path = require('path'); //절대경로 지정을 위한 모듈. 파일과 디렉토리 경로데 관한 메서드를 제공해준다. path.join
const redditData = require('./data.json');

app.set('view engine', 'ejs');  // view engine으로 ejs를 사용한다는 뜻
app.set('views', path.join(__dirname, '/views')) // views 경로 지정. './views'로 해도 되지만 절대경로 path.join 사용하여 이렇게 해줄수 있다.

app.get('/', (req, res) => {  //html을 로드하기 위해 
    res.render('home')       // res.render(파일명) 으로 보여줄 수 있다. home.ejs 확장자를 안붙여도 됨
})

views폴더 안에 ejs 파일들을 넣는다

이제 render(’home’)이라고 하면 views폴더 안에 home.ejs 파일을 보여준다.

EJS 구문

HTML의 성능을 올려준다. EJS 태그 구문

https://ejs.co/

<% 'Scriptlet' tag, for control-flow, no output 기본적으로 이 태그를 감싸면 html에서 자바스크립트 사용이 가능하다. 마치 ` 백틱과 $ 달러사인을 이용하는 문자열 템플릿 기호처럼. 보이지 않는 흐름을 제어하는 코드를 넣는다.
<%- Outputs the unescaped value into the template 이스케이프 문자 빼고 데이터를 표시해준다. 주로 include 등을 할 때 쓰인다
<%= Outputs the value into the template (HTML escaped) HTML태그 및 이스케이프 문자들을 그대로 출력한다. 주로 다른 페이지 값을 사용할때 쓰인다

이스케이프 : 코드로 인식되는 게 아니라 화면에 그대로 표시되어야 할때 사용하는 문자열

< -- <
-- >
(띄어쓰기) --
& -- &
" -- "
' -- '
© -- ©

즉,

<%= 태그로 > 을 입력하면 화면에는 > 로 보이고 (이스케이프 문자를 그대로 표현)

<%- 태그로 > 을 입력하면 화면에는 > 로 보인다. (이스케이프 문자 빼고)

템플릿에 데이터 전달

index.js에서 라우트를 지정해준다.

/rand 라고 url을 넣으면 res.render 응답으로 ‘random’ 파일을 준다. ejs 파일로 만들어진 html.

app.get('/rand', (req, res) => { // 라우트
    const num = Math.floor(Math.random() * 10) + 1; // 랜덤한 수를 생성하고
    res.render('random', { num }) // 두번째 인수는 키-값쌍. 그냥 num 이라고만 하면 num:num 이라는 뜻. 랜덤수를 줬다. 해당 페이지에.
})

‘random’ ejs 파일에서 num을 받아서

<h1>Your random number is: <%= num %></h1>

이렇게 표시해줄 수 있다.

서브레딧 만들어보기

app.get('/r/:subreddit', (req, res) => { // : 콜론으로 subreddit이라고 해주면
    const { subreddit } = req.params; // req 객체에서 받는 값을 subreddit이라고 선언한다. 즉 url에 /king 이라고 치면 subreddit 은 king
    const data = redditData[subreddit]; //해당 서브레딧이 있다면
    if (data) {
        res.render('subreddit', { ...data }); // 서브레딧 ejs로 넘겨주고
    } else {
        res.render('notfound', { subreddit }) // 없다면 not found.
    }
})

EJS 조건문

EJS로 자바스크립트 조건문을 쓰려면 html 사이에 자바스크립트를 쓰고

자바스크립트 코드를 <% 로 감싼다.

즉 코드 문자 자체는 나타나지 않되, 로직은 작동한다.

<body>
    <h1>Your random number is: <%= num %></h1>
    <% if(num % 2 === 0){ %>
    <h2>That is an even number!</h2>   // 나타날 부분은 <%를 하지 않음
    <% } else { %>                     // 자바스크립트 부분만 <%로 감싼다
    <h2>That is an odd number!</h2>
    <% } %>
    <p>Here's an alternate way of doing it:</p>
    <h3>That number is: <%- num%2===0 ? '&gt;EVEN' : 'ODD' %></h3>
</body>

평범한 자바스크립트를 작성하고, 그것을 <%로 감싼다. (등호없음)

이것이 자바스크립트를 임베드 하는 방법.

EJS 루프

index.js 에서

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

다음과 같이 cats를 전달해주었다면

cats.ejs에서

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

</body>

받은cats를 반복문을 써서 다음과 같이 표시할 수 있다.

All The Cats

Blue
Rocket
Monty
Stephanie
Winston

위처럼 나타나는 것을 볼수있다. 반복되는 템플릿을 작성가능하다.

Express로 정적 파일 제공

미들웨어는 함수이며 요청이 들어오면 응답을 내보내는 식으로 작동한다

미들웨어 사용하는 방법

app.use(미들웨어)
app.use(미들웨어 사용경로, 미들웨어)

요청을 받을때마다 미들웨어 코드를 실행한다.

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

Express에 내장되어 있어서 express.static이라고 작성한다

제공하고 싶은 에셋 폴더를 인수로 전달한다. 위에서는 ‘public’ 디렉토리.

이 디렉토리는 앱의 루트 디렉토리 안에 있다

public 폴더 안에 app.css를 만든 다음,

ejs 파일들에서 app.css를 사용하고 싶으면 이렇게 쓸 수 있다.

<link rel="stylesheet" href="/app.css">

절대경로로 만들고 싶다면 다음과 같이 할수있다.

app.use(express.static(path.join(__dirname, 'public')))

EJS 파일 분할

각 페이지 마다 중복되는 head, 네비게이션바, footer를 반복할 필요 없이.

partial 폴더 안에다 만들어두고,

각각의 페이지에서는 미리 만들어둔

head.ejs
navbar.ejs
footer.ejs

를 삽입해주는 방식으로 사용할 수 있다.

<%- 태그를 사용한다

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

<%- include('partials/navbar')%>     //navbar 삽입
<h1>All The Cats</h1>
<ul>
    <% for(let cat of cats) { %>
    <li><%= cat %></li>
    <% } %>
</ul>
<%- include('partials/footer')%>      // footer삽입

head.ejs 에는 html 과 여는 태그들을 포함한다

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Site</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.min.js"></script>
</head>

<body>