console.log('javascript는 뭘까');

내가 가장 먼저 찾아본 속성인것 같습니다.

th:each는 Thymeleaf에서 반복문을 처리하는 데 사용되는 속성입니다.

th:each 속성은 리스트나 배열과 같은 컬렉션을 순회하면서 템플릿 내부에 반복적으로 값을 표시하거나 조작할 수 있도록 해줍니다.

예를 들어, 다음과 같은 리스트가 있다고 가정해봅시다.

List<String> fruits = Arrays.asList("apple", "banana", "cherry", "date");

model.addAttribute("fruits", fruits); 

이렇게 추가후에

이 리스트를 Thymeleaf를 사용하여 템플릿에 표시하려면, 다음과 같은 코드를 사용할 수 있습니다.

<ul>
  <li th:each="fruit : ${fruits}" th:text="${fruit}"></li>
</ul>

위의 코드에서 th:each 속성은 fruits 리스트를 순회하며, 각 아이템을 fruit 변수에 할당합니다. 그리고 th:text 속성을 사용하여 각 li 요소의 내용을 fruit 변수로 설정합니다. 결과적으로 아래와 같은 HTML 코드를 생성합니다.

<ul>
  <li>apple</li>
  <li>banana</li>
  <li>cherry</li>
  <li>date</li>
</ul>

//Controller에서

String[] importances = CommonOptions.getImportance();
model.addAttribute("importances", importances);


//template에서
<select name="importance">
    <option th:each="important : ${importances}" th:value="${important}"
        th:selected="${'중' == important}" th:text="${important}"></option> 
</select>

https://www.thymeleaf.org/doc/tutorials/3.1/usingthymeleaf.html#using-theach

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

<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)
}
 

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