구글 파이어베이스 storage(2) 파일 올리기 및 삭제

지난 포스팅에서는 파이어베이스 storage에 이미지 파일을 업로딩하고, 파이어 storage에 저장되는 것까지 확인했다. 이번에는 storage에 올린 파일을 삭제하고, 또 관리자와 해당 유저만 삭제 권한이 있도록 설정해보자. 

1 갤러리 내비게이션 생성

index.html 파일을 열고, 관리자만 사진파일을 올릴 수 있는(일반 유저는 리딩만 가능) 갤러리 내비게이션을 만든다. 

따로 게시판을 만들지않고, 간단하게 Modal기능을 활용한 갤러리를 아래처럼 생성한다.

gallery.js를 추가한다. 

gallery.js에는 본격적으로 firestore - firebase Storage 데이터를 연결하는 기능을 만들어야 한다.

2 gllery.js

관리자가 사진 이미지를 업로딩하는 상황은 다음과 같다.

1] 사진파일은 firebase-storage에 저장

2] 사진파일과 연관된 기록 데이터들은 firebase store에 저장

관리자가 지정한 사진파일은 프론트페이지를 통해 파이어베이스의 2군데(store, storage)로 나눠서 데이터가 저장된다. 따라서 fs(firestore)컬렉션에 저장하는 함수와 storageRef(fire storage)을 활용한 firebaase storage 함수가 있어야 한다. 

1]기능을 담당하는 함수를 storeImage(user,url,fileName)으로 지정하고, 2]은 uploadFile이벤트 함수를 만든다.

*storeImages함수

아래와 같은 파일 업로드와 관련된 이벤트가 발생하면 storeImages함수를 uploadFile이벤트함수 내에서 실행한다.

firebase storage관련 문서를 살펴보면, child()명령어는 폴더와 파일명을 지정하는 메서드이며, .put()을 활용해서 파일을 Storage DB에 저장한다. .then()프로미스 구문에 snapshot 콜벡 데이터에는 업로딩과 연관된 파일정보를 받을 수 있다. 또한 getDownloadURL().then(url) 프로미스 구문을 통해서 업로딩 한 파일의 다운로드 url경로를 받을 수 있다. 

3 관리자모드 

갤러리 역시 관리자 모드가 있다. 일반 계정일 경우에는 이미지를 읽을 수만 있고, admin계정으로 접속했을 시, 파일 삭제가 가능하다. 

일반계정의 '읽기'기능은 위의 빨간박스 부분이다. 읽기와 달리 삭제 부분은 auth의 관리자 권한이 필요하다. 이를 위해 deleteButton은 currentUser가 amin계정일 때만 보이도록 설정한다. (display:block)

firestore storage 삭제 코드에서 deleteButton['id']는 ${image.fileName}이다. 갤러리를 생성할 때, delete버튼의 id값으로 imgae.fileName을 지정해뒀기 때문에 파이어베이스 storage의 경로를 정확하게 child()하고, 삭제할 수 있다. 

위와 같이, querySelectorAll과 [id]를 활용한다면, node.js의 뷰 템플릿 엔진을 굳이 사용하지 않고서도 고차원적인 반응형 웹개발을 할 수 있다. 

4 auth.js

gallery.js에서 파이어store, storage,삭제 부분까지 끝마쳤다면, user값을 프론트 접속 페이지로 보내주는 코드를 손봐야 한다. auth.js를 열고, user값이 있을 때와 없을 때의 값을 아래와 같이 수정한다.

5 보안 규칙설정

위의 코드까지 모두 마치고, 앱을 실행했더니 에러가 발생할 경우가 있다. 특히 permission과 관련된 에러라면 firebase의 보안규칙을 제대로 설정하지 않았기 때문이다. 관리자만 쓰기가 가능하고, 일반 유저는 읽기만 해야하므로 아래와 같이 설정한다.

*firebase database

*firebase storage

 

다음 포스팅에서는 파이어호스팅을 진행하고, 아래와 같은 테스트 사이트를 직접 웹에 띄워보자.