ejs 쓰는이유
일반적인 HTML 파일에서 스크립트 코드는 <script></script> 내부에 작성해야 하는 번거로움이 있었지만,
ejs는 지정된 태그를 사용해 스크립트 내용을 하나의 요소처럼 사용할 수 있게 한다.
가장 큰 장점은 서버에서 보낸 변수를 가져와서 사용할 수 있다.
https://github.com/mde/ejs/wiki/Using-EJS-with-Express
Using EJS with Express
Embedded JavaScript templates -- http://ejs.co. Contribute to mde/ejs development by creating an account on GitHub.
github.com
해당 사이트에 express와 사용할수 있는 방법에 대해 나와있다.
설치
npm install ejs
사용법
- index.js 구조
const express = require('express');
const app = express();
const port = 8080;
app.set('view engine', 'ejs'); // 키-값 입력 ejs는 express에서 호출해줌
app.get('/', (res, req) => {
res.render('home.ejs'); // ejs와 views/ 경로 생략가능 default가 views
})
// 로컬호스트 포트번호 설정
app.listen(port, ()=>{
console.log(`포트 번호 : 8080`);
});일단 ejs 의 default 폴더는 views 이다
그래서 폴더를 views로 만들고 안에 ejs파일들을 만들어야한다.
필요한건 set과 render이다.
set에는 위 코드처럼 공백까지 빠지지않고 넣어줘야한다.
render에는 /view가 생략된 파일 경로가 들어간다 ejs도 생략가능하다.
ejs안에는 html구조를 입력할 수 있다.
- 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 page</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>
nodemon으로 index.js 실행 후
nodemon index.js로컬호스트를 확인해보면
ejs 파일이 성공적으로 호출된것을 볼 수 있다.
하지만 views라는 기본 폴더구조는 문제가있었다.
하위폴더나 상위폴더에서 node는 실행되지만 서버에는 에러가 났다
views라는 디폴드폴터가 해당 위치경로에서 시작되기 때문이다.
path와 app.set를 추가해 주었다.
const express = require('express');
const app = express();
const port = 8080;
const path = require('path'); // 경로
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, '/views'))
app.get('/', (req, res) => {
res.render('home.ejs');
})
// 로컬호스트 포트번호 설정
app.listen(port, ()=>{
console.log(`포트 번호 : 8080`);
});express set을 추가하고
값에 실행되는 폴더의 경로를 넣어준다 __dirname
그 경로 뒤에 /views 를 path.join 매서드로 합친다.
그럼 어느 폴더에서 노드 실행하더라도 views 경로가 이탈할 일이 없다.
추가하기 전에는 다른폴더에서 실행했을때 에러가 났지만
nodemon exp/index.js
path를 추가하고 나니 잘 동작한다.
'nodejs' 카테고리의 다른 글
| [node.js / express] req.params, 경로 변수로 지정하기 (0) | 2023.05.11 |
|---|---|
| [node.js / express] ejs 보간(Interpolation) 구문, 템플릿에 데이터 전달 (0) | 2023.05.11 |
| [node.js] nodemon (저장하면 자동 재시작) (0) | 2023.05.09 |
| [node.js / express] 쿼리 문자열 (0) | 2023.05.08 |
| [Node.js] express 라우팅 기초(get 요청, post 요청) (0) | 2023.05.03 |
