티스토리 뷰
1. JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유에 대해 설명해 주세요.
타입 시스템은 크게 정적 타입 시스템과 동적 타입 시스템으로 나뉜다. 정적 타입 시스템은 코드 실행 전에 모든 변수의 타입을 고정적으로 결정하고 동적 타입 시스템은 코드를 실행하면서 유동적으로 변수의 타입을 결정한다.
정적 타입 시스템을 사용하는 언어에는 C나 Java 같은 엄격한 문법을 가진 언어들이 있고 동적 타입 시스템을 사용하는 언어에는 Python, JavaScript, Ruby와 같이 유연한 문법을 가진 언어들이 있다.
JavaScript는 동적 타입 언어이다.
배우기 쉽고 타입을 미리 설정하지 않아도 되지만, 실행 도중에 예상치 못한 타입이 들어와 타입 에러를 발생하는 경우가 있다. 또한 추가적인 설명이 없다면 함수의 파라미터에 어떤 타입의 값이 들어가야 하고 리턴되는 값은 어떤 타입이어야 하는지 구체적인 코드를 봐야 이해할 수 있다.
TypeScript는 점진적 타입 언어이다.
점진적 타입 언어란 동적 타입 시스템과 정적 타입 시스템을 혼합한 것 같은 타입 시스템을 사용한다. 정적 타입 시스템처럼 변수의 타입을 코드 실행 전에 결정하고, 타입 오류가 없는지 프로그램 실행 전에 코드를 검사한다.
또한 동적 타입 시스템처럼 모든 변수에 일일이 타입을 명시하지 않아도 변수에 담기는 초기값을 기준으로 자동으로 타입을 알아서 추론하기도 한다.
이런 TypeScript의 특징을 통해 컴파일 단계에서 오류를 포착할 수 있고, 코드를 통해 어떤 타입의 값이 필요한지 쉽게 파악할 수 있어 코드의 흐름을 이해하기 쉬워 협업에 도움이 된다.
2. TypeScript의 동작 원리에 대해 설명해 주세요.
타입스크립트는 자바스크립트나 자바 같은 주요 언어와는 다른 방식으로 동작한다. 대부분의 프로그래밍 언어가 동작하는 방식은 다음과 같다.
- 텍스트를 컴파일러 프로그램이 파싱하여 추상 문법 트리(abstract syntax tree, AST)라는 자료구조로 변환한다.
- 컴파일러 프로그램이 AST를 바이트코드로 변환한다.
- 런타임 프로그램에 바이트코드를 입력하여 평가받고 결과를 얻는다.
이 과정을 컴파일이라고 부르고, 과정을 진행하는 특수한 프로그램을 컴파일러라고 부른다.
타입스크립트 또한 컴파일 과정을 거친다. 그런데 컴파일 과정이 다른 주요 언어들과 조금 다르다.
- 타입스크립트 소스 -> 타입스크립트 AST
- 타입 검사기가 AST를 확인
- 타입 스크립트 AST -> 자바스크립트 소스
1번 과정은 대부분의 프로그래밍 언어의 컴파일 과정과 동일하다. 하지만 2번 과정에서 타입스크립트는 AST를 바이트 코드로 변환하는 대신 '타입 검사'를 수행한다.
타입 검사란 우리가 작성한 코드에 타입 관련된 오류가 없는지 타입을 올바르게 사용했는지 검사하는 과정이다.
코드를 실제로 실행해 오류가 있는지 검사하는게 아니므로 이 과정을 ‘정적 검사’ 라고 한다. (반대로 실행해서 검사하는건 동적 검사라고 함)
타입 검사가 실패하면 타입스크립트 컴파일러는 컴파일을 중단하고 오류가 발생 했음을 알린다. 이렇듯 타입스크립트는 컴파일 과정에서 정적으로 코드에 오류가 없는지 검사하는 ‘타입 검사’ 과정을 거치기 때문에 코드를 실행하기 전에 프로그램에 발생한 오류를 확인할 수 있어 견고한 프로그램을 만드는데 도움이 된다.
만약 코드에 아무런 타입 오류가 없어 타입 검사가 성공하면 타입스크립트 컴파일러는 타입스크립트 AST를 자바스크립트 코드로 변환한다.
- 자바스크립트 코드 → AST
- AST → 바이트 코드
- 바이트 코드 실행
정리하자면 타입스크립트 코드는 다음과 같은 과정을 거쳐 실행된다.
- 타입스크립트 컴파일
- 타입스크립트 코드 → 타입스크립트 AST
- 타입 검사
- 타입스크립트 AST → 자바스크립트 코드
- 자바스크립트 컴파일 및 실행
- 자바스크립트 코드 → 자바스크립트 AST
- 자바스크립트 AST → 바이트 코드
- 바이트 코드 실행
타입스크립트 컴파일은 타입스크립트 컴파일러가 직접 수행하며, 그 결과 자바스크립트 코드가 생성된다.
결국 타입스크립트는 자바스크립트로 변환 되며 자바스크립트 코드를 실행하기 전에 타입 오류가 없는지 확인하기 위해 존재한다고 볼 수 있다.
'코드잇 스프린트 > Weekly paper' 카테고리의 다른 글
[코드잇 스프린트] 13주차 위클리 페이퍼 (0) | 2024.06.03 |
---|---|
[코드잇 스프린트] 8주차 위클리 페이퍼 (1) | 2024.04.27 |
[코드잇 스프린트] 7주차 위클리 페이퍼 (1) | 2024.04.20 |
[코드잇 스프린트] 6주차 위클리 페이퍼 (0) | 2024.04.13 |
[코드잇 스프린트] 5주차 위클리 페이퍼 (이벤트 버블링, 캡쳐링, 위임 / HTTP 메소드, 멱등성) (0) | 2024.04.06 |
- Total
- Today
- Yesterday
- GitHub
- CSS
- 객체
- currentTarget
- 스프린트프론트엔드6기
- 배열
- Git
- react
- 동기
- arguments
- js
- 취업까지달린다
- 리액트
- 코드잇스프린트
- hydrationboundary
- javascript
- 코드잇 스프린트
- 비동기
- html
- 프론트엔드
- rest parameter
- 유사배열객체
- 중급 프로젝트
- 비제어 컴포넌트
- map
- Next.js
- tanstackquery
- Target
- innerhtml
- 제어 컴포넌트
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |