[TYPESCRIPT] npm run dev하면 저절로 해결되는 타입 에러? (env.d.ts)

발단, 에러 상황 발견

Next.js 기초 공부하던 어느 날

여태 노트북으로 작업하다가, 데스크탑에서 이어 작업하기 위해 GitHub 저장소부터 새로 clone 하고 있었다.

 

 

그런데 웬열?

패키지 설치까지 하고 파일들을 살펴보고 있는데 에러가 발생하고 있는 컴포넌트를 확인..!

분명히 노트북에서 에러 없이 정상 작동하도록 작업한 뒤 push 한 상태일 텐데 특정 코드에서 type error가 발생했다.

 

Type '{ children: string; jsx: true; global: true; }' is not assignable to type 'DetailedHTMLProps<StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>'.

styled JSX를 사용한 영역에 지정된 타입이 없다는 문제였다.

 

 

이게 갑자기 어디서 나타난 에러지? 원래 전에는 됐는데?????

 

당황하면서 구글링 해보지만 원인을 도통 모르겠는 상황...

에라 모르겠다 싶어 그냥 개발 서버를 실행 시켜봤는데

알아서 해결됐다

ㅋㅋㅋㅋ 엥? 🙄? ㅋㅋㅋㅋㅋㅋㅋ

 

 

 

---

전개, 변경점 확인

원인과 해결 방법 모두가 이해 안 된😹 관계로

해당 프로젝트 폴더를 삭제했다가 다시 clone부터 재연해 봤다.

$ git clone "..." # 프로젝트 clone (next.js + typescript)
$ cd "...."
$ npm install     # 패키지 설치

# 파일들 둘러보며 error가 발생한 컴포넌트 확인

$ npm run dev     # 개발 서버 실행

npm run dev 실행 후 에러가 자연스럽게 사라진다

 

개발 서버 후 다른 변경점은 없지만

딱 하나의 차이점, next-env.d.ts 파일이 새롭게 생겨나는 것이 보였다.

원인으로 유력해 보인다.

 

 

 

---

위기, env.d.ts 와 tsconfig.json

next-env.d.ts 파일이.... 뭐더라?

TypeScript 복습과 Next.js 동작 과정을 이해하면서 되짚어보자.

 

 

먼저 TypeScript는 알다시피 정적 타입 언어다.

(이전에 작성한 관련 포스팅 참고 📚[TYPESCRIPT] 타입스크립트란? 자바스크립트와의 차이점)

컴파일이 이뤄지기 전에 코드를 읽고 에러를 미리 판단한다.

위에서 나타난 타입 에러가 이에 해당된다.

 

 

그렇다면 왜 타입 에러가 났는데?

이 답은 앞에서 얻었다. 바로 next-env.d.ts 파일이 없었기 때문.

 

 

Next.js 프로젝트에서 TypeScript를 원활하게 사용하기 위한 타입 정의를 포함한 파일이 next-env.d.ts이다.

주로 Next.js에서 사용되는 환경 변수들에 대한 타입 지정과

Next.js 프레임워크에 특화된 타입 지정으로 이루어져 있다.

styled JSX는 Next.js에서 사용되는 스타일링 방법이니 후자에 포함되는 것으로 추정된다.

 

이 next-env.d.ts 파일은 일반적으로 .gitignore에 포함되어 있기 때문에

프로젝트를 단순 clone해온 시점에서는 해당 파일이 없었고

이 공백으로 인해 타입 에러가 났다고 이해할 수 있다.

 

 

 

next-env.d.ts 파일이 생겨나게 되는 과정은 Next.js의 동작과 관련이 있다.

 

Next.js는 개발 서버를 실행하거나(npm run dev) 프로젝트를 빌드할 때(npm run build)

프로젝트에 tsconfig.json 파일을 발견하고, 그 안에 TypeScript 설정이 포함되어 있으면

그때 '아 얘 TypeScript를 사용하고 있구나'라고 파악한다.

 

그리고 tsconfig.json에 정의된 설정에 따라 TypeScript 컴파일러가 실행되는데

이때 프로젝트 환경에 따라 필요한 TypeScript 타입 정의 파일 env.d.ts를 자동으로 생성한다.

 

(+ env.d.ts는 Next.js가 아니어도 사용된다.

CRA(create-react-app)에서는 react-app-env.d.ts가 생성되고 사용된다.)

 

 

 

 

정리하자면 아래와 같다!

 

1️⃣ 프로젝트 내에 Next.js와 관련된 타입을 정의해 줄 next-env.d.ts가 없는 상태에서 시작

=> TypeScript가 타입 에러를 우선 탐색

=> 😱 styled JSX와 관련된 타입 지정이 없어 타입 에러 발생

 

2️⃣ npm run dev로 개발 서버 실행

=> Next.js와 관련된 타입 지정을 담은 next-env.d.ts 자동 생성

=> 😋 관련된 타입 지정을 찾아내 타입 에러 해결

 

 

 

---

결말, Typescript의 환경설정을 이해하자

문제가 발생했을 때에는 Next.js만의 특이한 설정인가 싶어서 Next.js에 대해서 아는 친구들을 찾아다녔는데

알고 보니... TypeScript 관련 내용이었다는 🥁 두둥 탁

원인 분석을 다 하고 나니 살짝 머쓱했다; 원인이 이거였구나~ 하하~

 

특히 tsconfig.json이나 env.d.ts 파일에 대해서는 크게 신경 쓰지 않고 사용해 왔는데

이번 기회에 제대로 복습 공부가 됐다. 잘 기억해 두자~