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만 추출하여 화면에 보여줌