생산적인/WEB

TypeScript 초초초초요약본 서론

halion 2022. 10. 6. 20:38

/*

본 글은 필자가 TypeScript를 수박겉핥기식으로 익히면서 작성한 글임을 밝힙니다.

 

 

이렇게 관망만 하다가는 실제로 적용하기도 전에 모든 것을 까먹겠다는 위기의식에,

 

개인적으로 느낀 TS의 중요 포인트를 함축한 컨닝 페이퍼를 남깁니다.

*/

 

 

이미 늦었..나?


TypeScript가 뭔데?

웹서핑을 하다보면 삐까뻔쩍한 사이트들이 많이 보인다. 

 

Apple의 공홈이나 Toss의 웹 페이지들을 보면 나도 저런거 만들어보고 싶다는 생각이 들곤한다.

 

생각해보니 내가 못 만들 이유가 뭐가 있는가, 만들어보자!

 

 

...고 결심하면 먼저 HTML을 배워야 한다.

 

우리가 보는 웹페이지들은 사실 모두 HTML을 보기 좋게 만들어 놓은 것이라고 할 수 있다.

 

난해해 보이는 비주얼때문에 진입장벽이 조금 있지만,

사실 크롬 같은 브라우저에 "이렇게 보이게 해줘"라고 지시하는 것에 불과하기에 쉽게 배울 수 있다.


그럼 HTML만 배우면 웹사이트를 만들 수 있나?

 

 

만들 수 있긴 한데...

내 손에서 만들어진 페이지들은 Apple이나 Toss의 것을 기대한 나에게는 너무나도 못생기게 보인다.

 

이걸 이쁘게 꾸미기 위해서는 CSS를 배우면 된다.

 

이름이 영어라 두려움을 느낄 수도 있지만,

CSS 역시 "내 HTML을 이렇게 꾸며줘"라고 지시하는 것에 불과하기에 매우 쉽다.

 

이처럼 HTML과 CSS는 단순 브라우저에 정보를 전달하는 것이기 때문에 프로그래밍 언어라고 부르지도 않는다.

 

이 두 언어는 "마크업 언어"이다.

 

HTML이랑 CSS만 알면 프로그래머라고 하기도 뭐하다


자 그러면 프로그래머가 되어보자.

 

지금까지 만든 HTML과 CSS는 드디어 웹페이지의 모습을 갖췄다.

 

근데 사실 아무런 기능도 없다. 

 

버튼이나 입력창 등으로 상호작용을 하기에도 투박하고,

마우스나 키보드 입력에 반응해서 여러 정보를 실시간으로 보여주는 현대의 다른 웹페이지들과 비교하면

그냥 바뀌는게 없는 정적인 상태이다.

 

이럴거면 그냥 티스토리에 글 올리는 거랑 차이가 없다.

 

 

이때 배워야되는 것이 JavaScript다.

 

축하한다! 드디어 프로그래밍 언어가 등장했다.

 

JS를 이용하면 웹페이지에 여러 상호작용 기능들을 넣을 수 있다.

 

버튼을 누르면 팝업을 띄워주기도 하고,

시간이나 날씨를 표시할 수도 있으며, 사용자 입력을 받고 저장할 수도 있다.

 

또 내 컴퓨터에 있는 정보를 보내주기도 하고, 매번 다른 정보를 보여줄 수 있다.

 

 

근데 JavaScript를 배우면 배울수록 빡친다.

 

뭔가 문법이 일관적이지가 않고 매번 지멋대로다. 

 

 

JS의 가장 큰 문제가 뭐냐고?

 

바로 Type이 없다는 거다.

 

C, C++, Java, C#, ... 거의 대부분의 언어는 변수를 선언할 때 타입을 지정한다.

 

// 이런식으로 말이다. 
// N은 정수형 변수라는 뜻이다.

int N = 10;

 

근데 JS 이 녀석은 타입이 없고 죄다 var, let, const 형태로 변수를 선언한다.

 

변수의 타입을 지정하는게 아니라,

이 친구가 변할 수 있는 놈인지 변하면 안되는 놈인지만 표시 가능하다.

 

 

물론 프로그래밍 언어계의 애플 python 형님도 변수 선언시에 타입을 명시하지 않기는 한다.

 

타입을 명시하지 않으면 단순한 개발을 할때는 오히려 편하기도 하고,

아무거나 대입해도 언어상의 오류는 안생기니까 기분은 좋다.

 

 

근데 문제는 웹사이트가 복잡해지면 내가 대체 이 변수를 왜 선언했고,

또 어떤 타입의 데이터를 넣어야 하는지 알 수가 없다는 점이다. 

 

변수가 몇백개인데 각각의 타입을 다 기억할 수가 없다.

 

뿐만 아니라 유능한 우리의 도우미 Visual Studio Code (대충 코딩할때 자동완성 해주는 도구)가

자동완성 추천을 띄워줄 때도 변수에 대한 정보는 모른다고 답한다.

 

함수를 사용하면 이런 문제는 심화되는데,

함수가 받아오는 값은 어떤 타입이며, 또 리턴하는 값은 어떤 타입인지를 모르기에

함수를 쓸 때마다 함수의 내용을 확인해야 한다. 

 

 

애초에 자바스크립트는 브랜든 아이크라는 아저씨가 10일만에 만들었고

이름도 Java라는 유명한 프로그래밍 언어 배껴서 지은 언어이다.

 

태생이 이런 아이니 정교할 수가 없다는 것이다.

 

물론 여러 버전 업데이트를 통해 우리아이가 달라졌어요를 보여주고 있지만,

정상적인 언어가 되기에는 아직 멀었다.

 

 

이런 문제를 해결하기 위해 TypeScript가 등장했다.

 

TypeScript는 단순하게 설명하자면 JavaScript에 Type을 추가한 녀석이다.

 

앞에서 설명한 JS의 문제들을 대부분 해결했다는 점에서 요즘 프론트엔드 씬에서는 거의 이것만 쓴다고 한다.

 

 

다음 글부터 TS의 문법을 정리해보도록 하자.

 

요약본 읽으러 와서 요약 안된 서론 읽느라 수고하셨습니다.