앞선 글에서 파이어 베이스의 컬렉션 문서에 여러 개의 사진 파일을 등록하는 방법을 소개했었다. https://blog.naver.com/mythee1/223531049562
이렇게 다수의 사진 파일들을 파이어 베이스에 업로드하게 되면, 실제 파일 내용은 storage 부분에 저장되고, 그 각각의 URL이 다음과 같은 형태로, FIrestore Database 내에 등록되며, 이들 사진들을 제대로 표시하려면 기존의 파일이 1개인 경우와는 다른 방법이 필요하다.
기존에는 등록된 파일이 각각의 컬렉션 문서(=Record)별로 1개씩이라, 각각의 사진을 읽어와 다음과 같은 방식으로 표시하면 아무 어려움이 없었다.
이를 가져와 표시하는 부분은 다음과 같이 Cardbox를 사용했는데,
$(document).ready(function() {
// Firestore에서 데이터를 읽어와 화면에 표시합니다.
db.collection("products").get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
var data = doc.data();
var date = new Date(data.날짜.seconds * 1000).toLocaleString(); // 날짜를 YYYY/MM/DD hh:mm:ss 형식으로 변환합니다.
var html = `
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="${data.사진}" alt="${data.상품명}" style="width: 150px; height: 150px;">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">${data.상품명}</h5>
<p class="card-text">${data.상품설명}</p>
<p class="card-text"><small class="text-muted">${data.가격}</small></p> <!-- "원" 부분을 제거합니다. -->
<p class="card-text"><small class="text-muted">${date}</small></p> <!-- 등록 날짜를 표시합니다. -->
</div>
</div>
</div>
</div>
`;
$('#productList').append(html);
});
});
});
실제 이미지 표시와 직접 관련된 부분은 다음 1줄이라고 할수 있다.
그런데, DB에서 읽어와 표시할 사진들의 수가 많아지면, 이들을 동시에 표시하는 것보다는 다음의 동영상처럼, 사진들을 하나씩 차례대로 넘기면서 표시하는 커로젤 (Carousel) 방식이 더 효율적이다. 일단 기존의 카드박스 포맷을 굳이 변경하지 않아도 되고, 사진의 수가 많아지더라도 동일한 포맷 내에서 활용할 수 있는 장점 때문이다.
한편 앞서 소개한 부트스트랩(https://blog.naver.com/mythee1/223492208854 참조)에서는 다음화면에서처럼 Component 항목 부분에서 커로젤 구현 방법과 예제 코드를 제공하고 있기 때문에, 이를 사용하면 다소 복잡할 수도 있는 Carousel을 아주 쉽게 구현할 수가 있다.
위에 제시한 코드에서, 기존 단 한 장의 사진 파일을 표시할 때 사용했던 다음 부분을
다음과 같이 수정했다.
부트스트랩의 기본 예제와 차이가 있는 점은 부트스트랩은 하나의 커로젤을 만드는 예제임에 반해서, 실제 파이어베이스의 레코드를 불러와 커로젤을 만드는 경우에는 각각의 각각의 문서(record)마다 커로젤을 만들어 주어야 한다는 점이다. 즉 각각의 커로젤을 구분해주어야 하고, 배열의 형태로 커로젤 생성을 반복해야 한다는 차이가 있다.
이들 각각의 커로젤을 구분하기 위해 다음과 같은 변수를 미리 하나 선언해 주고
각각의 이미지를 불러와 커로젤을 생성할 때 구분자로 사용하였다는 점이다.
이렇게 여러 장의 사진 파일을 불러와, 각각의 문서마다 커로젤을 생성하는 코드는 다음에 첨부해 둔다.
침고로 이 코드는 기존에 설명한 특정 필드값으로 정렬하는 부분과, paging 하는 부분에 대한 내용이 추가된 상태이다.