[Thymeleaf decoupled logic] Fragment detection Error

상황

서버를 주로 담당하고 있는 제가 뷰 관련된 html 문서를 작성하고 있습니다. 대부분의 요소들을 모달 형식으로 만들다보니 메인 html 의 크기가 계속해서 커져 이를 요소별(영역별)로 나누고 싶었고 익숙한 Thymeleaf 를 사용하였습니다. 이후 다른 프론트엔드 분에게 인계할 시 Thymeleaf 의 코드가 html 문서에 남아있으면 좋지않을 것이라 생각하여 decoupled logic 을 사용하였습니다.

문제

각 영역을 Fragment 로 분리한 다음 메인 html 의 해당 영역에 replace 하려하니 Fragment 를 잘 찾지 못했습니다.

에러 로그

org.thymeleaf.exceptions.TemplateInputException: Error resolving fragment: "~{upload-modal.html :: '#uploadmodalsection'}": template or fragment could not be resolved (template: "index" - line 35, col 48)
    at org.thymeleaf.standard.expression.FragmentExpression.resolveExecutedFragmentExpression(FragmentExpression.java:598) ~[thymeleaf-3.1.2.RELEASE.jar:3.1.2.RELEASE]

coupling code

<?xml version="1.0"?>
<thlogic>
    <attr sel="#empty__header__nav" th:replace="~{header-navbar.html :: #header__nav}" />
    <attr sel="#empty__side__menu__bar" th:replace="~{sidebar.html :: #sidebar__menu}" />
    <attr sel="#empty__slideshow__section" th:replace="~{slideshow.html :: #slideshow__section}" />
    <attr sel="#empty__upload__modal__section" th:replace="~{upload-modal.html :: #upload__modal__section}" />
</thlogic>

눈여겨볼 곳은 마지막 attribute 입니다.

해결

저는 기본적으로 html 태그 아이디를 _ (언더바) 를 두 개씩 연속으로 사용하였습니다. 에러 로그 첫 번째 줄을 볼 때 _ (언더바) 가 전부 무시된채 Fragment 를 찾고 있습니다.

#upload__modal__section -> #uploadmodalsection

간단한 해결책으론 _ (언더바) 를 두 개씩 연속으로 쓰지 않고 하나씩만 쓰는 것이였습니다. 마음 같아서는 파싱하는 로직을 찾아 바꿀 수 있으면 바꾸고 싶지만 다른 곳에 투자할 시간이 많아 아이디 형식을 바꾸기로 하였습니다.

아쉬운 점

기존 아이디 형식을 바꾸다보니 시간적 비용이 커보여 모든 태그에 적용하진 않고 section 의 아이디만 _ (언더바) 를 하나만 사용하였다. 이게 Thymeleaf 라는 외부 프레임워크에 강하게 의존하며 다른 아이드들과 맞지 않는 식으로 문제를 해결하여 마음에 걸린다. 이슈에 등록하고 이후에 다른 방법을 모색해봐야겠다.