기존 React app project에 TypeScript 적용하기

1. TypeScript 기반 패키지 설치

참고 사이트

Adding TypeScript | Create React App

 

---

1-1. @types/jest Not Found 에러

이번에 새로 참여하게된 챌린지에서 React 프로젝트를 TypeScript로 변경해보라는 과제를 받았다.
한번도 타입스크립트를 사용해보지는 않았지만 이번 기회에 배워보는것도 좋을 것이라고 생각해 바로 기존 프로젝트에 적용을 시도해봤다.

# 타입스크립트 적용을 위한 패키지 설치 코드
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

@types/jestnpx를 찾을 수 없다는 오류

 

나머지 패키지들은 이상 없이 설치가 완료되었으나 한 패키지만 404 ERROR와 함께 해당하는 패키지를 찾을 수 없다는 오류를 출력했다.

[@types/jest] `npm i @types/jest` causes http 404 Not found · Issue #46591 · DefinitelyTyped/DefinitelyTyped

 

구글링을 해보니 한 개발자도 나와 같은 오류를 만나 git issue에 질문을 올렸던 것을 확인할 수 있었다.
따로 답변이 등록되지 않은 상태로 그가 스스로 해결한 방법인 npm i @types/jest를 사용해 재설치를 진행해보니 설치가 정상적으로 진행되었다.

install --save대신 i를 이용해 설치를 진행하자 정상적으로 설치가 완료

버전 확인 결과 이상 없이 잘 설치되었다

 

확실한 오류 원인은 규명하지 못했지만 이전 방식과 이번 방식의 차이는 --save의 유무라고 판단 했으며 이 부분은 차후 다른 패키지를 설치할 때 유사한 오류가 발생하면 비슷한 방식을 사용해 오류 해결을 할 수 있을것이라 생각했다.

 

---

2. .js확장자 .tsx확장자로 변경

패키지를 설치한 이후에는 현재 프로젝트에 적용되어있는 js파일들을 전부다 tsx확장자로 변경해주었다.

.tsx확장자로 변경한 후 발생한 오류

 

변경을 완료하자 자바스크립트일때는 발생하지 않았던 오류들이 콘솔창에 표시되기 시작했다.

결과적으로 단순히 적용만 한다고 바로 뚝딱 적용되지 않는다는 것을 알 수 있었으며 내부 컬럼의 class를 className으로 변경 등의 조치를 확실하게 진행해야 오류가 발생하지 않고 정상적으로 진행되는 것을 확인할 수 있었다.

 

---

2-1. Module not found: Can't resolve './App'에러

이번 오류는 tsconfig.json파일이 프로젝트 내에 존재하지 않았기 때문에 발생한 오류인 것을 확인했다.

오류 원인을 확인한 후에는 아래 링크를 참고해 typescript 마이그레이션 작업을 다시 진행했고 정상적으로 tsconfig.json 파일이 생성된 것을 확인했으며 위 에러도 사라지는 것을 확인했다.

Migrating from create-react-app-typescript to Create React App · Vincent Tunru.com

 

---

2-2. ... , but '--jsx' is not set 에러

2-1에러를 해결한 후 다시 빌드를 진행해보니 이번에는 아래와 같이 '--jsx' is not set 에러가 발생했다.

문제 해결을 위해 오류가 난 원인을 조사해보니 이번 오류의 경우에는 현재 사용중인 텍스트 에디터인 VSCode와 global의 typescript버전이 일치하지 않아 발생했던 것이었다.

// tsconfig.json 내부
"compilerOptions": {
	"jsx": "react" // 이전에는 preserve로 설정되어있었다
}

 

jsx의 속성값을 preserve에서 react로 변경해주자 --jsx not set 에러는 더이상 보이지 않게 되었다.

 

 

---

이후 진행해볼 절차

1. js → tsx확장자로 변경하는 과정에서 에러가 발생한 부분 수정을 통해 정상적으로 프로젝트 구동이 가능하도록 마저 조치
2. TypeScript 핸드북을 통해 기본 타입(string, number, etc.), 타입 / 인터페이스, 유니온 등 기본 개념 학습
3. React 프로젝트에 타입을 적용하면서 만나는 다양한 에러들을 검색하며 적응하기
4. 필요시 변수, 함수에 any, 타입 단언(as, !) 등을 써서 코드적용해보기

---

참고 링크

• https://create-react-app.dev/docs/adding-typescript/ (타입스크립트 적용방법 튜토리얼)
• https://github.com/DefinitelyTyped/DefinitelyTyped/issues/46591 (@types/jest Not Found 에러 해결)
• https://velog.io/@do_ng_iill/npm-WARN-config-global-global-local-are-deprecated.-Use-locationglobal-instead.-%ED%95%B4%EA%B2%B0 (npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. 주의 문구 해결)
• https://mattermost.com/blog/using-react-with-typescript/ (Can't resolve './App' 오류 원인 파악)
• https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/ (react-create-app-typescript 적용 방법)
• https://chacha73.tistory.com/44 (VSCode에디터와 global간의 TypeScript 버전 일치방법)