image upload process

이미지 파일을 DB에 저장 하기에는 요량이 커서 비효율적이기 때문에 Storage Service를 이용한다.
Storage service는 AWS,GCP, Azure에서 제공 된다.

image upload process
1. 브라우저에서 사용자가 업로들할 파일을 선택한다.
2. 브라우저에서 선택된 파일을 변수에 저장
변수에 담신 내용을 파일 객체라고 하면 파일 사이즈 등 파일에 대한 정보를 담고 있음
3. 파일 객체를 백엔드 서버에 업로드 요청
백엔드 서버의 파일 업로드 API작동
file.resovler.ts에는 uploadFile이라는 API가 있다 service의 upload()를 return
file.service.ts에는 upload()를 이용하기 위해서는 FileService를 constructor에 주입한다.
return 값으로 FileService의 Upload를 톧해 URL주소를 반환해서 브라우저에 보내준다.
src/main.ts에는 app.use(graphqlUploadExpress());를 더해준다.
4. 백엔드 서버 API를 통해 받은 파일을 DB에 저장시 BLOB타입으로 저장
이미지 파일은 storage 서비스에 대신 저장

이미지 파일 storage에 저장되는 과정
1. API를 요청하면 이미지가 storage에 파일로 저장된다.
2. storage에서는 파일을 저장한 결과로 사진을 다운로드 할 수 있는 주소를 반환
3. 백엔드에서는 반환된 주소를 브라우저로 보내준다.

->파일 첨부해서 요청을 보내면 이런 file 정보가 뜬다.

GCP를 사용하기 위해서는 Storage를 새로 생성해야 한다.

projectID: GCP에서 사용할 사용할 ID
KeyFilename: Cloud Storage를 사용하기 위한 인증에 필요한 key의 파일명
bucket: GCP-Cloud Storage 에서 업로드된파일이 저당된 버킷명

그리고

const waitedfiles = await Promise.all(files);

로 파일을 가지고 온다

const results = Promise.all(
      waitedfiles.map(
        (el) =>
          new Promise((resolve, reject) => {
            el.createReadStream()
              .pipe(storage.file(el.filename).createWriteStream())
              .on('finish', () => resolve(`${bucket}/${el.filename}`))
              .on('error', () => reject('실패'));
          }),
      ),
    );

map을 사용해서 streamd을 통해 읽고 storage에 저장한다.

5. 브라우저에서 게시글을 작성하게 되면 img url을 포함해서 게시문 등록 API 요청
6. API를 통해 게시클테이블이 새성되고 이미지는 이미지 테이브렝 따로 저장된다.

화면에 이미지 파일 보이는 과정

1. 브라우저에 주소를 입겨하고 접속하면 프론트 서버에서는 html,css,js를 보내준다.
2. 브라우저에서는 html코드를 실행시켜 화면에 그려주게 된다.
   이때 이미지 주소를 담고 잇는 img태그는 단순 문자열로 되어 잇으며 실제로 실행되는 것은 브라우저에 화면이 그려지고 나서 이미지 주소에 2차적으로 재요청을 하게 된다.
3. 재요청을 통해 storage에서 사진을 다운 받은 후 화면에 나타나기 때문에 사진이 화면에 보여지는 과정은 다른 요소들보다 시간이 걸린다.