블로그-V3. 프로젝트 외부 파일 경로 지정

썸네일을 글 목록에 불러오기 위해 경로를 지정해주는데

우리는 파일을 프로젝트 외부의 C드라이브에 저장해두었다.

외부 파일에 접근할 수 없기 때문에 설정 파일에서 설정을 해주어야 한다.

이 파일에 WebMvcConfigurer을 implements 받아준다.

이 파일이 web.xml 설정 파일과 같은 것이다.

메모리에 띄우기 위해 @Configuration을 달아준다.

package site.metacoding.blogv3.config;

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;
import org.springframework.beans.factory.annotation.Value;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer { // web.xml 설정 파일 -> POJO

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

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) { // web.xml이 가지고있는 기본설정이므로 날리면 안됨!
        WebMvcConfigurer.super.addResourceHandlers(registry);

        registry
            .addResourceHandler("/upload/**")
            .addResourceLocations("file:///" + uploadFolder) // file 프로토콜은 :/// 사용
            .setCachePeriod(60*60) // 초 단위 => 한시간
            .resourceChain(true)
            .addResolver(new PathResourceResolver());
    }
}

/upload/** 의 요청이 들어오면

file:/// + uploadFolder 내부를 찾게 된다.

내가 브라우저에서 파일을 한번 다운로드하였으면 브라우저가 한 시간 동안 캐싱하고 있다.

resourceChain을 트루로 해두지 않으면 요청받을 때마다 브라우저에서 새로 다운로드한다.

요청받는 주소만 신경 써주면 된다.

필요한 곳에서 요청할 때 src="/upload/" 라고만 하면

"file:///" + uploadFolder로 가서 찾게 된다.

업로드 폴더에 UUID가 포함되어 있는 이름으로 저장되어있는 사진의 이름을 a.png로 바꾸고

src="/upload/a.png"를 설정해주고 화면에 띄우기 테스트를 해보자.

{{>/layout/main-header}}

<div class="container">
    <h3>메인페이지입니다</h3>
    <img src="/upload/a.png" width="200px" height="200px" />
</div>

{{>/layout/footer}}

테스트가 끝났으니 게시글 목록을 볼 때 이미지 파일을 당겨오면 되겠다.

글 목록을 불러올 때 PostResponseDto를 모델에 담아줬었다.

list.mustache에 뿌려보자.

<div class="my_post_list">
    {{#postResponseDto.posts}}
    <div class="my_post_list_item">
        <div class="my_post_list_item_left">

            <!-- <div class="my_fakeimg">Fake Image</div> -->
            <img src="/upload/{{thumnail}}" width="100%" height="100%">

        </div>
        <div class="my_post_list_item_right my_ellipsis">
            <div class="my_text_title my_ellipsis">{{title}}
            </div>
            <div class="my_text_body_sm">{{createDate}}</div>
            <div class="my_mt_md_1">
                <a href="/user/{{user.id}}/post/{{id}}" class="my_success_btn">Read More</a>
            </div>
        </div>
    </div>
    {{/postResponseDto.posts}}
</div>

createDate의 형태가 예쁘지 않으니까 format 해주자.

Post.java에 포맷 메서드를 만들어주자.

그리고 머스태치에서 createDate를 뿌릴 때

{{createDate}}가 아닌 {{formatCreateDate}}를 뿌려주면 지정해준 형식으로 예쁘게 나온다.

public String getFormatCreateDate() {
    DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd hh:mm");
    return createDate.format(formatter);
}