타입스크립트
배경지식?
다들 알다시피, 자바스크립트는 원래 웹 클라이언트 개발을 위해 태어난 언어이다.
html(뼈대)/css(살)/javascript(영혼) 이 3박자가 맞춰져서 웹 페이지가 우리에게 보여지는 것이다.
그런데 예전에 어떤 용자가..
이 언어 괜찮은데? 이걸로 웹 서버도 개발하면 좋겠다
라 생각해 이걸로 웹서버를 제작할 수 있게 하는 개발 환경1을 만들어버렸다.
이게 바로 노드 JS이다.
이 노드 JS가 흥하자 사람들은 또 이러한 생각이 들었다.
기존 웹 클라이언트 프로그래밍은 html에 있는 것만 보여주던데(정적 페이지),
사용자 조작에 따라 실시간으로 바뀌는 페이지를 만들고 싶다(동적 페이지) 그래서 나온 게 뷰(Vue)나 리액트(React) 등이 있다.
요즘 웹페이지 개발에 리액트 안쓰는 기업이 없다고 할 정도로 널리 쓰인다.
뜬금없이 이런 말을 왜 하냐면…
타입스크립트는 이 모든 것에 최적화된 언어이기 때문이다.
타입 스크립트란
타입 스크립트는 마이크로소프트가 만든 자바스크립트를 확장한 언어이다.
자바스크립트에 껍데기를 씌운 것과 같아, 기존 자바스크립트와 호환된다.
그럼 얘를 왜 만들었는가? Type스크립트라는 말처럼 Type, 즉 형식을 지정할 수 있는 자바스크립트라는 뜻이다.
아~주 쉽게 말하면 자바스크립트에 C를 접목한 언어라고 보면 된다.
이게 무슨 말이냐면, 타입스크립트의 특징을 알아볼 필요가 있다.
컴파일 언어
타입스크립트는 자바스크립트로 컴파일되는 언어이다. 컴파일은 프로그래밍 언어를 다른 언어로 바꿔주는 작업이라 보면 된다. 프로그래밍 언어에는 크게 두 종류가 있는데…
- 자바스크립트는 인터프리터 언어, C는 컴파일 언어이다.
- 컴파일 언어는 코드를 미리 컴파일한 다음 컴파일된 코드를 실행한다. C나 자바의 컴파일은 코드를 기계어로 바꿔주는 작업이다.
- 컴파일에는 컴파일러라는 것이 필요하다. 컴파일러에 대한 설명은 나중에…
- 컴파일을 하면 변환된 코드인 실행 파일2이 만들어진다.
- 컴파일 언어를 실행하려면 실행 파일을 열어야 한다.
- 따라서 컴파일 언어의 실행에는 원본 코드가 필요없고, 속도도 빠르다.
- 컴파일 과정에는 문법 오류 검사도 포함되기 때문에, 에라를 조기에 탐지할 수 있다.
- 컴파일 언어는 코드를 미리 컴파일한 다음 컴파일된 코드를 실행한다. C나 자바의 컴파일은 코드를 기계어로 바꿔주는 작업이다.
- 반면 인터프리터 언어는 코드를 그때그때 변환한다.
- 즉 원본 코드를 읽어들여 한 줄씩 변환한다는 뜻이다. 이 한 줄씩 변환을 인터프리터라는 것이 해 준다.
- 이 때문에 코드를 변경했을 때 매번 컴파일을 할 필요가 없지만, 실행시 원본 코드가 필요하고 실행 속도도 컴파일언어 대비 느리다.
- 또한 일단 코드가 실행되긴 하므로 오류를 찾기 위해 코드를 뜯어봐야 한다.
백문이 불여일견 예제
아래의 수도코드3를 보면…
1
2
3
4
5
6
메인함수(){
변수 a는 1이다
변수 b는 2이다
변수 c는 a+b이다
c를 출력한다
}
- 컴파일 언어는 이 코드를 통째로 기계어로 변환한 파일을 실행한다.
- 인터프리터 언어는 이 코드를 그대로 실행한다. 실행하면
메인함수(){부터 읽어 아래로 한 줄씩 변환한다. - 둘을 실행해보면 컴파일 언어의 실행속도가 더 빠르다. 컴파일 언어는 미리 기계어로 변환된 파일을 실행하기 때문이다.
- 외국 책을 읽을 때, 번역서를 읽는 것과 원서를 한 줄씩 해석하며 읽는 것과 무엇이 더 빠른지 생각해보자.
- 다만 컴파일러는 컴파일 작업 시간이 추가로 드는 것을 고려해야 한다.
- 위 코드에서
변수 a는 1이다만 바꾸려고 하는데, 컴파일 언어는 이 변환된 코드의 실행파일을 만들기 위해 다시 모든 줄을 변환해야 한다. 만약 위 코드가 100만줄짜리 코드의 일부라면? 괜히 학교 과제에 파이썬이 애용되는 것이 아니다.
- 위 코드에서
이야기가 다소 삼천뽀로 갔는데, 결론은
- 타입스크립트는 컴파일 언어이므로 실행시 컴파일 과정을 거쳐야 한다.
- 다만 컴파일 결과물은 기계어가 아닌 자바스크립트이기 때문에 실제 실행은 인터프리터 언어로 이뤄진다.
- 이 컴파일 과정에서 에라가 한번 걸러지기 때문에 버그 발생률도 적어진다.
- 이 에러에는 형식 오류 등도 포함되는데, 아래에서 설명하겠다.
정적 형식선언
타입스크립트는 변수 형식을 미리 지정한다. 사실상 이게 타입스크립트의 가장 큰 특징인데, 이 형식 지정이 무엇이냐면…
- C나 자바는 변수 형식(타잎)을 미리 선언한다.
int a, char b같이- 컴파일 시 변수의 형식이 지정된다.
- 이를 정적 형식선언(Static Typecasting)이라 한다.
- 파이썬이나 루비 등은 변수 형식을 선언하지 않는다.
- 실행 시 변수값을 보고 알아서 형식이 지정된다.
tosso="tissi"이면 ‘어? 이 변수는 값이 ““로 싸여있으므로 문자열이네!’ 이런식
- 이를 동적 형식선언(Dynamic Typecasting)이라 한다.
- 실행 시 변수값을 보고 알아서 형식이 지정된다.
둘다 장단점이 있다. 정적 형식선언은 코딩할 때 귀찮지만, 변수 형식을 사전에 결정해버리니 형식 관련된 버그가 발생될 확률이 적다. 동적 형식선언은 그 반대고
또다시 수도코드 예제…
main(){
int a=3;
int b=2;
printf("%d",a/b);
}
이렇게 하면 3/2를 버림한 것인 1이 출력된다.
C에서는 형선언 먼저, 계산 나중이므로 정수->1.5 버림->1 이렇게 되기 때문이다.
1
2
3
4
if __name__ == "__main__":
a=3
b=2
print(a/b)
근데 파이썬에서는 똑같이 하면 1.5가 출력된다.
파이썬에서는 계산 먼저, 형선언 나중이기 때문에 1.5->실수형 이렇게 된다.4
따라서,
- 정적 형식선언은 컴파일 시 자료형이 결정된다.
- 동적 형식선언은 실행 시 자료형이 결정된다.
- 미리 형식을 아는 것이 코드를 이해하기 편리하고, 버그 탐지에도 편리하다.
이 ‘실행 시’를 런타임(Runtime)이라고도 부른다.
객체 지향
객체 지향이라는 것은 반복되는 코드를 줄일 수 있을까 하는 생각에서 생겨난 생각이다.
보통 붕어빵 틀에 많이 비유하는데, 붕어빵 틀이 있으면 붕어빵을 쉽고 많이 만들 수 있는 것처럼, 반복되는 코드를 객체로 만들어놓으면 코드 복사 붙여넣기를 단 몇 줄로 줄일 수 있다.
아~주 간단하게 객체지향의 특징을 말하자면,
- 캡슐화: 객체 안 데이터를 밖에서 못 건들게 한다.
- 추상화: 비슷한 데이터를 하나로 묶는다.
- 상속: 본인보다 더 많은 데이터를 가지고 있는 객체를 생성할 수 있다.
- 다형성: 상속받은 객체는 상속한 객체의 기능을 사용할 수 있다.
추상화와 상속, 다형성은 서로 연계되어 있는데, 여기서 다루려면 너무 글이 길어지기 때문에 또 미루겠다.
아무튼 중요한 것은 타입스크립트에서는 자바스크립트에서 불완전했던 객체지향의 특징을 모두 구현할 수 있다는 것이다.
대표적인 사례로 클래스, 인터페이스 등은 자바스크립트에서 구현하기 복잡하지만, 타입스크립트에서는 자바 하듯이 만들 수 있다.
결론
아무튼 타입스크립트는 자바스크립트에서 기능들을 추가한 확장팩(?)에 가깝고, 어쨌든 실행 시 자바스크립트로 실행되기 때문에 노드 JS, Vue, React 같은 것에도 활용 가능하다는 것이다.
다음 시간부터는 타입스크립트를 활용하여 유명 웹페이지를 모방해보는 클론-코딩 프로젝트를 진행해보려고 한다.
본인의 실력이 부족할지라도, 최대한 비스무리하게 만들어 볼테니 많이 기대하시라…?