๐ŸŒ• BE TIL Day 27 0419

JBยท2022๋…„ 4์›” 19์ผ
0

CodeCamp BE 02

๋ชฉ๋ก ๋ณด๊ธฐ
25/30

โฌ‡๏ธ Main Note
https://docs.google.com/document/d/16tOFT5iZlWc_uvNHrHL-w3Eynet1ktGHwoLee-Pbm_E/edit


๐Ÿš Image Upload Process

When user uploads a file, that image file is saved into storage service and the image url, which is in string form, is saved in database.
This URL type is called BLOB type.
โžค Binary Large Object Data : Data that's converted into binary code
The file itself isn't saved, but the pixelized Blob is saved.
- If we zoom in the image close as we can, the we can see the little pixels. Those pixel's RGB is converted as binary code and that's the way how it works.

๐Ÿš File Upload Service

import { Injectable } from '@nestjs/common';
import { Storage } from '@google-cloud/storage';
import { FileUpload } from 'graphql-upload';

interface IFile {
  files: FileUpload[];
}

@Injectable()
export class FileService {
  async upload({ files }: IFile) {
    // storage์— ํŒŒ์ผ ์ €์žฅ
    const myStorage = new Storage({
      // 2. ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜๊ณ 
      keyFilename: process.env.KEY_FILE_NAME,
      projectId: 'wise-invention-347011',
    }).bucket('main-project-files-bucket'); // ์ด ํด๋”์— ์ €์žฅํ•ด์ค˜
    // .file(file.filename); // ์ด ์ด๋ฆ„์œผ๋กœ

    // ** ์ผ๋‹จ ๋จผ์ € ๋‹ค ๋ฐ›๊ธฐ **
    const waitedFiles = await Promise.all(files);

    // files === [file, file, file, file, ...]
    const results = await Promise.all(
      // [promise, promise, promise, ...] ==> [url, url, url, ...]
      waitedFiles.map((el) => {
        // element == ํŒŒ์ผ ํ•˜๋‚˜ํ•˜๋‚˜
        return new Promise((resolve, reject) => {
          el.createReadStream() // 3. ์ฝ์–ด๋“ค์ด๋Š”๊ฑฐ์ž„
            .pipe(myStorage.file(el.filename).createWriteStream()) // ์ด storage์— ๋„ฃ์–ด์ค˜! ํ•˜๋Š”๊ฑฐ์ž„  // ๊ทธ๋Ÿผ ์œ—์ค„์—์„œ ์ฝ์–ด์˜จ ํŒŒ์ผ์„ writeํ•˜๋Š”๊ฑฐ ๊ทธ๋ž˜์„œ ์‹คํŒจ ์„ฑ๊ณต ์—ฌ๋ถ€ ๋”ฐ์ง€๊ธฐ // ์ด ํŒŒ์ผ์˜ ์ด๋ฆ„์œผ๋กœ ์ฝ๊ฒ ๋‹ค
            .on('finish', () => resolve(`wise-invention-347011/${el.filename}`)) // ๋๋‚˜๋ฉด ์ด๊ฑฐ ์‹คํ–‰์‹œ์ผœ์ค˜ (์ด๋ฏธ์ง€ URL ํ”„๋ก ํŠธ์— ๋ฑ‰๊ธฐ)
            .on('error', () => reject('์‹คํŒจ')); // ์—๋Ÿฌ๋‚˜๋ฉด ์ด๊ฑฐ ์‹คํ–‰์‹œ์ผœ์ค˜
          // ํŒŒ์ผ ์‹คํ–‰์‹œ์ผœ์„œ ์ฝ์–ด์ฃผ๊ธฐ => createReadStream
          // ์ฝ์–ด๋“ค์ธ ํŒŒ์ผ๋กœ 2์ฐจ ์ž‘์—…์„ ํ• ๋•Œ => pipe() ์‚ฌ์šฉ (์ฝ์€ ํŒŒ์ผ์˜ ์‚ฌ์ด์ฆˆ๋‚˜ ํ™”์งˆ์„ ์กฐ์ •ํ•œ๋‹ค๊ณ  ํ•˜๋Š”๊ฒƒ)
        });
      }),
    );
    // commit test test test

    return results; // finish์—์„œ ์„ฑ๊ณตํ•˜๊ฒŒ ๋˜๋ฉด frontend๋กœ ๋ฆฌํ„ดํ•ด์ค˜์•ผํ•จ // URL ์ถœ๋ ฅ
  }
}

// await ๋ฅผ ๋ถ™์ผ ์ˆ˜ ์žˆ๋Š”๊ฑด promise์— ํ•œ์—์„œ

๐Ÿš Cloud Function

Once the image is uploaded, cloud function automatically executes its function. ex) Enlarging or compressing the size of image

Cloud Function is called Thumbnail Trigger
โžค According to the image, it automatically shrinks the size of image.
After recreating the image as a new size, it re-stores into storage.

profile
๋‘๋น„๋‘๋ฐฅ๋ฐฅ

0๊ฐœ์˜ ๋Œ“๊ธ€