물고 물어지는 개념 정리하기(웹 프론트엔드): 나만의 사전4

j_wisdom_h·2023년 8월 17일
JavaScripttypescript동적타입언어런타임정적타입언어컴파일
0

물고 물어지는 개념 정리하기(웹 프론트엔드)

목록 보기
4/4
post-thumbnail

물고 물어지는 개념 정리하기(웹 프론트엔드): 나만의 사전4

TypeScript (TS)

TypeScript (TS)는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, JavaScript의 상위(super) 집합이며 정적 타입을 지원하는 언어이다.

TypeScript는 JavaScript 코드를 대체하거나 보완하여 더 강력한 타입 시스템을 제공하며, 개발자들이 코드의 가독성, 유지보수성 및 버그 방지를 개선할 수 있도록 도와준다.

TS와 JS가 호환되는 이유 (상위집합의 의미)

TypeScript는 JavaScript의 문법과 기능을 그대로 포함하면서 추가적인 정적 타입 체크 기능을 제공한다.

주요 특징과 필요성

  • 정적 타입 체크: TypeScript는 변수, 함수 매개변수, 반환 값 등에 타입을 명시하고 이를 컴파일 단계에서 검사함으로써 타입 관련 오류를 사전에 방지한다. 이는 개발 중에 발생할 수 있는 타입 관련 버그를 줄여주고 코드의 신뢰성을 높여준다.

  • 코드 가독성과 유지보수성 향상: 타입 정보가 명시되어 있으면 코드의 의도를 더 명확하게 전달할 수 있으며, 다른 개발자나 여러 시간이 흘러도 코드를 이해하고 유지보수하는 데 도움이 된다.

  • 강력한 개발 도구: TypeScript는 강력한 자동 완성, 코드 어시스트, 디버깅 등의 개발 도구를 지원한다. 이로 인해 개발자는 더 빠르고 효율적으로 코드를 작성하고 디버깅할 수 있다.

  • 에러 예방과 코드 품질 향상: TypeScript는 컴파일 과정에서 타입 관련 에러를 검출하므로 런타임 에러를 줄여준다. 이는 안정성을 높이고 개발자들이 코드 품질을 유지할 수 있도록 돕는다.

  • JavaScript 생태계와의 호환성: TypeScript는 JavaScript와의 호환성을 유지하면서 타입 정보를 추가할 수 있다. 따라서 기존 JavaScript 코드를 쉽게 TypeScript로 이전하거나 TypeScript와 JavaScript를 혼용하여 사용할 수 있다.

요약하면, TypeScript는 JavaScript 코드를 더 안정적이고 확장 가능한 방식으로 작성할 수 있게 해주는 언어로, 코드 품질을 향상시키고 개발자 간 협업을 용이하게 해주는 도구이다.

TS와 JS 차이점

  1. 타입 시스템의 유무
  • JS: 동적 타입 언어로, 변수의 타입을 명시적으로 선언하지 않아도 된다.
  • TS: 정적 타입 언어로, 변수의 타입을 명시적으로 선언하거나 추론할 수 있다.
  1. 타입 오류 검출
  • JS: 런타임 시에만 타입 관련 오류를 발견할 수 있다.
  • TS: 컴파일 시에 타입 관련 오류를 검출하여 사전에 예방할 수 있다.
  1. 코드 가독성과 유지보수성
  • TS: 명시적인 타입 정보로 코드의 가독성과 이해도를 높일 수 있다. 유지보수성이 향상된다.
  • JS: 타입 정보의 부재로 인해 코드 이해가 어려울 수 있으며, 유지보수성이 낮을 수 있다.
  1. 개발 도구 지원
  • TS: 강력한 자동 완성, 디버깅, 코드 어시스트 등의 개발 도구를 제공하여 개발 효율성을 높인다.
  • JS: 타입 정보 부재로 인해 개발 도구의 기능을 최대한 활용하기 어려울 수 있다.
  1. 에코시스템과 호환성
  • TS: JavaScript 생태계와 호환되면서도 타입 정보를 추가할 수 있다. 기존 라이브러리를 TypeScript로 이전하거나 함께 사용할 수 있다.
  • JS: JavaScript 라이브러리와 완전히 호환된다.
  1. 버그 예방
  • TS: 컴파일 과정에서 타입 관련 에러를 검출하여 런타임 에러를 줄여준다.
  • JS: 런타임에서 발생하는 타입 관련 오류에 대한 예방이 어렵다.
  1. 학습 곡선
  • JS: 상대적으로 더 간단한 문법과 동적 타입으로 인해 초기 학습이 더 쉬울 수 있다.
  • TS: 정적 타입 시스템과 추가 기능을 이해하려면 더 많은 학습이 필요할 수 있다.
  1. 프로젝트 규모
  • TS: 대규모 프로젝트에서 더 큰 효과를 발휘하며, 복잡한 코드베이스에서 타입 정보가 중요한 역할을 한다.
  • JS: 작은 규모의 프로젝트나 빠른 프로토타이핑에는 더 적합할 수 있다.

이처럼 TypeScript는 정적 타입과 타입 관련 기능을 제공하여 코드의 안정성과 가독성을 높이며, 대규모 프로젝트에서 유용하게 활용될 수 있다.

반면 JavaScript는 더 가볍고 유연한 특성으로 빠른 개발과 작은 규모의 프로젝트에 적합하다. 선택은 프로젝트의 요구사항과 개발자의 선호도에 따라 다를 수 있다.

동적 타입 언어,정적 타입 언어

  • 동적 타입 언어
    동적 언어의 대표적인 예시로는 JavaScript, Python, Ruby 등이 있다. 이들 언어에서는 변수의 타입이 런타임 중에 동적으로 결정되며, 변수에 어떤 값이 할당되느냐에 따라 타입이 달라질 수 있다.

  • 정적 타입 언어
    정적 언어의 대표적인 예시로는 Java, C++, C# 등이 있다. 이들 언어에서는 변수의 타입을 컴파일 단계에서 명시하고, 컴파일러가 타입 검사를 수행하여 오류를 사전에 방지한다.

컴파일과 런타임

컴파일(Compile)

컴파일은 소스 코드를 기계어나 중간 코드로 변환하는 과정이다. 컴파일러는 소스 코드를 읽고 분석하여 목적 코드(기계어 혹은 중간 코드)로 변환한다. 컴파일 단계에서 코드의 구문 오류나 타입 오류를 검사하고, 최적화를 수행할 수 있다. 주로 정적 타입 언어에서 사용되며, TypeScript도 이에 해당한다.

런타임(Runtime)

런타임은 프로그램이 실행되는 동안의 시간을 의미한다. 프로그램이 실제로 동작하고 데이터를 처리하며 결과를 생성하는 단계이다. 런타임 환경에서는 컴파일된 코드나 인터프리터를 통해 프로그램이 실행된다. 프로그램 실행 중에 발생하는 동적인 상황을 다루며, 예외 처리와 메모리 관리 등이 이루어진다.

간단히 말하면, 컴파일은 소스 코드를 실행 가능한 형태로 변환하는 단계를 의미하고, 런타임은 프로그램이 실제로 실행되고 동작하는 시간을 의미한다.

컴파일언어, 인터프리터언어

  1. 컴파일 언어 (Compiled Language)
  • 컴파일 단계: 프로그래머가 작성한 소스 코드를 컴파일러라는 독립적인 프로그램을 통해 기계어나 중간 코드로 변환한다. 이 변환 과정은 컴파일 단계에서 한 번만 이루어진다.
  • 실행 단계: 컴파일된 코드를 실행하는 과정이다. 컴파일 단계에서 생성된 결과물을 실행 파일로 저장하거나, 인터프리터가 실행 가능한 형태로 변환하여 실행한다.
  • 장점: 실행 속도가 빠르며, 한 번 컴파일된 코드는 여러 번 실행할 수 있어 효율적이다.
  • 단점: 코드 수정 시마다 다시 컴파일이 필요하며, 실행 전에 모든 오류를 찾아내야 한다.
  1. 인터프리터 언어 (Interpreted Language):
  • 실행 단계: 소스 코드를 한 줄씩 읽어들여 바로 실행하는 방식이다. 중간 단계의 코드 생성 없이 직접 실행한다.
  • 장점: 코드 수정 후 바로 실행 결과를 확인할 수 있고, 개발 과정이 빠르며 유연하다.
  • 단점: 실행 속도가 상대적으로 느릴 수 있으며, 실행 시에 오류가 발생할 가능성이 높다.

컴파일 언어: 소스 코드를 컴파일러를 통해 중간 코드나 기계어로 변환하는 방식
인터프리터 언어 : 소스 코드를 한 줄씩 읽어들여 중간 단계의 코드 생성 없이 직접 실행하는 방식

중간단계의 코드? 기계어?

  • 중간 단계의 코드 : 일반적으로 바로 실행될 수 있는 형태의 코드로, 원시 소스 코드를 해석한 결과물. 소스 코드의 의미를 포함하고 있으며, 프로그램 실행 중에 해석되어 실행된다.

  • 기계어 : 컴퓨터 하드웨어에서 직접 실행되는 코드 형태
    컴파일 언어에서 컴파일러는 소스 코드를 중간 단계의 코드로 변환하는 과정을 거친 후, 이 중간 코드를 최종적으로 기계어로 변환한다.

그럼 JS는 컴파일을 안하는 거야?

JavaScript는 기본적으로 컴파일하지 않고 인터프리터 방식으로 동작하는 언어다. 하지만 최근에는 JavaScript 엔진의 발전으로 인해 일부 컴파일 단계가 포함될 수도 있다. 예를 들어, V8 엔진은 JavaScript 코드를 인터프리터로 실행하기 전에 중간 표현 형태로 변환하는 컴파일 단계를 거치게 된다.

엉뚱한 궁금증

Q1. vscode에서 ts를 작성할때 잘못된 타입일 경우 빨간줄로 보여주는데 이건 자동으로 컴파일을 하기 때문?

A. Visual Studio Code(VS Code)에서 TypeScript를 작성할 때 잘못된 타입에 대한 빨간 줄은 자동으로 컴파일되는 것과는 직접적인 관련이 없다. VS Code는 내장된 TypeScript Language Service를 사용하여 실시간으로 코드를 분석하고 타입 체크를 수행한다. 이를 통해 코드를 작성하는 동안 잠재적인 타입 오류를 식별하고 표시할 수 있다.

profile
j_wisdom_h
뚜잇뚜잇
이전 포스트

물고 물어지는 개념 정리하기(웹 프론트엔드): 나만의 사전3

0개의 댓글