강의13 - kyagrd/htmlcss2018spring GitHub Wiki

2018-04-17

과제 해설 및 질문 시간

실습 전에 과제에 대해 공지하고 질문받는 시간을 갖는다.

클라이언트 사이드 템플릿 실습

지난번 실습에서 underscore.js 라이브러리로 템플릿을 서버 사이드에서 활용하는 법에 대해 아주 간략하게 다뤘다. 오늘 실습에서는 똑같은 라이브러리를 클라이언트 사이드 템플릿으로 활용하는 것을 실습해 본다.

지금까지 주로 쓰던 방식

<html>
<head>
 <meta charset='UTF-8'>
</head>
<body>
<script id='template' style='text/template'>
 <h1>
  안녕하세요 제 이름은 <%=name%>입니다.
 </h1>
</script>

<div id='templateTarget'></div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js'></script>
<script>
var tplContent = document.querySelector('#template').textContent;
var tpl = _.template(tplContent);
var tplTarget = document.querySelector('#templateTarget');
tplTarget.innerHTML = tpl({name:'안기영'});
</script>
</body>

https://codepen.io/kyagrd/pen/JvPPxQ

underscore 말고 다른 더 다양한 템플릿 기능을 제공하는 라이브러리들도 기본적으로는 대략 저런 방식으로 클라이언트 사이드에서 활용.

HTML5에 새로 추가된 태그 중에 <template>이 있다

참고자료

장점은 템플릿 안에 있는 태그들이 활성화되지는 않았지만 태그 매칭 등 기본적인 문법검사를 브라우저 등에서 지원해 줄 수 있다는 점 즉 string을 치환하는 것이 아니라 DOM레벨에서 바로 작업 가능하다. 다만 이게 최근에 나와서 이걸 기반으로 한 편리한 템플릿 라이브러리가 얼마나 많이 나와있는지 잘 모르겠다.

지난시간에 했던 실습을 RunKit으로 다시

RunKit은 node.js 프로토타이핑 툴이다. (지금까지 여러 번 썼던 CodePen은 클라이언트 사이드 프로토타이핑 용도) 중간고사 이후 서버 사이드 과제는 이걸로 제출하도록 하는 방식을 고려하고 있다.

https://github.com/kyagrd/web0410 저장소의 index.js 소스코드를 Atom 에디터 대신에 RunKit 노트북에 붙여넣고 endpoint로 실행해 보자.

이렇게 endpoint로 실행했을 때 나오는 ********.runkit.sh 형태의 주소가 사람마다 다르기 때문에 매번 거기에 맞게 저장소의 getpost.html를 매번 수정해서 서버로 요청을 보내야 하는 것은 너무 귀찮다. (자기 거 말고 친구들이 작성한 서버에 html에서 요청을 넣어서 테스트해보고 싶다거나, 아니면 여러명의 것을 받아서 테스트하며 채점해야 하는 입장일 때를 생각해 보라.)

getpost.html에 클라이언트 사이드 템플릿을 적용해 주소를 입력해서 어떤 버튼을 누르면 폼들이 생성되게 해보자.

⚠️ **GitHub.com Fallback** ⚠️