앨범 페이지를 만들어볼까?
파이어베이스로 간단한 상품 소개 웹서비스를 만들면서, 문득 여러 상품 사진들을 쭉 나열해서 살펴볼 수 있는 앨범 같은 기능이 있으면 좋겠다는 생각이 들었다. 전체 상품(또는 상점) 등의 사진만을 나열하는 것도 나름 나쁘지 않겠다는 생각이 들었기 때문이다.
물론 이렇게 작은 앨범들 중 특정 사진을 클릭하면 다음과 같이 확대해서 보여줄 필요도 있을듯했다. 이렇게 해야 보다 상세한 사진을 볼 수도 있고, 필요하면 사진을 다운로드하거나 인쇄하는 것도 가능할 것 같았다.
그래서 이런 기능을 할 수 있는 간단한 앨범 페이지를 최소한의 기능으로 간단하게 만들어보기로 했는데, 그래도 필수적으로 1) 사진 올리기, 2) 사진 보여주기, 3) 상세 사진 보여주기 등의 기능이 필요할 듯했고, 생각해 보니, 관리를 위해 4) 사진을 선택 삭제하는 기능도 필수적일듯해서 이들 4가지 기능을 구현하기로 했다.
1. 사진 파일 업로드 기능 구현
사실 사진 파일을 파이어 베이스의 스토리지에 업로드하고, 그 URL을 저장하는 방법은 이전 글에서 여러 차례 소개한 바 있었다.
본 사례에서도 동일한 원리를 이용해 구현했는데,
우선 등록할 사진 파일들을 입력받기 위해 다음과 같은 HTML을 만들고, 업로드 동작을 위한 버튼을 만들어주었다. 여러 파일을 동시에 선택해 업로드하기 위해 HTML에는 multiple 속성을 부여했다.
그리고 추후 이 HTML 태그는 여러 파일들을 업로드하는 경우에 업로드 진행도를 알기 위해, 다음과 같이 진행도 표시를 위한 줄을 추가했고, 이를 업로드 버튼 우측에 줄 바뀜 없이 표시하도록 하기 위해 inline-block 속성을 부여했다.
실제 업로드는 먼저 다음 부분으로, 파일들을 읽어들인 후 파이어베이스 스토리지에 저장했고
파일이 저장된 후, URL을 다운로드해, db.collection( ).add( ) 메서드로 등록했는데, 현재로서는 추가로 필요한 정보가 없을듯해서 간단히 URL과 filename과 저장했다.
이러한 과정에서, 업로드 진행 상황을 표시하기 위해, 다음 화면의 노란색 부분의 uploadTask( ) 메서드를 이용하는 구조를 만들었으며,
파일 업로드가 진행되는 동안은 녹색 표시된 부분의 산식으로 업로드%가 표시되며,
파일 업로드가 완료되면, uploadTask 구문에 따라 위의 적색 표시된 db.collection( ).add( ) 부분이 firestore database에 URL을 기록하도록 구성했다.
그리고, 이러한 작업이 완료되면, 현재 등록한 파일들을 포함해 앨범에 등록된 사진들을 불러와 표시하도록 했고 (이 부분은 별도 설명 참조), 업로드 진행에 사용했던 부분들과 파일 선택에 사용했던 부분들을 다시 초기화해주는 과정으로 구성했다.(하늘색 표시 부분)
<파일 이름에 대한 문제점과 해결>
이 과정에서 입력한 파일들은 이름의 유일성을 확보하기 위해, 다음과 같이 timestamp를 이용해 이름을 변경해 주었는데,
실제에 있어서는 문제가 있었고 timestamp 만으로 이름을 구성하는 것은 유일성을 확보하기에 충분하지 않았다.
실제 예로 다음과 같이 15개의 파일을 업로드했는데,
파이어베이스 콘솔에서 확인해 보니, 문서는 15개가 만들어졌으나,
실제 등록된 파일은 10개뿐인 경우가 발생했다.
실제로 등록 후 표시되는 내용은 다음과 같이 중복되는 사진들이 발생하며, 일부 사진들은 누락된 상황이 확인되었다.
이러한 현상의 원인은 업로드되는 파일의 크기가 너무 작아, 순식간에 복수의 파일이 업로드되면서 여러 개의 파일이 동일한 timestamp를 갖게 되면서 overwrite 되기 때문에 발생하는 현상으로 파악되었다.
이러한 해결책에 대해 이리저리 알아보다가, 식별 번호로 UUID를 사용할 수 있음을 알게 되어, 다음과 같이 해당 부분을 변경하게 되었다.
참고로 UUID 생성은 외부에서 다음과 같은 간단한 함수를 사용하면 되는 것을 알게 되어 이를 그대로 가져다 사용하였다.
2. 사진 목록 표시와 상세 이미지 보기 구현
위에서 등록한 파일들을 가져와 화면에 표시하는 기능은 아주 간단하게 구현했는데,
우선 사진들을 표시하기 위한 HTML을 만들고
웹페이지 헤더 부분에서 다음과 같은 style 구문으로 크기와, 외곽선 등을 지정해 주었다.
실제 표시는 다음과 같은 함수의 형태로 구성하고, 해당 페이지가 열리면 자동적으로 이 함수가 실행되도록 window.onload 메서드를 사용했다.
그리고, 이미지 상세보기를 위해서는 부트스트랩의 모달 Component를 활용했는데,
먼저 다음처럼 모달 HTML을 가져와 미리 코드에 포함시키고,
다음과 같이 함수의 형태로 URL 정보를 이용해 상세 표시하는 함수를 만들고
실제 사용 시는 다음과 같이 그림 목록 표에 부에서 showImageModal 함수를 호출하는 방식을 사용했다.
3. 사진 삭제 구현
위에서 등록한 사진들은 상황에 따라 삭제할 필요도 있는데, 결과적으로는 다음과 같이 사진들의 목록 위에 작은 버튼들을 사진마다 추가하고, 이 부분을 클릭하면 해당 사진이 파이어베이스 스토리지에서 삭제되고, 컬렉션에서도 삭제되는 방식으로 사용하게 되었다.
사진의 삭제 방식에 대해서는 각 사진의 상세 페이지에 들어가 삭제하는 경우도 고려했으나, 삭제할 대상이 많은 경우 이러한 중간 과정이 매우 번거롭고 비효율적일듯해서, 결국 나열된 사진 목록에서 곧바로 가능한 방식으로 구현하게 되었다.
등록 및 삭제가 가능한 화면
다만, 이렇게 하기 위해서, 위에서처럼 삭제 버튼이 추가된 경우의 웹페이지(파일 등록 및 삭제 가능)와,
다음과 같이 삭제 버튼이 없는 단순히 사진을 보기(상세 이미지 포함)만 하는 2가지 경우로 페이지를 나누게 되었다.
실제 구현은 다음과 같은 deleteImage 함수를 만들고,
다음과 같은 방식으로 삭제 버튼을 만들고, 삭제 버튼이 눌려졌을 때 이 삭제 함수가 호출되도록 하는 방법을 적용하였다.
4. 전체 코드
사진을 파이어 베이스에 등록하고, 열람 및 상세 보기, 필요시 삭제까지 하는 페이지의 코드는 다음에 첨부해둔다.
파이어 베이스에 등록된 사진을 등록 및 상세 보기 전용으로 사용하는 페이지의 코드는 다음에 첨부해둔다.