개요
지금까지 프로젝트를 하면서 대부분을 리액트로 개발을 했고, typescript의 존재도 알고 있었다. 그러나 나는 큰 프로젝트보다는 소수 인원의 작은 프로젝트를 많이 해봤기 때문에 typescript의 필요성을 크게 느끼지 못했고 적용하지도 않았다.
그리고 c++을 코테의 주언어로 사용하면서 타입스크립트의 특징을 살펴봤을 때 타입스크립트? 금방 배우겠네 ㅋ 라는 자신감도 있었다.. ㅎㅎ
시간이 지나고, 졸업을 앞두게 되면서 채용 공고들을 살펴보게 되었는데 이제 typescript는 필수인 시기가 되었나보다. 또한 현재 진행하는 프로젝트에서도 프론트엔드분이 타입스크립트를 적용시켜보는 게 어떻냐해서 오케이! 하고 공부를 해보았다. (필요없는 이야기지만 채용공고를 보면서 기술 트렌드나 새로운 기술들을 많이 알게 되는 것 같다.)
그래서 왜 회사에서는 typescript를 쓰는지, 리액트 프로젝트에는 어떻게 설치를 하는지를 작성해보고자 한다.
Javascript + Type
정말 이름 그대로 Javascript + Type이 적용된 자바스크립트의 업그레이드 버전이라고 볼 수 있다.
기존의 자바스크립트는 다음과 같은 코드도 정상적으로 실행이 된다.
let num = "10" + 123;자바스크립트는 dynamic typing을 지원하기 때문이다. 이는 작은 프로젝트에서는 편리하게 쓰일 수 있으나 프로젝트의 규모가 커질수록 오히려 혼란을 초래할 수 있다.
규모가 크면 클수록 다양한 사람들이 프로젝트에 참여하고, 변수도 많아질텐데 type이 헷갈리면 코드 짜기도 힘들 것 ...
그렇기 때문에 typescript를 사용하는 회사들이 늘고 있다.
더불어 type 지정을 해주기 때문에 더욱 정확한 에러메세지를 나타낼 수 있다.
기존 리액트를 사용할 때는 애매하게 알려주는 에러 메세지로 인해 어디서 에러가 발생하는 것인지 알기 어려운 경우가 많았는데, 찾아보니 typescript의 경우 오타를 알려준다던지, 어떤 변수에서 type을 잘못 맞춰 적었는지를 알려주기 때문에 에러 수정이 훨씬 편리해질 것 같다.
리액트 프로젝트에 적용하기
나는 아예 새로운 프로젝트를 생성했다.
프로젝트를 생성하고 싶은 파일의 터미널에서 다음의 코드를 실행하면 된다.
//my-app에 내가 원하는 프로젝트 이름을 적어주면 된다.
npx create-react-app my-app --template typescript기존의 리액트에도 적용하는 방법이 있다고 하는데 나는 해보진 않았지만 방법은 알려주겠다. 다음 코드를 해당 프로젝트 터미널에 적용하면 된다.
npm install --save typescript @types/node @types/react @types/react-dom @types/jest💣 에러 해결
원래는 위의 코드만 작성하면 끝이지만 지금은 얼마 전 리액트19가 정식 릴리즈 되면서 npm error peer react@"^18.0.0" from @testing-library/react@13.4.0와 같은 에러가 발생한다.
npm install react@18 react-dom@18위 코드를 해당 프로젝트의 터미널에서 실행하면 해결된다는 글이 있었다.
그러나 나는 해결되지 않았다.
npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0구글링을 하다보니 위 코드를 실행해보라는 글이 있었고 실행하니 정상적으로 작동하는 것을 확인할 수 있었다.
tsconfig.json
추가로 tsconfig.json 파일을 생성하고 설정해줘야 한다.
리액트라면 자동으로 생성될 수도 있다고 하는데 나는 없었다.
여기엔 타입스크립트 ts 파일들을 .js 파일로 변환할 때 어떻게 변환할 것인지 세부설정이 가능하다고 한다.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
}
}위 코드를 복붙하면 되는데 나는 import 에러나 여러 에러들이 발생해서 구글링하여 아래처럼 코드를 작성해주었다.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"noImplicitAny": true,
"strictNullChecks": true,
"allowJs": true,
"allowImportingTsExtensions": true,
"noEmit": true,
"esModuleInterop": true,
"jsx": "react-jsx",
}
}그리고 추가로 App.tsx를 import할 수 없다는 에러도 떴었는데 import ~~ 'App'이걸 'App.tsx'로 수정해주니 해결되었다.
여기까지 하면 프로젝트 설정 완료다! 이제 개발만 하면 된다~
