해당 글뭉탱이들은 아직은 개발에 무지한 글쓴이가 정리하듯이 작성한 글들이며, 틀린 부분이 있을 시 댓글로 마구마구 지적해 주시면 아주 감사하겠습니다 😘
발단
드디어 올 것이 오게 되어버렸다.
로켓펀치나 구직사이트의 우대사항 혹은 필수요건으로만 보던 타입스크립트.
나도 이제 그 미지의 영역에 발을 담그게 되어버렸다.
시작은 사소했다.
나는 집에서도 열-씸히 공부하는 개발자로 보이고 싶어 팀장님에게 현재 진행중인 토이 프로젝트에 대해 열심히 이야기 중이었다.
약간의 조언과 아이디어를 제공해 준 팀장님의 입에서 나온 말은 내가 입사한 이래로 가장 충격적인 말 이었을 것이다.
"저는 사실 자바스크립트를 굉장히 싫어해요. 그래서 차기 프로젝트의 코드는 전부 다 타입스크립트로 작성 할 예정이고, 그건 몽구쓰씨가 작성할 예정이죠."
음? 😨 이게 무슨 말이란 말인가?
타입 스크립트라니? 본격적으로 나를 노예로 진화시키는 것인건가?
들어는 보긴 했다만, 내가 이걸 실제로 하게 될 줄은 몰랐는데.
정신을 차려보니, 메신저에는 타입스크립트 공식 도큐먼트 링크가 날아와 있었고
팀장님은 "해 줘" 라는 강렬한 두 글자로 나를 압도하시었다.
그렇게 나는 타입스크립트의 세계에 입문하게 되었다.
그래서 타입스크립트가 뭔데?
타입스크립트는 완전히 새로 만들어진 언어가 아닌, 자바스크립트 기반으로 만들어진 언어이다. 자바스크립트의 강력한 기능들을 가지고 있으면서 타입스크립트만의 새로운 기능을 제공한다.
음... 보통 찾아보면 이걸 다른사람들은 슈퍼셋(Superset) 이라고들 하더이다.
생긴것도 자바스크립트와 굉장히 닮았으며, 실제로 컴파일을 하게 되면 무려 결과물이 자바스크립트 파일이 뿅 하고 나오게 된다!
컴파일을 한다고 적어놨는데 컴파일러가 하는 그 컴파일이 맞다.
tsc 라는 명령어로 타입스크립트 코드를 실행하게 되면, 무려 문법 오류도 잡아줘서 콘솔창에 띄워주게 된다!
게임개발을 접은 이후로 컴파일이라는 단어하고는 담을 쌓고 살줄 알았지만...
'타입' 스크립트
타입스크립트의 가장 큰 매력은 역시 '타입'을 설정할 수 있다는 것이겠다.
참 닉값 잘하는 프로그래밍 언어인듯 하다.
물론 여타 자료형을 사용하는 언어들처럼 자료형을 강조하지는 않는다.
다만 디버깅을 할 때 라던지, 유지보수를 하게 된다라던지... 이런 경우를 생각하여 되도록이면 타입을 명시해 주도록 해야한다.
생각해보면 '타입'스크립트 인데... 타입을 안쓰는게 더 이상하기도 하다.
객체지향적인 언어
타입스크립트는 다른 객체지향언어들과 많이 닮아있다.
특히나 자바나 C++을 하던 개발자들이라면 이골이 날 정도로 많이 보았던 키워드들을 타입스크립트에서 찾아볼 수 있다.
class, interface, constructor, public, private... 등등
객체지향... 멈춰!!!!
물론 나 또한 C++에 길들여진 몸이기 때문에 굉장히 익숙한 키워드들 이었다.
아 물론 좋거나, 간만에 봐서 반갑다거나 그런건 아니고.
컴파일러? 야... 너두?
위에서 잠깐 언급했다시피 무려 컴파일러가 있다.
맞다. 그 Visual Studio 에서 많이 봤던 컴파일러 그 친구 맞다.
그 말인 즉슨, 컴파일시에 발생하는 에러를 잡을 수 있다는 것이다.
근데 말이 컴파일이지 따지고 보면 '자바스크립트로 변환' 하는 작업이다.
또한 타입스크립트라는 명칭은 비단 프로그래밍 언어에만 국한되지 않고, 컴파일러를 지칭하는 명칭으로도 쓰이기도 한단다.
🤔 생각해보면 컴파일이라는 행위 자체가 고급 언어를 저급 언어로 변환 시켜 기계가 알아 먹을 수 있게 만드는것인데... 그렇게 생각하면 컴파일이라는 말이 맞는것 같다.
자 이제 시작해 볼까?
주절주절 잡설은 집어치우고.
실제로 한번 타입스크립트를 찍어먹어 보자.
일단 타입스크립트는 자바스크립트 환경에서는 일을 안하고 땡땡이 치는 월급루팡 같은 녀석이니, 이녀석이 일할 수 있는 환경을 만들어 줘야 겠다.
npm install typescript -g먼저 npm 으로 타입스크립트를 글로벌로 설치 해준다.
그 다음 node.js 처음 설정할 때 처럼 init 을 해준다
tsc --init위에서도 언급했지만 tsc는 타입스크립트를 실행 + 컴파일 할 수 있는 명령어이다.
node.js 때도 npm init 명령어로 초기 세팅을 해 준적이 있지 않은가?
express-generator 쓰셨다면 뭐... 어쩔 수 없구요
그럼 이렇게 어디서 많~~이 본듯한 json 파일이 생긴다.
안에 내용을 하나하나 다 뜯어보기엔 글이 길어질것 같으니, 다음 글에서 정리해야겠다.
프로젝트 경로에 practice.ts 라는 파일을 하나 만들고 다음과 같이 적는다.
const message: string = 'hello world!';
console.log(message);역시 개발자의 첫 테스트 국룰은 hello world 출력하기 일 것이다. 반박시 비개발자 ㅇㅈ?
다음과 같이 작성하였다면, 저장 후 tsc practice.ts 를 터미널 창에 입력하고 엔터를 쳐서 실행시켜 본다.
실행시켜보면 다음과 같이 같은 이름의 js 파일이 생겨난 것을 볼 수 있다.
안의 내용을 보면 다음과 같다.
var message = 'hello world!';
console.log(message);
타입스크립트와는 내용은 다르지만, node practice.js 로 실행시켜보면 의도한 바는 같다는걸 알 수 있다.
찍먹은 여기까지.
타입스크립트가 뭔지도 알아봤고, 실제로 뭔갈 만들어서 돌려보니 대~충은 감이 올 듯 하다.
다음 글에서는 본격적으로 타입스크립트에 발을 들여놓을 예정이니, 기대하시라.
그럼 안녕~ 👋
