npx create-react-app my-app --template typescript 명령어를 치면 React & TypeScript 프로젝트가 뚝딱하고 만들어집니다.
편리한만큼 제대로 이해하지 못한 부분이 많은데 그중에서 자동으로 생성되는 react-app-env.d.ts 파일의 역할에 대해 알아보려고 합니다.
먼저 프로젝트에 필요한 파일만 남기기 위해 자동으로 생성된 파일들을 삭제해가며 오류가 발생하는지 안하는지 확인해보았습니다.
이 때 react-app-env.d.ts 파일을 지우자 process.env.환경변수이름으로 환경변수를 불러오는데 에러가 발생했습니다. 이로써 환경변수를 연관되었구나 정도만 이해하고 좀 더 알아보기 위해 검색해보았습니다.
///<reference types="react-scripts" />
처음 파일이 생성되면 ///<reference types="react-scripts" /> 이라고 딱 한 줄 적혀있습니다. 이 코드가 어떤 역할을 하는지 알아보겠습니다.
///<reference types="react-scripts" /> 코드는 설정 지시문(Configuration directive)으로, 타입스크립트 컴파일러에게 CRA에 대한 타입 정의 파일을 사용하도록 지시합니다.
이를 통해 타입스크립트 컴파일러는 CRA에서 제공하는 환경에 대한 타입 정보를 이해하고, 해당 환경에서 사용되는 모듈이나 변수에 대한 타입 검사를 수행할 수 있습니다.
즉, 위 설정 지시문을 통해 CRA에서 제공하는 기능 및 API에 대한 타입 검사가 가능해지며, 개발 도구의 자동 완성 기능등을 보다 정확하게 활용할 수 있게 됩니다.
참고 사이트
https://www.typescriptlang.org/ko/docs/handbook/triple-slash-directives.html
https://velog.io/@swanious/TIL-.d.ts%ED%8C%8C%EC%9D%BC%EC%97%90%EC%84%9C-reference-typesreact-scripts%EC%9D%B4-%EB%AD%98%EA%B9%8C
https://jaewook.me/create-react-app-typescript-window-object/
