요즘이야 프론트엔드 개발 프레임워크가 워낙 잘 되어 있어서 이런 종류의 고민을 할 필요가 거의 없지만, 지금의 나처럼 빠른 시간 안에 MVP를 개발해야 하고, 프론트엔드 프레임워크를 따로 공부할 시간이 없을 경우 Mustache와 HTML template 엘리먼트를 이용한 데이터 바인딩을 유용한 방법이 아닐까 한다.
여러분이 AJAX를 이용해 데이터를 서버에 전송하고, 이를 화면 Refresh 없이 엘리먼트에 추가한다면 어떻게 할 것인가? Vue, React, Angular, KnockOut 등등 모든 프론트엔드 프레임워크는 View-Model 방식이라 자바스크립트의 Array에 서버로 부터 리턴 받은 JSON을 push만 해주면 자연스럽게 비즈니스 요구 사항을 맞출 수 있다 .하지만, 나처럼 프론트엔드 개발에 잼병이라면? 대부분 JQuery ajax를 통해 POST로 서버에 보내고, 리턴 받은 JSON을 파싱해서 HTML 엘리먼트를 만든 후 append 방식으로 붙여 넣고 있을 것이다.
$.ajax({
type: "POST",
url: "http://example.com",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({"postId": 12345}),
dataType: "json"
}).done(function (result) {
var ele = "<div class='comment-item'><div id='" + result + "'><div>" + reslut.data + "</div></div>");
$("#target").append(ele);
});여러분의 코드와 흡사한가? 그렇다면 잘못된 것이다. 이 부분은 ajax지만, 상단에는 comment-item 클래스를 가진 리스트를 뿌려주는 loop 문이 분명 존재할 것이고, 그 안에는 자신만의 HTML 엘리먼트들이 존재할 것이다. 만약, 위의 엘리먼트가 디자이너에 의해 많이 변경된다면? 물론 상단의 loop도 고쳐야 하고, done function에서도 HTML 엘리먼트를 모두 고쳐야 한다. 특히 done function은 string으로 작성된 부분이라, IDE에서 태그들이 well-formed 되었는지 확인하기도 어렵고 따옴표 실수로 화면도 쉽게 깨질 수 있다. 여러분은 이런 이유에서 화면이 깨진적이 있지 않은가? 100% 있을 것이다. 나도 많이 그랬으니까.
그렇다면 어떻게 하면 이러한 문제를 해결할 수 있을까? 바로 <template> 엘리먼트와 Mustache.js 라이브러리를 이용하여 이러한 문제를 쉽게 해결할 수 있다. Mustache는 템플릿 엔진으로 아래 링크에서 확인할 수 있다.
https://github.com/janl/mustache.js/
GitHub - janl/mustache.js: Minimal templating with {{mustaches}} in JavaScript
Minimal templating with {{mustaches}} in JavaScript - GitHub - janl/mustache.js: Minimal templating with {{mustaches}} in JavaScript
github.com
자, 그럼 코드를 고쳐 보도록 하자.
<body>
// template 엘리먼트는 HTML 표준 태그이나, 브라우저 화면에는 보이지 않는다.
// 아래와 같이 바인딩 시켜주고 싶은 데이터를 {{ }}로 감싸 주기만 하면 된다.
// 브라우저는 HTML 파을 위에서 아래로 쭉 읽으니 반드시 상단에 위치해야 한다.
<template id="comment-template">
<div id="{{Id}}">
<p>{{User}}</p>
<div>{{Body}}</div>
<div>{{CreatedAt}}</div>
<button class="btn-primary btn btn-sm" data-comment-id="{{Id}}">답글</button>
</div>
<hr />
</template>
// Mustcahe가 호출 되기 전에 import되어야 한다.
// body 하단에 있으면 Mustache.render에서 에러 발생
<script src="https://cdn.jsdelivr.net/npm/mustache@4.2.0/mustache.min.js"></script>
// 컨트롤러에서 넘어온 모델 데이터를 직접 바인딩 시킬 수 있다.
@foreach (var comment in Modle.Comments)
{
<div class="comment-list">
<div class="comment-item">
<script>
var template = document.getElementById("comment-template").innerHTML;
var rendered = Mustache.render(template, "comment JSON Model");
document.write(rendered);
</script>
</div>
</div>
}
<script>
$.ajax({
type: "POST",
url: "http://example.com",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({"postId": 12345}),
dataType: "json"
}).done(function (result) {
var template = document.getElementById("comment-template").innerHTML;
// result는 Id, User, CreatedAt 등 object를 가진 Json
var rendered = Mustache.render(template, result);
document.getElementById("target).append(rendered);
});
</script>
</body>이런 식으로 Mustache와 HTML template을 이용하면, 깔끔하게 만들 수 있다. 수정 사항이 발생해도 template 부분만 고치면 되고 또한 IDE에서 HTML 태그 에러도 미리 잡을 수 있기 때문에 확실히 편해진다.
사실 이런 방식은 구시대 방식이지만, 프론트엔드 공부하기가 너무 귀찮아서, 내가 할 수 있는 방식 중 가장 빠르고 효율적인 방식을 찾다보니 이렇게 렌더링 하기는 것이 가장 버그가 적더라. 그나저나 언젠가는 나도 프론트엔드를 좀 만질 줄 알아야 하는데, 이쪽은 워낙 변화 무쌍하다보니 다가서기가 힘드네.
'개발 이야기' 카테고리의 다른 글
| [워드프레스] 나만의 shortcode를 만들어 보자 (7) | 2024.09.25 |
|---|---|
| [워드프레스] Astra 자식 테마 만들기 (0) | 2024.09.25 |
| AWS 스탠다드 SQS를 FIFO SQS처럼 사용하기 (0) | 2023.03.17 |
| 아주 괜찮은 WYSIWYG 에디터 (0) | 2023.03.06 |
| Entity Framework Persistent API 오픈소스 (1) | 2023.02.26 |
최근댓글