Cocostudio 통합 예시

📋 시나리오: Cocostudio HTML을 Thymeleaf로 변환

Cocostudio에서 생성한 HTML에 동적 값을 서버에서 주입하는 방법입니다.

1️⃣ Cocostudio 원본 HTML

<!-- Cocostudio에서 생성한 HTML -->
<div class="user-info">
    사용자: {username}
    이메일: {email}
</div>

<script>
    const config = {
        apiEndpoint: '{api-endpoint}',
        secretKey: '{encrypted-secretKey}',
        userId: '{user-id}'
    };
</script>
            

2️⃣ Thymeleaf로 변환 (서버에서 동적 주입)

<!-- Thymeleaf 문법 추가 -->
<html xmlns:th="http://www.thymeleaf.org">

<div class="user-info">
    사용자: <span th:text="${username}">홍길동</span>
    이메일: <span th:text="${email}">test@example.com</span>
</div>

<script th:inline="javascript">
    /*<![CDATA[*/
    const config = {
        apiEndpoint: /*http://localhost:8080/api*/ 'http://localhost:8080/api',
        secretKey: /*AES256_ENCRYPTED_KEY_SAMPLE_12345*/ 'default-key',
        userId: /*USER_67890*/ '12345'
    };
    /*]]>*/
</script>
            

3️⃣ 컨트롤러에서 데이터 전달

@Controller
public class CocostudioController {

    @GetMapping("/cocostudio-page")
    public String cocostudioPage(Model model) {
        // 서버에서 동적 값 주입
        model.addAttribute("username", "김철수");
        model.addAttribute("email", "kim@example.com");
        model.addAttribute("apiEndpoint", "https://api.production.com/api");
        model.addAttribute("encryptedSecretKey", "AES256_ENCRYPTED_KEY");
        model.addAttribute("userId", "USER_67890");
        
        return "cocostudio-page"; // templates/cocostudio-page.html
    }
}
            

4️⃣ 실제 렌더링 결과 (클라이언트가 받는 HTML)

사용자: 김철수 | 이메일: kim.chulsoo@example.com

JavaScript Config (동적 주입):
apiEndpoint: http://localhost:8080/api
secretKey: AES256_ENCRYPTED_KEY_SAMPLE_12345
userId: USER_67890

✅ Thymeleaf의 장점