타입스크립트로 전환하는 이유
그동안 자바스크립트로 만족스러운 개발이 가능했다.
타입을 정할 필요 없이 빠른 개발을 시작할 수 있는 장점으로 인해 프로젝트를 진행할 때 자바스크립트로 불편하지 않게 개발을 할 수 있었지만 타입스크립트로 가게 된 계기가 있다.
자바스크립트는 느슨한 타입의 동적 언어다. 타입의 종속적이지 않기 때문에 유연한 개발에 있어서 최고의 장점이다.
하지만 이러한 특징 때문에 리팩토링 중 문제를 겪게 되었다.
콘솔에 보이는 타입 에러 메시지
리팩토링을 진행하면서 사진과 같은 에러를 마주했다.
에러를 해결하면 문제없다 생각하였고 막상 프로그램을 실행해 보니 웹 서비스가 제대로 동작하지 않았다. 이는 유연한 언어인 자바스크립트 특성상 발생되는 문제였지만 이로인해 나는 코드를 다시 한번 꼼꼼히 봐야 했고 이런 쓸모없는 비용이 발생하게 되면 개발 일정에 영향을 줄 수 있을지 모른다 생각했다. 또한 코드의 안전성과 신뢰성에 직결되는 문제라 생각되었다.
이렇듯 난 추후 서비스를 계속 디벨롭 시킬 생각이 있기 때문에 코드의 신뢰도를 높일 수 있는 타입스크립트로 전환을 진행하게 되었다.
자바스크립트에서 타입스크립트로 바꿔보자
타입스크립트와 필요한 패키지 설치
npm install --save-dev typescript @types/node @types/react @types/react-domtsconfig.josn 생성
기존 jsconfig.josn파일을 삭제하고 새로운 tsconfig.josn 파일을 생성한다. (루트 경로에 생성)
npx tsc --init or 직접 생성해도 됨tsconfig.josn 설정
{
"compilerOptions": {
"target": "es6",
"lib": ["dom", "dom.iterable", "esnext", "es6"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src", "custom.d.ts"]
}custom.d.ts 생성
이미지 파일 사용시 필요하다. (루트 경로에 생성)
declare module '*.jpg'
declare module '*.png'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.webp'
declare module '*.svg'모든 js 파일 tsx 확장자로 변경
바꾸면서 발생 한 에러들은 전부 타입을 지정해 주면 됨
타입스크립트로 마이그레이션 하면서 배운 점
기존 자바스크립트를 타입스크립트로 변경하면서 2가지를 배울 수 있었다.
첫 번째로 타입을 신경 쓰면서 개발할 수 있다는 점이다. 처음엔 이게 뭐가 좋은 점인지 싶었지만, 실제 타입을 지정해 줌으로써 변경 가능한 변수 타입들을 쉽게 통제할 수 있었다. 자바스크립트로 개발 당시 타입 문제로 원치 않는 결과가 나와도 대수롭지 않게 생각했지만, 바로 에러 메시지를 출력하는 타입스크립트로 인해 더 꼼꼼하게 개발할 수 있다.
두 번째로 협업에 도움이 된다. 개발한 후로부터 몇 달 뒤 코드를 보니 모든 코드들이 새로웠다. 타입스크립트로 작성한 코드면 좀 더 코드 파악이 쉽지 않을까 생각한다. 특히 복잡한 시스템을 처음 보는 개발자에게는 타입스크립트가 꽤 도움이 될거 같다.
