Doit! - 뷰 템플릿 적용하기

자바스크립트 코드 안에 응답 문자열을 입력하는 것보다 응답 웹문서를 별도 파일로 만들어 사용하는 것이 더 좋다.

08-1 ejs 뷰 템플릿 사용하기

뷰 템플릿을 사용하면 웹 문서의 기본 형태는 뷰 템플릿으로 만들고 데이터베이스에서 조회한 데이터를 이 템플릿 안의 적당한 위치에 넣어 웹 문서를 만들게된다. 이렇게 뷰 템플릿을 사용해 결과 웹 문서를 자동으로 생성한 후 응답을 보내는 역할을 하는 것이 View Engine이다.

뷰 템플릿으로 로그인 웹 문서 만들기

//뷰 엔진 설정
app.set('views',__dirname+'/views');
app.set('view enginge','ejs');
console.log('뷰 엔진이 ejs로 설정되었습니다.');

set()은 속성을 설정하는 역할을 한다.

//login_success.ejs
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>로그인 성공 페이지</title>
</head>
<body>
    <h1>로그인 성공</h1>
    <div><p>사용자 아이디 : <% = userid %> </p></div>
    <div><p>사용자 이름 : <% = username %> </p></div>
    <br><br><a href="/public/login.html">다시 로그인하기</a>
</body>
</html>

    res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
    var context = {userid:paramId, username:paramName};
    req.app.render('login_success',context,function(err,html){
        if (err) {
            console.log('뷰 렌더링 중 오류 발생'+err.stack);

            res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
            res.write('<h1>뷰 렌더링 중 오류 발생</h1>');
            res.write('<p>' + err.stack+'</p>');
            res.end();

            return;
        }
        console.log('rendered: '+html);

        res.end(html);
    });

render()메소드를 호출하면 뷰 엔진이 템플릿 파일을 읽어 들인 후 파라미터로 전달한 context객체의 속성으로 들어 있는 값들을 적용하고 그 결과를 콜백함수로 돌려준다.

뷰 템플릿으로 사용자 리스트 웹 문서 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>사용자 리스트 페이지</title>
</head>
<body>
    <h2>사용자 리스트</h2>
    <div>
        <ul>
            <% for(var i=0;i<results.length;i++){
                var curId = results[i]._doc.id;
                var curName = results[i]._doc.name;%>
                <li>#<%= i %>-아이디 <%=curId%>,이름: <%=curName%></li>
            <%}%>
        </ul>
    </div>
    <br><br><a href="/public/listuser.html">다시 요청하기</a>
</body>
</html>

res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
// 뷰 템플릿을 이용하여 렌더링한 후 전송
var context = {results : results};
req.app.render('listuser',context,function(err,html){
    if(err){throw err;}
    res.end(html);
});

뷰 템플릿으로 사용자 추가 웹 문서 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>헤드 부분 - ejs에서 include된다.</title>
</head>
<body>
    <h2><%=title%></h2>
    <br><br><a href="/public/login.html">로그인으로 - ejs에서 include됨</a>
</body>
</html>

res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
//뷰 템플릿으로 렌더링한 후 전송
var context = {title:'사용자 추가 성공'};
req.app.render('adduser',context,function(err,html){
    if(err){
        console.log('뷰 렌더링 중 오류 발생'+err.stack);
        res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
        res.write('<h2>뷰 렌더링 중 오류 발생</h2>');
        res.write('<p>' + err.stack + '</p>');
        res.end();

        return;
    }
    console.log('rendered:'+html);
    res.end(html);
});

08-2 pug 뷰 템플릿 사용하기

pug포맷은 웹 문서의 태그를 그대로 사용하지 않고 최대한 간단한 형태로 입력하기 때문에 공백,들여쓰기를 기준으로 태그의 구조가 결정된다.

[pugjs.org]

//뷰 템플릿 설정
app.set('views',__dirname+'/views');
app.set('view engine','pug');

pug로 HTML문서 만들기

pug는 공백을 두 개사용하여 들여쓰기를 한다.

pug 템플릿으로 로그인 웹 문서 만들기

doctype html
html
  head
      meta(charset='utf8')
      title 로그인 성공 페이지
  body
      h1 로그인 성공
      div
        p 사용자 아이디 : #{userid}
      div
        p 사용자 이름 : #{username}
      br
      br
      a(href = '/public/login.html') 다시 로그인하기

res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});

//뷰 템플릿으로 렌더링한 후 전송
var context = {userid: paramId,username:username};
req.app.render('login_success',context,function(err,html){
    if(err){throw err;}
    console.log('rendered : '+html);

    res.end(html);
});

pug 템플릿으로 사용자 리스트 웹 문서 만들기

doctype html
html
  head
    meta(charset='utf8')
    title 사용자 리스트 페이지
  body
    h1 사용자 리스트
    div
      ul
        - for (var i=0;i<results.length;i++){
        -  var curId = results[i]._doc.id;
        -  var curName = results[i]._doc.name;
          li #{i} - 아이디 : #{curId},이름 #{curName}
        - }
    br
    br
    a(href = '/public/listuser.html') 다시 요청하기

//뷰 템플릿으로 렌더링한 후 전송
var context = {results : results};
req.app.render('listuser',context,function(err,html){
    if(err){
        console.error('뷰 렌더링 중 오류 발생'+err.stack);

        res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
        res.write('<h2>뷰 렌더링 중 에러 발생</h2>');
        res.write('<p>' + err.stack + '</p>');
        res.end();

        return;
    }
    console.log('rendered : '+html);

    res.end(html);
});

pug 템플릿으로 사용자 추가 웹 문서 만들기

doctype html
html
  head
    meta(charset='utf8')
    title extends로 상속함
    script(src = 'public/jquery-2.1.4.min.js')
  body
    block content
    include ./footer.pug

block코드는 이 파일을 상속받는 파일에서 이 부분을 대체할 수 있다는 것이다.
include는 다른 pug템플릿 파일을 읽어와서 코드를 붙여준다.
```
div#fotter
a(href='/public/login.html') 로그인으로 - pug include됨
```

extends layout

block content
  h2 #{title}

if (addedUser) {
    console.dir(addedUser);

    res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});

    // 뷰 템플릿으로 렌더링한 후 전송
    var context = {title : '사용자 추가 성공'};
    req.app.render('adduser',context,function(err,html){
        if(err){
            console.error('뷰 렌더링 중 오류 발생'+err.stack);

            res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
            res.write('<h2>뷰 렌더링 중 에러 발생</h2>');
            res.write('<p>' + err.stack + '</p>');
            res.end();

            return;
        }
        console.log('rendered : '+html);

        res.end(html);
    });
}

PreviousDoit! - 익스프레스 프로젝트를 모듈화하기 NextDoit! - 패스포트로 사용자 인증하기

Last updated 3 years ago