async function getScreenshot(url) {
  try {
    const response = await fetch(` ${url}`);
    if (response.status >= 400) {
      throw new Error();
    } else {
      const myBlob = await response.blob();
      const imgURL = URL.createObjectURL(myBlob);
      drawImage(imgURL);
    }
  } catch (e) {
    console.error(e);
    drawImage("img/error.png");
    alert(
      "An error has occurred! Please check your url or try again later.",
      true
    );
  }
}


api로 이미지 파일 받아와서 canvas에다 뿌리는 함수고

drawImage canvas에다 넣는 로직임.

alert은 화면에 클라이언트한테 경고띄우는 함수.


지적받은거 존나 많아서 고쳐야되는데

시간이 없어서 일단 내가봐도 거지같은 비동기함수부터 손봄.


에러처리 방식이 제대로 된건지 잘 모르겠다.

백엔드에서 이미 유효성검사 하고, 이미지파일 제대로 안됬으면 400번 보내게 해놨는데

프론트에서는 그냥 try catch 빼고 상태검사만 할까?