반응형
EJS -- Embedded JavaScript templates
Simple syntax JavaScript code in simple, straightforward scriptlet tags. Just write JavaScript that emits the HTML you want, and get the job done!
ejs.co
ejs 문서에 tag 부분을 보면
구문을 지정해 스크립트를 작성할 수 있게하는데
이 부분은 보간 구문이라고 한다
<%=
이 구문은 데이터나 스크립트를 템플릿으로 출력해준다.
코드예시를 보면
home.ejs
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>home pag <%= 10 + 1 + 4 %> </h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, a autem dignissimos quisquam explicabo hic eligendi cum veritatis odit ipsam rerum recusandae officia? Pariatur excepturi ipsa suscipit. Temporibus, numquam perspiciatis.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse eum dolorem nesciunt doloremque totam reiciendis quae labore aperiam sequi laborum, quia obcaecati quaerat ipsum aut temporibus corrupti fuga recusandae consequatur?</p>
</body>
</html><%= 안에 연산을 넣고 실행시켜보겠다.
잘 동작하였다.
문자열로도 확인해보자
<h1>home page <%= "hello world".toUpperCase() %> </h1>
잘 동작한다.
보간 구문에서
템플릿 출력이 되는것을 확인했으니
이제 데이터를 넘겨서 출력해보자.
touch views/random.ejs새 파일을 만들어서 테스트해보겠다.
random.ejs 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>랜덤 숫자 : <%= Math.floor(Math.random() * 10) + 1 %></h1>
</body>
</html>
index.js 구조
const express = require('express')
const app = express()
const port = 8080
app.get('/random', (req, res) => {
res.render('random');
})
app.listen(port, ()=>{
console.log('포트번호 : 8080')
})
실행 결과
새로고침 할 때마다 랜덤함수가 잘 적용된다.
하지만 이것은 올바르지 않은 코드이다.
템플릿은 단순하게 보여야 하기 때문에
값만 전달해서 보간 구문에 뿌려줘야한다.
app.get('/random', (req, res) => {
const num = Math.floor(Math.random() * 10) + 1;
res.render('random', {rand : num });
})render할 때 두번째 인수를 객체 키-값 쌍을 전달한다.
그리고
보간 구문에
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>랜덤 숫자 : <%= rand %></h1>
</body>
</html>해당 키를 적어준다.
그럼 똑같이 잘 작동한다.
app.get('/random', (req, res) => {
const num = Math.floor(Math.random() * 10) + 1;
res.render('random', { num });
})키 : 값 이 같으면 생략 가능하다
반응형
'nodejs' 카테고리의 다른 글
| [node.js / express / ejs] 조건문과 루프(반복문) (2) | 2023.05.15 |
|---|---|
| [node.js / express] req.params, 경로 변수로 지정하기 (0) | 2023.05.11 |
| [node.js / express] 템플레이팅 (ejs, __dirname, path.join()) (0) | 2023.05.10 |
| [node.js] nodemon (저장하면 자동 재시작) (0) | 2023.05.09 |
| [node.js / express] 쿼리 문자열 (0) | 2023.05.08 |
