안녕하세요, 오늘은 스프링 부트(Spring Boot)의 대표 템플릿 엔진인 타임리프(Thymeleaf)와 바닐라(순수) Javascript를 활용하여 Ajax를 구현해보는 예제를 작성해보도록 하겠습니다.
바닐라 자바스크립트를 활용하여 Ajax를 구현하는 방법은 아래 포스팅을 참고해주세요~!
2021.12.10 - [[IT] Javascript] - 순수 (바닐라) JavaScript로 AJAX Get/Post 구현 (JSON 응답/요청)
먼저 타임리프(Thymeleaf)에 대해 간단히 설명을 하면, 스프링 부트(Spring Boot)의 대표 템플릿 엔진입니다. 템플릿 엔진이란 Html Markup + 데이터를 결합하여 동적인 화면을 구현할 수 있도록 하는 도구입니다. 기존에는 JSP를 활용하여 구현을 하였으나 JSP가 jar 파일 형태로 패키징이 불가능하기 때문에 Spring Boot 공식적으로 타임리프(Thymeleaf) 권장하는 추세입니다.
1. Spring Boot 프로젝트 생성
먼저 구현을 위한 스프링부트 프로젝트를 생성합니다. Dependency는 Springboot Web과 Thymeleaf 2개 추가합니다. Maven 프로젝트 기준으로 pom.xml에 아래와 같이 디펜던시 추가합니다.
(Spring Boot 프로젝트 생성이나 실행 등이 익숙하지 않으신 분들은 아래의 포스팅을 참고해주세요~
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
</dependencies>
2. Contoller 작성
아주 간단하게 컨트롤러를 작성해봅니다. 먼저 @Controller 어노테이션을 추가하고, '/get/member'라고 Get 요청이 올 경우 임의로 작성된 멤버 데이터를 Map 형식으로 FrontEnd로 전달하는 getMembers라는 메서드를 컨트롤러에 아래와 같이 구현해줍니다.
package com.oriental.AjaxTest.controller;
import java.util.HashMap;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class AjaxTestController {
@GetMapping("/get/member")
public String getMembers(Model model) throws Exception { // /get/member로 호출 시 가상의 memberList를 작성하여 html에 전달
Map<Integer, String> memberList = new HashMap<>(); // <회원번호, 회원이름>으로 구성된 가상의 멤버 리스트
memberList.put(1, "킴오리");
memberList.put(10, "킴엔탈");
memberList.put(20, "리오리");
memberList.put(200, "리엔탈");
model.addAttribute("memberList", memberList);
return "index :: memberTable"; // template 파일 이름 + '::' + 데이터가 변경 될 fragment id
}
}
3. index.html 작성
src/main/resources > templates 폴더에 index.html 파일을 생성해줍니다. 상단 <html> 태그 안에 아래와 같이 Attribute를 추가하여 Thymeleaf를 사용하겠다고 선언해 줍니다.
<html xmlns:th="http://www.thymeleaf.org">
그런 다음 <script> 태그 안에 바닐라(순수) 자바스크립트를 활용하여, 'get/member'라는 주소로 Get 요청을 통해 멤버 데이터를 받아오는 Ajax를 구현해 줍니다.
<script type="text/javascript">
window.onload = function() {
var httpRequest;
// 호출 버튼을 클릭하였을 때, 데이터를 요청하고 받아오는 Ajax 구현 부분
document.getElementById("ajaxCall").addEventListener('click', () => {
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = () => {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
document.getElementById("memberTable").innerHTML = httpRequest.response;
} else {
alert('Request Error!');
}
}
};
httpRequest.open('GET', '/get/member');
httpRequest.send();
});
}
</script>
<body> 태그 안에는 Ajax 호출 버튼과 호출 후 받아온 데이터를 이용하여 테이블을 그려 줄 memberTable라는 테이블을 작성해줍니다. <table> 태그 안에는 th:fragment="memberTable" 라는 Attribute를 추가해 줄 건데요, 이 것은 Ajax를 통해 받아온 데이터를 활용해서 이 부분 전체 태그를 교체해주기 위한 역할입니다.
<button id="ajaxCall">호출</button><br><br>
<table id="memberTable" th:fragment="memberTable">
</table>
그리고 <table> 태그 안에 Row를 작성하는 부분에 th:each 반복문을 이용해서, 받아온 Map 데이터의 key와 Value를 작성하는 th:text 태그를 추가합니다.
<tr th:each="member : ${memberList}">
<td th:text="${member.key}" />
<td th:text="${member.value}" />
</tr>
전체 완성된 index.html 파일은 아래와 같습니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function() {
var httpRequest;
// 호출 버튼을 클릭하였을 때, 데이터를 요청하고 받아오는 Ajax 구현 부분
document.getElementById("ajaxCall").addEventListener('click', () => {
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = () => {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
document.getElementById("memberTable").innerHTML = httpRequest.response;
} else {
alert('Request Error!');
}
}
};
httpRequest.open('GET', '/get/member');
httpRequest.send();
});
}
</script>
</head>
<body>
<h1>AJAX TEST</h1>
<button id="ajaxCall">호출</button><br><br>
<table id="memberTable" th:fragment="memberTable">
<tr>
<th>아이디</th>
<th>이름</th>
</tr>
<tr th:each="member : ${memberList}">
<td th:text="${member.key}" />
<td th:text="${member.value}" />
</tr>
</table>
</body>
</html>
완성이 되었으면, Spring Boot App Run을 통해 웹서버를 구동해줍니다. 아래와 같이 바닐라 자바스크립와 타임리프를 활용하여 간단히 구현된 Ajax가 정상 동작하는 것을 확인할 수 있습니다.
'[IT] Javascript' 카테고리의 다른 글
| [Javascript] 오픈소스 차트 및 그래프 생성 - ECharts 소개 및 예제 (0) | 2022.06.09 |
|---|---|
| [Javascript][Node.js] Map 자료 구조 정의, 사용법, 문법 및 반복문 활용 (0) | 2022.03.04 |
| 순수 (바닐라) JavaScript로 AJAX Get/Post 구현 (JSON 응답/요청) (2) | 2021.12.10 |
댓글