오늘 하루종일 한 삽질과 함께 오늘 배운 것
간단한 것부터 시작사파리 브라우저에서 개발자 도구 열기
상단 메뉴바 -> Safari -> 환경설정 -> 고급 -> '메뉴 막대에서 개발자용 메뉴 보기' 체크 -> 상단 메뉴바에 생성된 [개발자용] 메뉴에서 '페이지 소스 보기' 클릭 또는 브라우저에서 마우스 우클릭 후 '페이지 소스 보기'
- 지난 몇 주에 걸쳐 드문드문 작업한 결과 동영상 인코딩 라이브러리인 ffmpeg을 리액트에 잘 옮겨심었지만, 기본 브라우저로 사용하는 크롬에서만 잘 돌아가고 오늘 테스트 해본 사파리에서는 전혀 작동하지 않았다. 이건 다 사파리가 ffmpeg 작동에 필요한 sharedArrayBuffer를 지원하지 않기 때문이다.
Shared Array Buffer | Can I use... Support tables for HTML5, CSS3, etc
Type of ArrayBuffer that can be shared across Workers.
caniuse.com
- sharedArrayBuffer가 궁금하다면, 솔직히 MDN 설명은 무슨 말인지 하나도 모르겠고, 그 아래 링크는 2017년도 글이지만 이해하기에는 더 좋을 것 같다. arrayBuffer와 sharedArrayBuffer의 느낌 차이를 잘 잡아준다. 사실 이 둘에 관한 설명은 생각날 때마다 구글링해보지만 아직 잘 모르겠다..
SharedArrayBuffer - JavaScript | MDN
SharedArrayBuffer 객체는 제네릭, 고정된 길이의 원시 바이너리 데이터 버퍼를 표현하는데 사용됩니다. ArrayBuffer 객체와 유사하지만, 공유된 메모리상의 뷰를 생성하는데 사용될 수 있습니다. Array
developer.mozilla.org
만화로 소개하는 ArrayBuffer 와 SharedArrayBuffer ★ Mozilla 웹 기술 블로그
이 글은 3부작 시리즈의 두번째 글입니다. 메모리 특강 만화로 소개하는 ArrayBuffer 와 SharedArrayBuffer Atomics 를 이용해서 SharedArrayBuffer 레이스 컨디션 피하기 지난 글에서는, JavaScript 같은 메모리 자
hacks.mozilla.or.kr
- ffmpeg 깃허브 저장소를 들어가봐도 sharedArrayBuffer를 지원하는 브라우저에서만 작동한다고 적혀 있다. 지원하는 브라우저에서도 cross-origin isolation이 보장되어야만 정상적으로 기능한다.
GitHub - ffmpegwasm/ffmpeg.wasm: FFmpeg for browser and node, powered by WebAssembly
FFmpeg for browser and node, powered by WebAssembly - GitHub - ffmpegwasm/ffmpeg.wasm: FFmpeg for browser and node, powered by WebAssembly
github.com
출처 간 격리를 이용하기 위한 가이드
출처 간 격리를 이용하면 웹 페이지에서 SharedArrayBuffer와 같은 강력한 기능을 사용할 수 있습니다. 이 문서에서는 웹사이트에서 출처 간 격리를 이용하는 방법을 설명합니다.
web.dev
- cross-origin isolation은 헤더를 통해 설정할 수 있다고 한다. 아래 링크 게시글 작성자 분은 리액트를 nginx로 돌리면서 거기에 헤더를 설정했다.
How to fix SharedArrayBuffer is not defined error - TechKBlog
Came across this "SharedArrayBuffer is not defined" error in Firefox browser, while working on a react app of mine. This is how I fixed it.
techkblog.com
- 난 nginx는 써본 적도 없었고, 인코딩 하나 때문에 그렇게까지 하고 싶지는 않았다. 이사님도 물론 같은 생각이셨고. 그래서 혹시 우리가 프론트 배포에 사용하는 aws s3로는 커스텀 헤더 설정이 가능한지 찾아보았다.
응 안돼
Custom headers on Amazon S3
Is it possible to have custom headers on Amazon S3 with arbitrary naming? For example, I am using a CDN pointing to Amazon S3 as the origin server, and in order to enable advanced functionality on ...
stackoverflow.com
- 구글링하다가 나온 답은 netlify로 배포하는 거였다. netlify로 배포하면 커스텀 헤더 설정이 가능하다고 하며, 실제로 그렇게 사용한 사람들이 있다. netlify 공식문서에도 헤더 설정 방법이 적혀 있다.
희망이 보이는 듯했다.
Open Server To Avoid 'SharedArrayBuffer will require cross-origin isolation' - Ffmpegwasm/Ffmpeg.Wasm
Hi, thank you for your library, it's awesome, I want to ask is there any CDN like unpkg or cdn that has a custom header request Cross-Origin-Embedder-Policy: require-corp and Cross-Origin-Opener-Policy: same-origin? Thank you
issueexplorer.com
Custom headers
Netlify builds, deploys, and hosts your front end. Learn how to get started, see examples, and view documentation for the modern web platform.
docs.netlify.com
- netlify로 배포하는 데만도 시간을 엄청나게 썼다.
누가 netlify 배포 쉽고 간단하다고 했어?컴파일 에러부터 빌드 커맨드 에러, 아주 갖가지 에러를 다 만나고, 심지어 배포 시도하기 전에는 내 개인 저장소가 아니라고 배포 대상 저장소에 뜨지도 않았다. 결국 회사 저장소를 포크해서 내 저장소로 옮겨놓고 거기서부터 시작했다. 저장소가 두 개가 되니 git remote를 끊었다 연결했다 아주 난리도 아니었다ㅋㅋ 우여곡절 끝에 배포하고 나서 헤더 설정은 프로젝트 루트 디렉토리 내 netlify.toml 파일을 만들어서 그 안에 적어놔야 했다.그런데 이거 프로젝트 루트 디렉토리에 넣어야 한다는 걸 왜 구글링해서 따로 찾아야 하는 거니ㅠㅠ
CORS issue with React App
Hi @hrishikesh, You are right to say that it is not in my repo. When building the app, it automatically removed it from the folder. What I did then, is to add it manually to the folder after the build operation. Seeing that it wasn’t working, I deleted i
answers.netlify.com
- 파이어폭스 테스트 기준, 백엔드 서버에서 API 응답과 함께 내려주는 헤더에는 cross-origin isolation이 들어 있어도 sharedArrayBuffer가 제대로 기능하지 않는다. netlify에 따로 설정한 커스텀 헤더를 통해야만 진정한 isolation이 실현되는 것 같다. 그러나 사파리는 어쨌든 어떤 상황에서든 일관적으로 작동하지 않았다.
'post항해_배움일지 > 개발일기' 카테고리의 다른 글
| 개발일기_211118_이벤트리스너 한 번만 작동하게 하기 (0) | 2021.11.19 |
|---|---|
| 개발일기_211116_addEventListener(), ISO 8601 (4) | 2021.11.16 |
| 개발일기_211115_TypeScript 연습 (4) | 2021.11.15 |