개발노트

JSP + Mustache.js + Ajax로 동적으로 데이터 렌더링하기

SoonNote 2025. 4. 15. 17:19
반응형

🔰 Mustache.js란?

Mustache.js는 HTML에 데이터를 바인딩해주는 가볍고 심플한 템플릿 엔진이다.
이름 그대로 {{변수}} 형태의 중괄호 문법을 사용해서 데이터를 템플릿 안에 삽입할 수 있다.

Mustache의 특징은 다음과 같다:

  • {{변수}}, {{#반복}}, {{/반복}} 같은 간단한 문법
  • JavaScript 코드가 템플릿에 섞이지 않는 논리 없는 템플릿
  • HTML 템플릿을 미리 만들어두고, Ajax로 받아온 데이터를 바로 렌더링 가능
  • React나 Vue처럼 무겁지 않아서 JSP 기반 프로젝트에 가볍게 붙이기 좋음

✅ 목표

  • JSP 화면에서 Ajax로 서버 데이터를 요청하고
  • Mustache.js로 데이터를 템플릿에 바인딩해서
  • HTML에 출력하는 전체 흐름 구성

📁 파일 구조

resources/
├── js/
│   ├── list.js                ← Ajax + Mustache 렌더링 스크립트
webapp/
├── list.jsp                   ← JSP 화면
├── api/data/list.json        ← JSON 응답 예시 (또는 Controller)

 

✅ 1. list.jsp – 템플릿, 컨테이너, JS 연결

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="utf-8" %>
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Mustache Ajax 예제</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mustache@4.2.0/mustache.min.js"></script>
  <script src="${pageContext.request.contextPath}/resources/js/list.js"></script>
</head>
<body>

  <h2>📋 게시글 목록</h2>
  <div id="list-container"></div>

  <!-- Mustache 템플릿 -->
  <script id="list-template" type="x-tmpl-mustache">
    <ul>
      {{#posts}}
        <li>
          <strong>{{title}}</strong> - {{author}} ({{date}})
        </li>
      {{/posts}}

      {{^posts}}
        <li>데이터가 없습니다.</li>
      {{/posts}}
    </ul>
  </script>

</body>
</html>

✅ 2. list.js – Ajax 요청 + Mustache 렌더링

$(function(){
  $.ajax({
    url: "/api/data/list.json", // 실제는 Controller URL로 교체
    method: "GET",
    dataType: "json",
    success: function(data) {
      const template = $('#list-template').html();
      const rendered = Mustache.render(template, data);
      $('#list-container').html(rendered);
    },
    error: function() {
      alert("데이터 요청 실패");
    }
  });
});

✅ 3. JSON 예시 (list.json) 

{
  "posts": [
    { "title": "공지사항 1", "author": "관리자", "date": "2024-04-10" },
    { "title": "새로운 업데이트", "author": "운영자", "date": "2024-04-11" },
    { "title": "FAQ 정리", "author": "홍길동", "date": "2024-04-12" }
  ]
}

 

✅ Spring Controller 예시 

@GetMapping("/api/data/list.json")
@ResponseBody
public Map<String, Object> getPostList() {
    List<Map<String, String>> posts = new ArrayList<>();
    posts.add(Map.of("title", "공지사항 1", "author", "관리자", "date", "2024-04-10"));
    posts.add(Map.of("title", "새로운 업데이트", "author", "운영자", "date", "2024-04-11"));
    posts.add(Map.of("title", "FAQ 정리", "author", "홍길동", "date", "2024-04-12"));

    return Map.of("posts", posts);
}

✅ 결과 화면

📋 게시글 목록

- 공지사항 1 - 관리자 (2024-04-10)
- 새로운 업데이트 - 운영자 (2024-04-11)
- FAQ 정리 - 홍길동 (2024-04-12)

✅ Mustache 흐름 요약

항목설명

템플릿 작성 <script id="template">로 HTML 구조 작성
데이터 요청 jQuery Ajax 사용
렌더링 처리 Mustache.render(template, data)
결과 출력 .html()로 지정 영역에 삽입

💡 어디에 쓰면 좋을까

  • 서버에서 받아온 리스트를 화면에 표시할 때
  • 뷰와 데이터를 분리해서 구성하고 싶을 때
  • Vue나 React는 무거워서 간단하게 구현하고 싶을 때

📌 확장할 수 있는 기능

  • 검색/필터 조건 추가
  • 로딩 애니메이션 표시
  • 페이지네이션 처리
  • 이벤트 바인딩(수정, 삭제 버튼 등)
반응형