react-app-env.d.ts

react-app-env.d.ts

리액트 앱을 CRA로 초기화하고 이 파일을 아무생각 없이 webVitals나 기타등등이랑 같이 지워줬더니 svg 파일을 불러오는 데 오류가 두두디딕 났다

다시 복구하니까 svg 파일도 잘 불러오고 정신을 차리긴 했는데 뭐하는 파일이길래 svg 로딩이 터져버렸는진 잘 모른다

따라서 정리하기로 했다

뭐 하는 파일인가요

열어보기

/// <reference types="react-scripts" />

파일을 열어보면 딱 요 한 줄 적혀있는 것을 알 수 있다

 

/// <reference types="node" />
/// <reference types="react" />
/// <reference types="react-dom" />

declare namespace NodeJS {
  interface ProcessEnv {
    readonly NODE_ENV: 'development' | 'production' | 'test';
    readonly PUBLIC_URL: string;
  }
}

declare module '*.avif' {
  const src: string;
  export default src;
}

declare module '*.bmp' {
  const src: string;
  export default src;
}

...

react-scripts 에 마우스를 올려 한 단계 타고 들어가면 react-app.d.ts로 넘어가며, 위와 같은 내용이 있다

너무 길어서 적당히 잘랐는데, jpg, jpeg, png, svg, css, scss, sass 등의 내용이 들어있다

우리는 여기서 react-app-env.d.ts 랑 react-app.d.ts가 대충 파일 확장자 관련이구나~ 라고 추측할 수 있겠다

그래서 뭐하는 파일인지

react-app-env.d.ts 파일은 CRA 로 초기화한 프로젝트에 적용되는, 프로젝트 환경에서 사용할 수 있는 글로벌 변수 및 모듈에 대한 유형 정의를 제공하기 위해 사용되는 선언 파일이라고 한다

타입스크립트 단독으로 사용했을 때엔 위와 같은 jpg, png, scss 등의 확장자를 제대로 이해하지 못하는데, 타입스크립트가 이러한 형식의 파일들을 이해할 수 있도록 도와주는 역할을 한다

• 글로벌 변수 및 모듈들을 명시적인 가져오기 없이 사용할 수 있게 해 준다
  • window, document 등의 브라우저 객체, process.env 등의 Node.js 관련 객체 등의 정보를 제공하여 타입스크립트 측에서 이 객체들을 올바르게 인식할 수 있는 역할을 한다
  • 위와 같이 확장자들에 대한 불러오기 정보 또한 제공하여 미디어 파일들을 불러올 때에도 오류가 없게 해 준다 (그래서 이 파일을 삭제했을 때 svg 불러오기에서 오류가 났던 것…)
  • 이 덕분에 명시적인 가져오기 없이 변수, 객체 또는 확장자에 따른 모듈 등에 액세스하려 할 때 발생하는 오류를 막아주는 것이다

 

declare namespace NodeJS {
  interface ProcessEnv {
    readonly NODE_ENV: 'development' | 'production' | 'test';
    readonly PUBLIC_URL: string;
    readonly CUSTOM_ENV: string; // 추가한 내용
  }
}

• 사용자 지정 환경 변수를 등록할 수 있다
  • .env에 환경변수를 등록하는 것만으로는 자동완성이 안 되며, 타입을 undefined 로 추론한다
  • 환경변수를 위와 같이 react-app-env.d.ts 에 등록하면, string 형식으로 자동으로 인식해주며 자동완성 또한 적용된다
  • 위의 내용은 react-app.d.ts 에 있던 NodeJS 의 ProcessEnv 정의를 그대로 긁어 CUSTOM_ENV만 추가해 준 것이다

결론

react-app-env.d.ts 함부로 지우지 말자 (…)

---

참고 자료

https://stackoverflow.com/questions/67262914/what-is-the-react-app-env-d-ts-in-a-react-typescript-project-for