티스토리 뷰
현재 게시글에 담겨있는 이미지를 firestorage에 업로드 하면 resizing 핸들러가 trigger 되어서 사이즈가 축소된 이미지를 다시 클라이언트로 내려주는 로직을 작성하고 있다. 그런데 클라이언트에서 게시글을 submit했을때 서버에서 이미지가 리사이징 될때까지 모두 기다리면 제출하는데 꽤 오랜시간이 걸린다.
그래서 이런 방식을 사용하지 않고 우선적으로 이미지를 서버에 업로드한 다음에, (곧 리사이징될) public URL을 DB에 등록한 뒤에, 클라이언트에는 원본이미지의 경로와 리사이징된 이미지의 경로 두개를 내려주려고 한다.
그래서 게시글을 조회할때 우선적으로 리사이징된 이미지를 보여주고 fallback으로 원본이미지를 보여주는 방식으로 구현하고자 한다.
getDownloadUrl을 사용하지 않고,
firebase storage상에 있는 Blob의 경로를 가져오는 방법은 다음과 같다.
아래 스트링들을 합쳐주면 된다.
1. "https://firebasestorage.googleapis.com/v0/b/"
2. bucket object
3. "/o/"
4. correctly encoded path object.
5. "?alt=media"
6. token="..."
6번 토큰은 생략해도 정상 동작한다고 한다. 다만 5번은 절대 생략하면 안된다. 생략할 경우 json형태의 데이터를 얻게 된다.
출처
'Today I Learned' 카테고리의 다른 글
토큰을 어디에 저장해야 안전할까 (0) | 2021.09.02 |
---|---|
파이어베이스 프로젝트간 데이터 마이그레이션 하는 방법 (0) | 2021.04.04 |
[Next.js] getInitialProps에서 redux saga action이 dispatch가 완료 될때까지 멈추지 않는 이슈 (0) | 2020.04.01 |
함수형 프로그래밍이란? (0) | 2020.03.25 |
스토리북을 효율적으로 관리하는 방법 (0) | 2020.03.23 |
댓글
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- Polyfill
- useRef
- storybook
- computed
- reactdom
- rendering scope
- promise
- mobx
- Next.js
- Babel
- return type
- server side rendering
- react
- es6
- async
- Action
- hydrate
- reflow
- useEffect
- state
- javascript
- atomic design
- type alias
- react hooks
- typescript
- await
- props
- reducer
- webpack
- design system
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
글 보관함