[Error] TS, React 환경에서 이미지 src 설정 오류

import kakaoLogin from "../assets/kakao_login.png";
.
. (생략)
.
<img src={process.env.PUBLIC_URL + kakaoLogin} alt="카카오 로그인 버튼" />

이 코드처럼 react 방식으로 src/assets 경로의 이미지를 불러오는 설정했더니 아래와 같이 오류가 발생했다

다행히 검색해보니 해결 방법이 금방 나왔다. 두 가지 방법이 있었는데

1. import 시 from 대신 require() 사용
   하지만 이 방법은 오류가 생기지 않는 대신
   TS80005: 'require' call may be converted to an import.
   이런 메세지를 보게 된다고 한다.

2. tsconfig.json 수정
   이미지를 여러번 사용할 경우 이 방법도 좋은 것 같아 따라서 진행해봤다.

해결 방법

1. tsconfig.json 의 "compilerOptions" 안에 typeRoots 경로 추가

"typeRoots": ["src/assets"]

2. src/types/images.d.ts 로 이미지 타입 정의 (파일 생성해줘야 함)

declare module '*.png';
declare module '*.jpg';
declare module '*.jpeg';

3. src/pages/Signup.tsx (process.env.PUBLIC_URL 오류 발생으로 지움)

import kakaoLogin from "../assets/kakao_login.png";
.
. (생략)
.
<img src={kakaoLogin} alt="카카오 로그인 버튼" />

참고 자료
Errors
[Typescript] TS2307: Cannot find module '.png' or its corresponding type declarations.