Nuxt 3에서 Cloudinary 이미지를 사용하는 방법

저는 최근 Geekle JS Global Summit에서 Cloudinary를 사용한 이미지 최적화에 대해 이야기한 인터뷰 기회를 가졌습니다. Colby는 Next.js의 열렬한 팬입니다. 저는 이 주제에 정말 관심이 있었고 주제에 대해 자세히 알아보고 제가 가장 좋아하는 JS 프레임워크인 Nuxt 3에서 Cloudinary로 이미지를 최적화하는 방법에 대한 기사를 쓰기로 결정했습니다.

Cloudinary와 쉽게 통합하기 위해 Nuxt 이미지 모듈을 사용합니다. 이 기사는 Colby가 작성한 기사를 기반으로 하지만 Next 대신 Nuxt를 사용합니다. 읽을 수 있는 원본 기사here

Nuxt 이미지란?

Nuxt 앱을 위한 플러그 앤 플레이 이미지 최적화. 내장된 옵티마이저 또는 좋아하는 이미지 CDN을 사용하여 이미지 크기를 조정하고 변환합니다. @nuxtjs/image 문서here를 확인할 수 있습니다.

Cloudinary 란 무엇입니까?

Cloudinary는 팀이 이미지뿐만 아니라 비디오도 관리, 최적화 및 변환할 수 있는 미디어 관리 솔루션입니다.

소셜 미디어 이미지를 자동으로 생성하거나 가장 간단하게 Cloudinary를 CDN으로 사용하는 등 Cloudinary로 할 수 있는 멋진 작업이 많이 있습니다. 또한 디자이너와 개발자가 이미지를 관리하고 사용하는 프로젝트 워크플로를 원활하게 진행할 수 있는 좋은 방법입니다.

코딩 시간!

먼저 빈 Nuxt 3 프로젝트를 생성해 보겠습니다.

npx nuxi init nuxt-cloudinary

프로젝트 구조는 다음과 같아야 합니다.



이제 프로젝트에 @nuxt/image-edge 모듈을 설치해 보겠습니다.

yarn add --dev @nuxt/image-edge

다음으로 nuxt.config.ts 파일에 모듈을 등록해 보겠습니다.

import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
  modules: [
    '@nuxt/image-edge',
  ]
})

이것이 모듈의 전부입니다. 기본 IPX 공급자를 사용하려는 경우 체크아웃할 수 있습니다here. 이것이 구성의 전부였을 것입니다. 그러나 이 자습서에서와 같이 더 많은 옵션이 필요한 경우 적절한 Cloudinary 구성을 사용하여 nuxt.config.ts 파일에 이미지 개체를 추가합니다.

image: {
  // Options
}

@nuxtjs/image-edge 파일에 nuxt.config.ts 모듈을 등록한 후 이제 이미지 최적화를 처리할 nuxt-img 및 nuxt-picture 구성 요소에 모두 액세스할 수 있습니다. 이 자습서에서는 NuxtImg 구성 요소만 사용하지만 둘 다 사용해도 됩니다.

Cloudinary에 대한 짧은 소개

Cloudinary 웹 사이트에 로그인하면 아래와 유사한 대시보드가 ​​표시됩니다.



Cloudinary는 디지털 자산 관리이므로 다양한 기능을 사용할 수 있습니다. 이 자습서에서는 일부 기능만 사용할 것이므로 사용해 보시기 바랍니다. 아래에서 최적화된 이미지를 가져오는 데 사용할 미디어 갤러리를 볼 수 있습니다.



앱에서 나중에 사용할 것이므로 이미지 경로를 복사해야 합니다. 제 경우 링크는 다음과 같았습니다.

https://res.cloudinary.com/${YOUR_SPACE_ID}/image/upload/${YOUR_FOLDER_ID}/cld-sample-5.jpg

다시 코드로!

Cloudinary 서비스와 함께 작동하도록 이미지 모듈을 구성해 보겠습니다. baseURL 객체의 cloudinary 속성은 통합 작업에 필요한 유일한 속성이므로 전달합니다.

// nuxt.config.ts

export default defineNuxtConfig({
    modules: [
        '@nuxt/image-edge',
      ],
      image: {
        cloudinary: {
            baseURL: 'https://res.cloudinary.com/${YOUR_SPACE_ID}/image/upload/${YOUR_FOLDER_ID}'
        }
      }
})

브라우저에서 어떻게 작동하는지 확인하기 위해 app.vue 코드를 다음과 같이 수정해 보겠습니다.

// app.vue

<template>
  <div>
    <h1>Image cld-sample-5.jpg from Cloudinary</h1>
    <nuxt-img provider="cloudinary" src="/cld-sample-5.jpg" />
  </div>
</template>

브라우저로 전환하면 다음과 같이 표시됩니다.



현재 우리는 Cloudinary에서 직접 이미지를 가져올 수 있기 때문에 통합이 작동한다는 것을 알고 있습니다. 너비/높이와 몇 가지 수정자를 이미지에 적용하여 좀 더 보기 좋게 만들어 보겠습니다.

    <nuxt-img
      provider="cloudinary"
      src="/cld-sample-5.jpg"
      width="300"
      height="169"
      :modifiers="{ roundCorner: 'max', effect: 'grayscale' }"
    />

수정된 이미지가 어떻게 보이는지 브라우저에서 살펴보겠습니다.



사용 가능한 모든 수정자에 관심이 있는 경우 설명서here를 확인하십시오.

요약

잘했어요! Cloudinary를 Nuxt 3 프로젝트와 통합했습니다. 그러나 이것은 이미지 최적화 및 조작 측면에서 빙산의 일각에 불과하므로 이미지 최적화 개념 및 Cloudinary 서비스에 대해 자세히 알아보십시오.