Edu/17. Node.js
ejs 엔진과 views(html)파일, css 파일 설정
Lacuna028
2021. 11. 28. 16:26
[app.js]
// 필요한 도구 import const ejs = require('ejs') // --1 //view엔진(ejs)과 html, css 파일 경로 명시 app.set('view engine', 'ejs') // -- 2 app.set('views', './views') // --3 app.use('pulic', express.statics(__dirname + '/public')); // -- 4
- 설명
-- 1: ejs라는 탬플릿 import
-- 2: view파일(html)을 보여줄 때 사용할 엔진, ejs 탬플릿을 명시하는 코드. 확장자는 ejs여야 그림파일로 간주하고 웹 화면에 보여줄 수 있음(ex: index.ejs).
-- 3: view파일을 불러올 경로 명시한 코드.
-- 4: css 및 정적 이미지 파일을 불러올 상대경로를 명시한 코드. pulic이란 폴더 하에 있는 css 및 정적 이미지 파일 불러옴.
+ views 파일 하에 index.html파일을 index.ejs로 확장자명 변경
[router]: mainRouter.js
// get 방식 router url 수정 router.get("/", function(req, res){ res.render('index', {title: "EJS 메인페이지"}) // -- 1 })
- 설명
-- 1: index라는 ejs 파일과 객체 데이터를 함께 보내줌(render)
그림 파일(html, ejs)을 보내줄 때는 render()함수를 사용, 데이터만 보내줄 때는 send()함수 사용
[views]: index.ejs
<!DOCTYPE html> <html lang="en"> <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> <link rel="stylesheet" href="/public/main.css"> <!-- --1 --> </head> <body> <h1><%= locals.title %></h1> <!-- --2 --> </body> </html>
- 설명
-- 1: css 파일 링크 주소. app.js 파일을 보면 css 설정하는 코드에 app.use('/public', express.static(__dirname + '/public')); 라고 코드 작성. 앞의 코드를 작성해줘야 css 파일이 적용됨.
-- 2: locals:서버에서 데이터를 보낼때 같이 보낸 데이터가 담겨있음. 그 변수의 키가 title인 value만 추출하여 화면에 보여줌