웹 프로젝트 리팩토링 -> TS(타입 스크립트) 도입했습니다

기존에 Node.js Express 로 짜여진 백엔드단 코드가 일반 JS였는데 TS(타입 스크립트) 를 도입해서 리팩토링 과정을 거쳤습니다. Vue 코드도 언젠가 타입 스크립트로 바꿔줘야 하는데..

 

Vue 3는 공식적으로 TS를 지원하지만 제 프로젝트 환경의 경우 Vuetify 를 사용하기 위해 부득이하게 Vue 2 버전을 사용해서 (Vuetify 가 Vue 3를 공식[Release]으로 지원하지 않고 있습니다.) Vue 2는 각종 플러그인을 이용해야 TS를 사용할 수 있습니다. 쉽게 말해서 귀찮아서 나중에 한다 이말입니다.

 

이렇게 전부 js에 CommonJS require("...") 로 가득한 코드를..

 

ts 파일로 바꿔주고 ES6 import 구문으로 바꿔줬습니다.

TS 의 장점인 자동 완성, 잘못된 오류들을 미리 잡아주는 큰 장점을 얻게 되었습니다.

 

코드를 보면 아직도 require 이 섞여 있는데 그 이유는 기본적으로 라이브러리를 끌어다 쓸때 라이브러리 제작자들이 TS를 고려해서 만들어서, 타입을 미리 지정해둔 경우엔 라이브러리명.d.ts 파일을 만들어서 이 안에 타입을 다 미리 정의해두게 됩니다. 그래서 import 로 끌어오면 *.d.ts 파일을 보고 그 라이브러리에서 사용하는 변수나 Class의 타입이 알아서 유추가 되게 됩니다.

 

* require() 로 라이브러리를 가져오면 타입이 any 로 잡혀서 TS의 자동 완성 기능이 동작하지 않게 됩니다. (작업 하다가 알게됨 ㅡㅡ;)

 

그런데 만약에 라이브러리 제작자가 TS 를 고려하지 않고 그냥 JS로 만들어둔 경우라면 import로 그 라이브러리를 끌어오면 d.ts 타입 지정 파일이 없어서 타입을 유추할 수 없어서 오류가 발생하게 됩니다.

 

이럴땐 2가지 해결 방법이 있는데 1. d.ts 파일을 직접 만들어서 타입을 정의해주거나 2. require() 을 그대로 유지하는 방법입니다. require() 로 모듈을 끌어오면 아까도 말했듯이 타입을 가져오지 못하고 그냥 any 타입으로 변수에 넣어주는 방식으로 진행합니다. 그렇기에 TS 장점을 전혀 이용할 수 없게 됩니다. 

 

그래도 d.ts 파일을 일일히 만들어주는게 귀찮기도 하고 간단한 라이브러리의 경우 타입 지정 자체가 필요 없기 때문에 이렇게 가져오는게 더 나은 방법일 수 있습니다.

물론 require() 로 가져오면 제 환경의 문제인진 모르겠는데 VSCode 에서 Ctrl + 클릭 으로 그 모듈로 바로 이동 가능한데 이 기능이 *.ts 파일로 만들면 작동을 하지 않더라구요. 이상하게도 import 에서만 작동합니다..

 

뭐 얻는게 있으면 잃는것도 있을거니깐요.. 특히 Object 를 Interface 로 정의해서 안에 뭐가 들어가야 할지 알 수 있다는것도 백엔드단 코드에선 매우 큰 장점이라고 생각해서 처음으로 TS를 도입해봤습니다 ㅎㅎ

 

아래는 TS 도입후 얻게된 장단점 입니다.

 

장점

- TS를 통해 코드 안정성을 얻게 됨

- Vscode에서 타입을 알고 있어서 IDE 처럼 자동 완성이 매우 아름답게 진행됨 (개인적으로 백미라고 생각하는 부분)

- 심적 안정감(?) 을 얻게 됨

 

단점

- 타입을 일일히 적어주는게 귀찮기도 하고 뒤에 타입을 적는 형태가 가독성이 떨어져 보임

- 라이브러리에서 사용하는 콜백 함수를 작성할 때 인자값 타입을 모를때가 많은데 Vscode에서 제대로 안찾아줘서 구글링으로 직접 찾아야 하는 매우 귀찮은 상황이 발생

- 라이브러리를 끌어왔을 때 TS를 고려해서 만들지 않은 라이브러리들을 쓸땐 매우 귀찮아짐. (제일 불편한 부분)

- 어짜피 JS라 런타임 중에 생기는 문제는 여전함

- require() 을 부득이하게 사용한 부분은 Ctrl + 클릭을 이용한 모듈 파일 바로가기가 작동하지 않음. (import만 작동)

 

뭐 작성하고 보니 득보다 실이 더 많은거 같네요..? ㅎㅎ;; 사실 단점들은 컴파일때나 귀찮을 뿐이지 런타임, 타입 안정성을 얻었다는 점이 매~우 큰 장점이라고 생각합니다. 

 

We should be more careful with runtime errors than compile errors!