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

이상우

작성한 질문수

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

템플릿 조각

혹시 index.html 에서는 fragment 사용이 안되는건가요

작성

아래와 같이 코드를 짜서

fragment 문법으로 불러오고싶은데

적용이 안되고 있습니다 ㅠㅠ

templates 하위 경로에 있는 파일들은

해당 방법으로 잘 적용되던데.

혹시 static 하위에 있어서 index.html 에서는 경로를 못찾고있는걸까요?!!

/static/index.html

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
</head>
<body>
    <div th:replace="fragment/navbar :: navbar"></div>
    
    <h3 class="d-flex justify-content-center my-5 text-dark">홈페이지에 오신 것을 환영합니다.</h3>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
</body>
</html>

/templates/fragmnet/navbar.html

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
</head>
<body>
    <nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark" th:fragment="navbar">
        <div class="container-fluid">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup"  >
                <div class="navbar-nav">
                    <a class="nav-link active" href="/home">홈</a>
                    <a class="nav-link" href="/user/add">회원가입</a>
                    <a class="nav-link" href="/user/login">로그인</a>
                    <a class="nav-link" href="/user/all">회원목록</a>
                </div>
            </div>
        </div>
    </nav>




    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
</body>
</html>

spring mvc

답변 1

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 이상우님.

현재 index.html에서 Thymeleaf의 fragment를 사용하고자 하시는 것 같습니다. 안타깝게도 static 폴더에 있는 HTML 파일들은 Thymeleaf 템플릿 엔진이 처리하지 않는 정적 리소스로 간주됩니다. 따라서 Thymeleaf 문법이 적용되지 않습니다.

이를 해결하기 위한 방법으로는 index.html을 templates 폴더로 이동시키시는 것입니다. 이렇게 하면 Spring Boot는 해당 파일을 Thymeleaf를 통해 처리하게 되므로, fragment를 비롯한 Thymeleaf 문법을 적용할 수 있게 됩니다.

이에 대한 자세한 논의는 다음의 비슷한 질문과 답변에서 참고하실 수 있습니다:
- static 폴더 인식이 안됨

이 질문 역시 templates와 static 폴더의 차이에 대한 이해를 돕고 있으니 참고하시길 권장합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

이상우

작성한 질문수

전체 Q&A

질문하기