5. WEB UI - FE (4)

4) HTML templating

서버로부터 받은 데이터를 화면에 반영해야 하는 경우가 많이 있습니다.

그런데 HTML 형태는 그대로이고, 데이터만 변경이 되는 경우가 있을 텐데요.

이럴 때는 어떻게 처리하는 게 효율적인지 알아봅니다.

HTML Templating

• 댓글 또는 상품과 같은 아래 화면에 데이터를 Ajax로 받아와서 화면에 추가해야 한다고 생각해봅시다.
• 데이터는 JSON 형태의 데이터입니다.
• 아래 리스트들의 상품들은 HTML 구조, 즉, structure는 굉장히 비슷한데 데이터(사진, 가격, 이름, 별점 등)만 다른 것입니다. 
• 해당 상품 정보만 바꿔서 HTML에 추가하면 효율적으로 동작할 것 같습니다. 여기서 templating 이라는 개념을 도입하면 좋습니다.

HTML Templating 작업이란?

• 반복적인 HTML부분을 template(포맷, 양식)으로 만들어두고, 서버에서 온 데이터(주로JSON)을 결합해서, 화면에 동적으로 추가하는 작업이라고 할 수 있습니다.

결합과정 해결하기

• 이제 HTML template과 JSON을 결합하면 됩니다.
  간단히 이렇게 구현할 수 있습니다. 
• replace는 메서드 체이닝 방식으로 호출하면서 풀이를 할 수 있습니다. 

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)

 

생각해보기

• data가 배열형태로 여러개가 있다면 어떻게 처리할까요?
• 간단히 반복문을 쓸 수도 있고, forEach와 같은 메서드를 사용할 수도 있을 겁니다.
• 위 예제에서 다뤘던 data를 여러개 선언하고, HTML Templating작업을 실습해보세요. 

참고 자료

[참고링크] 라이브러리의 도움없이 templaing작업을 하는 방법
https://jonsuh.com/blog/javascript-templating-without-a-library/