본문 바로가기
Node

ejs에 대해 알아보기

by jennyiscoding 2022. 7. 3.

EJS : Embedded JavaScript 모듈

    특정한 형식의 파일로부터 HTML페이지를 생성하는 모듈 

설치 : npm i ejs로 설치한다! 

 ejs 함수 추가하기 : const ejs = require('ejs');

 

코드를 만들어보자. 

6가지를 require한다.

const express = require('express');
const app = express();
const bp = require('body-parser');
const router = express.Router();
const fs = require('fs');
const ejs = require('ejs');

bodyparser 가져온다.

app.use(bp.urlencoded({extended:false}));

 

/login이라는 경로를 router로 만든다.

router.route('/login').post((req,resp)=>{

})

ejs1.ejs라는 파일을 같은 경로에 새로 만든다. 

ejs1.ejs코드는 아래와 같다. 

<!-- 확장자가 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>첫페이지</title>
</head>
<body>
    <%
        const userid = 'apple';
        const username = '김사과'
    %>
    <h2>EJS 첫 페이지</h2>
    <p>아이디 : <%= userid %> </p>
    <p>이름 : <%= username %> </p>
    <p>성별 :
        <select name="" id="">
            <option value="남자">남자</option>
            <option value="여자">여자</option>
        </select>
    </p>
    <p>
        출생년도 :
        <select>
            <%
            for(let i=1970;i<=2022;i++){
            %>
                <option value="<%=i%>"><%=i%></option>
            <%
            }
            %>
        </select>
    </p>
</body>
</html>

fs를 통해 이 파일을 읽어오는데, ejs파일이기 때문에 ejs.render(data) 이렇게 읽어와야 한다. 

전체 코드 : 

const express = require('express');
const app = express();
const bp = require('body-parser');
const router = express.Router();
const fs = require('fs');
const ejs = require('ejs');

app.use(bp.urlencoded({extended:false}));

router.route('/login').post((req,resp)=>{
    fs.readFile('./ejs1.ejs','utf-8',(err,data)=>{
        if(err){
            console.log(err);
        }else{
            resp.writeHead(200,{'content-type':'text/html'})
            resp.end(ejs.render(data));
        }
    })
})
app.use('/',router);
app.all('*',(req,resp)=>{
    resp.status(400).send('<h2>페이지를 찾을 수 없음둥</h2>');
})
app.listen(3000,()=>{
    console.log('3000번 포트로 서버 실행중..');
})

두번째 예제로, 메인 코드에서 ejs파일을 호출하는 데, 호출할 때 변수를 전달하는 코드를 써보자. 

아래 코드에서 userinfo변수 값을 저장하였다. 그리고 

    const userinfo = { userid : req.body.userid,
                        userpw : req.body.userpw
                    };

ejs를 가져올 때 userinfo값도 전달하였다. 두번째 매개변수로 userinfo를 써주면 이거를 ejs로 보내서 거기서 쓸수 있게 된다. 

resp.end(ejs.render(data,userinfo));

 

메인 코드 : 

const express = require('express');
const bp = require('body-parser');
const fs = require('fs');
const ejs = require('ejs');

const app = express();
const router = express.Router();

app.use(bp.urlencoded({extended:false}));

router.route('/login').post((req,resp)=>{
    //const userinfo = {userid:'apple',userpw:'1111'};
    //이렇게 보낼수도 있고!
    const userinfo = { userid : req.body.userid,
                        userpw : req.body.userpw
                    };
    fs.readFile('./ejs2.ejs','utf-8',(err,data)=>{
        if(err){
            console.log(err);
        }else{
            resp.writeHead(200,{'content-type':'text/html'});
            resp.end(ejs.render(data,userinfo));
            //두번째 매개변수로 userinfo를 써주면 이거를
            //ejs로 보내서 거기서 쓸수 있게 된다.
        }
    })
})

app.use('/',router);
app.all('*',(req,resp)=>{
    resp.status(404).send('<h2>페이지를 찾을수없습니다</h2>')
})
app.listen(3000,()=>{
    console.log('3000만큼 사랑해~');
})

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>
</head>
<body>
    <h2>로그인</h2>
    <p>아이디 : <%=userid%> </p>
    <!-- 사용자가 쓴 아이디 -->
    <p>비밀번호 : <%=userpw%></p>
    <!-- 사용자가 쓴 비밀번호  -->


</body>
</html>

세번째 예제로,2개의 ejs파일을 불러오고 합치는 예제를 만들어볼 것이다. 

위에 예제와 비슷하게 변수를 넘겨주는 것인데, body.ejs에다가 header.ejs를 변수로 넘겨줄 수 있음을 알수있다. 

메인코드(1_ejs3.js)

const express = require('express');
const bp = require('body-parser');
const fs = require('fs');
const ejs = require('ejs');

const app = express();
const router = express.Router();

app.use(bp.urlencoded({extended:false}));

let header = null;
let body = null;

try{
    header = fs.readFileSync("./header.ejs","utf-8");
    //헤더의 데이터가 담겨있고
    body = fs.readFileSync("./body.ejs","utf-8");
    //바디의 데이터가 담겨있다
   
    //header.ejs를 만들거고 이거는 header변수에 넣을꺼야.
    //그리고 body.ejs를 만들거고 이거는 body변수에 넣을꺼야.
    //그리고 이거를 합쳐서 하나의 응답 페이지로 만들거다.
}catch(e){
    console.log('예외상황이 발생!');
}

router.route('/about').post((req,resp)=>{
    const html = ejs.render(header,
        {
            title :"매개변수로 전달된 타이틀",
            content:ejs.render(
                body,
                    {msg:'매개변수로 전달된 텍스프 메세지123'}
            )
        }
    );
    resp.end(html);
})
app.use('/',router);
app.use('*',(req,resp)=>{
    resp.status(404).send('<h2>페이지를 찾을 수 없음둥</h2>');
})
app.listen(3000,()=>{
    console.log('3000만큼 사랑해.하돼따..');
})

body.ejs 코드 : 

<p>EJS를 이용한 예제 입니다.</p>
<p>다른 파일로 준비한 내용을 읽어 사용합니다</p>
<p><%=msg%></p>

header.js코드 : 

<!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><%=title%></title>
</head>
<body>
    <header><%=title%></header>
    <div>
        <p>
            <%-content%>
        </p>
    </div>
</body>
</html>

<%= 로 넘기면 < , > 를 &lt , &gt로 넘겨준다. 

<%- 로 넘기면 우리가 쓴 코드 그대로 넘겨준다. 

'Node' 카테고리의 다른 글

cookie-parser모듈  (0) 2022.07.04
JSON.parse와 JSON.stringify  (0) 2022.07.04
미들웨어에 대해 알아보기  (0) 2022.07.03
이미지나 음악파일을 보여지게하기(fs.readFile)  (0) 2022.07.03
try catch finally를 이용한 예외처리  (0) 2022.07.03

관련글

티스토리툴바