타임리프문법

< li th:each="note : $ {noteList}" th:class="${note.id == targetNote.id} ? 'bg-blue-600' : ''">

• 이 코드는 타임리프(Thymeleaf) 템플릿 엔진에서 사용되는 반복문과 조건문을 결합한 예시입니다. 여기서 th:each는 리스트를 반복하는 루프를 나타내며, ${noteList}는 반복할 리스트를 가리킵니다.

• th:class는 만약 조건이 참이라면 특정 클래스가 추가되고, 거짓이라면 추가되지 않습니다. 이는 템플릿 엔진에서 동적으로 HTML을 생성할 때 유용하게 사용됩니다.

• ${note.id == targetNote.id}는 현재 반복 중인 노트의 ID가 targetNote의 ID와 같은지를 검사합니다. 만약 같다면, 해당 요소에 'bg-blue-600'이라는 클래스를 추가하여 배경색을 파란색으로 지정합니다. 그렇지 않다면 클래스를 추가하지 않습니다.

• ${note.id == targetNote.id}는 두 개의 노트의 ID가 서로 같은지 비교하는 조건입니다. 만약 두 ID가 같다면, 이 표현식은 참(true)이 되고, 그렇지 않으면 거짓(false)이 됩니다.

• 그 다음에 있는 ? 'bg-blue-600' : '' 부분은 삼항 연산자입니다. 이는 조건이 참이면 'bg-blue-600'을 반환하고, 그렇지 않으면 빈 문자열('')을 반환합니다. 즉, 두 노트의 ID가 같으면 'bg-blue-600'이라는 클래스를 요소에 추가하고, 그렇지 않으면 클래스를 추가하지 않습니다

• 이것을 간단히 설명하면, noteList의 각 노트에 대해 반복하면서, 현재 노트의 ID가 targetNote의 ID와 같으면 파란색 배경을 가지는 클래스를 추가하고, 그렇지 않으면 추가하지 않습니다.

< form th:action="@{|/delete/$ {targetNote.id}|}" method="post" < input type="submit" value="삭제"> < form th:action="@{|/delete/${targetNote.id}|}" method="post">:

• < form>은 HTML에서 사용자로부터 정보를 입력받을 수 있는 요소입니다. 웹 페이지에서 사용자가 데이터를 서버에 전송할 때 사용됩니다.

  • action: 폼 데이터를 전송할 서버 측 스크립트의 URL을 지정합니다.
  • method: 폼 데이터를 서버로 전송할 때 사용할 HTTP 메서드를 지정합니다. 일반적으로 GET 또는 POST가 사용됩니다.

• < input type="submit" value="삭제">:

  • < input> 요소는 사용자로부터 데이터를 입력할 수 있는 요소를 생성합니다. 여기서는 삭제 버튼을 생성합니다.

• type="submit"은 이 버튼이 폼을 제출하는 역할을 한다는 것을 나타냅니다.

• value="삭제"는 버튼에 표시될 텍스트를 지정합니다.

• 이렇게 함으로써 사용자가 삭제 버튼을 누를 때, 해당 폼이 서버로 제출되고 지정된 URL로 이동하게 됩니다. 요청은 POST 메서드로 전송되며, 필요한 경우 폼 내의 데이터도 함께 전송됩니다.