들어가기 전에

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

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

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

학습 목표

1. HTML Templating 이 무엇이고, 어떻게 구현해야 하는지 이해합니다.

핵심 개념

• HTML Templating 이란?
• String의 replace
  

학습하기

결합과정 해결하기

이제 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)

replace는 메서드 체이닝 방식으로 호출하면서 풀이를 할 수 있습니다. 

여러분들도 이 코드를 꼭 실습해보세요! 

생각해보기

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

참고 자료