[TypeScript] 타입스크립트를 사용해야 하는 이유

Jenna·2023년 4월 24일
0

모던 프론트 웹개발자로 살아남기 힘든 세상이 왔다.

출처: 코딩애플
이건 별개의 내용인데 벨로그는 이미지 캡션 기능이 없는게 너무 불편한 것 같다


프론트 개발자로 살아남기 위해 위에 기술된 스택을 기본적으로 알고 있어야 하는 세상이다. 단순히 프론트 개발만 하는 것이 아닌, 백엔드 스킬도 어느 정도 알고 있어야 하는 것.

나는 프론트 중심이긴하지만 풀스택으로 일해 왔고, 덕분에 백엔드에 대한 이해는 보유하고 있다.

하지만 문제는 너무 빠르게 변하는 프론트 시장,,
요즘 많은 채용공고들을 보면 변화하는 시장에 맞춰서 프론트 개발자들에게 요구하는 스택이 많아졌다. 그 중에서도 대표적인 스택이 ES6, TypeScript, React, Vue, Next.js, Node.js, RESTful API 등등..

그중 요새는 JS보다 TS를 자주 이용하고 TS가 가능한 사람을 채용하는 추세이다.
따라서 난 살아남기 위해,, TypeScript를 공부하기 시작,, 흠냐..

React랑 Node.js, ES6는 자주 사용하기 때문에 이번에는 TS, Vue.js, Next.js를 사용해서 프로젝트를 하나 만들어 볼까 한다. 변화되는 시장에서 살아남기 위해서는 기업이 요구하는 기술스택을 어느 정도는 익히고 있어야 한다고 생각하기 때문이다.


Why TypeScript?

JavaScript의 장점을 꼽자면 누구나 편리함을 꼽을 것이다. JS는 기존의 웹 동적 프로그래밍의 기능을 넘어서서 현재는 Node.js, Deno와 같은 런타임 환경을 통해 서버도 개발할 수 있는, 많은 개발자들에게 사랑받는 언어 중 하나로 자리매김 했다.
간단하고 빠르게 개발할 수 있다는 장점이 있는 JS는 그러한 명성에 걸맞게 Dynamic Typing이라는 기능을 제공한다. 이는 데이터에 따로 타입을 지정해주지 않아도 컴퓨터가 알아서 인식을 해서 기능을 제공해 주는 것이다.

int a = 1; // c와 같은 언어에서는 이런식으로 변수에 데이터 타입을 할당해주어야 한다. 

1 + 2 // JS에서는 알아서 숫자로 인식하여 계산을 수행해준다.

그럼 이렇게 편리한데 왜 TypeScript씀?

JS는 자유도와 유연성이 높기 때문에 빠르게 프로젝트를 구성하고 만들 수 있지만, 이러한 높은 자유도는 오히려 프로젝트의 사이즈가 커질 수록 독이 된다.
예를 들어 애를 너무 풀어두고 키우면 버르장머리가 없어지듯이 어느 정도의 규제는 필요하다는 것 ㅎ;
TS는 타입형에 따라서 수많은 세세한 에러들을 잡아주기 때문에 발생할 수 있는 에러를 미연에 방지할 수 있다는 장점이 있다.

TypeScript는 기본적으로 JavaScript와 같은 문법 체계를 지닌다. 즉 JS에 데이터 타입을 지정해줘서 Dynamic Typing에서 Static Typing으로 바꾼 언어라고 볼 수 있음

타입관련 에러들을 모두 잡아주기 때문에 코드 자체의 정확성이 올라간다.
예를 들어, JS 코딩하다가 다들 한번씩 봤을 'undefined' is not a function. 이런거 안 볼 수 있다는 소리.

https://madnight.github.io/githut/#/pull_requests/2021/2

TypeScript는 하락세를 보이는 JavaScript, PHP와는 다르게 지속적인 성장세를 보이고 있다. 웹 개발을 하기 위해서 선택이 아닌 필수가 되어간다는 말이다.


TypeScript 사용법

기본적으로 자바스크립트의 베이스 위에 변수의 타입을 지정해 주는 것이라고 보면 쉽게 익힐 수 있다.

const message: string = 'hello world';
console.log(message);

이런식으로 messagestring 타입으로 지정해주면 messagestring 타입 외의 값을 넣으면 에러가 발생하게 된다.

function my_sum(a: number, b: number) {
    return a + b;
    }

let a = 4; 
let b = "5";

my_sum(a, b);

다음과 같이 ab의 타입을 number로 설정해준 경우, bstring 타입을 넣게 되면 Argument of type 'string' is not assignable to parameter of type 'number'.라는 에러를 제공하게 된다.

이런 식으로 자바스크립트에 타입을 지정하는 것이 기본이라고 보면 된다.
앞으로 타입스크립트를 사용해서 프로젝트를 진행하며 서술해 볼 예정.



참고
https://serokell.io/blog/why-typescript
https://www.youtube.com/watch?v=xkpcNolC270
https://www.typescriptlang.org/docs/handbook/intro.html

profile
FE/Game Dev.

0개의 댓글