구글 파이어베이스 Storage(1) 프로필UI&사진 올리기

현재, "쓰고,읽고,수정하고, 삭제하는" CRUD까지 진행했다면, 지금부터는 실무에서 가장 중요할 수 있는 파이어베이스의 Storage 시스템을 활용해보자. 

파이어베이스 Storage는 자체 Query문이 있는데, 이와 관련된 부분은 파이어베이스 사이트에 자세하게 나온다.(내용이 방대함) 해당 프로젝트에서는 간단하게 사진파일을 올리고 삭제하는 기능을 구현해보기로 하자.

1 firebase-storage CDN추가

파이어베이스의 다른 기능처럼, storage역시 CDN을 추가하는 것으로 사용할 수 있다.

2 프로필 설정UI

파일 업로드 UI는 '회원'에 한하여 사용한다고 가정하고, 먼저 회원가입 폼을 좀더 자세하게 변경해보자.

이름을 넣는 양식을 추가하고, Sign up 버튼의 위치를 center-align으로 조절해준다.

3 auth.js 등록

기존에 만들었던 회원가입 이벤트 함수에서 이름이 저장되도록 해당 구문을 추가한다. auth.currenUser는 현재 로그인을 하고 있는 회원의 정보를 추출하는데, 'displayName'속성에 사용자 이름을 저장한다.(아래 2번째 빨간박스)

4 파일업로드UI 제작

회원이 로그인을 하면, 파일을 업로드하는 양식이 나와야하며, 해당 양식은 아래와 같이 html에 강제로 추가하는 방식을 사용한다.

이메일 아이디로 회원가입을 진행하고, Account를 클릭해보자. 아래처럼 회원가입에 사용한 이메일과 이름이 출력되면 성공이다.

5 파일업로드 이벤트함수

위에서 input태그의 id를 'file'로 지정했으므로 file변수에 'change'이벤트를 설정한다. file같은 경우, click이벤트가 아닌 change이벤트를 사용해야하고, 선택된 file은 배열로 저장되므로 evt.target.files[0]을 scope안의 file변수에 저장한다.

하지만 materalize에서 명시한 그대로 button관련 코드를 넣었을 때, 파일이 선택되지 않는 에러가 발생한다. 또, 로그인하지 않았을 때, accountDetails변수를 찾지 못하고, 관련된 에러가 발생한다. 이를 방지하려면, accountDetails변수는 상위레벨로 올리고, <div class="file-filed input-field">부분을 과감하게 삭제하자.

파일업로드 이후, 다음과 같은 console.log()메시지가 나오면 정상으로 작동하고 있는 상태다.

6 firebase storage추가

위에서 firebase-storage CDN과 storageRef변수를 추가했다는 전제하에 storageRef.child()메서드로 폴더를 지정해주고, 프로미스 구문으로 snapshot을 아래와 같이 서버에서 받아온다.(다운로드를 위해서)  

auth.currentUser의 속성값은 항상 요긴하게 사용되는데, 여기서는 url값을 저장해서 해당 유저의 계정에서 언제든지 기록을 꺼내올 수 있도록 사전조취를 취한다.

firebase-storage의 쿼리문과 currentUser 속성값 그리고 firebase-functions를 활용한다면 좀더 고차원적인 파일 저장소, 파싱 서버를 제작할 수 있다. 해당 내용은 firebase-storage부분을 좀더 공부하면서 여러가지 실험을 해보자.