[개인프로젝트] 이미지 파일 관리 시스템

프로젝트 소개

 

 

📅 진행기간

2023.06.01 ~ 2023.06.23

 

👩🏻‍💻 팀구성

개인프로젝트

 

🔎 개요

- 이미지 파일 관리 시스템

 

💻 개발환경

- 프로젝트 도구 : IntelliJ, VSCode

- 기술 스택 : Spring WebFlux, Vue.js, MongoDB

 

📚 요구사항

(1) Spring WebFlux로 웹 백엔드 API 서버 구축

- 비동기 논블로킹 방식으로 이미지를 업로드하는 API 구현

- 이미지 업로드시 이미지 서버 저장과 함께 이미지에 대한 메타 데이터가 데이터베이스(MongoDB)에 함께 저장

- 조회시 이미지와 함께 메타데이터도 확인가능

- 필수 API 명세

Method	URI	Request Param	Request Body	Description
GET	/images	자유롭게 정의	자유롭게 정의	이미지 전체 조회
GET	/image	자유롭게 정의	자유롭게 정의	이미지 단일 조회
POST	/image	자유롭게 정의	자유롭게 정의	이미지 파일 및 정보 생성
PATCH	/image	자유롭게 정의	자유롭게 정의	이미지 정보 수정
PUT	/image	자유롭게 정의	자유롭게 정의	이미지 정보 수정
DELETE	/image	자유롭게 정의	자유롭게 정의	이미지 파일 및 정보 삭제

(2) Vue 2 + Vuetify로 웹 페이지 UX/UI 구현

- 이미지를 업로드 할 수 있는 input

- 업로드된 이미지 목록을 확인할 수 있는 table

- table에서 선택된 이미지의 상세 정보를 확인할 수 있는 dialog

- axios를 통해 API를 호출하고 동적으로 페이지를 렌더링

 

 

 

결과물 보기

 

 

 

 

 

https://github.com/eun-jin0910/ImageUpload

GitHub - eun-jin0910/ImageUpload

 

 

 

업로드 방식 성능 비교 테스트

 

 

📌 테스트 목적

- 파일 업로드 방식의 성능 및 속도 평가

 

📝 테스트 방법

- 각 파일 업로드 방식별로 업로드 시간 측정

 

📲 업로드 방식

- 일괄 업로드, 단일 업로드, 병렬 업로드, 분할 업로드

 

📊 테스트 결과

업로드 방식	일괄 업로드	단일 업로드	병렬 업로드	분할 업로드
1개 업로드 시간(초)	0.9	0.9	0.85	0.98
10개 업로드 시간(초)	5.04	3.33	3.17	3.9
100개 업로드 시간(초)	실패	29.39	29.78	33.79
300개 업로드 시간(초)		82.91	85.18	105.46
500개 업로드 시간(초)		142.9	144.07	177.46
1000개 업로드 시간(초)		326.02	283.59	372.29

 

1. 단일 업로드

설명	한 번에 하나의 파일만 업로드하는 방식
구현 방식	하나의 이미지를 FormData에 담아서 axios로 서버에 전송하여 이미지 업로드 처리
장점	각 파일을 개별적으로 관리할 수 있다.
단점	대규모 파일 업로드하는 시간이 오래 걸린다. 여러 번의 요청과 응답이 필요하므로 네트워크 부하가 더 커질 수 있다.
속도	크기가 작은 파일에 대한 처리 속도는 빠르지만, 큰 파일은 속도가 상대적으로 느리다.
적합한 상황	각 파일이 서로 다른 작업을 수행하거나 개별적으로 처리해야 하는 경우

 

2. 병렬 업로드

설명	여러 파일을 동시에 업로드
구현 방식	Promise.all()을 사용하여 병렬 파일 업로드를 구현. 여러 개의 파일이 선택되고 파일마다 서버로 업로드하기 위한 요청이 생성
장점	빠른 업로드 가능
단점	동시에 많은 파일을 처리하므로 서버 리소스의 부담이 커지며, 동시에 처리되는 파일이 많을수록 네트워크 부하가 증가
속도	많은 파일을 빠르게 처리하는데 효과적
적합한 상황	대용량 트래픽 지원이 가능하고 여러 파일을 빠르게 업로드 해야하는 경우

 

3. 분할 (단일)업로드 

설명	대용량 파일을 작은 청크로 나누어 업로드
구현 방식	이미지를 청크 파일로 쪼개서 axios로 서버 전송 → 서버에서 청크 파일 하나씩 임시 폴더에 저장 → 분할된 파일 병합 및 새로운 파일 생성 → 업로드 처리 및 임시 파일 삭제
장점	안정성이 높음
단점	처리 로직 복잡
속도	대용량 파일에 대한 업로드 속도를 최적화 가능(분할 병렬 업로드로 처리하면 속도 빨라짐)
적합한 상황	대용량 파일을 안정적으로 업로드해야 하는 경우.