211110 GIF Converter 제작일지

개발 서버 세팅

전 제작일지에서도 언급했듯, 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년 정도 추가해뒀는지는 알 수가 없네요.

아마 수정할 일이 없으리라 생각하고 그랬지 싶은데, '여긴 이제 건드릴 일 없겠지'라고 생각하면 보통 수정할 일이 생기더라고요.