png svg 타입

문제 상황

png파일과 svg파일을 import할 일이 있는 중에, 필자는 TS를 쓰니까 타입을 지정해줘야 했다. 솔직히 처음에는 잘 몰라서 svg파일 타입에 string으로 지정해 줬는데 오류 없이 잘 작동되었다.

import Github from "@/app/assets/svg/github.svg";

export const githubFinderFooter: FooterType = {
  src: Github,
  //기타	
};

그런데 png파일을 같은 방식으로 하니까 오류가 나고 staticImageData의 타입을 써야 한다는 것이다. 뭐가 다른 거지 하고 찾아보고 간단한 이유를 찾았다.

문제 이유

chat-GPT 왈 :

SVG 파일은 XML 기반의 벡터 이미지이므로, 문자열(string) 형태로 쉽게 표현할 수 있습니다. 그래서 SVG 파일을 문자열(string)로 표현하는 것이 자연스럽습니다.
그러나 PNG 파일은 비트맵 이미지이며, 이를 문자열로 표현하기에는 어렵습니다. 따라서 일반적으로 PNG 이미지는 Base64 인코딩된 문자열이나 다른 형태의 이진(binary) 데이터로 표현됩니다.

문제해결

사실 문제해결이랄 것도 없지만 이유가 궁금하고 이로 인해 이유를 알 수 있게 되었다.