최종 수정일 :
(1년 전)
개발 서버 세팅
전 제작일지에서도 언급했듯, SharedArrayBuffer 사용을 위해선 사이트 격리를 위한 헤더 추가가 필요한데, snowpack에는 dev server의 응답 헤더를 수정하는 기능이 없습니다. 억지로 node_modules/snowpack/lib/cjs/commands/dev.js 파일을 수정하여 응답 헤더를 추가해줬습니다.
function sendResponseFile(req, res, { contents, originalFileLoc, contentType }) { var _a; const body = Buffer.from(contents); const ETag = etag_1.default(body, { weak: true }); const headers = { 'Accept-Ranges': 'bytes', 'Access-Control-Allow-Origin': '*', 'Content-Type': contentType || 'application/octet-stream', 'Cross-Origin-Opener-Policy': 'same-origin', 'Cross-Origin-Embedder-Policy': 'require-corp', ETag, Vary: 'Accept-Encoding', }; ...
headers로 검색하면 찾으실 수 있을 겁니다. 글을 작성하는 시점엔 120번 줄부터 위 코드가 시작됩니다.
결과 화면 업데이트
원본과 변환된 결과를 비교할 수 있게 업데이트했습니다.
메모리 누수 해결
useEffect(() => { return () => { URL.revokeObjectURL(inputBlobUrl); };}, []);
URL.createObjectURL로 생성한 객체 URL을 더 사용하지 않을 땐URL.revokeObjectURL로 메모리에서 해제해줘야 합니다.
지금까지 이 기본적인 걸 안 하고 있어서 허구한 날 오류 페이지를 보고 있어야 했습니다…
파일 이름 수정
// 기존const formatFileName = () => { let { fileName } = props; const outputExtension = props.fileExtension === "image/gif" ? "mp4" : "gif"; fileName = fileName.replace(/\..(gif|mp4)/, ""); fileName = `${fileName}.${outputExtension}`;
return fileName;};
// 업데이트const formatFileName = () => `${props.fileName .split(".") .slice(0, -1) .join(".")}.${props.fileExtension.split("/").pop()}`;
원본 파일의 확장자를 제대로 제거하지 못하던 오류를 수정했고, fileExtension으로 변환된 blob의 type을 넘겨줘 코드를 훨씬 간결하게 수정했습니다.
Expires 헤더 기간 단축
보통 아무리 오래전에 작성한 코드라도 다시 보면 그때 무슨 생각으로 이 코드를 썼는지 기억이 나던데, 대체 왜 js, css 파일 등에 expires를 1년 정도 추가해뒀는지는 알 수가 없네요.
아마 수정할 일이 없으리라 생각하고 그랬지 싶은데, '여긴 이제 건드릴 일 없겠지'라고 생각하면 보통 수정할 일이 생기더라고요.
