이 글은 강의에서 다룬 내용과 함께, 관련 자료를 추가로 조사해 정리한 것입니다.

한입 챌린지 6기 시작

React와 TypeScript를 활용해 프로젝트를 하면서, 문득 '내가 정말 이해하고 사용하는 걸까?'라는 생각이 들었습니다. 남들이 이미 작성한 코드를 가져다 쓰는 일이 많았고, 그 코드가 왜 그렇게 작성 되었는지 깊이 고민해 본 적은 많지 않았습니다.

'이제는 코드를 이해하고 쓰는 개발자가 되고 싶다'는 마음에, 한 입 챌린지에 도전하게 되었습니다.

또한, 혼자 공부할 땐 쉽게 미루는 편인데, 챌린지는 매일 정해진 진도와 미션이 주어져서 꾸준히 학습하는 데 도움이 될거라 생각했습니다. 3주 동안 매일 꾸준히 공부하여, TypeScript와 더 가까워지는 시간을 가져보려 합니다.

LTS(Long Term Support)란?: 개발 환경 세팅 중 궁금해진 개념

Day 1 강의를 따라 개발 환경을 세팅 하던 중, Node.js를 설치하는 단계에서 “LTS 버전을 다운로드” 하라는 안내가 있었습니다.

LTS라는 단어를 종종 봤었는데, 정확히 어떤 의미인지는 이해하고 있지는 않았습니다.

강의에서는 LTS = Long Term Support라는 단어이고, 간단하게 설명이 나왔는데, 이번 기회에 확실히 이해해두고 싶어 별도로 정리해 보게 됐습니다.

LTS란?

LTS는 Long Term Support의 줄임말로, 직역하면 장기 지원이라는 뜻을 가진 단어입니다. 일반적인 소프트웨어 버전보다 훨씬 오랜 기간 동안 안정적인 유지보수와 보안 패치를 제공하는 버전을 의미합니다.

• LTS 버전은 몇 년 동안 안정적으로 관리되는 버전
• 새로운 기능이 추가 되진 않지만, 중요한 문제나 보안 이슈에 대한 유지 보수 지원
• 사용자 입장에선 안심하고 오래 사용할 수 있는 버전

왜 LTS를 사용하는 걸까?

• 안정성: LTS 버전은 기능이 자주 바뀌지 않아 예측 가능하고 안정적임
• 업그레이드 부담 감소: 자주 버전을 바꿀 필요 없이, 몇 년 동안 동일한 환경을 유지할 수 있음
• 보안 유지: 새로운 기능은 없지만, 보안 패치는 계속 제공 되므로 안전하게 사용할 수 있음

Node.js의 LTS 정책

Node.js의 버전 관리 방식은 아래와 같습니다:

Current 릴리스 상태

새로운 Node.js 버전이 나오면 처음 6개월 동안은 Current 상태로 유지됩니다. 이 기간에는 최신 기능이 추가되고, 라이브러리나 도구 개발자들이 새 버전에 맞춰 준비할 수 있는 기간이 주어집니다.

6개월 후, Ative LTS 상태로 전환

6개월이 지나면, 홀수 버전은 지원이 바로 끝납니다. 짝수 버전은 LTS로 전환됩니다.

LTS로 전환된 버전은 “Active LTS” 상태가 되고, 이때부터 본격적으로 오랫동안 중요한 버그 수정과 보안 업데이트를 받습니다. LTS는 보통 총 30개월(2년 반) 동안 지원됩니다.

Maintenance(유지 관리) 상태로 전환

LTS 지원 기간이 끝나면 “Maintenance” 단계로 넘어가고, 이때는 아주 중요한 보안 문제만 지원합니다.

릴리스 일정

현재 Node.js 공식 홈페이지에 올라와 있는 릴리스 일정은 아래와 같습니다.

TypeScript의 탄생 배경

배경부터 알아보자!

TypeScript는 2012년, 마이크로소프트(Microsoft)에서 만든 프로그래밍 언어입니다.

C#과 Delphi의 설계자로 유명한 Anders Hejlsberg가 주도해 개발했습니다.

완전히 새로운 언어라기보다는, JavaScript의 단점을 보완하기 위한 확장판으로 시작되었습니다.

JavaScript의 한계

JavaScript는 원래 웹 페이지에서 간단한 기능을 구현하기 위해 만들어졌습니다. 하지만 시간이 지나고 Node.js가 등장하면서, JavaScript는 브라우저 밖에서도 실행될 수 있게 되었고 데스크톱 앱, 모바일 앱, 웹 서버 등 훨씬 더 복잡한 프로그램 개발에 사용 되기 시작했습니다.

그 결과, 다음과 같은 한계가 드러나기 시작했습니다:

• 코드가 점점 복잡해지고 관리하기 어려워짐
• 버그가 자주 발생하고, 원인을 찾기 힘듦
• 여러 사람이 협업 할수록 코드의 일관성이 무너지기 쉬움
• 동적 타입 언어라서, 에러를 코드를 실행 해야만 확인할 수 있음
  • 예: 배포 후 며칠이 지나서야 오류를 발견하는 경우도 생김

TypeScript의 등장

마이크로소프트는 JavaScript의 한계를 해결하기 위해 JavaScript에 다음과 같은 기능을 추가한 TypeScript를 만들었습니다:

• 정적 타입 검사 지원: 코드를 실행하기 전에 오류를 미리 확인할 수 있음
• 클래스, 인터페이스, 모듈 등 현대적인 언어 기능 제공
• 기존 JavaScript와 완전한 호환성: 기존 JS 코드를 그대로 사용하거나 점진적으로 전환 가능

TypeScript는 JavaScript를 더 안전하고 규모 있는 개발에 적합한 언어로 확장한 것입니다.

TypeScript는 출시 이후 빠르게 성장했습니다. 특히, Angular 같은 프레임워크에서는 공식적으로 TypeScript를 채택 하면서 더 많은 개발자들이 사용하기 시작했습니다.

지금은 프론트엔드뿐만 아니라 백엔드, 모바일 앱 개발 등 다양한 분야에서 널리 사용 되고 있습니다.

설문 통계로 살펴본 TypeScript의 인기

• 2024 State of JavaScript에 따르면, 응답자의 67%가 JavaScript보다 TypeScript를 더 많이 작성한다고 답했고, 34%는 오직 TypeScript만 사용한다고 했습니다.
  
• State of FE-JS Korea 2025에서는 응답자의 약 75%가 TypeScript를 사용 중이며, 전체 응답자의 34%는 프로젝트의 100%를 TypeScript로 작성한다고 응답했습니다.
  

타입 시스템 이해하기

타입 시스템이란?

타입 시스템은 프로그래밍 언어에서

“값이 어떤 종류(타입)인지, 그리고 그 값을 어떻게 다룰 수 있는지를 정의하는 규칙”입니다.

숫자인지, 문자(문자열)인지, 참/거짓인지 등을 구분하고, 그 값에 어떤 연산을 할 수 있는지를 미리 판단해주는 시스템입니다.

왜 타입 시스템이 필요한가요?

JavaScript를 사용하다 보면, 아래 코드를 본 경험이 있지 않으신가요?

let age = 27;
age = 'twenty seven'; // error가 발생하지 않음

console.log(age.toFixed(2)); // 런타임 에러 발생!

이처럼 JavaScript는 변수의 타입을 자유롭게 바꿀 수 있어 유연하지만, 런타임에서만 에러가 드러나기 때문에 실제 서비스에서는 예상치 못한 버그로 이어질 수 있습니다.

타입 시스템이 필요한 이유는 바로 여기에 있습니다.

타입 시스템의 장점

• 실수를 미리 잡아줍니다 숫자와 문자열처럼 안 맞는 조합을 사전에 경고합니다.

  const number1 = 1;
  const numberString = 'two';
  
  let sum = 0;
  
  sum = number1 + numberString; // Error...

• 코드의 의도를 명확히 합니다 변수나 함수의 타입을 보면, 어떤 값을 다루는지 쉽게 파악할 수 있습니다.

  function greet(name: string): string {
  	return `Hello, ${name}!`;
  }
  
  const result = greet('Lucy');

• 협업과 유지보수가 쉬워집니다 타입 정보를 통해 동료나 미래의 나도 코드를 이해하기 쉬워집니다.

  type Todo = {
    id: number;
    content: string;
    isDone: boolean;
  };
  
  function createTodo(newTodo: Todo): void {
    // ...
  }

타입 시스템은 어떻게 동작하나요?

타입 시스템은 주로 아래와 같은 방식으로 동작합니다:

1. 모든 값에 타입을 부여

   예: 숫자, 문자열, 불린(참/거짓), 배열, 객체 등

2. 값의 사용 방식을 검사

   예: 숫자끼리는 더할 수 있지만, 문자열과 숫자는 덧셈 방식이 다릅니다.

3. 에러를 사전에 공지

   언어에 따라, 실행 전에 미리 에러를 알리는 정적 타입 검사도 가능

타입 시스템의 종류

• 정적 타입 시스템
  • 코드를 실행하기 전에 타입을 검사하며, 예시 언어로 Java, C가 있습니다.
• 동적 타입 시스템
  • 프로그램 실행 중에 타입을 검사하며, 예시 언어로 JavaScript, Python이 있습니다.

JavaScript는 동적 타입 언어로 타입이 실행 도중에 결정되고, 잘못된 타입 사용도 실행해 보기 전까지는 알 수 없습니다.

TypeScript는 어떤 타입 시스템을 쓸까?

TypeScript는 기본적으로 정적 타입 검사 기능을 제공합니다. 하지만 정적 타입 시스템이 아닌 점진적 타입 시스템을 사용합니다.

점진적 타입 시스템이란?

• 필요한 부분에만 타입을 명시할 수 있는 타입 시스템입니다.
• 타입을 일일이 다 써주지 않아도, TypeScript가 스스로 추론해서 타입을 파악합니다.

타입을 명시하지 않아도 TypeScript는 “Hello, world”를 보고 message 변수가 string 타입이라는 걸 추론합니다.

이런 유연함 덕분에 기존 JavaScript 코드를 TypeScript로 옮기기 좋고, 러닝 커브도 상대적으로 낮습니다.

TypeScript의 동작 원리

컴파일, 컴파일러, AST는 무엇이고, TypeScript는 어떻게 동작할까?

TypeScript가 실행 되기까지, 무슨 일이 벌어질까?

TypeScript의 실행 과정을 제대로 이해하기 위해서는 컴파일이라는 개념을 알아야 합니다.

컴파일이란?

컴파일은 우리가 작성한 코드를 컴퓨터가 이해할 수 있도록 코드로 바꾸는 과정입니다.

• 우리가 쓰는 JavaScript나 TypeScript는 사람이 읽기 쉬운 언어입니다.
• 하지만 컴퓨터는 이런 언어를 바로 이해하지 못합니다.
• 그래서 기계어로 번역해주는 과정이 필요한데, 이를 컴파일이라고 합니다.

쉽게 말해, 사람이 이해하는 언어인 프로그래밍 언어를 컴퓨터의 언어인 기계어로 번역하는 작업을 컴파일이라고 합니다.

그림에 표현된 바이트코드는 실제 컴파일된 결과가 아닙니다.

컴파일러란?

컴파일러는 컴파일이라는 번역 작업을 실제로 수행해주는 도구입니다.

AST(Abstract Syntax Tree, 추상 구문 트리)란?

컴파일러는 코드를 번역하기 전에 우선 코드를 구조화해서 이해하려고 합니다. 이때 만들어지는 것이 AST(Abstract Syntax Tree, 추상 구문 트리) 입니다. 말 그대로 코드를 나무 구조처럼 분석한 것입니다. 코드와 구조 의미를 컴퓨터가 분석하기 쉽게 만든 중간 형태입니다.

AST 만들어보기

JavaScript의 실행 과정

TypeScript의 실행 과정을 알아보기 전에, JavaScript가 실행되는 기본 과정을 살펴보겠습니다.

1. 작성된 JavaScript 코드를 AST로 변환
2. AST를 기반으로 바이트코드 생성
3. 브라우저나 Node.js의 내부 JavaScript 엔진이 바이트코드를 실행

TypeScript는 어떻게 동작할까?

TypeScript는 JavaScript와 같은 실행 환경을 공유하지만, 한 단계가 더 있습니다.

1. TypeScript 코드를 AST로 변환
2. 타입 검사를 수행
   • 오류가 있다면 컴파일 실패 및 종료
3. 타입 검사가 통과되면 JavaScript 코드로 컴파일(변환)
4. JavaScript 코드를 AST로 변환
5. AST를 바이트 코드로 변환
6. 바이트 코드를 실행

Day 1 회고

첫날부터 생각보다 많은 걸 배울 수 있었습니다. 사실 예전에 [TS] TypeScript: 왜 사용해야 할까요? 라는 제목으로 관련 내용을 블로그에 정리한 적이 있었지만, 시간이 지나 많이 잊은 상태였습니다.

이번 챌린지를 계기로 다시 개념을 정리하면서, TypeScript의 탄생 배경부터 주요 개념까지 복습할 수 있었습니다. 그러면서 TypeScript를 왜 많은 개발자들이 사용하게 됐는지도 이해할 수 있었습니다.

Day 1에서 알게 된 내용은 아래와 같습니다:

• TypeScript는 왜 등장 했는가?

  JavaScript는 원래 단순한 웹 상호작용을 처리하기 위한 언어였지만, Node.js의 등장 이후 데스크톱, 모바일, 서버 개발 등 복잡한 환경에서도 사용되기 시작하면서 여러 한계가 드러났습니다. 이런 문제를 보완하기 위해 TypeScript가 만들어졌다는 사실을 다시 확인할 수 있었습니다.
  

• TypeScript의 장점?

  대규모 프로젝트에서 버그 발생률을 줄이고, 더 안전하고 예측 가능한 코드 작성이 가능하다는 점이 큰 장점이라는 걸 다시 느꼈습니다.
  

• 타입 시스템?

  TypeScript는 점진적 타입 시스템을 사용합니다. 덕분에 모든 변수에 타입을 일일이 지정하지 않아도 되고, TypeScript가 자동으로 타입을 추론해줍니다. 기본적으로는 정적 타입 시스템이기 때문에, 코드를 실행하기 전에 에러를 미리 확인할 수 있다는 장점도 있습니다.
  

• TypeScript는 어떻게 동작할까?

  TypeScript 코드는 먼저 타입 검사를 거친 후, JavaScript로 변환됩니다. 이후에는 JavaScript처럼 실행되는 구조라는 걸 배웠습니다.
  

참고 자료

• Long-term support | Wikipedia
• Long-Term Support(LTS) vs. Regular Versions: Key Difference and Benefits | tenable documentation
• Long-Term Support (LTS) Software: why choose it? | catalyst
• Node.js 릴리스 | Node.js
• nodejs/Release Repository
• Microsoft And Google Collaborate On Angular 2 Framework, TypeScript Language
• 자바스크립트 프레임워크 소개 2 - Angular2
• TypeScript: Angular 2’s Secret Weapon
• 한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 보러가기