클라우디너리(Cloudinary) 사용법

Cloudinary

클라우디너리는 SaaS 기술 회사이다. 클라우드 기반 이미지 및 비디오 관리 서비스를 제공한다. 사용자는 웹사이트와 앱용 이미지와 비디오를 업로드, 저장, 관리, 조작, 전송할 수 있다.

• SasS(Software as a service) : 소프트웨어가 구독 기반으로 라이선스가 부여되고 중앙에서 호스팅되는 소프트웨어 라이선스 및 제공 모델이다. 온디맨드 소프트웨어, 웹 기반 소프트웨어 또는 웹 호스팅 소프트웨어라고도 한다.

클라우디너리 이미지 관리 예시 코드

config.js 파일

const config = {
  cloudinaryName: process.env.CLOUDINARY_NAME,
  cloudinaryKey: process.env.CLOUDINARY_KEY,
  cloudinarySecret: process.env.CLOUDINARY_SECRET,
};

export default config;

.env 파일

CLOUDINARY_NAME=
CLOUDINARY_KEY=
CLOUDINARY_SECRET=

ApiService.js 파일

import config from '../config';

const { cloudinaryName, cloudinaryKey } = config;

//

async upload(imageFile) {
    const url = `https://api.cloudinary.com/v1_1/${cloudinaryName}/image/upload/`;

    const formData = new FormData();

    formData.append('api_key', cloudinaryKey);
    formData.append('upload_preset', 'sn2yqsne');
    formData.append('timestamp', (Date.now() / 1000) || 0);
    formData.append('file', imageFile);

    const configOfUpload = {
      header: { 'Content-Type': 'multipart/form-data' },
    };

    const { data } = await axios.post(url, formData, configOfUpload);

    return data.url;
  }

Store

async uploadImage(imageFile) {
    const imageUrl = await apiService.upload(imageFile);

    this.imageUrl = imageUrl;
    this.publish();
  }

사용하는 쪽 코드(상품 이미지 등록 form)

const handleImageChange = (e) => {
    shopStore.uploadImage(e.target.files[0]);
  };

const onSubmit = async (data) => {
    const image = shopStore.imageUrl;

    const {
      name, description, price, inventory,
    } = data;

    await shopStore.registerProduct({
      name, description, image, price, inventory,
    });

    navigate('/admin/management');
  };

//

<div>
  <label htmlFor="input-product-image">상품 이미지</label>
  <input
    id="input-product-image"
    type="file"
    onChange={handleImageChange}
  />
</div>
<img src={shopStore.imageUrl} alt="이미지" />

뚝딱 완성이다✨