at ABC Talk

1. 자바스크립트

2. 템플릿

3. 엔진
ABC

4. Talk

5. /

6. Steve

7. Ahn

8. 오늘은.
-

9. 간단하게

10. 템플릿

11. 코드를

12. 만들어보면서,
-

13. 자바스크립트

14. 템플릿

15. 처리

16. 과정의

17. 큰

18. 그림을

19. 이해하고,
-

20. 상황에

21. 맞게,

22. 어떤

23. 템플릿

24. 엔진을

25. 선택할

26. 지,

29. 또는

30. 어떻게

31. 만들지에

32. 대해

33. 가이드하는

34. 게

35. 목표!
-

36. 각

37. 템플릿

38. 엔진의

39. 문법이나

40. 사용법은

41. 제외!

42. 우리가

43. 하려는

44. 것.
-

45. HTML

46. 조각을

47. 동적으로

48. 만들어서

49. 페이지에

50. 추가!
-

51. Ajax로

52. 요청해서

53. 데이터를

54. 가져오고,
-

55. JSON

56. 형태로

57. 데이터를

58. 받아서

59. 생성한다.
-

60. 그리고,

61. 최대한

62. 관리하기

63. 편하고

64. 빠르게~!

65. 그럼

66. 템플릿

67. 엔진은?
문자열

68. 치환!

70. div[

77. ]가

78. [

88. ]할

89. 때

90. 뽀뽀뽀~/div

102. who

109. when
특정

110. 형식을

111. 가진

112. 문자열을

113. 여러

114. 데이터로

115. 출력한다.

116. 만들어보자.
// 어떤 서버에서 데이터를 받아왔다고 가정하면,
requestAjax(function (data) {
// data = { who: ‘택배’, when: ‘도착’ };
// 데이터를 받아서 HTML 코드를 생성한 후에
// DOM에 추가하면 땡!
});

117. 일단은

118. 간단하게!
// 어떤 서버에서 데이터를 받아왔다고 가정하면,
requestAjax(function (data) {
// data = { who: ‘택배’, when: ‘도착’ };
// 데이터를 받아서 HTML 코드를 생성한 후에
var result = getPpopo(data);
// DOM에 추가하면 땡!
$(‘#result’).html(result);
});
function getPpopo(data) {
return data.who + ‘가 ‘ + data.when + ‘할 때 뽀뽀뽀~’;
}

119. 템플릿

120. 종류가

121. 다양해진다면?
function getPpopo() { ... }
function getFoo() { ... }
function getBar() { ... }
...
function getBaz() { ... }
매번 문자열을 조립하려면 가독성도 떨어지고...

122. 공통

123. 함수를

124. 만들면

125. 깔끔할

126. 듯.
var tmplStr = ‘{who}가 {when}할 때 뽀뽀뽀~’;
var result = replaceTemplate(tmplStr, data);
$(‘#result’).html(result);
function replaceTemplate(tmplStr, data){
var result = tmplStr;
for (var key in data) [
result = result.replace(‘{‘ + key + ‘}’, data[key]);
}
return result;
}

127. 템플릿이

128. 많아진다면?
var tmplStr = ‘{who}가 {when}할 때 뽀뽀뽀~’;
var tmplFoo = ‘...’;
var tmplBar = ‘...’;
...
var tmplBaz = ‘...’;
실제 코드보다 템플릿이 더 많아지는 상황.
템플릿을 코드에서 분리하자!

129. DOM에

130. 넣어볼까?
[main.html]
script id=”ppopo” type=”text/x-template”
{who}가 {when}할 때 뽀뽀뽀~
/script
[main.js]
var tmplStr = loadTemplate(‘ppopo’);
var result = replacePpopo(tmplStr, data);
$(‘#result’).html(result);
function loadTemplate(id) {
return document.getElementById(id).innerHTML;
}

131. 스크립트

132. 태그인데?
-

133. 스크립트

134. 태그에

135. 알

136. 수

137. 없는

138. 타입을

139. 넣으면,
-

140. 브라우저가

141. 무시하고

142. 실행하지

143. 않음.
-

144. 스크린

145. 리더나

146. 검색

147. 엔진에서도

148. 무시함.
-

149. 적은

150. 양의

151. 템플릿을

152. 간편하게

153. 처리하고자

154. 할

155. 때

156. 유용함.

157. 더

158. 많아진다면?
script id=”ppopo” type=”text/x-template”
{who}가 {when}할 때 뽀뽀뽀~
/script
script id=”foo” type=”text/x-template”/script
script id=”bar” type=”text/x-template” /script
...
script id=”baz” type=”text/x-template” /script
페이지에 HTML 코드보다 템플릿 코드가 더 많은 상황.
파일로 분리하자!

159. 템플릿

160. 파일을

161. 불러오자.
[ppopo.tmpl]
{who}가 {when}할 때 뽀뽀뽀~
[main.js]
loadTemplate(‘ppopo.tmpl’, function (tmplStr) {
var result = replaceTemplate(tmplStr, data);
$(‘#result’).html(result);
});
function loadTemplate(filename, callback) {
requestAjax(filename, callback);
}
// 비동기이기 때문에 주의해야 함.

162. 템플릿이

163. 여러

164. 번

165. 요청한다면?
loadTemplate(‘ppopo.tmpl’, function () { ... });
loadTemplate(‘ppopo.tmpl’, function () { ... });
loadTemplate(‘ppopo.tmpl’, function () { ... });
Ajax로 템플릿을 가져오는 비용은 매우 크다.
DOM에서 가져오는 것도 마찬가지!

166. 한

167. 번

168. 가져온

169. 건

170. 캐시해두자!
var cache = {};
function loadTemplate(filename, callback) {
if (cache[filename]) {
callback(cache[filename]);
return;
}
requestAjax(filename, function (tmplStr) {
cache[filename] = tmplStr;
callback(tmplStr);
});
}
loadTemplate(‘ppopo.tmpl’); // 비동기 요청
loadTemplate(‘ppopo.tmpl’); // 캐시

171. 템플릿이

172. 여러

173. 개라면?
loadTemplate(‘ppopo.tmpl’);
loadTemplate(‘foo.tmpl’);
loadTemplate(‘bar.tmpl’);
...
loadTemplate(‘baz.tmpl’);
매 파일마다 비동기 요청이 발생한다.
템플릿 여러 개를 한 파일에 두면 어떨까?

174. 한

175. 파일에

176. 여러

177. 템플릿을

178. 두자.
[main.tmpl]
template id=”ppopo”
{who}가 {when}할 때 뽀뽀뽀~
/template
template id=”foo”/template
template id=”bar”/template
...
/template id=”baz”/template

179. 한

180. 파일에

181. 여러

182. 템플릿을

183. 두자.
[main.js]
var tmplMap;
function loadTemplate(filename, id, callback) {
if (tmplMap) {
callback(tmplMap[id]); // use cached
return;
}
requestAjax(filename, function (tmplList) {
tmplMap = parseTemplateList(tmplList);
callback(tmplMap[id]);
});
}
loadTemplate(‘main.tmpl’, ‘ppopo’, function (tmplStr) {
...
}

184. 템플릿이

185. 지금

186. 필요하지

187. 않은데?
지금은 아직 택배를 주문하기 전.
뽀뽀 문자열은 택배가 도착할 때나 필요한데,
미리 로드할 필요가 있을까?

188. 필요할

189. 때

190. 로드하자.
// 특정 버튼을 클릭할 때 로드한다.
ppopoButton.on(‘click’, function () {
loadTemplate(‘main.tmpl’, ‘ppopo’, function (tmplStr) {
...
});
});

191. 지금까지

192. 우리가

193. 만든

194. 것.
-

195. 문자열

196. 치환

197. 함수.
-

198. 코드에서

199. 템플릿

200. 분리.
-

201. 비동기로

202. 템플릿

203. 로딩

204. 및

205. 캐싱.
-

206. 필요한

207. 시점으로

208. 지연

209. 로딩.

210. 가만...
매번 문자열을 치환하고 있었는데...
function replaceTemplate(tmplStr, data) {
var result = tmplStr;
for (var key in data) {
result = result.replace(‘{‘ + key + ‘}’, data[key]);
}
return result;
}
치환 비용을 줄일 순 없을까?

211. 함수로

212. 만들어버리자.
// 템플릿을 함수로 만든다. (컴파일)
var compiledPpopo = compileTemplate(tmplStr);
// 이후로는 컴파일 한 함수를 호출
var result = compiledPpopo(data);
$(‘#result’).html(data);

213. 템플릿

214. 컴파일.
function compileTemplate(tmplStr) {
// 템플릿을 파싱해 아래 형태의 함수를 리턴한다.
// function (data) {
// return data.who + ‘가 ‘ + data.when + ‘ 할 때 뽀뽀뽀~’;
// }
return function (data) { ... }
}
매번 템플릿을 치환하는 비용을 줄일 수 있다.

215. 그럼

216. 아예

217. 미리

218. 컴파일하면?
빌드 과정에서 미리 컴파일한다.
프리 컴파일 결과로 함수 문자열을 생성해 내려주면,
클라이언트에서의 컴파일 비용을 줄일 수 있다.
[ ppopo.tmpl, foo.tmpl, bar.tmpl, ..., baz.tmpl ]
--(컴파일)-- tmpl.js

219. 템플릿

220. 프리

221. 컴파일.
[tmpl.js]
var template = {
ppopo: function (data) {
return data.who + ‘가 ‘ + data.when + ‘할 때 뽀뽀뽀~’;
},
foo: function (data) { ... },
bar: function (data) { ... },
...
baz: function (data) { ... }
};
[main.js]
var result = template.ppopo(data);
$(‘#result’).html(result);

222. 다

223. 만들었다!

224. 템플릿

225. 엔진.
-

226. 템플릿

227. 문법으로

228. 문자열

229. 치환
-

230. 별도의

231. 템플릿

232. 파일
-

233. 비동기

234. 로더

235. 제공
-

236. 클라이언트

237. 컴파일

238. 제공(to

239. 메모리)
-

240. 프리

241. 컴파일

242. 제공(to

243. 함수

244. 문자열)

245. 그

246. 외

247. 다른

248. 기능들
-

249. 템플릿

250. 내에서

251. 자바스크립트

252. 실행
-

253. 반복문,

254. 분기문

255. 등을

256. 템플릿

257. 문법으로

258. 제공
-

259. 템플릿

260. 내에

261. 다른

262. 템플릿을

263. 포함

264. (Partials)
-

265. 클라이언트와

266. 서버

267. 사이드

268. 언어를

269. 동시에

270. 지원

271. 템플릿

272. 엔진,

273. 어떤

274. 것들이

275. 있나?
MicroTemplate,

276. EJS,

277. Underscore

278. Template,
Mustache,

279. Handlebars,

280. Hogan.js,

281. dust.js,

282. Jade,

283. ...
이

284. 외에도

285. 되게

286. 많다...

287. 어떤

288. 걸

289. 선택해야

290. 할까?
-

291. 서버에서

292. 쓰나

293. 클라이언트에서

294. 쓰나?
-

295. 서버와

296. 클라이언트

297. 동시에

298. 사용할

299. 건가?
-

300. 템플릿

301. 내에서

302. 자바스크립트

303. 구문을

304. 실행할

305. 건가?
-

306. 템플릿

307. 내에

308. 로직을

309. 포함할

310. 건가?
-

311. http://garann.github.io/template-chooser/

312. 링크드인의

313. 리서치

314. 결과
-

315. 코드

316. 재사용이

317. 가능하고

318. 파샬을

319. 제공하나?
-

320. 다국어

321. 지원하나?
-

322. 비동기

323. 로드

324. 지원하나?
-

325. 배우기

326. 쉬운가?
-

327. 수정

328. 시

329. 바로

330. 확인할

331. 수

332. 있나?
-

333. 성능

334. 괜찮나?
-

335. 문서화

336. 잘

337. 되어

338. 있고,

339. 성숙한

340. 라이브러리인가?
-

341. 리서치

342. 결과

343. 링크

344. 링크드인의

345. 리서치

346. 결과
-

347. 최총

348. 선정:

349. Dust.js
-

350. 상위

351. 랭크:

354. Google

355. Closure

356. Template,

357. Mustache,

358. Handlebars
필요하다면,

359. 이

360. 템플릿들을

361. 먼저

362. 검토해보면

363. 좋을

364. 듯!

365. 우리

366. 팀에서는.
-

367. 성능이

368. 중요하다.
-

369. 프리

370. 컴파일

371. 할

372. 수

373. 있어야

374. 한다.
-

375. 템플릿

376. 내에

377. 로직은

378. 넣지

379. 않는다.
-

380. 전달

381. 인자가

382. 함수인

383. 경우

384. 실행

385. 가능해야

386. 한다.
-

387. 배우기

388. 쉬워야

389. 한다.
-

390. 동기적으로

391. 처리할

392. 수

393. 있어야

394. 한다.
--

395. Mustache

396. 선택

397. (프리컴파일은

398. Handlebars로

399. 수행)

400. Dust.js가

401. 1등이라면서?
dust.render(‘ppopo’,

402. function

403. (err,

404. out)

405. {

407. //

408. 비동기로

409. 처리
});
프리

410. 컴파일

411. 한

412. 상황이라면,
동기적으로

413. 사용하는

414. 게

415. 좋겠다고

416. 결정했기

417. 때문.

418. 선택

419. 가이드!
-

420. 프로젝트의

421. 규모나

422. 중요도를

423. 고려해

424. 선택한다.
-

425. 컴파일

426. 할

427. 수

428. 있다면,

429. 성능

430. 차이는

431. 크지

432. 않다.

434. (메모리로의

435. 컴파일과

436. 함수

437. 문자열로의

438. 컴파일

439. 혼돈

440. 주의)
-

441. 템플릿

442. 내

443. 로직이

444. 많아지면

445. 디버깅하기

446. 어렵다.

448. (자동

449. 생성된

450. 코드에서

451. 오류가

452. 발생한다면?)
-

453. 템플릿

454. 문법

455. 내의

456. 간단한

457. 분기나

458. 반복문은

459. 효율적이다.

460. 데모

461. 타임!
-

462. 팀에서

463. 사용하는

464. 템플릿

465. 코드

466. 예
-

467. 템플릿

468. 자동화

469. 예제

472. https://github.com/ohgyun/template-example

473. 끝!

474. 고맙습니다.