<div id="readability-page-1" class="page"><div>
 <a href="/m/category/DevOps%2C%20Infra/%F0%9F%94%A5%20Firebase">DevOps, Infra/🔥 Firebase</a><h2>firebase ver 8 with React (4) Storage</h2>
 <cite>
 DarrenKwonDev
 </cite>
 </div><time>2021. 6. 27. 02:37</time>
 
 
 <a href="#comment" onclick="Utils.smoothScroll(this);return false">
 
 </a>
 
 
 
 
 
 
 
 <div>
 <a href="https://firebase.google.com/docs/reference/js/firebase.storage" target="_blank" rel="noopener">https://firebase.google.com/docs/reference/js/firebase.storage</a>
<figure id="og_1624715032166" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="storage | JavaScript SDK &nbsp;|&nbsp; Firebase" data-og-description="Reference for storage" data-og-host="firebase.google.com" data-og-source-url="https://firebase.google.com/docs/reference/js/firebase.storage" data-og-url="https://firebase.google.com/docs/reference/js/firebase.storage?hl=ko" data-og-image=""><a href="https://firebase.google.com/docs/reference/js/firebase.storage" target="_blank" rel="noopener" data-source-url="https://firebase.google.com/docs/reference/js/firebase.storage">

<div>
storage | JavaScript SDK &nbsp;|&nbsp; Firebase
Reference for storage
firebase.google.com
</div>
</a></figure>

firebase가 db라면, storage는 aws s3 버킷 같은 스토리지 서비스이다.
살펴보니 1 계정 = 1 버킷이다.
다른 버킷을 쓰고 싶다면 다른 계정을 만들어서 firestore.storage(app) 꼴로 스토리지 객체를 따로 만들어야 한다.&nbsp;
쓰다보니 느끼는건데 파베는 꽤나 제한적인듯.

<h4 data-ke-size="size20">firebase.storage() 의 메서드들</h4>

ref()
<a href="https://firebase.google.com/docs/reference/js/firebase.storage.Reference" target="_blank" rel="noopener">https://firebase.google.com/docs/reference/js/firebase.storage.Reference</a>
<pre id="code_1624724542434" data-ke-language="javascript" data-ke-type="codeblock"><code>firebase.storage().ref(); // 내가 사용하는 버킷이 뭐임?</code></pre>
위처럼 reference를 불러와 출력해보면 아래 같은 것들이 뜨는데, 단순히 특정 버킷을 가리키는 것일 뿐이다.
<figure data-origin-width="596" data-origin-height="211" data-ke-mobilestyle="widthOrigin"><img src="https://blog.kakaocdn.net/dn/EHQLD/btq8dufpspV/7MKFoTSR5T4aVVURcRkzIk/img.png" data-origin-width="596" data-origin-height="211" data-ke-mobilestyle="widthOrigin"></figure>

bucket 이름은 firebase에서 직접 확인할 수 있다. fir-test-84415.appspot.com이라고 보이는가?
<figure data-origin-width="2634" data-origin-height="452" data-ke-mobilestyle="widthOrigin"><img src="https://blog.kakaocdn.net/dn/ZeNmR/btq8cN0PT33/b8AziIWJ0WVavr0FjAk7lK/img.png" data-origin-width="2634" data-origin-height="452" data-ke-mobilestyle="widthOrigin"></figure>


refFromURL()
<a href="https://firebase.google.com/docs/reference/js/firebase.storage.Storage#reffromurl">https://firebase.google.com/docs/reference/js/firebase.storage.Storage#reffromurl</a>

Returns a reference for the given absolute URL. storage에 저장된 파일의 public url을 기반으로 레퍼런스를 반환합니다.
그러니까, absolute URL이 있는 파일을 지워버리거나, 업데이트할 때 용이하겠죠?

<pre id="code_1624728664899" data-ke-language="javascript" data-ke-type="codeblock"><code>// 삭제 ㄱㄱ
storageService.refFromURL(fileUrl).delete();</code></pre>


setMaxOperationRetryTime, setMaxUploadRetryTime
<a href="https://firebase.google.com/docs/reference/js/firebase.storage.Storage#setmaxoperationretrytime" target="_blank" rel="noopener">https://firebase.google.com/docs/reference/js/firebase.storage.Storage#setmaxoperationretrytime</a>

이 부분은 간단하니 직접 문서를 참고하는게 좋을듯. 애초에 구글이 관리하는데 storage가 실패한다는 생각을 안해봤네요...


<h4 data-ke-size="size20">Reference Method</h4>

child =&gt; 버킷의 특정 경로를 가리킴
Returns a reference to a relative path from this reference.
쉽게 말해서 그냥 버킷에 특정 경로를 말합니다. child가 반환하는 reference에 put이니 putString, getMetadata 등 여러 메서드를 활용하여 storage를 조작할 수 있습니다.
<pre id="code_1624724299189" data-ke-language="javascript" data-ke-type="codeblock"><code>fileRefInstance.child("myBusiness/typed.txt"); // myBusiness 폴더에 typed.txt 파일의 경로</code></pre>
<figure data-origin-width="601" data-origin-height="207" data-ke-mobilestyle="widthOrigin"><img src="https://blog.kakaocdn.net/dn/OMj9G/btq8bNAuAoE/CPQlUvqqkCpql0WAQLBcV1/img.png" data-origin-width="601" data-origin-height="207" data-ke-mobilestyle="widthOrigin"></figure>

put, putString
<a href="https://firebase.google.com/docs/reference/js/firebase.storage.Reference#put" target="_blank" rel="noopener">https://firebase.google.com/docs/reference/js/firebase.storage.Reference#put</a>

data에 blob을 넣을 건지, string을 넣을 건지만 다르고 사실상 같은 함수입니다. 버킷에 주어진 데이터를 업로드합니다.
UploadTask를 반환하는데, 출력해보면 아래와 같은 내용들을 담고 있습니다. 업로드하고 바로 ref랑 task 출력 쌉가능.
<figure data-origin-width="604" data-origin-height="203" data-ke-mobilestyle="widthOrigin"><img src="https://blog.kakaocdn.net/dn/tZ8Yl/btq8dR9jZev/Vh4aNJ5kH2UOcP9tWBHZAk/img.png" data-origin-width="604" data-origin-height="203" data-ke-mobilestyle="widthOrigin"></figure>

delete
<a href="https://firebase.google.com/docs/reference/js/firebase.storage.Reference#delete" target="_blank" rel="noopener">https://firebase.google.com/docs/reference/js/firebase.storage.Reference#delete</a>
그냥.. 지우는건데요... 생략.


list, listAll
<a href="https://firebase.google.com/docs/reference/js/firebase.storage.Reference#list">https://firebase.google.com/docs/reference/js/firebase.storage.Reference#list</a>
리스트하는 겁니다. 기본 페이지네이션은 1000이라 하네요.


getDownloadURL
<a href="https://firebase.google.com/docs/reference/js/firebase.storage.Reference#getdownloadurl" target="_blank" rel="noopener">https://firebase.google.com/docs/reference/js/firebase.storage.Reference#getdownloadurl</a>

업로드한 파일에 접근할 수 있는 url을 얻습니다. aws s3랑 다른게, bucket/url 로 접근이 안됩니다.
reference에서 getDownloadURL 메서드를 통해 외부에서 접근 가능한 url을 얻을 수 있습니다.

일반적으론 파일을 업로드한 다음에 해당 파일에 접근할 수 있는 url을 알고 싶을테죠?
예시를 들어보면 아래와 같습니다.
<pre id="code_1624727419229" data-ke-language="javascript" data-ke-type="codeblock"><code>const uploadTask = await fileRef.putString(attachment, "data_url");
fileUrl = await uploadTask.ref.getDownloadURL();</code></pre>

 
 
					
 
 
 </div></div>

HotHandCoding

DarrenKwon

https://firebase.google.com/docs/reference/js/firebase.storage
 
firebase가 db라면, storage는 aws s3 버킷 같은 스토리지 서비스이다.
살펴보니 1 계정 = 1 버킷이다.
다른 버킷을 쓰고 싶다면 다른 계정을 만들어서 firestore.storage(app) 꼴로 스토리지 객체를 따로 만들어야 한다. 
쓰다보니 느끼는건데 파베는 꽤나 제한적인듯.
 
firebase.storage() 의 메서드들
 
ref()
https://firebase.google.com/docs/reference/js/firebase.storage.Reference
firebase.storage().ref(); // 내가 사용하는 버킷이 뭐임?
위처럼 reference를 불러와 출력해보면 아래 같은 것들이 뜨는데, 단순히 특정 버킷을 가리키는 것일 뿐이다.
 
bucket 이름은 firebase에서 직접 확인할 수 있다. fir-test-84415.appspot.com이라고 보이는가?
 
 
refFromURL()
https://firebase.google.com/docs/reference/js/firebase.storage.Storage#reffromurl
 
Returns a reference for the given absolute URL. storage에 저장된 파일의 public url을 기반으로 레퍼런스를 반환합니다.
그러니까, absolute URL이 있는 파일을 지워버리거나, 업데이트할 때 용이하겠죠?
 
// 삭제 ㄱㄱ
storageService.refFromURL(fileUrl).delete();
 
 
setMaxOperationRetryTime, setMaxUploadRetryTime
https://firebase.google.com/docs/reference/js/firebase.storage.Storage#setmaxoperationretrytime
 
이 부분은 간단하니 직접 문서를 참고하는게 좋을듯. 애초에 구글이 관리하는데 storage가 실패한다는 생각을 안해봤네요...
 
 
Reference Method
 
child => 버킷의 특정 경로를 가리킴
Returns a reference to a relative path from this reference.
쉽게 말해서 그냥 버킷에 특정 경로를 말합니다. child가 반환하는 reference에 put이니 putString, getMetadata 등 여러 메서드를 활용하여 storage를 조작할 수 있습니다.
fileRefInstance.child("myBusiness/typed.txt"); // myBusiness 폴더에 typed.txt 파일의 경로
 
put, putString
https://firebase.google.com/docs/reference/js/firebase.storage.Reference#put
 
data에 blob을 넣을 건지, string을 넣을 건지만 다르고 사실상 같은 함수입니다. 버킷에 주어진 데이터를 업로드합니다.
UploadTask를 반환하는데, 출력해보면 아래와 같은 내용들을 담고 있습니다. 업로드하고 바로 ref랑 task 출력 쌉가능.
 
delete
https://firebase.google.com/docs/reference/js/firebase.storage.Reference#delete
그냥.. 지우는건데요... 생략.
 
 
list, listAll
https://firebase.google.com/docs/reference/js/firebase.storage.Reference#list
리스트하는 겁니다. 기본 페이지네이션은 1000이라 하네요.
 
 
getDownloadURL
https://firebase.google.com/docs/reference/js/firebase.storage.Reference#getdownloadurl
 
업로드한 파일에 접근할 수 있는 url을 얻습니다. aws s3랑 다른게, bucket/url 로 접근이 안됩니다.
reference에서 getDownloadURL 메서드를 통해 외부에서 접근 가능한 url을 얻을 수 있습니다.
 
일반적으론 파일을 업로드한 다음에 해당 파일에 접근할 수 있는 url을 알고 싶을테죠?
예시를 들어보면 아래와 같습니다.
const uploadTask = await fileRef.putString(attachment, "data_url");
fileUrl = await uploadTask.ref.getDownloadURL();

firebase ver 8 with React (4) Storage

댓글