[javascript] Nuxt.js에서의 사진/비디오 갤러리 구현 방법은?

19 Dec 2023

javascript

1. 이미지 및 비디오 컴포넌트

먼저, 이미지 및 비디오를 표시하기 위한 컴포넌트를 작성합니다. 예를 들어, “GalleryImage.vue” 및 “GalleryVideo.vue”와 같은 컴포넌트를 생성하여 각각 이미지와 비디오를 렌더링하는 방법을 정의합니다.

<template>
  <div>
    <img v-if="isImage" :src="mediaUrl" alt="Image">
    <video v-else :src="mediaUrl" controls>
      Your browser does not support the video tag.
    </video>
  </div>
</template>

<script>
export default {
  props: {
    mediaUrl: String,
    isImage: Boolean
  }
}
</script>

2. 갤러리 컴포넌트

다음으로, 이미지 및 비디오 컴포넌트를 사용하여 갤러리 컴포넌트를 작성합니다. 갤러리에서 표시할 미디어 목록을 가져오고, 각 미디어에 대한 렌더링 방법을 정의합니다.

<template>
  <div>
    <gallery-image v-for="(image, index) in images" :key="index" :mediaUrl="image.url" :isImage="true" />
    <gallery-video v-for="(video, index) in videos" :key="index" :mediaUrl="video.url" :isImage="false" />
  </div>
</template>
...

3. 데이터 처리

데이터는 API 호출 또는 로컬 스토리지에서 가져와서 갤러리 컴포넌트에 전달할 수 있습니다. Nuxt.js의 asyncData 또는 fetch 메서드를 사용하여 데이터를 미리 로드하고 컴포넌트에 전달할 수 있습니다.

export default {
  async asyncData({ params }) {
    const images = await fetchImagesFromAPI();
    const videos = await fetchVideosFromAPI();
    return { images, videos };
  }
}

이제, Nuxt.js를 사용하여 사진/비디오 갤러리를 구현하는 방법에 대해 알아보았습니다. 페이지를 만들고 갤러리 컴포넌트를 추가하여 원하는 미디어를 표시할 수 있습니다.

이 글이 도움이 되었기를 바랍니다. 더 궁금한 점이 있다면 언제든지 물어보세요!