[TIL/React] 2025/01/03

![](https://velog.velcdn.com/images/minkwan/post/c7e03cd7-da7d-42be-9844-2cea75f87b5f/image.jpg)

다음으로는 ```webp(웹피)```다. webp는 2010년 구글에서 개발한 이미지 포맷이다. 구글놈들이 인터넷에서 ```이미지가 로딩되는 시간을 단축하기 위해 출시한 파일 포맷```이다. 그렇다면, "기본적으로 webp 확장자를 이미지에 적용하여 서버에 저장하되, webp가 적용되지 않은 경우에 예외적으로 jpeg를 적용하면 이미지 최적화에 큰 도움이 되겠구먼!"이라는 생각이 든다. 

 const convertBase64ToWebpFileWithFallback = async (
    base64: string
  ): Promise<File> => {
    return new Promise((resolve) => {
      // 1. Image 객체 생성 및 base64 설정
      const img = new Image();
      img.src = base64;

      // 2. 이미지 로드 성공 시 처리
      img.onload = () => {
        // 2-1. 캔버스 생성 및 크기 설정
        const canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;

        // 2-2. 캔버스 컨텍스트 가져오기
        const ctx = canvas.getContext("2d");
        if (!ctx) {
          console.error("Canvas context is not available.");
          // 캔버스 컨텍스트를 사용할 수 없는 경우 원본 이미지로 반환
          resolve(convertBase64ToOriginal(base64)); // 폴백: 원본 이미지 반환
          return;
        }

        // 2-3. 이미지 캔버스에 그리기
        ctx.drawImage(img, 0, 0);

        // 2-4. webp 변환 시도
        canvas.toBlob(
          (blob) => {
            if (blob) {
              // WebP 변환 성공
              const webpFile = new File([blob], `image-${Date.now()}.webp`, {
                type: "image/webp",
              });
              resolve(webpFile);
            } else {
              console.warn("webp conversion failed. Returning original image.");
              // webp 변환 실패 시 원본 이미지 반환
              resolve(convertBase64ToOriginal(base64)); // 폴백: 원본 이미지 반환
            }
          },
          "image/webp",
          0.8 // 품질 설정 (0.8 = 80%)
        );
      };

      // 3. 이미지 로드 실패 시 처리
      img.onerror = (err) => {
        console.error("Image loading failed:", err);
        // 이미지 로드 실패 시 원본 이미지 반환
        resolve(convertBase64ToOriginal(base64)); // 폴백: 원본 이미지 반환
      };
    });
  };

2D 그래픽 작업을 위한 화구 가방이 잘 가져와지지 않았다면, 후술하게 될 convertBase64ToOriginal() 함수를 실행하게 된다.

#### 2-3. 이미지 캔버스에 그리기

![](https://velog.velcdn.com/images/minkwan/post/3322bf5a-8dc4-4aff-a248-ae20e4f5767b/image.png)

이제 화구 가방에서 drawImage 함수라는 도구를 꺼내서 이미지를 그리게 된다. 해당 코드에서 캔버스의 시작 좌표는 (0, 0)으로 설정했고, 각각은 x좌표와 y좌표를 뜻한다.

#### 2-4. Webp 변환 시도

![](https://velog.velcdn.com/images/minkwan/post/d2a2752a-de8f-449a-a8ea-f47c107de0cf/image.png)

  const convertBase64ToOriginal = async (src: string) => {
    const base = atob(src.split(",")[1]);
    const blob = Uint8Array.from(base, (char) => char.charCodeAt(0));
    console.log({ base, blob });
    return new File([blob], `image-${Date.now()}.jpeg`, { type: "image/jpeg" });
  };

atob() 함수는 Base64로 인코딩된 문자열 데이터를 디코딩 한다. split() 메서드를 사용해 데이터 URI에서 Base64로 인코딩된 실제 데이터 부분만 추출한다. 즉, atob()은 Base64로 인코딩된 데이터를 ASCII 문자열 형식으로 복원한다.