[매일메일] 타입스크립트 사용하는 이유? + 실무 경험담

타입스크립트 사용하는 이유

[1] 정적 타이핑을 통해 코드의 안정성 크게 향상

개발 시 타입 오류를 런타임으로 실행하기 이전에 발견할 수 있음

 

[2] 개발자의 생산성을 높여줌

IDE 자동 완성 기능과 인텔리센스가 더 많은 정보를 제공할 수 있음

코드 작성 속도가 빨라지고, 리팩토링이 쉬워짐

명시적인 타입 정의가 문서화 역할을 해 코드 가독성과 이해도가 높아짐

 

[3] 객체지향 프로그래밍의 일부 기능을 자바스크립트에 추가

인터페이스, 제네릭, 열거형 등 현대적인 기능을 지원함

구조화되고 확장 가능한 코드 작성할 수 있음

 

자바 스크립트의 한계를 극복하고, 안정성/생산성/기능성을 향상시키는데 큰 도움

 

---

 

타입 스크립트를 도입하지 않는 것이 더 나은 경우도 있는가?

1) 개발 속도와 간단함이 중요한 소규모 프로젝트

프로토타입 제작이나 단순한 렌딩 페이지처럼 빠른 개발 주기가 요구되고, 복잡한 로직이 없는 경우

 

2) 팀 내에 타입스크립트 경험이 부족하거나 러닝 커브를 극복할 시간이 없는 경우

 

3) 기존 자바스크립트 프로젝트가 매우 방대하고, 타입스크립트로 전환하는데 드는 비용이나 리소스를 감당할 수 없는 경우

- 점진 도입 또는 순수 자바스크립트를 유지하면서 코드 리뷰와 테스트 강화

 

타입스크립트를 새로 도입하는 것을 추진할 때, 팀원을 어떻게 설득할 것인가?

1) 타입스크립트가 런타임 에러를 줄이고 코드 안정성을 강화한다는 점을 강조

- 유지보수 비용이 큰 프로젝트나 복잡한 코드베이스가 있는 상황인 경우

- 타입 시스템이 협업과 코드 품질을 어떻게 개선할 수 있는지 실제 사례를 통해 차이점을 보여줌

 

2) 초기 학습 곡선과 도입에 대한 부담을 완화할 수 있는 점진적 도입 전략을 제안

- 신규 코드에만 타입 스크립트를 부분 도입, 주요 모듈에 한정해 적용

 

---

 

+ 실무 경험담

 

이걸 경험하고 싶다면 js 레거시 위에서 코딩해보면 됨

와 ts 레포에서 코딩할 수 있을 때 잘할 걸 소리가 절로 나옴... ㅠㅠ (내 이야기임)

 

예전에 취준할 때 타입스크립트 왜 썼냐? 이런 질문 받으면 진짜 딱 저 위 내용만 대답할 수 있었음

사실 작은 프로젝트에서는 타입스크립트를 쓰던 자바스크립트를 쓰던 생산성 차이가 크게 안남

어쨌든 간단한 구조라서, 사람이 눈으로 속성 누락이나 타입 불일치를 잡아낼 수 있음

 

그런데 이제 회사 규모로 올라갔는데 js를 쓴다? 그럼 이제부터 눈물이 남

 

지금 딱 내가 이 상황이고

기존 자바스크립트 프로젝트가 매우 방대하고, 타입스크립트로 전환하는데 드는 비용이나 리소스를 감당할 수 없는 경우

 

우리 팀이 선택한 방법은 이거였음

초기 학습 곡선과 도입에 대한 부담을 완화할 수 있는 점진적 도입 전략을 제안

 

 

js 레거시를 어떻게 ts로 전환하는가?

일단 우리 팀 엔지니어들은 타입스크립트를 매우 도입하고 싶어함

그런데 기존 레거시(4년전 형성됨)가 매우 방대한데 전부 js로 되어있음

그래서 이걸 다 갈아엎으려면 영겁의 시간이 걸릴지도...

 

그래서 리팩토링을 시작한 시점부터 생성되는 모든 파일은 ts로 생성하기로 합의함

개인적인 생각으로는 husky 도입해서 pre-commit hook을 만들어 좀 더 강제할 필요가 있다고 생각함

 

그리고, 나는 나 스스로 지킬 개인적 원칙을 한 개 더 만들었는데,

새 기능을 개발하다보면 마주치는 js 파일들을 모두 ts로 전환하는 것임

그리고 ts로 바꾸면서 눈에 타입 에러들이 엄청 잘 보이기 시작함

그래서 한 기능 만들면서 많게는 20개의 파일까지 바꿨었다

단순 파일 타입 전환 뿐 아니라, 미선언된 props type도 잡아줘야 하고, 미사용 props도 빼줘야 해서

그냥 뇌빼고 기능 만드는 것보다 시간은 훨씬 더 걸렸다

하지만 후임자에게는 더 나은 개발 환경이 되겠지...?(제발그렇다고말해줘)

 

놀랐던 건 'never used' props가 엄청 많았다는 것

아마 새 기능을 만들 때 비슷한 기능 파일 아무거나 긁어서 붙여넣었을 것이고,

새로 만든 파일이 js니까 이 props가 진짜 쓰이는지 아닌지 잘 몰랐을 것이다

그래서 무의미한 props drilling이 발생하고, 무의미한 리렌더가 발생하고 있는 듯

 

ts인데도 런타임 에러가 나는 경우?

최근 대형 버그가 있었는데

아이러니하게도 연관된 두 파일은 최근 ts로 전환한 파일이었다

그런데 왜 런타임 에러를 못잡았을까?

 

typescript는 타입이 선언된 데이터에 대해서만 타입 검사를 수행함

그런데 객체 인자(props)가 아니라 단순 파라미터 나열 형태로 호출되는 함수였기 때문에

함수이름(
속성1,
속성2,
...
);

모든 파라미터 타입이 any로 추론 됨

any = 난 타입 검사 안받고, 니가 뭘하든 다 ok야

 

그래서 ts 파일이라도, 파라미터 타입이 지정되지 않은 상태라면

사실상 타입이 없는 js랑 다를게 없다

 

props가 객체가 아니여서 순서 기반으로 매칭되고, ts는 각각이 어떤 인자인지 추론할 수 없다

함수이름({
속성1: 속성값1,
속성2: 속성값2,
...
});

 

따라서 이렇게 객체 형태로 넘겨야, 파라미터 개수나 순서가 달라져도 ts가 바로 에러를 내줌

이래야 컴파일 타임에서 에러가 잡힘

 

그리고 여기에 더불어 다른 원인도 있었는데

 

1. A 개발자가 레거시 코드를 대량 삭제해서 main에 merge

2. B 개발자가 신규 기능을 구현한 후 main에 merge하려 했는데 1번 때문에 대량의 conflict 발생

3. conflict를 해결하려고 했지만...

  3-1. 레거시의 오지는 props drilling으로 인해 70개가 넘어가는 props 때문에 뭐가 뭔지 구분이 안됨

  3-1. 객체인자가 아니라 단순 파라미터 나열로 호출되는 함수라서 type 에러도 안잡힘

4. 그대로 prod에 나가버려서 서비스 장애 발생

 

그래서 해결해야될 문제는 이렇게 세 가지가 되겠다...

1. ts 쓸거면 타입에러 잡히게 제대로 쓰기

2. 레거시 대규모 청소는 메인 기능 개발 시기와 분리할 것

3. props drilling 부러트리기

 

안전수칙은 피로 쓰이고...

ts가 ts 답게 작동하도록 작업하는 것도 중요함을 알게 되었다

---

 

출처

1. 매일메일 250916. 타입스크립트를 사용하는 이유를 설명해주세요. https://www.maeil-mail.kr/question/95

2. 레거시 위에서 5개월 경험

3. 최근 터졌던 대형 버그