Thymeleaf static 경로

안녕하세요. 날씨가 많이 춥습니다. 모두 감기 조심하셨으면 좋겠습니다.

이번 글은, Thymeleaf의 static 경로에서 제가 겪었던 문제와 해결 방법을 공유하고자 적게 되었습니다.

Tymeleaf는 Spring MVC 기반 웹 애플리케이션의 뷰 레이어입니다. Tymeleaf를 활용하면, Front와의 협업없이 UI를 만들 수 있습니다.

제가 겪었던 문제는 Controller에서 특정 url을 설정했을 때, css, js를 스프링이 인식하지 못하는 현상이었습니다.

MemberUpdateController

    @GetMapping("/updateProfile")
    public String updateMember(Model model) {

        return "my-page";
    }

my-page.html

<link rel="stylesheet" type="text/css" href="../static/css/theme.min.css">

result

2022-11-03 12:50:01.700  WARN 19469 --- [io-8080-exec-10] o.s.web.servlet.PageNotFound             : No mapping for GET /api/v1/static/css/theme.min.css

이와 같은 문제가 발생한 이유는, 해당 컨트롤러의 url에 따라, css 파일이 상대경로로 설정되었기 때문입니다.
(. 으로 시작하면 상대경로 처리, /는 절대경로)

따라서 이러한 문제는 다음과 같이 설정하여 해결할 수 있습니다.

  <link rel="stylesheet" type="text/css" th:href="@{/static/css/theme.min.css}">

이와 같이 static 경로를 절대경로로 설정해주면, css 및 기타 static 파일이 절대경로로 읽어올 수 있습니다.

저와 비슷한 문제를 겪으시는 분들이 도움이 되셨으면 좋겠습니다.!

이상으로 글을 마칩니다. 감사합니다!