[java] Thymeleaf에서 JSON 데이터를 어떻게 처리하나요?

29 Nov 2023

java

Thymeleaf는 HTML 템플릿 엔진으로서, 서버 측에서 데이터를 가져와서 동적으로 웹 페이지를 생성할 수 있습니다. JSON 데이터를 Thymeleaf에서 처리하기 위해서는 몇 가지 단계를 거쳐야 합니다. 이 포스트에서는 JSON 데이터를 가져와서 Thymeleaf 템플릿에서 사용하는 방법을 알아보겠습니다.

의존성 추가하기 프로젝트의 build.gradle 파일에 다음 의존성을 추가해주세요.
```
implementation 'com.fasterxml.jackson.core:jackson-databind:2.12.3'
```

JSON 데이터 가져오기 JSON 데이터를 가져오기 위해서는 HttpClient 또는 HTTPURLConnection과 같은 라이브러리를 사용하여 원격 서버에서 데이터를 가져올 수 있습니다. 아래는 간단한 예제입니다.

import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.JsonNode;

// JSON 데이터 가져오기 예제
HttpClient client = HttpClient.newHttpClient();
HttpRequest request = HttpRequest.newBuilder()
        .uri(URI.create("https://api.example.com/data"))
        .build();
HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());

// JSON 데이터를 객체로 변환하기
ObjectMapper mapper = new ObjectMapper();
JsonNode jsonNode = mapper.readTree(response.body());

Thymeleaf에서 JSON 데이터 사용하기 템플릿에서 JSON 데이터를 사용하기 위해서는 th:with 속성을 사용하여 변수에 JSON 데이터를 할당해야 합니다. 아래는 예제입니다.
```
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf JSON Example</title>
</head>
<body>
    <div th:with="jsonData=${jsonNode}">
        <p th:text="${jsonData.name}"></p>
        <p th:text="${jsonData.age}"></p>
        ...
    </div>
</body>
</html>
```
위의 예제에서는 th:with 속성을 사용하여 jsonData라는 변수에 JSON 데이터를 할당합니다. 그리고 템플릿에서 jsonData 변수를 사용하여 필요한 데이터를 출력합니다. 이를 통해 JSON 데이터를 Thymeleaf 템플릿에서 사용할 수 있습니다.

이렇게 Thymeleaf에서 JSON 데이터를 처리하는 방법에 대해 알아보았습니다. 이를 통해 동적인 웹 페이지를 생성하고, 서버에서 가져온 데이터를 템플릿에 적용할 수 있습니다.

참고:

Thymeleaf 공식 문서: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
Jackson 라이브러리: https://github.com/FasterXML/jackson