안녕하세요 강의잘듣고있는데 질문이있어요

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술

검증 직접 처리 - 개발

작성

348

<div>
    <label for="itemName" th:text="#{label.item.itemName}">상품명</label>
    <input type="text" id="itemName" th:field="*{itemName}"
           th:class="${errors?.containsKey('itemName')} ? ' field-error' : _" class="form-control" placeholder="이름을 입력하세요">
    <div class="field-error" th:if="${errors?.containsKey('itemName')}" th:text="${errors['itemName']}">
        상품명 오류
    </div>
</div>

th:class="${errors?.containsKey('itemName')} ? ' field-error' : _" class="form-control"로 수정하였는데 서버를 실행해보면 상품명 인풋박스가 꺠져서 보이네요 어디서 잘못된걸까요?

spring MVC

답변 1

OMG

안녕하세요. 성문님, 공식 서포터즈 OMG입니다.

우선 코드 변경 의도를 추측해보자면, form-control이 th:class에도, class에도 적용되어 있어 중복되어 삭제하시고 class의 form-control을 공통으로 적용하시려 하신 것으로 생각합니다.

하지만, th:class가 적용된다면(타임리프 랜더링 시) class는 적용되지 않습니다.

th:class는 타임리프 랜더링 시에 적용되고 일반 class는 서버 사이드 랜더링이 되지 않을 때 적용된다고 보시면 됩니다.

class에 form-control이 붙어있어야(th:class건, class건 간에) form-control에 적용된 css가 적용되어 아래의 가격과 수량처럼 모양이 잡힙니다.

감사합니다.

OMG

html 상에서 기타 이유로 오류가 발생한 것일수도 있으니 f12(개발자 도구)에서 콘솔(console)에서 에러메시지가 출력되는지 확인해보시면 좋을 것 같아요.

인프런 커뮤니티 질문&답변

안녕하세요 강의잘듣고있는데 질문이있어요