gif error - declarations.d.ts 선언 파일

🚨 ERROR
TS2307: Cannot find module '../assets/image/ns.gif' or its corresponding type declarations.
    1 | import React from 'react';
  > 2 | import runningShoes from '../assets/image/ns.gif';

TypeScript는 기본적으로 이미지 파일이나 다른 정적 자원들을 모듈로 인식하지 않습니다. 이를 해결하기 위해 TypeScript에게 이러한 파일들을 어떻게 처리할지 알려주어야 합니다.

이 문제를 해결하는 한 가지 방법은 TypeScript 선언 파일(.d.ts)을 생성하여 이미지와 같은 정적 자원에 대한 모듈 선언을 추가하는 것입니다.
declare module "*.gif";는 별도의 선언 파일에 추가해야 합니다.

루트 디렉토리나 types 폴더 등 적절한 위치에 declarations.d.ts라는 이름의 파일을 만들고, TypeScript 설정(tsconfig.json)에서 "include"나 "exclude" 옵션이 사용되었다면 선언 파일(declarations.d.ts)이 해당 범위 안에 들어있는지 확인해보세요. 또한 웹팩 등의 번들러 설정에서 .gif 확장자를 처리하는 로더가 있는지 확인해보세요.

declare module "*.gif";

위의 코드는 .gif 확장자를 가진 모든 파일이 모듈로서 import 될 수 있음을 TypeScript에 알려줍니다. 이외의 확장자 (예: .jpg, .png, .svg 등)도 필요하다면, 같은 방식으로 추가할 수 있습니다.

❗ 해결 : tsconfig.json 파일 확인 --->

tsconfig.json 파일을 확인해 보니 "include": ["src"] 옵션이 설정되어 있네요. 이 설정은 TypeScript 컴파일러가 src 디렉토리 안의 파일들만 처리하도록 지시하는 것입니다.

따라서, 프로젝트 루트에 위치한 declarations.d.ts 파일은 현재 TypeScript 컴파일러의 처리 범위 밖에 있습니다. 이를 해결하기 위해선 두 가지 방법이 있습니다:

방법 1:

 declarations.d.ts 파일을 src 디렉토리로 이동

bello_market/src/declarations.d.ts와 같이 위치시키면, 해당 선언 파일이 TypeScript 컴파일러의 처리 범위 안으로 들어갑니다.

방법 2:
"include" 옵션 수정

"include" 옵션을 수정하여 프로젝트 루트에 있는 .d.ts 파일들도 포함되도록 할 수 있습니다.

{
  "compilerOptions": {
    // ... 기존 compilerOptions 내용 ...
  },
  "include": ["src", "*.d.ts"]
}

위의 두 가지 방법 중 하나를 적용해 보시고, 문제가 해결되는지 확인해 보세요.