[Spring Boot] Bank App (14) 파일 업로드 2단계

Spring Boot에서 정적 리소스를 관리하는 방법 이해
WebMvcConfig에서 addResourceHandlers()를 활용해 정적 파일 접근 경로 설정
회원가입 시 업로드된 프로필 이미지를 웹 페이지에서 표시하는 방법 구현
파일 업로드 경로를 application.yml을 이용해 동적으로 설정하는 방법 학습

 

1. Spring Boot에서 정적 리소스를 관리하는 방법 🔍

웹 애플리케이션에서는 이미지, CSS, JS 등의 정적 리소스를 관리할 필요가 있습니다.
Spring Boot에서는 기본적으로 static 폴더 내의 파일을 정적 리소스로 제공합니다.

그러나 사용자가 직접 업로드한 이미지 파일을 웹 페이지에서 표시하려면 별도의 설정이 필요합니다.
이를 위해 Spring의 WebMvcConfigurer를 활용하여 정적 파일 접근 경로를 설정합니다.

---

2. WebMvcConfigurer

WebMvcConfigurer 는 Spring MVC 설정을 커스터마이징할 수 있도록 제공되는 인터페이스입니다.
이 인터페이스를 구현하면, 기본 제공되는 Spring Boot의 설정을 수정하거나 추가적인 설정을 적용할 수 있습니다.

📌 주요 메서드 정리

addViewControllers()	특정 URL 요청을 뷰와 직접 연결
addResourceHandlers()	정적 리소스(이미지, CSS, JS) 핸들링
addInterceptors()	요청을 가로채는 인터셉터 설정
setApplicationContext()	애플리케이션 컨텍스트 설정

---

3. WebMvcConfig에서 정적 리소스 경로 설정하기 

사용자가 업로드한 프로필 이미지를 웹에서 접근할 수 있도록 설정해야 합니다.
Spring Boot에서는 addResourceHandlers()를 이용해 특정 URL 패턴과 실제 파일 저장 경로를 매핑할 수 있습니다.

WebMvcConfig.java

package com.tenco.bank.config;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import com.tenco.bank.handler.AuthInterceptor;

import lombok.RequiredArgsConstructor;

@Configuration
@RequiredArgsConstructor
public class WebMvcConfig implements WebMvcConfigurer {

    @Autowired
    private final AuthInterceptor authInterceptor;

    // 📌 application.yml에서 설정한 파일 업로드 경로를 불러옴
    @Value("${file.upload-dir}")
    private String uploadDir;

    // 📌 요청을 가로채는 인터셉터 등록
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(authInterceptor)
                .addPathPatterns("/account/**")
                .addPathPatterns("/auth/**");
    }

    // 📌 정적 파일 접근 경로 설정
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/images/uploads/**")  // 웹에서 접근하는 가상 경로
                .addResourceLocations("file:" + uploadDir); // 실제 파일이 저장되는 경로
    }

    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }
}

 

• 사용자가 업로드한 파일은 /images/uploads/** URL로 접근할 수 있도록 설정됨
• 실제 파일은 uploadDir(application.yml에서 설정한 경로)에 저장됨

---

4. 파일 업로드 경로를 동적으로 설정하기 

Spring Boot에서 파일 업로드 경로를 코드에서 직접 관리하는 대신, 설정 파일(application.yml)에서 관리할 수 있습니다.
이렇게 하면 환경에 따라 유연하게 파일 경로를 변경할 수 있어 유지보수성이 향상됩니다.

📌 application.yml 설정

spring:
  servlet:
    multipart:
      max-file-size: 20MB   # 단일 파일 최대 크기
      max-request-size: 20MB # 전체 요청 크기 제한

file:
  upload-dir: uploads/  # 파일 업로드 경로

• 업로드 파일 경로를 file.upload-dir로 설정
• 나중에 서버 환경이 변경되더라도 application.yml에서 경로만 수정하면 적용 가능

---

5. 회원 프로필 이미지 출력하기 

User 모델 수정 (User.java)

사용자의 프로필 이미지가 등록되어 있다면 해당 이미지 URL을 반환하고,
등록되지 않았다면 기본 이미지를 반환하는 로직을 추가합니다.

@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class User {
    private Integer id;
    private String username;
    private String password;
    private String originFileName; // 업로드된 원본 파일명
    private String uploadFileName; // 서버에 저장된 파일명
    private String fullname;
    private Timestamp createdAt;

    // 📌 프로필 이미지 경로 설정
    public String getProfileImageUrl() {
        return uploadFileName == null ? "https://picsum.photos/id/1/350" : "/images/uploads/" + uploadFileName;
    }
}

• 업로드된 프로필 이미지가 있으면 해당 파일 URL을 반환
• 이미지가 없으면 기본 이미지(https://picsum.photos/id/1/350)를 사용

---

6. 프로필 이미지 웹 페이지에 표시하기 

회원가입 시 업로드한 프로필 이미지를 웹 페이지에서 표시하려면 JSP 파일을 수정해야 합니다.

header.jsp 수정

<c:choose>
    <c:when test="${principal != null}">
        <img class="m-profile" alt="" src="${principal.getProfileImageUrl()}">
    </c:when>
    <c:otherwise>
        <div class="m-profile"></div>
    </c:otherwise>
</c:choose>

• 로그인한 사용자는 getProfileImageUrl()을 이용해 프로필 이미지 표시
• 로그인하지 않은 사용자는 기본 프로필 이미지(div.m-profile) 사용

---

7. 결과 확인 🚀

✅ 회원가입 후 프로필 이미지가 정상적으로 저장되는지 확인

1. 회원가입 시 프로필 이미지를 업로드
2. 데이터베이스에 원본 파일명과 서버 저장 파일명이 정상적으로 저장됨
3. 업로드된 파일이 uploads/ 폴더에 저장됨

✅ 웹 페이지에서 이미지가 정상적으로 표시되는지 확인

1. 로그인하지 않으면 기본 프로필 이미지 표시
2. 로그인하면 회원가입 시 등록한 프로필 이미지가 정상적으로 출력됨
3. /images/uploads/파일명 경로를 브라우저에서 직접 입력하면 업로드된 이미지가 표시됨

---

Spring Boot에서 정적 리소스를 관리하는 방법 학습
파일 업로드 경로를 application.yml에서 동적으로 설정하여 유지보수성 향상
회원가입 시 업로드한 프로필 이미지를 웹 페이지에서 정상적으로 표시하는 기능 구현