<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="test.css">
<script src="data.js"></script>
</head>
<body>
<section>
<div>{company_name}</div>
</section>
</body>
</html>var company_data = {
"{company_name}" : "SOME COMPANY",
};
document.querySelector("div").innerHTML = company_data["{company_name}"];{company_name}를 화면에 렌더링하는 것 외에는 아무 것도 수행하지 않습니다.
대신 {company_name} 플레이스 홀더를 JavaScript 파일의 데이터로 대체하여 일부를 화면으로 렌더링해야합니다.
재사용 할 수 없죠.
이 시점에서 그가 바라는 바는 이런 종류의 템플릿이 자동으로 발생한다는 것입니다.
HTML의 내용과 일치하는 키를 객체에 제공하면 해당 HTML의 내용이 자동으로 교체됩니다.
원시 웹 기술에서는 그렇게 작동하지 않습니다.
여러가지 방법들이 있습니다.
- Handlebars or Mustache 사용하기
- <template>
- Web Component
- Nunjucks
- Pug
일반적으로 서버 측 또는 빌드 중에 템플릿을 작성하는 것이 이상적이라고 말하고 싶습니다.
그러나 그 조언을 잠시 무시하기 위해, 핸들바를 사용하여 클라이언트 측에서 수행하는 예는 다음과 같습니다.
출처 : https://css-tricks.com/what-ya-need-there-is-a-bit-of-templating/
'HTML' 카테고리의 다른 글
| strong 태그와 em 태그의 차이 (0) | 2021.06.27 |
|---|---|
| 당신이 모르는 유용한 HTML5 기능 4 가지 (0) | 2021.01.30 |
| 닫기 이벤트 버튼에 대하여.. button vs a (0) | 2020.05.31 |
| <blockquote>, <q>, <cite> 올바르게 사용하기 (0) | 2020.03.15 |
| HTML5 <PICTURE> 태그 (0) | 2019.10.17 |
댓글