들어가기 전에

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

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

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

학습 목표

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

핵심 개념

• HTML Templating 이란?
• String의 replace
  

학습하기

HTML Templating

아래 화면에 데이터를 Ajax로 받아와서 화면에 추가해야 한다고 생각해봅니다.

JSON 형태의 데이터를 받을 것이고요.

아래 리스트들의 내용은 모두 다 비슷합니다.

list 태그로 html을 구현해보면 사진, 가격, 이름, 별점, 추가정보(있거나 없거나)를 비슷한 tag를 사용해서 표현하면 됩니다.

여기서 templating 이라는 개념을 도입하면 좋습니다.

HTML Templating 작업이란?

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

아래 그림이 이해가 될 겁니다.

참고 자료