// 95번째 라인~
// gifler를 이용해 gif에서 프레임 추출 후, gif.js.optimized를 이용해 다시 합친 것을 src로 갖는 img 태그 리턴
return <img src={output} alt="rendering" />;

// 8번째 라인~
// gif.js.optimized를 이용해 다시 합쳐진 gif를 렌더링하기 위한 state
const [output, setOutput] = useState();

// 10번째 라인~
// 앱이 시작될 때 한 번만 실행되도록(gif를 불러오고 압축 후 서버에 보내는 과정) 의존성 x
useEffect(() => {
    // 기타 코드: 아래에 더 자세히 설명하도록 하겠습니다
}, []);

// 11번째 라인~
// gif.js.optimized를 GIF로 임포트 했음(3번 라인)
// workerScript에서 public에 있는 gif.worker.js를 쓰는 이유: https://github.com/jnordberg/gif.js/issues/115
const gif = new GIF({
    workers: 2,
    workerScript: process.env.PUBLIC_URL + "/gif.worker.js", 
    quality: 10,
});

// 17번째 라인~
// 메인 코드: 프레임 추출 => 다시 gif로 만들기 => 서버 제출

window.gifler(QQ).get((a) => {
    // gifler를 이용해 QQ(assets 폴더 하에 있는 gif 파일)에서 각 프레임을 추출합니다.
    // 사실 [gifler의 createBufferCanvas](https://themadcreator.github.io/gifler/docs.html#animator::createBufferCanvas())를 이용해서 해야하는데, 어떻게 그 함수를 불러와야 하는지 모르겠어서, createBufferCanvas 코드를 참고해 제가 직접 코드를 적었습니다. 이 부분도 해결해야 할 문제점 중 하나입니다.
    const res = a["_frames"].map((frame) => {
        let bufferCanvas, bufferContext, imageData;
        bufferCanvas = document.createElement("canvas");
        bufferContext = bufferCanvas.getContext("2d");
        bufferCanvas.width = frame.width;
        bufferCanvas.height = frame.height;
        imageData = bufferContext.createImageData(
            frame.width,
            frame.height
        );
        imageData.data.set(frame.pixels);
        bufferContext.putImageData(imageData, -frame.x, -frame.y);
        // 프레임이 잘 추출됐는지 화면에서 확인하기 위해 편의상 state를 이용하지 않고 DOM을 직접 조작했습니다.
        document.body.append(bufferCanvas);
        return bufferCanvas;
    });

    const exportCuts = async () => {
        const cuts = res;

        // 각 canvas를 이용해 gif 생성
        cuts.forEach((canvas) => {
            gif.addFrame(canvas, { delay: 100 });
        });

        gif.on("finished", async (blob) => {
            console.log("blob:")
            console.log(blob);
            console.log("---------------");

            const url = URL.createObjectURL(blob);
            const file = new File([blob], "흑흑", {
                type: "image/gif",
            });

            console.log("blob to file:")
            console.log(file);
            console.log("---------------");
            setOutput(url);

            const formData = new FormData();
            formData.append("image", file);

            // https://velog.io/@josworks27/formData-console.log
            for (let value of formData.values()) {
                console.log("formdata에 file이 제대로 담겼는지 확인:")
                console.log(value);
                console.log("---------------");
            }

            const requestUrl = "https://mandarin.api.weniv.co.kr/";

            const res = await fetch(requestUrl + "image/uploadfile", {
                method: "POST",
                body: formData,
                headers: {
                    "Content-type": "multipart/form-data",
                },
            });
            console.log("res:")
            console.log(res);
            console.log("---------------");

            const json = await res.json();
            console.log("res.json:")
            console.log(json);
        });

        gif.render();
    };

    exportCuts();
});