어제 파일을 받아 보드 썸네일 이미지를 S3에 업로드할 수 있는 API를 만들었다.
PR 리뷰 중 "파일을 고객의 스토리지에 몰래 저장하고 그걸 올릴 수 있는지?"에 대한 질문이 들어왔는데 텍스트 이외의 파일 형식에 대해 지식이 부족했기 때문에 관련 이슈를 해결하며 공부해보려고 한다.
먼저 우리는 스크린샷을 저장하기 위해 html2canvas라는 라이브러리를 사용한다.
DOM을 매개변수에 넣어주면 css를 그려서 스크린샷을 찍은 것처럼 이미지를 만들어준다.
html2canvas 객체를 Multipart formdata로 받아주기 위해서 어떤 변환이 필요할 지 고민해보자.
https://developer.mozilla.org/en-US/docs/Web/API/FormData
FormData - Web APIs | MDN
The FormData interface provides a way to construct a set of key/value pairs representing form fields and their values, which can be sent using the fetch(), XMLHttpRequest.send() or navigator.sendBeacon() methods. It uses the same format a form would use if
developer.mozilla.org
html2canvas 객체에서 data url과 blob으로 변환할 수 있는데, 먼저 data url을 전달해서 저장하는 로직을 작성했다.
toDataUrl() 메서드를 이용해 data url을 얻었고 해당 url로 업로드 API를 요청했더니 다음과 같은 에러가 났다.
constant string too long메모리에 저장할 수 있는 최대 길이가 정해져 있고 그 길이를 넘어서 해당 에러가 발생했던 것이다.
나눠서 사용하는 방법도 있지만 과정이 불필요하게 복잡하고 꼭 data url으로 진행해야 하는 것은 아니었기 때문에 다음 방법으로 진행했다.
blob으로 변환해 업로드를 시도했다.
'정기간행물 > daily' 카테고리의 다른 글
| [슈코데이 세미나] 불가능을 가능으로 만드는 토스의 엔지니어링 직군 (0) | 2023.10.27 |
|---|---|
| 단축 URL 생성 (다담다) (0) | 2023.10.20 |
| 모던 자바 인 액션 시작 (0) | 2023.10.18 |
| 분산 서버 구축 이후 로그인 이슈 (다담다) (0) | 2023.10.15 |
| Spring Session (0) | 2023.10.14 |