190209 TIL HTML templating

Feb 9, 2019 » 1막, TIL (Today I Learned)

HTML templating

HTML templating 작업이란 반복적인 HTML 부분을 template으로 만들어두고 서버에서 온 데이터(주로 JSON)을 결합해서 화면에 추가하는 작업 (크롱 강의 내용)

var data = {  title : "hello",
              content : "lorem dkfief",
              price : 2000
           };
var html = "<li><h4>{title}</h4><p>{content}</p><div>{price}</div></li>";

html.replace("{title}", data.title)
    .replace("{content}", data.content)
    .replace("{price}", data.price)

이렇게 ‘간단히’ 구현하면 된다고 크롱께서 적어두셨지만, 간단히 할 수 없는 모자란 제자는 추가 강의를 찾아다녔고, 아래 좋은 영상을 찾았다.

영상 경로

그리고 아래처럼 실습함

See the Pen Template Literals (Follow Along) by developersoom (@developersoom) on CodePen.