🌡 ToyProject - 1 SpringBoot를 이용한 파일 업로드에 JPA적용 시키기

Kim Dae Hyun·2021년 7월 24일

JPA Spring Springboot Thymeleaf docker mysql spring mvc

Toy-Project

목록 보기

1/4

전체 소스코드 : Github

🔎 프로젝트 설정

Spring Initializr 사용

Dependencies

Spring web
Spring Data JPA
Thymeleaf
Lombok
MySQL Driver

간단하게 상품의 이름, 수량, 이미지를 입력받는 폼을 만들고 DB에 저장까지 하는 프로젝트입니다.

이미지는 로컬에 저장하고 해당 경로를 DB에 저장하는 형식으로 진행할 것이고 1차적으로 저장하는 기능만 구현 후 조회, 검증, 예외처리 등을 추가할 예정입니다.

🔎 Item Entity 작성

스키마 구조 등은 나중에 보정할 예정이니 너무 허전해도 봐주세요 ㅎ

일단 Item 엔티티는 ItemName상품명, quantity 수량, fileId File 엔티티의 PK값을 필드로 갖습니다.

File을 관계로 풀어보려 했었는데 굳이 관계까지 설정해주지 않아도 될 것 같아 이런 방식을 채택했습니다.

@Getter 
@NoArgsConstructor(access = AccessLevel.PROTECTED)
@Entity
public class Item {
    @Id @GeneratedValue
    private Long id;
    private String itemName;
    private Integer quantity;
    @Column(nullable = true)
    private Long fileId;

    @Builder
    public Item(String itemName, Integer quantity, Long fileId) {
        this.itemName = itemName;
        this.quantity = quantity;
        this.fileId = fileId;
    }
}

🔎 File Entity 작성

originFileName 은 확장자를 포함한 파일명을 위한 필드입니다.
test.jpeg 이런 식으로 저장될 것입니다.

fullPath 필드는 저장될 경로와 파일명을 포함합니다. 파일을 조회하여 보여주거나 다운로드 할 때 이용될 필드입니다.

@NoArgsConstructor(access = AccessLevel.PROTECTED)
@Getter
@Entity
public class File {

    @Id @GeneratedValue
    private Long id;
    @Column(nullable = false)
    private String originFileName;
    @Column(nullable = false)
    private String fullPath;

    @Builder
    public File(Long id, String originFileName, String fullPath) {
        this.id = id;
        this.originFileName = originFileName;
        this.fullPath = fullPath;
    }
}

🔎 Item, File DTO 작성

Controller와 Service 레이어 간 데이터 전송을 위한 클래스입니다. 최대한 Entity를 직접적으로 노출시키지 않는다는 나름대로의 원칙을 위해 작성하였습니다.

현재는 Entity에 불필요하다 생각되는 필드가 없기 때문에 Entity와 거의 같게 설계되었습니다.

각 DTO는 Service 레이어에서 엔티티 변환을 위한 편의 메서드를 갖습니다.
( ToEntity )

[ ItemDTO ]

@NoArgsConstructor
@Data
public class FileDto {
    private Long id;
    private String originFileName;
    private String fullPath;

    public File toEntity() {
        return File.builder()
                .id(this.id)
                .originFileName(this.originFileName)
                .fullPath(this.fullPath)
                .build();
    }

    @Builder
    public FileDto(Long id, String originFileName, String fullPath) {
        this.id = id;
        this.originFileName = originFileName;
        this.fullPath = fullPath;
    }
}

[ FileDTO ]
@NoArgsConstructor
@Data
public class FileDto {
    private Long id;
    private String originFileName;
    private String fullPath;

    public File toEntity() {
        return File.builder()
                .id(this.id)
                .originFileName(this.originFileName)
                .fullPath(this.fullPath)
                .build();
    }

    @Builder
    public FileDto(Long id, String originFileName, String fullPath) {
        this.id = id;
        this.originFileName = originFileName;
        this.fullPath = fullPath;
    }
}

🔎 Repository 작성

Repository 의 경우 Spring Data JPA를 사용하고 특별한 조회 기능이 현재는 없기 때문에 CRUD만 그대로 사용합니다.

[ ItemRepository ]

public interface ItemRepository extends JpaRepository<Item, Long> {}

[ FileRepository ]

public interface FileRepository extends JpaRepository<File, Long> {}

🔎 ItemService 작성

일단 저장기능만 구현하기로 했으므로 메서드는 하나입니다.
컨트롤러에서 변환되어 넘어오는 DTO를 Entity로 변환하여 영속화합니다.

@RequiredArgsConstructor
@Service
public class ItemService {

    private final ItemRepository itemRepository;

    @Transactional
    public Long save(ItemDto itemDto) {
        return itemRepository.save(itemDto.toEntity()).getId();
    }
}

🔎 FileService 작성

FileService 또한 마찬가지로 저장기능만을 수행합니다.
사실 service계층을 두지 않아도 되겠지만 이런 아키텍쳐에 익숙해지기 위해 서비스 계층을 두었습니다. 😁

@RequiredArgsConstructor
@Service
public class FileService {

    private final FileRepository fileRepository;

    @Transactional
    public Long save(FileDto fileDto) {
        return fileRepository.save(fileDto.toEntity()).getId();
    }
    
}

🔎 Controller 작성

폼을 랜더링 위한 메서드입니다.

@GetMapping("/form")
public String homeView(Model model) {
	model.addAttribute("item", new ItemRequest());
	return "home";
}

form으로부터 받고자 하는 데이터를 객체로 초기화하여 전달하였습니다.
이렇게 하면 Thyemeaf 사용시 th:object, th:field 등의 기능으로 편하게 폼 데이터를 핸들링 할 수 있습니다.

요청 객체입니다. ItemRequest
폼으로부터 받을 데이터를 필드로 합니다. Bean Validation은 이후 추가할 예정입니다. (일단 하려는 것에 집중!)

@Getter @Setter
public class ItemRequest {

    private String itemName;
    private Integer qty;
    private MultipartFile file;
}

요청 객체를 받아 처리하는 메서드입니다. (가장 중요)

일단 폼에서 받은 데이터를 파싱합니다.
우선 Item엔티티를 위한 데이터를 파싱했습니다. File은 null일 수 있기 때문입니다.
파싱한 상품명과 수량을 DTO로 변환합니다. 변환 후에 바로 서비스 계층의 save 메서드를 호출하지 않습니다.

String itemName = itemRequest.getItemName();
Integer qty = itemRequest.getQty();
ItemDto itemDto = ItemDto.builder()
		.itemName(itemName)
		.qty(qty)
		.build();

만약 파일이 있는 경우 파일의 ID 를 ItemDto에 채워준 후에 저장해주어야 하기 때문입니다.

file이 있는지 널 체크 후에 file에 대한 파싱을 시작합니다.
필요한 데이터는 파일명과 확장자를 담고있는 originalFilename과 저장될 폴더의 경로까지 포함하는 fullPath입니다.

우선 originalFilename은 MultipartFile객체가 제공하는 getOriginalFilename메서드를 이용해 얻어옵니다.

MultipartFile file = itemRequest.getFile();

전체 경로를 위한 파일 업로드 폴더 경로는 환경변수를 사용했습니다.
(application.yml 또는 application.properties에 작성)

image:
  path: /Users/jeonhyeji/Documents/etc/file/

@Value 어노테이션과 SpringEL문법을 이용해 환경변수를 가져옵니다.

@Value("${image.path}")
private String uploadDir;

이제 전체 경로(fullpath)를 얻어올 수 있습니다.

String fullPath = uploadDir + file.getOriginalFilename();

전체 경로를 얻었으므로 업로드된 파일을 서버에 저장합니다. 이때 MultipartFile의 transferTo메서드를 이용합니다.

file.transferTo(new File(fullPath));

이제 서버에 저장하였으니 DB에 저장할 차례입니다. 서비스 계층으로 File을 전달하기 위해 FileDto로 변환합니다.

 FileDto fileDto = FileDto.builder()
                    .originFileName(file.getOriginalFilename())
                    .fullPath(uploadDir + file.getOriginalFilename())
                    .build();

변환된 FileDto를 앞서 구현한 FileService의 save메서드에 파라미터로 넣어줍니다. 이 때 Service -> Repository를 거쳐 DB에 저장되고 PK를 리턴합니다.

Long savedFileId = fileService.save(fileDto);

이제 Item에 FileId를 포함시켜 저장시키기 위해 ItemDto에 FileId를 세팅해줍니다.

itemDto.setFileId(savedFileId);

이제 파일이 있었다면 ItemDto에 FileId가 세팅되었을 것이고 없었다면 null 인 상태일 것입니다. null을 허용하므로 앞선 처리를 완료하였다면 Item까지 저장시켜줍니다.

itemService.save(itemDto);

전체 코드입니다.

    @PostMapping("/form")
    public String saveFormRequests(@ModelAttribute("item") ItemRequest itemRequest) throws IOException {
        String itemName = itemRequest.getItemName();
        Integer qty = itemRequest.getQty();
        ItemDto itemDto = ItemDto.builder()
        		.itemName(itemName)
                	.qty(qty)
                    	.build();

        if (itemRequest.getFile() != null) {
            MultipartFile file = itemRequest.getFile();
            String fullPath = uploadDir + file.getOriginalFilename();
            file.transferTo(new File(fullPath));
            log.info("file.getOriginalFilename = {}", file.getOriginalFilename());
            log.info("fullPath = {}", fullPath);

            FileDto fileDto = FileDto.builder()
                    .originFileName(file.getOriginalFilename())
                    .fullPath(uploadDir + file.getOriginalFilename())
                    .build();
            Long savedFileId = fileService.save(fileDto);
            itemDto.setFileId(savedFileId);
        }
        itemService.save(itemDto);

        return "redirect:/form";
    }

🔎 HTML 코드

Thymeleaf와 Bootstrap을 이용한 간단한 폼입니다.
Content-Type을 Multipart/form-data로 해주어야 하기 때문에form 태그에 enctype="multipart/form-data"을 반드시 설정해주어야 합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>File Upload</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
</head>
<body>

<div class="container">
    <div class="text-center my-4">
        <h2>파일 업로드 폼</h2>
    </div>
    <form th:action th:object="${item}" method="post" enctype="multipart/form-data">
        <div>
            <label for="itemName">상품명</label>
            <input type="text" th:field="*{itemName}" class="form-control" id="itemName">
        </div>

        <hr class="my-4">
        <div>
            <label for="qty">상품개수</label>
            <input type="text" th:field="*{qty}" class="form-control" id="qty">
        </div>

        <hr class="my-4">
        <div>
            <input type="file" th:field="*{file}" class="form-control">
        </div>
        <br/>

        <button class="btn-primary" type="submit">
            전송
        </button>
    </form>
</div>

</body>
</html>

🔎 DB (MySQL) 연결 설정 (application.yml)

저는 yml 형식으로 작성하였고 MySQL은 Docker로 구동하였습니다.


image:
  path: /Users/jeonhyeji/Documents/etc/file/

spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/mydb
    username: root
    password:
    driver-class-name: com.mysql.cj.jdbc.Driver

  jpa:
    open-in-view: false
    hibernate:
      ddl-auto: create
      dialect: org.hibernate.dialect.MySQL5InnoDBDialect
    properties:
      hibernate:
        format_sql: true

logging:
  level:
    org.hibernate.SQL: debug
    org.hibernate.type: trace