• 들어가기 전에 서버로부터 받은 데이터를 화면에 반영해야 하는 경우가 많이 있습니다. 그런데 HTML 형태는 그대로고, 데이터만 변경이 되는 경우가 있을 텐데요. 이럴 때는 어떻게 처리하는 게 효율적인지 알아봅니다.

---

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

• HTML Templating 이란?
• String의 replace

아래 화면에 데이터를 Ajax로 받아와서 화면에 추가해야 한다고 생각해봅니다. JSON 형태의 데이터를 받을 것이고요. 아래 리스트들의 내용은 모두 다 비슷합니다.list 태그로 html을 구현해보면 사진, 가격, 이름, 별점, 추가정보(있거나 없거나)를 비슷한 tag를 사용해서 표현하면 됩니다. 여기서 templating 이라는 개념을 도입하면 좋습니다.

반복적인 HTML부분을 template로 만들어두고, 서버에서 온 데이터(주로 JSON)을 결합해서, 화면에 추가하는 작업이라고 할 수 있습니다. 아래 그림이 이해가 될 겁니다.

이제 HTML Template과 JSON을 결합하면 됩니다. 간단히 이렇게 구현할 수 있습니다. `var data = { title : "hello", content : "lorem dkfief", price : 2000 }; var html = "

{title}

{content}

{price}

";

html.replace("{title}", data.title) .replace("{content}", data.content) .replace("{price}", data.price)` replace는 메서드 체이닝 방식으로 호출하면서 풀이를 할 수 있습니다. 여러분도 이 코드를 꼭 실습해보세요!

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