refactor: 사전 식물 이미지 해상도를 조정한다

[WaiNaat]

🔥 연관 이슈

• close S3 이미지를 최적화한다 #381

🚀 작업 내용

• S3에 저장된 여러 해상도 사진들의 네이밍 컨벤션 #384 에서 논의한 내용을 바탕으로 변환한 사진을 S3에 업로드
  • sharp 사용
  • small: 가로 256px
  • x-small: 가로 64px
• 주어진 크기에 맞게 적절한 url을 찾아주는 유틸 함수
• Image 컴포넌트에서 해당 url로 로딩 시도

사진 변환 코드 (별도의 폴더에서 따로 진행)

import Sharp from 'sharp'; // 이 패키지는 npm으로 설치가 필요해요
import fs from 'fs';
import { join } from 'path';

const SMALL = {
  width: 256,
};

const X_SMALL = {
  width: 64,
};

const INPUT_DIR = './static';
const OUTPUT_DIR = './output';

const getFileNames = (dir) => fs.readdirSync(dir);

const convertImageTo = async (filename, width, type, format) => {
  const inputPath = join(INPUT_DIR, filename);
  const filenameWithoutExt = filename.split('.')[0];

  const sharp = new Sharp(inputPath);
  const { width: imageWidth } = await sharp.metadata();

  if (imageWidth <= width) {
    console.log(`${filename} image width(${imageWidth}) is smaller than target size(${width}).`);
    return false;
  }

  await sharp
    .resize(width)
    .toFormat(format.toLowerCase(), { quality: 100 })
    .toFile(join(OUTPUT_DIR, `${filenameWithoutExt}.${type}.${format.toLowerCase()}`));

  return true;
};

const filenames = getFileNames(INPUT_DIR);

filenames.forEach(async (filename) => {
  await convertImageTo(filename, SMALL.width, 'small', 'png');
  await convertImageTo(filename, SMALL.width, 'small', 'webp');
  
  await convertImageTo(filename, X_SMALL.width, 'x-small', 'png');
  await convertImageTo(filename, X_SMALL.width, 'x-small', 'webp');
});

💬 리뷰 중점사항

로직이 좀 특이합니다.

picture / source를 안 쓴 이유

source에 webp가 들어있다고 칩시다. webp 브라우저를 지원하는 곳에서는 webp 주소로 로딩을 시도합니다.
근데 만약 저희가 S3에 해당 이미지의 webp 버전을 제공하지 않으면? 터집니다. 근데 여기서

1. onError로 src를 sadpiumiPng로 교체할 경우: sadpiumiPng가 나오고 끝
2. onError를 주지 않을 경우: 계속해서 없는 이미지 찾기 시도

이런 이지선다에 걸렸어요
제가 원하는 동작 방식은 webp 있는지 -> 없으면 png 있는지 -> 없으면 원본 -> 진짜없으면 피우미 이거였는데 source의 동작 방식은 이거랑 완전히 다르더라구요. source의 핵심은 '이게 있는가?'가 아니라 '이 확장자를 지원하는가?'여서 관심사 차이가 심해 사용하지 않는 게 오히려 구현이 편했습니다.

그래서 현재 로직은

1. 처음에 배열에 링크를 우선순위 낮은 것부터 오름차순으로 넣습니다.
2. 배열 맨 마지막 (가장 중요한) 링크로 로딩을 시도합니다
3. 실패 시 onError에서 그 다음 중요한 링크로 교체합니다.
4. 모두 실패하면 맨 마지막의 피우미가 반겨줍니다

이런 방식으로 구성을 해 놓았어요

장점은 webp를 지원하는 브라우저이고, s3에서 지원한다면 확실하게 처리가 가능합니다
단점은 s3에 없다면 webp -> png -> 원본 순서로 총 세 번의 요청을 보내야 해서 이게 과연 맞는 방법인지는 모르겠습니다
(unsplash에서 이미지를 받아오면 세 번의 요청을 해야 하는데 육안으로는 큰 차이를 느끼진 못했어요)

[hozzijeong]

코드적으로 궁금한건 딱히 없습니다!

다만... 기능이 제대로 동작하는지 확인해보려면 develop에서 확인 해봐야 할 것 같아요! 그래서 일단 Approve하겠습니다.

[bassyu]

깔끔하네요~!
PR 메세지 좋아요 👍
로직들이 막힘없이 이해됐어요 👍