템플릿을 더욱 템플릿 답게 - ejs
템플릿을 사전에서 검색해보면, 형판, 견본, 본보기 등의 단어라고 나온다.
확실히, PPT 작업을 위해 미리 제작된 견본이나,
웹 사이트를 만들때 제공되는 레이아웃 등을 템플릿 이라고 부른다.
(구글이나 네이버에 PPT, 웹 템플릿을 검색해보면 예가 나온다.)
웹 프로그래밍에서 템플릿이란
큰 틀에서는 웹사이트 전체의 레이 아웃과 디자인일 수도 있지만
작은 범위에서는 컴포넌트 단위의 미리 제작된 틀을 의미 한다.
예를 들어 네이버 메인 하단의 카테고리들은
상단의 탭을 클릭하면 같은 형식으로 내용만 바뀌게 된다.
이러한 구조 자체를 미리 제작된 '템플릿' 이라고 부르는 것이다.
클라이언트 부분에서는 이러한 구조를 매번 입력하거나 바꿔 줄수 없으므로
script 타입을 템플릿으로 만들어 안의 내용을 바꾸기위해 replace를 사용 하거나
handlebar를 이용해 템플릿을 구현한다.
클라이언트 뿐만 아니라 서버에서도 이러한 템플릿이 제공되는데,
클라이언트의 요청을 받아서 서버에서 랜더링 해준 후 다시 클라이언트로 HTML 형식을 보내주게된다.
대표적으로 ejs나 jade가 있다.
그렇다면 예제를 통해 템플릿을 사용하는 법에 대해 알아보자
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test page</title> </head> <body> <h1>Hello world!<h1> <div class="result"></div> <button class="ajaxsend">ajax send</button> </body> <script src="main.js"></script> </html> | cs |
우선 HTML파일을 생성한다.
큰 기능은 없고 템플릿이 들어갈 result div 태그와 ajax 요청을 할 버튼 하나를 만들어준다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | document.querySelector('.ajaxsend').addEventListener("click",function(){ sendAjax('http://localhost:3000/'); }) function sendAjax(url){ var oReq = new XMLHttpRequest(); oReq.open('POST', url); oReq.setRequestHeader('Content-Type', "application/json") oReq.send(); oReq.addEventListener('load', function(){ var result = oReq.responseText; console.log(oReq.responseText) document.querySelector('.result').innerHTML = result }) } | cs |
다음으로 자바스크립트 코드이다.
간단하게 버튼을 클릭하면 Ajax를 요청하는 이벤트를 등록한다.
또한 Ajax로 부터 들어온 HTML 데이터를 화면에 랜더링 시켜주도록 하자.
1 2 3 4 5 | <div> <p><%=txt1%></p> <p><%=txt2%></p> </div> | cs |
그 후 ejs 템플릿 코드를 작성한다.
여기서 중요한점은 html로 시작되는 전체 코드를 작성 하지 않는 다는 점이다.
필요에 의해서 그럴수는 있지만, 템플릿이라는 이름에 맞게
부분적인 코드만 사용하는 것을 지향하는 바이다.
ejs는 <%=>문법을 사용하며, 이는 jsp와 동일하다.
render 함수를 통해 인자로 들어온 값들이 여기에 랜더링 된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | var express = require('express'); var app = express(); app.set('view engine', 'ejs'); app.set('views', './views'); app.use(express.static('public')); app.get('/',function(req,res){ res.sendFile(__dirname + '/public/main.html'); }) app.post('/',function(req,res){ res.render('template',{txt1:"hi",txt2:"welcome"}) }) app.listen(3000, function(){ console.log("Start server on port 3000"); }) | cs |
마지막으로 서버쪽 코드이다.
app.set으로 템플릿 엔진과 템플릿 경로를 지정해준다.
ajax로 post요청이 들어오면 랜더링된 HTML 코드를 보내주는 간단한 코드이다.
실제로, 테스트를 해본 결과
버튼을 누르면 가운데 div 태그에 우리가 요청한 템플릿 값이 들어오는걸 볼 수있다.
또한, 템플릿의 값이 상황에 따라 바뀌면서, 코드는 줄어드니 상당히 강력한 기능이다.
이와같이 ajax 요청을 통해 부분으로 페이지를 바꾸어주면 훨씬 동적으로 보인다.
예제를 제외하고 템플릿으로 전체 페이지를 로드하는 일은 없도록 하자.
(여담으로, 클라이언트 랜더링과 서버 랜더링의 장단점은 있겠으나
무엇이 낫다고 명확하게 말하기는 어렵다.
들리는 바에 의하면 서버 사이드 랜더링이 조금 더 빠르다고는 하나 확실치 않다.
더 많은 공부가 필요한 것 같다.)
'개발' 카테고리의 다른 글
| [CSS] 백그라운드 이미지 위에 글씨 배치 - 응용 (1) | 2017.05.01 |
|---|---|
| [CSS] 백그라운드 이미지 위에 글씨 배치 (3) | 2017.05.01 |
| [꿀팁] mac - 특정 포트를 사용중인 프로세스 확인/종료 (8) | 2017.04.23 |
| [Javascript] 비동기(asynchronous) 방식의 동작 원리 (2) | 2017.04.22 |
| [Web] modal pop-up 만들기 (7) | 2017.04.21 |
댓글