Typescript 왜 쓰는거지 🤔

안녕하세요! 설 연휴 잘 보내시고 계신가요? 어제 오늘 갔다오니 피곤하네요..ㅎ

이번 글은 제 지식과 우아한 타입스크립트 with 리액트라는 책을 참고해 Typescript에 대해

알아보는 글입니다!

 

❓ Typescript?

TS를 왜 쓰는지 알기 위해선 우선 무엇인지 알아봐야겠죠? Typescript는 마이크로소프트에서 개발한

Javascript의 슈퍼셋 언어입니다.

슈퍼셋은 기존 언어에 새로운 기능과 문법을 추가해 보완하거나 향상하는 것을 말한다.
기존 언어와 호환되며 일반적으로 컴파일러 등으로 기존 언어 코드로 변환되어 실행된다.

 

Typesript는 Javascript의 슈퍼셋 언어입니다. 보통 기존 언어의 슈퍼셋 언어가 나오는 이유는

그 전 언어의 불편한 점이 생기고 이를 개선하고자 나옵니다. 그럼 Javascript에는 어떤 문제가 있었을까요?

 🤝 협업의 중요성

먼저 웹 개발자 생태계가 커지면서 웹 서비스의 수요가 높아지면서 자연스레

Javascript 개발자가 늘어나게 됐습니다. 개발자가 늘어난 만큼 예전보다 웹 서비스의 결과물은 굉장히 커집니다.

때문에 서비스를 개발한 후 유지보수를 하는 데 개발자들의 협업이 중요하게 되었죠.

 

협업이 왜 중요한지는 여러가지 이유가 있지만 몇 가지 상황을 들어보겠습니다.

어제 어떠한 함수를 내가만들었는데 오늘 사용해야 한다면 함수를 어떻게 사용해야 하는지

잘 알 수 있습니다. 좀 더 시간이 흘러 한 달이 지나면 함수를 이해하는 데 조금은 시간이 더 들죠.

여기서 만약 이 함수가 내가 만든 게 아니라면? 다른 개발자가 만든 함수를 내가 사용해야 하는 상황이 올 때

내가 만든 함수보다 더 빠르게 파악이 가능할까요? 또 개발에 참여한 개발자가 1명.. 2명.. 8명 정도 있다면?

개발 천재라면.. 빠르게 이해가 가능할 수도 있지만 보통의 경우라면 힘들고 오래 걸리는게 당연합니다.

 

보통 한 서비스를 개발하는데엔 당연히 여러명의 개발자가 투입됩니다.

그래서 협업이 중요하며 오늘날에 좋은 개발자는 다른 개발자도 이해할 수 있는 코드를 짜는

개발자가 좋은 개발자라고도 하죠. Open API를 사용하는 것처럼 다른 개발자가 작성한 코드를 보고

이해하며 질문하는 것은 너무 비용이 많이 들죠. 질문할 개발자가 회사를 떠났다면..? 더 고생하겠죠..ㅎ

 

협업이 잘 되려면 개발자의 역량도 중요하지만 그 언어가 협업에 적합한지도 따져야 합니다.

이런 부분에서 Javascript는 과연 협업, 유지보수 등에 적합한 언어일까요?

 

😵Javascript의 한계

이제 Javascript의 한계 즉, Typescript가 나오게 된 이유와 직결되는 이유를 알아보겠습니다.

 

🏃 동적 타입 언어

Javascript는 동적이라는 말 들어보셨을겁니다. 좀 추상적인 말이긴 하죠. 언어가 동적이라고?

이 동적이라는 말은 변수에 타입을 명시적으로 지정하지 않고 코드가 실행되는 런타임에 변수 값이

할당될 때 해당 값의 타입에 따라 변수 타입이 지정된다는 말입니다. 

let x = 1;

 

이렇게 변수를 선언하고 할당해도 런타임에 타입이 정해진다는 것입니다.

그래서 타입 관련 오류도 런타임에 나타나게 되죠.

 

이게 어떤 문제냐고요?

const sumNumber = (a, b) => a + b;

sumNumber(10, 20); // 30

 

위 코드는 잘 동작할 것입니다. 아래 코드를 봐볼까요?

const sumNumber = (a, b) => a + b;

sumNumber("a", "b"); // "ab"
sumNumber(10); // NaN

 

위 코드도 어떠한 오류도 발생시키지 않고 잘 동작합니다.

그런데 이상함을 느낄 수밖에 없을 것입니다.

 

하지만 Javascript 엔진은 문제없이 동작합니다. Javascript는 동적인 언어이면서 꽤 관대한 언어입니다.

호출될 때 인자 a, b의 타입이 정해지기에 문자열을 넣어도 문제 없으며 두 번째 호출에선 b는 undefined입니다.

때문에 + 연산자의 피연산자가 될 수는 없지만 오류를 발생시키지 않고 적절히 NaN으로 형변환 해 코드를 실행합니다.

 

이러한 경우는 지금이야 간단한 코드지만 규모가 커지면 개발자의 의도와 다르게

함수 동작이 일어날 수 있습니다. 기계 입장에서는 아무런 문제가 없지만 사람 입장에서는

문제가 있을 수 있죠. 이런 문제를 해결하기 위해 어떤 방안들이 있었을까요?

 

📚 여러가지 방안

많은 개발자들이 한 웹 서비스를 개발하는데 이런 Javascript의 동적 타이핑 시스템은 좋지 않을 수 있습니다.

그래서 여러가지 방안들이 있었습니다.

 

1. JSDoc

JSDoc은 모듈, 네임스페이스, 클래스, 메서드, 매개변수 등에 대한 API 문서 생성 도구입니다.

주석에 @ts- check를 추가하면 타입 및 에러 확인이 가능하며 Javascript 소스코드에 타입 힌트를

제공하는 HTML 문서를 생성할 수도 있습니다. 하지만 주석의 성격이 강하기에 강제성을 부여하고

사용하기 어렵습니다.

 

2. propTypes

React를 기초부터 공부하신 분들이라면 아실 거 같네요. 리액트에서 컴포넌트 props의 타입을

검사하기 위해 사용하는 속성입니다. prop에 유효한 값이 전달되었는지 확인할 수 있는데

전체 애플리케이션에 타입 검사를 하는데에는 사용할 수 없습니다. 또 리액트라는 라이브러리에서만

사용가능하다는 단점이 있습니다.

 

3. Dart

Dart는 구글의 Javascript를 대체하기 위해 제시한 새로운 언어로 타이핑이 가능합니다.

위 언어들같은 보조 수단보다 근본적인 해결책이죠. 하지만.. Javascript가 이미 너무 크기도하고

새로운 언어이기에 개발의 파편화를 야기할 수 있다고 시선이 좋지 않았습니다.

 

위 방안 모두 훌륭합니다. 하지만 여러 단점을 가지고 있기에 Javascript 자체적으로 인터페이스를

기술할 수 있어야한다는 목소리가 커졌습니다.

 

🦸 Typescript 등장!

위 Javascript의 문제점들은 잘 보셨나요? 이제 여기서 확실히 Typescript를 왜 사용하는 지 정리하겠습니다.

 

🔒 안정성

Typescript는 안정적이다라는 말이 많습니다. 그 이유는 Javascript와 다르게 정적 타이핑을

제공하기 때문입니다. 정적 타이핑은 런타임이 아닌 컴파일 타임에서 타입 검사를 해주어서

개발자의 의도와 다르게 동작하는 코드를 짜는 경우는 Javascript보다 훨씬 줄죠.

즉, 런타임 에러를 사전에 방지할 수 있습니다! 코드 작성 단계에서 타입 검사를 하니까요.

 

🏭 개발 생산성

VSCode 등의 IDE에서 타입 자동 완성 기능을 제공합니다. 이 기능 덕분에 변수와 함수의

타입을 추론할 수 있고 리액트에서 어떤 prop을 넘겨야 되는지 일일이 확인하지 않아도 됩니다.

꽤 큰 수고를 덜어줍니다.

 

🤝 협업

위에서 그렇게 설명했던 협업의 중요성! Typescript를 사용하면 큰 규모의 애플리케이션의 개발 및 협업에

유리합니다. interface, generic 등 여러 기능을 제공하는데 인터페이스를 작성하면 코드를 더 쉽게

이해할 수 있습니다. 어떤 타입인지 미리 기술해놓았기 때문입니다. 자동완성 기능도 협업에 한 몫하죠.

 

🪜 점진적 적용

맨 처음에 설명했던 대로 Typescript는 슈퍼셋 언어이기 때문에 한 번에 바꾸는 게 아니라

점진적으로 도입할 수 있습니다. 그래서 무조건 Typescript를 쓰기 전에 일부 적용해보고

괜찮다 싶으면 도입할 수 있는 옵셔널적인 성격을 지니고 있습니다.

 

 

📖 마무리

Typescript의 개념과 어떤 특징들을 갖고 있기에 사용하는지 알아봤습니다! Typescript가 요새

많이 쓰이긴 하지만 무조건 Javascript보다 좋은 것은 아닙니다. 협업에서 Javascript보다 좀 더

유리한 점이 있지만 코드 작성 시간이 늘고 여러 예기치 못한 타입 오류들도 발생하기에 상황에 따라

적용하는 것이 바람직 합니다. Typescript가 무엇인지 알아보았으니 다음부터는 Typescript의 여러

기능들에 대해서도 작성해보겠습니다. 읽어주셔서 감사합니다!