JavaScript & TypeScript

2024. 5. 1. 20:51Javascript

요즘 TypeScript 가 선호된다.
왜 선호되고 장점은 무엇이고 단점은 없을까?

javascript & typescript

 

자바스크립트는 동적 웹 페이지를 만들기 위해 고안된 언어이며 브라우저를 통해 실행된다.

타입스크립트는 자바스크립트의 슈퍼셋으로 정적 타입을 제공하여 대규모 애플리케이션의 개발을 용이하게 한다.

 

자바스크립트와 타입스크립트는 웹 개발자에게 강력한 도구를 제공한다. 이들은 개발자가 빠르게, 안정적으로 유연하게 애플리케이션을 개발 할 수 있도록 도와준다.

 


typescript 

 

타입스크립트는 자바스크립트 기반의 정적 타입 문법을 추가한 언어이다.

타입스크립트는 자바스크립트의 슈퍼 셋, 즉 상위 확장자로 자바스크립트 엔진을 사용하며 자신이 원하는 변수의 타입을 정의하고 프로그래밍을 하면 자바스크립트로 컴파일되어 실행 할 수 있다.

 

* 컴파일은 컴퓨터가 이해할 수 있는 언어로 바꾸어 주는 과정이다.

 

타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해 주어야 하는데 이 과정을 컴파일 이라고 한다.

 


왜써?

 

가장 큰 이유는 타입때문이다.

이 타입으로 코드 퀄리티와 가독성을 높일 수 있다.

 

타입스크립트는 컴파일을 하는 과정에서 타입을 결정하게 된다.

변수에 들어갈 값의 형태에 따라 자료형을 지정해 주어야 하는데, 컴파일 시 자료형에 맞지 않은 값이 들어가면 컴파일 에러를 발생시킨다.

타입스크립트는 컴파일 과정에서 타입을 지정하기에 컴파일 에러를 예방할 수 있을 뿐 아니라 손쉬운 디버깅이 가능해진다.

 

타입스크립트는 높은 생산성을 제공한다.

자바스크립트로 코드를 작성할 때 객체의 필드나 함수의 매개변수로 들어오는 값이 무엇인지 알기 위해 여러 파일을 살펴야 했지만 타입스크립트를 사용하면 변수의 이름뿐 아니라 그 데이터의 자료형까지 알 수 있게 된다.

 

개발자는 로직과 같은 큰 구조에 집중할 수 있게 된다. 또 객체 안의 필드값을 다 기억할 필요 없이 IDE가 자동으로 리스트업을 해주기 때문에 생산성에 큰 기여를 한다.

 

타입스크립트는 자바스크립트의 슈퍼 셋이다. 슈퍼 셋은 특정한 언어의 모든 기능을 포함하면서 다른 기능까지 활용가능하도록 확장된 것을 말한다.

타입스크립트를 적용하는 경우 기존의 자바스크립트로 짜인 코드에 확장하는 식으로 대규모 수정 없이도 타입스크립트를 적용 가능하다.

 


javascript vs typescript

 

1. 동적 타입 vs 정적 타입

 

타입스크립트는 자바스크립트의 단점중 하나인 동적으로 타입을 지정하는 특징을 보완하면서 등장했다.

변수의 타입이 런타임, 즉 실행시간에 결정되는 것으로 자바스크립트는 대표적인 동적 타입 언어이다.

 

배우기 쉽고 유연한 장점이 있지만 동시에 런타임 에러가 발생할 가능성이 있다.

규모가 큰 프로젝트에서 의존성이 있는 모듈을 변경했을 때, 다른 모듈에서 에러가 발생하는지 개발 도중에 알기가 쉽지 않다.

 

하지만 타입스크립트는 정적 타입 언어로 변수의 타입을 명시적으로 지정해서 사용한다.

컴파일 단계에서 타입 체크를 하기 때문에 코드 작성 중 타입 오류를 방지하는 타입 체킹 기능인 타입 어노테이션을 활용해 에러를 빠르게 발견할 수 있게 도와주기 때문에 코드를 수정하고 나서 버그가 생기는 것을 방지할 수 있다.

 

2. 컴파일 vs 인터프리터

 

자바스크립트와 타입스크립트는 언어를 해석하는 과정에 차이가 있다.

자바스크립트는 인터프리터 언어인데, 인터프리터 언어란 소스코드를 한줄한줄 읽어가며 명령을 바로 처리하는 언어로 코드가 즉시 실행되기 때문에 컴파일 언어에 비해 빠르다는 장점이 있다.

 

반대로 타입스크립트는 컴파일 언어이다. 컴파일 언어는 소스코드 전체를 컴퓨터가 이해할 수 있는 기계어로 변환하는 언어로 변환과 실행이 따로 이루어진다. 소스코드를 기계어로 번역하는 과정에서 인터프리터 언어에 비해 시간이 오래걸리지만 런타임 상황에서는 모든 소스코드가 변환되어 있기에 빠르게 실행할 수 있다.

 


typescript 의 단점은?

 

1. 초기세팅

 

초기세팅이 어렵다. 독자적인 언어가 아니기에 기존 자바스크립트에서 실행된다. 그래서 기본적으로 설치해야하는 모듈들이 있고 컴파일을 하기 위한 옵션들도 설정해야 한다.

 

2. 생산성 저하

 

타입스크립트가 익숙하지 않다면 생산성이 낮아질 수 있다. 매번 타입을 지정해줘야 하는 번거로움과 타입 어노테이션으로 인한 타입 에러로 실제 개발보다 타입을 지정하는데 시간을 더 할애할 수 있다.

 

또 타입스크립트에서 지원하는 interface, class 등에 매번 변수명을 지정하면서 길어지는 변수명과 관리 포인트가 늘어나 생산성이 저하될 수 있다.

 


마무리

 

자바스크립트는 동적 언어이기에 유연하게 활용할 수 있지만 이로 인해 오류를 발견하기 어렵고 유지보수가 어려워지는 문제가 있다.

타입스크립트는 자바스크립트의 슈퍼셋으로 타입 검사를 통해 오류 발견이 쉽고 코드의 안정성을 높이는 장점이 있다.

타입스크립트에 대해 필요성을 느끼기 시작한 후로는 이를 좋아하게 되었다.

컴파일시에 에러를 발견하는지 런타임시에 에러를 발견하는지의 차이는 크다.

예기치 못한 버그들을 최소한으로 줄이는 것은 정말 중요하다.

또 타입스크립트의 다양한 기능들이 존재한다. pick, emit, decorator 등 을 활용해 더욱 안전하고 편리한 기능들을 이용할 수 있어 사용을 안할 이유가 없다고 생각이든다. 

 


https://velog.io/@theon2/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%99%80-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EC%B0%A8%EC%9D%B4-%EC%9E%A5%EB%8B%A8%EC%A0%90%EC%97%90-%EB%8C%80%ED%95%B4-%EC%84%A4%EB%AA%85%ED%95%B4%EC%A3%BC%EC%84%B8%EC%9A%94

 

자바스크립트와 타입스크립트의 차이, 장/단점에 대해 설명해주세요.

JavaScript와 TypeScript는 모두 널리 사용되는 프로그래밍 언어로, 웹 개발을 위해 주로 사용됩니다. 둘 사이에는 몇 가지 중요한 차이점이 있는데, 이를 통해 각 언어의 장점과 단점을 이해할 수 있

velog.io

https://www.elancer.co.kr/blog/view?seq=183#:~:text=Javascript%EB%8A%94%20%EC%9D%B8%ED%84%B0%ED%94%84%EB%A6%AC%ED%84%B0%20%EC%96%B8%EC%96%B4%EC%9D%B8%EB%8D%B0,%EB%8A%94%20'%EC%BB%B4%ED%8C%8C%EC%9D%BC%20%EC%96%B8%EC%96%B4'%EC%9E%85%EB%8B%88%EB%8B%A4.

 

TypeScript 사용하는 이유, 현직 웹 개발가 알려드립니다! I 이랜서

안정적인 개발과 높은 수준의 코드 품질을 유지하는데 좋은 프로그램 언어 'Typescript'의 특징과 사용하는 이유에 대해 이랜서에서 알려드립니다. I react typescript, typescript playground, typescript enum, type

www.elancer.co.kr

https://f-lab.kr/insight/javascript-and-typescript-for-modern-web-development?gad_source=1

 

현대 웹 개발을 위한 자바스크립트와 타입스크립트의 이해

이 글에서는 자바스크립트와 타입스크립트의 기본 개념과 차이점을 설명하고, 현대 웹 개발에 두 언어를 어떻게 효과적으로 활용할 수 있는지 탐구합니다. 또한, 자바스크립트와 타입스크립트

f-lab.kr

https://www.guru99.com/ko/typescript-vs-javascript.html

 

TypeScript와 JavaScript – 차이점

TypeScript와 JavaScript: TypeScript와 JavaScript의 차이점 - JavaScript는 대화형 웹 페이지를 만드는 데 도움이 되는 스크립팅 언어인 반면 Typescript는 JavaScript의 상위 집합입니다.

www.guru99.com

 

'Javascript' 카테고리의 다른 글

Virtual DOM  (0) 2024.05.03
이벤트 버블링 & 캡처링  (1) 2024.05.02
this [re:]  (0) 2024.04.30
Javascript Closure  (0) 2024.04.29
this [Javascript]  (3) 2024.01.05