익숙하지 않아서 그럴거라고 생각합니다. 하지만

<td class="border-2 mt-2 p-2" th:text="${question.title}" th:onclick="_load([[ @{/admin/questions/{topicId}/{id}(id=${question.id}, topicId=${topicId})} ]] )"></td>

<td class="border-2 mt-2 p-2" th:text="${#temporals.format(question.createdAt, 'yyyy.MM.dd')}"></td>

const list_url = /*[[@{/admin/questions/list/{topicId}(topicId=${topicId}) }]]*/'';

이런 형태를 쓰다보면 현타가 오는군요.

하지만 Thymeleaf는 서버 측에서 동적으로 HTML을 생성하는데 사용되는 템플릿 엔진입니다..

HTML과 Thymeleaf 태그를 혼합해서 사용하면 웹 페이지를 동적으로 생성할 수 있습니다.

Thymeleaf에서 지원하는 유연하고 강력한 기능들 중 하나가 자바 코드를 HTML 코드로 직접 작성할 수 있는 것입니다.

이는 자바 개발자들이 HTML 태그와 자바 코드를 섞어서 작업할 수 있어서 생산성을 높일 수 있는 장점이 있습니다.

const topicId = /*[[${topicId}]]*/'';
const loc_list = /*[[@{/admin/questions/list }]]*/'';


_list('/admin/topic/list', 'topic');

/*
if (mode == "list") {
//    const init_loc_list = `${loc_list}/[[${topicId}]]`;  //이해를 못해서 javascript와 인라인표현식 동시사용
    const init_loc_list = `${loc_list}/${topicId}`; //아 위에서 javascript 변수 topicId가 됐었지..
    _list(init_loc_list, 'adminBody');
}  
*/


if (mode == "list") {
    go_list(topicId); //...
}

function go_list(topicId) {
    const go_loc_list = `${loc_list}/${topicId}`;
    _list(go_loc_list)
}
 

----장점이 느껴질때까지 한번 써봐야군요.