[Thymeleaf] config에 설정된 url 패턴을 타임리프 src 경로로 설정

---

 

 

 

WebMvcConfig.java

---

 package com.example.photogram.config;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.resource.PathResourceResolver;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer { // web 설정 파일

    @Value("${file.path}")
    private String uploadFolder;

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        WebMvcConfigurer.super.addResourceHandlers(registry);

        registry
                .addResourceHandler("/upload/**") // html 페이지에서 /upload/** 이런 주소 패턴이 나오면 작동
                .addResourceLocations("file:///" + uploadFolder)
                .setCachePeriod(60 * 10 * 6) // 1시간 동안 캐싱
                .resourceChain(true)
                .addResolver(new PathResourceResolver());
    }
}

로컬 드라이브 경로를 제공하기 위해 생성한 `Web MVC` 설정파일

 

 

클래스

 

• @Configuration
  • 클래스가 하나 이상의 `@Bean` 메서드를 제공하고, 스프링 IoC 컨테이너에서 빈 정의를 생성하고 서비스할 것임을 나타냄
• @WebMvcConfigurer
  • Spring MVC의 기본 설정을 사용자 정의 설정으로 재정의할 수 있음
  • `addResourceHandlers` 메서드를 오버라이드하여 정적 리소스 처리 로직을 설정함

 

 

필드

• @Value("${file.path}")
  • `uploadFolder` 변수는 `pplication.yml` 파일에 정의된 `file.path` 값을 주입받음

file:
  path: C:/dev/photogramImg/

• `application.yml` 파일에서의 경로는 위와 같음

 

 

메서드

• 정적 리소스의 요청을 처리하기 위한 리소스 핸들러 추가

 

1. addReousrceHandler("/upload/**")
   • `/upload/**` 패턴의 URL 요청을 처리함
2. addResourceLocations("file:///" + uploadFolder)
   • 해당 URL 요청에 대한 실제 파일 시스템 경로 설정함
   • `uploadFolder` 변수의 값에 따라 파일 시스템의 특정 디렉터리에서 파일을 제공하게 됨
3. setCachePeriod(60 * 10 * 6)
   • 브라우저가 리소스를 캐시할 기간을 설정함
   • 1시간 동안 캐시하도록 설정함
   • 성능 최적화에 도움됨
4. resourceChain(true)
   • 리소스 체인을 활성화하여 추가적인 리소스 처리 로직을 적용함
   • `true` 로 설정하면 `addResolver`, `addTransfomer` 등을 통해 커스텀 리소스 처리기를 추가할 수 있음
5. addResolver(new PathResourceResolver())
   • 기본 리소스 해석기를 사용함
   • `PathResourceResolver`는 리소스의 실제 경로를 해석하여 제공하는 역할을 함

 

 

 

 

 

HTML

---

                <div class="img-box" th:each="image : ${user.images}">
                    <a href="">
                        <img th:src="@{'/upload/' + ${image.postImageUrl}}" alt="Image"/>
                    </a>
                    <div class="comment">
                        <a href="#" class=""><i class="fas fa-heart"></i><span>0</span></a>
                    </div>
                </div>

 

• th:each="image : ${user.images}"
  • `th:each`는 타임리프의 반복문
  • `image`는 반복할 때 사용할 변수
  • `${user.images}`는 `user` 객체의 `images` 리스트를 의미함. user 객체는 컨트롤러에서 model에 추가되어 템플릿으로 전달된 객체임
• <img th:src="@{'/upload/' + ${image.postImageUrl}}" alt="Image"/>
  • `th:src`는 이미지의 `src` 속성을 동적으로 설정함
  • `@{'/upload/' + ${image.postImageUrl}}`는 `/upload/`와 `image.postImageUrl` 값을 합쳐서 최종 이미지 URL을 만듦

 

 

th:src를 이렇게 사용해본 건 처음인 것 같다.

처음에는 `/upload/` path를 작은 따옴표 없이 그냥 사용했었는데, 작은 따옴표를 넣어야 한다.

그리고 `image.postImageUrl` 또한 타임리프 문법에 맞게 작성해야 한다.

 

 

위처럼 작성을 하니 출력이 잘 되고 있다.

귀여운 고양이들.