우아한 타입스크립트 with React -1장 들어가며

읽게 된 이유

정적 타입테스트를 위해서 Typescript를 도입했었다. 이때 단순히 extends 이외의 다른 문법에 대해선 크게 사용하지 않았다. Omit 등 여러 기능이 있는건 알았지만 익숙치 않아서 사용하지 않았다. 그러다 보니 Type이 굉장히 많아지거나 가독성이 좋지 않다고 느꼈다. 이러한 시점에서 Fastcampus의 강의를 들었는데, Omit이나 여러 문법을 쓰니 내가 쓰는 타입보다 훨씬 우아하게 느껴졌다. 단순히 타입스크립트를 아는 것 보다 실무에서 어떻게 쓰는지에 대한 호기심을 가지게 되었고, 이 책을 알게 되어 읽게 되었다.

 

1장은 타입스크립트가 왜 필요한가에 대한 내용이다. 제목 그대로 들어가며!! 크게 3가지로 분류할 수 있을 거 같다.

 

1. 웹사이트의 발전

단순히 정적이던 웹사이트가 발전하게 되었다. 정보를 보여주기만 했던 사이트가 유저와의 상호작용을 하는 사이트가 되고, ajax이후엔 새로고침없이도 내용이 동적으로 바뀌게 되었다. 이러면서 정적이던 웹사이트는 동적인 웹 어플리케이션으로 진화하게 된다.

이러한 웹 어플리케이션이 되면서 점점 다양한 기기와 다양한 데이터를 다루게 되었고 ,다루는 데이터 또한 방대해졌다.

이런 상황에 맞물려 컴퍼넌트 베이스 개발(CBD) 방법론이 등장하게 되었다. 컴퍼넌트는 모듈과 유사하게 하나의 독립된 기능을 재사용하기 위한 코드 묶음이다. 다른 컴포넌트와의 의존성을 최소화하거나 없애야하고 이는 흔히들 말하는 '관심사의 분리'일 것이다. 이런 식으로 웹이 발전하고 동적 웹 서비스의 수요 증가가 이어지면서 자연스럽게 자바스크립트 개발자의 증가로 이어졌다. 또한 결과물이 증가하면서 개발자의 협업이 점점 필요하게 되었다.

 

2. 협업에서의 자바스크립트의 한계

 코딩을 시작하고 3개월 쯤 지났을 무렵 나는 '동적'이다를 굉장히 긍정적인 단어로 받아들이고 있었다. 자율성이 높고,,, 하지만 자유롭다는 것, 동적인다는 것은 특징일 뿐이며 당연히 단점이 존재할 수 밖에 없다.

 

 동적 타입 언어

자바스크립트는 동적 타입언어라서 런타임에 해당 변숫값이 할당될 때 해당 값의 타입에 따라 변수 타입이 결정된다. 그렇기 때문에 사용자가 실수하기가 쉽다.

책에서 드는 예시는 덧셈이다.

const sumNumber= (a,b)=>{
	return a+b;
    };
    
sumNumber(1,2);//3
sumNumber(100);//NaN
sumNumber("a","b")//ab

 

우린 숫자의 덧셈용으로 해당 함수를 만들었는데, 사용하는 다른 동료는 다르게 사용할 수 있다. 변수의 개수, 변수의 타입등이 일치하지 않을 수 있다.  이러한 특징 때문에 우리는 런타임에 예상치 못한 에러를 겪게 되고 이는 예상치 못한 에러를 유발할 수 있다.

 

이러한 방법을 해결하기 위한 3가지 대안으로

JSDoc, propTypes, 다트등 3가지 방법이 나왔는데, 자바스크립트 스스로가 인터페이스를 기술할 수 있는 언어로 발전해야하는 목소리가 커졌고, 그 결과가 타입스크립트다.

 

3. 협업을 위한 타입스크립트

자바스크립트 코드를 그대로 사용할 수 있는 점(슈퍼셋 언어이다) 자바스크립트에 점진적으로 적용 가능하다는 장점과 아래 3가지 장점에 타입스크립트는 많은 환영을 받았다.

 

3.1 안정성 보장

정적 타이핑을 제공해서, 컴파일 단계에 타입 검사를 해준다. 이에 의해 자바스크립트의 타입 에러를 줄일 수 있고, 런타엠 에러를 사전에 방지할 수 있어 안정성이 향상된다.

 

3.2 개발 생산성 향상

자바스크립트를 쓰다가 타입스크립트를 쓸 떄 나도 많이 느꼈던 편리합니다. VsCode와 Typescript 모두 마이크로소프트에서 만들었따. 이에 의해 호완이 굉장히 잘되고, 이를 바탕으로 자동 완성 기능이 잘 제공된다.

 

3.3 협업에 유리

타입 스크립트에서 인터페이스, 제네릭을 지원하는데 인터페이스가 기술되면 코드 이해력이 향상된다. 또한 복잡할 앱일수록 협업하는 개발자 수도 증가하는데, 자동 완성 기능이난 기술된 인터페이스는 코드 이해를 더욱 쉽게 해준다.