이미지 호스팅 서비스 Cloudinary with React

Image and Video Upload, Storage, Optimization and CDN

Image and Video Upload, Storage, Optimization and CDN

개요

Cloudinary는 이미지를 호스팅해주는 클라우드이다. 이걸 사용하는 방식은 내가 이미지를 업로드 하고싶을 때 Cloudinary API를 이용해서 Cloudinary의 내 개인 저장소에 업로드를 하고 호스팅 url을 반환하면 해당 url을 DB에 저장한다. 해당 이미지가 필요하면 경로만 태그에 넣어주면 된다. Cloudinary를 사용하는건 그저 강의에서 본 내용인데 이걸 왜 써야하는지 등 이유를 알고싶었고 공유하고자 이렇게 블로그 글을 작성한다.

장단점

위에 말해둔 것처럼 내 이미지를 내 서버에 직접 호스팅 하고 사용하는 것이 아니라 클라우드에 올려두고 사용하는 것이다. 조금 더 생각해보면 내 서버에서 직접적인 I/O가 일어나는 것이 아니라 파일 관리에 대한 부담과 리소스 사용에 대한 부담이 줄어들 수 있다. 또한 서버단에서 직접 파일에 대한 사이즈나 업로더 등을 사용할 일이 줄어들어 이미 만들어진 라이브러리를 사용하는 느낌이라는 장점도 있을 것 같다. 이렇게 내 서버를 사용하지 않는다는 점에서 비용이 들 수 있는데 보통 자기 서버도 클라우드 올리는 추세이기에 서버에서 입출력이 일어나는 비용이나 클라우드 이용 비용이나 그게 그거 아닐까 싶다. ( 어디까지나 내 추측일 뿐… ) 여기까지 내 상상과 추측으로 쓴 글이고 아래는 블로그와 GPT를 이용해서 정보를 모아본 내용이다.

ps. aws에서는 ec2에 직접 이미지를 올리는 것보다 s3 서비스를 이용하여 따로 호스팅 하는게 비용 절감이 되기도 한다는걸 보면 이미지를 많이 사용하는 서비스에서는 이미지 호스팅 서비스 사용을 많이 고려해야겠다.

이미지 호스팅 서비스 장점

1. 클라우드 서비스는 확장 가능하며 빠른 이미지 전송을 제공한다. ( 대규모 트레픽 처리에 좋다고 한다. )
2. 백업, 스케일링, 보안 및 CDN을 통한 빠른 이미지 캐싱과 같은 고급 기능을 제공한다.
3. 대부분의 클라우드 서비스는 이미지 변환 및 조작을 지원하므로 동적 이미지 처리가 쉽다.
4. 빠른속도는 SEO에도 영향을 준다. *seo는 검색했을 때 상위노출 되는 점수라고 볼 수 있는데 페이지 로딩시간이 길면 seo가 떨어진다고 한다. 상품을 파는 쇼핑몰이라고 생각했을 때 이런 요소는 중요하기 때문에 꼭 고려해야될 사안인 것 같다.

이미지 호스팅 서비스 단점

1. 추가 비용의 발생과 데이터 전송 비용이 있을 수 있다.
2. 외부 클라우드 서비스에 의존하는 것이므로 해당 회사에 문제가 생기면 내 서비스에도 문제가 생길 수 있다.
3. 서버 전체에서 내 제어권이 조금 떨어지는 느낌을 받을 수도 있다.

장단점 Summmary

이미지 호스팅 서비스를 이용할 경우 속도면에서 이점이 있으며, 이는 seo에도 영향을 준다. seo의 경우 거의 모든 웹서비스에서 고려하지 않을 수 없는 부분이라고 생각했을 때 일반적으로 이미지 호스팅 서비스를 이용하는 것이 더 좋지 않을까 생각이 든다. 하지만 이미지를 따로 호스팅 하는 것 자체가 어느정도 비용이 드는것은 무시할 수 없기에 내가 판단하기 보다는 현업 경험자의 판단을 들어보고 따르는 것이 좋을 것 같다는 생각이 든다.

Cloudinary사용 예제

Cloudinary 기능은 다양하다. 사진 크기 조절도 되는걸로 알고있고, 내부적으로 제한을 걸 수도 있다. 특정 사이즈와 특정 확장자만 업로드 가능하게 만들 수 있기 때문에 나름 보안적 이점도 갖출 수 있지 않을까 싶다. 이번 글에서는 모든 기능을 다루기 보다는 지금 내가 사용하고 있는 기능인 업로드와 그에 사용예제만 간단하게 작성해보고자 한다. 일단 jsx에서는 아래와 같이 작성했다.

1. file 타입의 Input에서 onChange((e)⇒ setFile(e.target.value) ) 방식으로 이미지 파일 객체를 받는다.

    const [file, setFile] = useState();
    
return (
        <section className="w-full text-center ">
            <form className="flex flex-col px-12" onSubmit={handleSubmit}>
                <input type="file" accept="image/*" name="file" required onChange={(e)=>setFile(e.target.value)}/>
                <input type="text" name="title" value={product.title ?? ''} placeholder="제품명" required onChange={handleChange}/>
                <input type="number" name="price" value={product.price ?? ''} placeholder="가격" required onChange={handleChange}/>
                <input type="text" name="category" value={product.category ?? ''} placeholder="카테고리" required onChange={handleChange}/>
                <input type="text" name="description" value={product.description ?? ''} placeholder="제품설명" required onChange={handleChange}/>
                <input type="text" name="options" value={product.options ?? ''} placeholder="옵션들(콤마(,)로 구분)" required onChange={handleChange}/>
                <Button text={isUploading? '업로드중...' : "제품 등록하기"} disabled={isUploading}/>
            </form>
        </section>
	    );

1. 아래와 같이 자신의 클라우디너리에 있는 PRESET과 CLOUDINARY_URL 넣어주면 된다.

export async function uploadImage(file) {
    const data = new FormData();
    data.append('file',file);
    data.append('upload_preset', process.env.REACT_APP_CLOUDINARY_PRESET);
    return fetch(process.env.REACT_APP_CLOUDINARY_URL, {
        method: 'POST',
        body: data
    }).then((res)=>res.json()).then(data => data.url);
}

별첨

Preset 위치

settings ⇒ upload ⇒ Upload presets에 ml default 바로 위의 name 이다.

아래 API 경로로 request를 보내서 이미지 업로드 기능 사용.

이미지 업로드시 ImageURL이 반환되는데 이를 DB에 저장하여 이미지를 관리한다.

<https://api.cloudinary.com/v1_1/>[클라우드 이름]/image/upload