Cloudinary

📌 Cloudinary 소개

• 클라우드 기반의 이미지 및 비디오 관리 서비스
• Cloudinary에 가입 후, 이미지를 업로드하면 고유한 URL을 얻을 수 있다.
• 원본으로 저장뿐만 아니라, resizing도 가능하다.

📌 기술 선정 이유

• OAuth로 로그인 & 회원가입 한 user 중 프로필 사진이 없는 user가 있을 수 있다.
• 함께 사용가능한 소셜가계부라는 점에서, 가계부 별 Member들이 있는데
  혹시나 동명이인이 있을 경우, user를 구별할 수 있는 방법 중 프로필 사진으로 구별하는 방법을 생각해보게 되었다.
• 프로필 사진이 굳이 고화질 이거나 큰 Size일 필요가 없다.
  • why? 설정 페이지에서만 보여줄 것이기도 하고, header에서도 작은 Size 로 표현되므로
  • 
• 우리의 DB에는 image 자체가 아닌, image URL만 저장하면 된다.

📌 특징 1. 이미지 resizing 가능

• Cloudinary 가입 후, Settings에서 Upload 관련 기능을 설정할 수 있다.
• 나는 내 저장소의 최적화를 위해,
  • Quality는 economy mode 로, (best, good quality 등의 mode도 있다)
    • Quality는 다소 낮아지는 것을 발견했지만, 크게 차이가 나지 않을 뿐더러,
    • 저장소에 저장되는 image 크기가 확 주는 것을 확인했다.
  • Mode는 Fit으로 이미지 비율을 고려했다.

📌 특징 2. upload API

• file upload 가이드를 찾아 구현을 진행했다.
• 가이드를 요약하자면, 사용 방식은 아래와 같다.
  • POST 요청을 보내는 점
  • https://api.cloudinary.com/v1_1/<cloud name>/<resource_type>/upload
  • 위의 url 양식에 맞춰 본인의 정보를 담아주면 된다.

📌 특징 3. 무료다!

• 무료 버전과 유료 버전이 같이 있다.
• 이미지 업로드가 주인 서비스가 아니기도 하고,
  공부용 목적으로 프로젝트를 만들고 있는 입장에서 무료라는 점은 큰 메리트가 있었다.

📌 Image Uploader 구현

• CLOUDINARY_URL과 PRESET 정보는 .env에 저장하여 정보를 관리했다.
• 가이드를 통해 얻은 정보를 바탕으로 Image Uploader를 구현했다.

class ImageUploader {
  async upload(file) {
    const data = new FormData();
    const preset = process.env.REACT_APP_PRESET;
    const CloudinaryURL = process.env.REACT_APP_CLOUDINARY_URL;

    data.append('file', file);
    data.append('upload_preset', preset);

    const result = await fetch(CloudinaryURL, {
      method: 'POST',
      body: data,
    });

    return await result.json();
  }
}

export default ImageUploader;

📌 User에게서 Image File 받기

• input 태그의 type은 file, accept은 image/*로 해서 file을 받으면 된다.
• 특정 image 확장자만 받고 싶다면 *을 변경하면 된다.
• 생성한 input에 change가 발생한다면, upload 기능을 실행하면 된다.

📌 느낀점

• 가이드 문서를 읽어보면 어떻게 구현해야할지 확인 가능하다.
• 한글로된 정보가 많지 않다..
• 가이드 문서의 한 페이지에 여러 정보가 담겨있어서, 내가 원하는 부분을 잘 찾아야한다.