HTML Templating

• HTML Templating이란?

반복적인 HTML부분을 template로 만들어두고, 

서버에서 온 데이터(주로JSON)을 결합해서 화면에 추가하는 작업

상품의 이미지, 이름, 가격 등의 Data들을 서버에서 받아온 후 

웹 상의 정해진 틀에 맞게 Data를 보여주는 것

• 배열로 된 복수의 JSON Data를 가지고, 가로로 List객체 나열하기(for, forEach, Arrow)

템플릿 HTML(Data가 보여지는 틀)을 한줄의 문자열로 요소들을 나열하면, 가독성이 떨어져 세로로 정렬

(문자열들을 세로로 정렬할 경우 "+"기호로 연결해줘야 함)

배열의 형태로 복수개의 Object를 가지는 JSON data

(data[0].title >> Front-End)

배열로 된 JSON Data이므로 length로 갯수를 파악(size가 아님)

replace() 메소드로 템플릿 HTML의 내용을, JSON Data의 내용으로 바꿈

method 체이닝을 사용하지 않으면 이렇게 써줘야 함

                                                             resultHTML의 상태

 

바뀐 resultHTML을 원하는 위치에 .innerHTML로 추가

CSS 속성을 주지 않으면 세로로 Object들이 나열됨

템플릿 HTML을 감싸고 있는 ul 태그에 float : left 속성을 주어 Object가 가로로 나열되게 함

forEach 방식

Arrow Function 방식(  function(d) 를  (d)=> 로 바꿈)

결과

• HTML 템플릿의 보관

JS 코드내에 템블릿을 보관하는 것은 가독성 측면에서 좋지 않다.

 

대안

1. 서버에 file로 보관했다가, ajax로 불러온다
2. HTML코드안에 숨겨둔다(script 태그안에 보관한다)

script에 id(템플릿은 유일하므로)를 주고 JS와 분리하면 렌더링이나 동작에 영향을 주지않으면서 

템플릿 보관이 가능

사용할 때는 해당 Node를 지정하고, innerHTML로 불러와서(getter) 사용하면 됨

• Template literals 

백틱 ( ` )을 활용하여 replace() 메소드와 템플릿 HTML을 한번에 쓰는 방법

(브라우저에 따라 지원이 안될 수 있음)

data.forEach((d)=>{

            

            var   resultHTML = html.replace("{title}", d.title)

                                           .replace("{content}", d.content)

                                           .replace("{withs}", d.withs)

            here.innerHTML += resultHTML;

            

      });

템플릿을 따로 보관할 필요 없이 바로 쓰고, 문자열 replace를 ``과 ${}으로 대신함

 

• Tab UI 구현 참조