이미지 업로드 프로세스는 회사, 서비스마다 다를 수 있기 때문에 일반적인 이미지 업로드 프로세스에 대해 알아보려고 한다.

이미지 업로드 과정

1. 유저가 브라우저에서 이미지 파일을 업로드한다.
2. 업로드된 이미지 파일을 브라우저에서 변수에 저장한다. 변수에는 파일 객체가 담기는데, 파일 객체에는 파일에 대한 정보가 들어 있다.
3. 브라우저는 백엔드 서버에 파일 객체를 업로드하는 API를 요청한다. (백엔드 서버에 파일 업로드 API 필요)
4. 백엔드 서버는 전달 받은 파일 객체를 DB에 저장한다.

스토리지 서비스(Storage service)

• 이미지 파일은 용량이 크기 때문에 모든 이미지 파일을 자체 DB에 저장하는 것은 비효율적이다.
• 이미지 파일을 자체 DB에 저장하기 보다 스토리지 서비스(Storage service)를 사용해 이미지 파일을 저장한다.
• 스토리지 서비스를 제공하는 회사를 클라우드 제공자(Cloud provider)라고 한다.
• 대표적인 클라우드 제공자
  • AWS
  • GCP
  • AZURE
• 클라우드 제공자에게 비용을 지불하고 이미지 파일을 저장할 수 있다.

이미지 파일 주소 저장 과정

1. 프론트엔드에서 백엔드의 파일 업로드 API를 요청하면서 이미지 파일을 전달한다.
2. 파일 업로드 API는 스토리지 서비스를 사용해 스토리지에 이미지 파일을 저장한다.
3. 파일 업로드 API는 스토리지에 저장된 이미지 파일의 주소를 받는다.
4. 스토리지에 저장된 이미지 파일의 주소를 프론트엔드에 돌려 준다.

이후 이미지 파일 주소를 자체 DB에 저장하는 과정이 필요하다.

• 게시글 등록 API 예시
• 프론트엔드에서 게시글 제목, 내용, 작성자, 이미지 파일 주소 등을 포함해서 게시글 등록 API를 요청한다.
• 게시글 등록 API의 실행 결과 게시글 제목, 내용, 작성자, 이미지 파일 주소 등을 DB에 저장한다.
• 테이블 관계에 따라 게시글 테이블 또는 이미지 테이블에 이미지 파일 주소를 저장한다.

참고

• 이미지 업로드하기