2021. 9. 16. 07:50ㆍUX Engineer 이야기
들어가며
현재 리액트와 타입스크립트를 사용해 프로젝트를 진행하고 있습니다. 저는 타입스크립트가 처음 접하는 언어여서 시작하기 낯설고 두려웠던 경험이 있습니다. 저처럼 타입스크립트를 한 번도 경험해 보지 못해서 시작이 두려우신 분들을 위해 타입스크립트가 어떤 언어인지 가볍게 알아보는 글을 써보려고 합니다.
타입스크립트 알아보기는 1편과 2편으로 나눠 정리해 볼 예정인데 제가 아직은 완벽히 타입스크립트를 이해한 건 아니라서 진행했던 프로젝트 경험을 바탕으로 글을 써보겠습니다.
타입스크립트가 뭐지.. 자바스크립트랑 이름은 비슷한데
저는 타입스크립트라는 이름을 처음 들었을 때 '어? 이름이 자바스크립트랑 비슷한데'라고 떠올렸습니다. 저와 같이 생각한 분이 많으실 것 같은데요, 이렇게 타입스크립트라는 이름에서 유추할 수 있듯이 자바스크립트에 타입을 붙여서 사용하는 언어라고 설명할 수 있습니다.
타입스크립트 = 타입 + (자바) 스크립트
따라서 아래 그림처럼 자바스크립트의 기능을 포함하고 있다고 볼 수 있습니다.
그렇다면 지금까지 자바스크립트만으로도 웹 개발이 충분히 가능했는데 어떤 이유로 만들어졌을까요?
마이크로소프트사에서 2년간 자바스크립트에 없는 전통적인 객체 지향 타입을 가져오기 위해 시도하다 만들어졌다고 합니다.
어떤 특징을 가지고 있을까?
타입스크립트는 여러 가지 특징을 가지고 있지만 3가지 정도로 추려봤습니다.
1. 자바스크립트의 슈퍼셋 언어
위의 그림에서 보듯이 타입스크립트는 자바스크립트의 슈퍼셋 언어로 es6 최신 문법까지 지원합니다.
2. 타입스크립트는 정적 언어
자바스크립트: 동적 언어로 런타임 속도는 빠르지만, 타입 안정성이 확보되기 어렵습니다.
타입스크립트: 정적 언어로 자바스크립트로 컴파일하는 시간이 걸리지만, 타입 안정성을 확보하게 됩니다.
아직 이게 무슨 말인지 이해가 안 될 수도 있습니다. (제가 그랬거든요 🤨) 아래 장점을 설명하는 부분에서 자세히 알아보도록 합시다.
3. 자바스크립트와의 호환성
타입스크립트는 자바스크립트로 컴파일되기 때문에 자바스크립트를 쓸 수 있는 모든 브라우저와 호스트에서 대응이 가능하고 좋은 생태계를 갖고 있어 많은 라이브러리를 제공합니다.
너의 장점을 뽐내봐
그렇다면 타입스크립트는 어떤 메리트가 있어서 사람들이 쓰게 되는 걸까요?
일단 자바스크립트를 안다면 어느 정도 타입스크립트의 주요 기능인 타입을 부여한다는 의미에서는 러닝 커브가 가파르지 않다고 생각이 들었습니다. (물론 타입스크립트의 모든 기능을 깊게 알려고 하면 급격하게 가파른 곡선이 생기겠지만요..😑) 그리고 es6 최신 문법이 지원되는 타입스크립트에서 es6의 여러 객체지향 프로그래밍(OOP: Object Oriented Programming) 문법을 통해 BackEnd 개발자의 진입장벽도 낮추는 효과를 가져올 수 있습니다.
두 번째 특징에서 언급한 동적이 아닌 정적 타입 언어라는 점도 타입스크립트를 쓰는 가장 많은 이유로 꼽히는데, 여기서 정적 언어와 동적 언어를 간단히 설명해보겠습니다.
- 동적 언어 : 런타임 시 자료형(타입)을 정하는 언어
ex) Javascript, Python, PHP
/* Javascript */
let num = 4; // 타입을 따로 지정하지 않는다.
typeof num; // typeof로 타입을 확인해보면
('number'); // number로 선언되어 있다.
// 변수 num을 string 형태인 '4'로 다시 재정의 한다.
num = '4'; // 타입이 지정되어 있지 않아서 에러가 나지 않는다.
typeof num; // typeof로 타입을 확인해보면
('string'); // string으로 바뀌어있다.- 정적 언어 : 컴파일 시 자료형(타입)을 정하는 언어
ex) Typescript, Java, C, C++
/* Typescript */
let num: number = 4; // 타입을 코드 작성시 지정해준다.
num = '4'; // number로 타입을 지정했는데 string값으로 선언하자 에러가 난다.이처럼 자바스크립트는 런타임(실행될 때) 시 사용자가 사용하는 브라우저에서 바로 오류가 발생하지만, 타입스크립트는 자바스크립트로 한 번 컴파일해야 하므로 이 컴파일 단계에서 오류를 파악할 수 있어서 좀 더 안정적으로 프로젝트를 진행할 수 있습니다.
이런 안정성이 유지보수를 할 때 큰 도움이 되는 부분이 아닐까 생각됩니다.
또한 기존의 자바스크립트로 개발된 프로젝트에서 소스를 그대로 두고 일부분만 타입스크립트로 변경이 가능하여 점진적으로 타입스크립트를 도입할 수 있다는 것도 생산성을 높이는 효과를 볼 수 있습니다.
(자바스크립트 파일 확장자인 .js를 .ts로 변경한 후에 컴파일해서 사용할 수 있다는 점을 이용해서 말입니다.)
앞선 내용은 타입스크립트를 검색하면 언급되는 보편적인 장점이라면 프로젝트를 진행하면서 느꼈던 장점을 말해보자면 VSCode(마이크로소프트에서 제공하는 오픈소스 코드 에디터) 에디터를 통해 작업하면 같은 회사에서 제공하는 프로그램이라서 그런지 코드 작성 시 매우 친절한 피드백을 받을 수 있었습니다. 타입스크립트 핸드북 번역이 잘 되어 있고 예시들도 많이 있어서 쉽게 접근할 수 있었습니다.
단점은 가려볼까..
특징과 장점을 통해서 타입스크립트의 좋은 점만 나열한 것 같은데 물론 단점들도 존재합니다.
타입스크립트는 결국 자바스크립트 + 타입이기 때문에 타입 관련된 코드를 추가로 작성해야 한다는 점입니다.
유지보수할 때는 추가로 작성한 타입들이 오류를 잡거나, 실행하지 않아도 타입을 알 수 있어서 도움이 되지만 초반에 일정이 여유롭지 못한 프로젝트라면 고려해볼 사항입니다.
변수에 타입을 지정해서 오류를 찾아내는 타입스크립트에 어떤 타입도 수용 가능한 만능 타입이 있는데 바로 any입니다.
let num: any = 4; // any 타입으로 지정한다.
num = '4'; // Javascript처럼 에러가 나지 않는다.아까 위에서 본 예시라면 타입스크립트는 이 부분을 오류로 잡아줘야 합니다. 하지만 any로 지정하게 되면 자바스크립트처럼 오류가 나지 않는다는 것을 볼 수 있습니다.
사실 any라는 타입 자체가 단점이라는 말은 아닙니다. 프로젝트를 하다 보면 return 값의 타입이 뭔지 모르거나 또는 여러 상황에서 any를 쓰는 상황이 생기는데 이런 걸 최소한으로 줄이지 못한다면 타입스크립트의 장점이 희석된다고 생각되어서 단점 안에 적어두었습니다.
마치며
글을 작성하면서 타입스크립트를 사용하기만 했지 자세하게 알지 못했던 이론적인 부분을 되짚어볼 수 있는 시간을 가져서 좋았습니다. 다른 분들도 이 글을 통해서 타입스크립트가 마냥 두려운 언어가 아니라는 것을 함께 느끼셨으면 좋겠습니다. 다음 2편에서는 Typescript의 기본적인 문법 형태를 알아보는 시간을 가져보려 합니다.
감사합니다 :)
이 글은 pxd XE Group Blog에서도 보실 수 있습니다.