뷰 템플릿 적용하기 8장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03 ○ 본 강의 자료는 이지스퍼블리싱에서 제공하는 강의 교안입니다. ○ 본 강의 교안은 아래 출판 서적의 내용을 기준으로 구성되었습니다. 또한 다수의 기타 서적이나 사이트를 참조하였습니다. 레퍼런스를 참조하십시오. 2017, 정재곤, “Do it! Node.js 프로그래밍 (개정판)”, 이지스퍼블리싱 - 강의 교안에 사용된 화면 캡처나 실습 자료의 경우에는 문서 업데이트에 따라 변경될 수 있습니다.
응답 웹문서를 템플레이트로 미리 만들어둘 수 있을까? 강의 주제 및 목차 강의 주제 응답 웹문서를 템플레이트로 미리 만들어둘 수 있을까? 목 차 1 ejs 뷰 템플릿 사용하기 2 pug 뷰 템플릿 사용하기
1. ejs 뷰 템플릿 사용하기 난이도 소요시간 20분
뷰 템플릿이란? 응답 웹문서를 미리 뷰 템플레이트로 만들어두고 응답 웹문서를 만들 때 데이터와 템플레이트를 결합하여 만드는 방식 사용
ejs 뷰 템플레이트 사용 익스프레스에서 뷰 엔진을 ejs로 설정 app.set('views', __dirname + '/views'); app.set('view engine', 'ejs'); // 원래의 응답 코드 res.writeHead('200', {'Content-Type' : 'text/html; charset = utf8'}); res.write('<h1>로그인 성공</h1>'); res.write('<div><p>사용자 아이디 : ' + paramId + '</p></div>'); res.write('<div><p>사용자 이름 : ' + username + '</p></div>'); res.write("<br><br><a href = '/public/login.html'>다시 로그인하기</a>"); res.end();
뷰 템플레이트 파일 생성 views 폴더 안에 login_success.ejs 파일 생성 HTML 파일과 동일하나 변수 설정 부분만 다름 <!DOCTYPE html> <html> <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>
응답 데이터를 뷰 템플레이트를 이용해 생성 app 객체의 render() 메소드를 호출하여 뷰 템플레이트로부터 응답 데이터 생성 가능 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) { 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);
뷰 엔진이 응답 데이터를 만들어내는 과정 ejs 파일을 템플레이트로 하고 데이터를 설정한 후 응답 데이터를 만들어 냄 % npm install ejs --save
응답 데이터 생성 과정 확인 웹페이지에서 요청 후 콘솔 확인 ▶ http : //localhost:3000/public/login.html
뷰 템플릿으로 사용자 리스트 응답 생성 원래 응답 코드 var listuser = function(req, res) { ……. database.UserModel.findAll(function(err, results) { res.writeHead('200', {'Content-Type' : 'text/html;charset = utf8'}); res.write('<h2>사용자 리스트</h2>'); res.write('<div><ul>'); for (var i = 0; i < results.length; i++) { var curId = results[i]._doc.id; var curName = results[i]._doc.name; res.write(' <li>#' + i + ' : ' + curId + ', ' + curName + '</li>'); } res.write('</ul></div>'); res.end();
listuser.ejs 파일 생성 여러 데이터를 배열로 받아 응답 데이터 만드는 템플레이트 파일 생성 <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>
응답 데이터 생성 코드 listuser.ejs 템플레이트를 이용해 응답 데이터 생성 res.writeHead('200', {'Content-Type' : 'text/html;charset = utf8'}); // 뷰 템플릿을 이용하여 렌더링한 후 전송 var context = {results : results}; req.app.render('listuser', context, function(err, html) { if (err) { ….. } console.log('rendered : ' + html); res.end(html); });
사용자 추가를 위한 뷰 템플레이트 만들기 공통 부분을 별도의 ejs 파일로 분리하여 만들 수 있음 원래의 adduser.ejs 파일 <!DOCTYPE html> <html> <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>
Header와 Footer를 위한 템플레이트 파일 생성 상단 공통 부분은 header.ejs, 하단 공통 부분은 footer.ejs 템플레이트로 만듦 <head> <meta charset = "UTF-8"> <title>헤드 부분 - ejs에서 include됨</title> </head> <br><br><a href = '/public/login.html'>로그인으로 - ejs에서 include됨</a> <!DOCTYPE html> <html> <% include ./head.ejs %> <body> <h2><% = title %></h2> <% include ./footer.ejs %> </body> </html>
응답 데이터 생성 코드 adduser.ejs 템플레이트를 이용해 응답 생성 res.writeHead('200', {'Content-Type' : 'text/html;charset = utf8'}); // 뷰 템플릿으로 렌더링한 후 전송 var context = {title : '사용자 추가 성공'}; req.app.render('adduser', context, function(err, html) { if (err) { ….. } res.end(html); });
2. pug 뷰 템플릿 사용하기 난이도 소요시간 20분
pug 뷰 템플레이트 사용하기 예전 이름은 jade 였음 최대한 간단한 형태로 입력하므로 공백과 들여쓰기를 기준으로 태그의 구조가 결정됨 들여쓰기를 잘못하면 문제 발생함 모듈 설치하고 뷰 엔진 설정 필요 app.set('views', __dirname + '/views'); app.set('view engine', ‘pug');
Pug 템플레이트 만들기 test1_success.pug 파일 생성 공백을 두 개 사용하여 들여쓰기 함 doctype html head title "성공" body block content #container p "조회에 성공했습니다."
클라이언트 요청 처리 함수 test1_success.pug를 이용해 응답 문서를 만드는 코드 추가 var test1 = function(req, res) { console.log('test 모듈 안에 있는 test1 호출됨.'); res.writeHead('200', {'Content-Type' : 'text/html;charset = utf8'}); // 뷰 템플릿을 이용하여 렌더링한 후 전송 var context = {}; req.app.render('test1_success', context, function(err, html) { if (err) { ….. } console.log('rendered : ' + html); res.end(html); }); }; module.exports.test1 = test1;
설정에 추가하고 웹페이지도 생성 config.js 파일에 새로 만든 라우팅 함수 추가 웹페이지 작성 ▶ http://localhost:3000/public/test1.html config.js 파일에 새로 만든 라우팅 함수 추가 route_info : [ ……. ,{file : './test', path : '/process/test1', method : 'test1', type : 'post'} ] 웹페이지 작성 <h3>Pug 테스트 1</h3> <p>아래 [조회] 버튼을 누르세요.</p> <br> <form id = "form1" method = "post" action = "/process/test1"> <input type = "submit" value = "조회" name = "" /> </form>
응답으로 받은 웹문서의 소스 구조 각 태그를 일대일로 매칭할 수 있음 % npm install pug-cli --global % pug test1_success.pug --pretty
Pug 템플레이트로 로그인 응답하기 login_success.pug 파일 생성 명령어로 미리 오류확인 가능 % pug login_success.pug --pretty doctype html html head meta(charset = 'utf8') title 로그인 성공 페이지 body h1 로그인 성공 div p 사용자 아이디 : #{userid} p 사용자 이름 : #{username} br a(href = '/public/login.html') 다시 로그인하기
템플레이트에서 응답 데이터 생성 app 객체의 render() 메소드 사용 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) { ….. } console.log('rendered : ' + html); res.end(html); }); …….
pug로 응답 문서를 만드는 과정 뷰 엔진이 템플레이트와 데이터를 사용해 생성함
사용자 리스트를 위한 템플레이트 만들기 listuser.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 a(href = '/public/listuser.html') 다시 요청하기
뷰 템플릿으로 응답 문서 생성하는 코드 추가 user.js 파일의 코드 수정 res.writeHead('200', {'Content-Type' : 'text/html;charset = utf8'}); // 뷰 템플릿으로 렌더링한 후 전송 var context = {results : results}; req.app.render('listuser', context, function(err, html) { res.end(html); });
사용자 추가를 위한 템플레이트 만들기 공통 부분을 layout.pug 라는 별도 파일로 만든 후 adduser.pug에서 상속하도록 만듦 doctype html html head meta(charset = 'utf8') title extends로 상속함 script(src = '/public/jquery-2.1.4.min.js') body block content include ./footer.jade
footer.pug와 adduser.pug 파일 생성 필요한 두 개의 파일 추가함 div#footer a(href = '/public/login.html') 로그인으로 - pug에서 include됨 extends layout block content h2 #{title}
Pug에서 extends와 include 사용
뷰 템플릿으로 응답 문서 생성하는 코드 추가 user.js 파일의 코드 수정 res.writeHead('200', {'Content-Type' : 'text/html;charset = utf8'}); // 뷰 템플릿으로 렌더링한 후 전송 var context = {title : '사용자 추가 성공'}; req.app.render('adduser', context, function(err, html) { if(err) {throw err;} res.end(html); });
참고 문헌 [ References] 기본 서적 2017, 정재곤, “Do it! Node.js 프로그래밍 (개정판)”, 이지스퍼블리싱 Node.js Site http://nodejs.org/