[멋쟁이사자처럼] 프론트엔드 5일차 정리

타입스크립트의 필요성 및 개요

• 타입스크립트란? 자바스크립트에 '타입(Type)'이라는 개념을 추가하여 더 안전하고 예측 가능한 코드를 작성할 수 있게 해주는 언어입니다. 결국 자바스크립트로 변환되어 실행됩니다.
• 타입스크립트의 필요성 (쓰는 이유): 자바스크립트가 데이터를 확정 짓는 능력(동적 타입)이 부족하여 런타임 오류가 발생하기 쉽기 때문에, 타입스크립트는 : (콜론)이라는 한정사(타입 어노테이션)를 사용하여 변수나 함수의 데이터 형식을 미리 선언(확정)함으로써, 코드 실행 전에 오류를 찾아내고 안정성을 높입니다. 이를 통해 대규모 프로젝트의 유지보수성과 협업 효율성을 크게 향상시킵니다.

type과 interface의 차이점

• interface (인터페이스):
  접점(Interface): 이름 그대로 '접점'의 역할을 합니다. 주로 객체의 구조를 정의하고, 다른 클래스가 특정 인터페이스의 형태를 따르도록 implements 키워드를 통해 강제할 수 있습니다 (객체 지향적 관점).
  
  확장 가능: 다른 인터페이스를 extends 키워드를 통해 상속받아 확장할 수 있습니다.
  
  선언적 병합(Declaration Merging) 가능: 같은 이름으로 여러 번 선언하면 타입스크립트가 이를 하나로 합쳐줍니다. 라이브러리 타입 확장에 유리합니다.
  
• type (타입 별칭 / Type Aliases):
  
  타입의 형식 지정: 기존 타입에 새로운 이름을 부여하여 복잡한 타입을 간결하게 표현하거나, 유니언 타입, 인터섹션 타입 등 복합적인 타입들을 정의할 때 주로 사용됩니다.
  
  확장 불가능 (결합): extends를 통한 상속은 불가능하지만, & (인터섹션 타입)을 사용해 여러 타입을 '결합'하는 방식으로 유사한 효과를 낼 수 있습니다.
  
  선언적 병합 불가능: 같은 이름으로 여러 번 선언하면 오류가 발생합니다.
  
  객체의 구조를 타입으로 정의하는 예시:위 코드는 직접 객체 리터럴의 타입을 정의하는 방식으로, 매번 동일한 구조의 객체 타입을 반복해서 정의해야 하는 비효율성이 있습니다. 이럴 때 type이나 interface를 사용하면 코드 재사용성과 가독성을 높일 수 있습니다:

  type UserType = { name: string; age: number; }; // type을 사용하여 객체 구조를 타입으로 정의
  const user1: UserType = { name: "John", age: 30 };
  const user2: UserType = { name: "Jane", age: 20 };
  

  const user: { name: string; age: number; } = { name: "Alice", age: 30 };
  

타입스크립트의 다양한 타입들

• 유니언 타입 (Union Types): | (파이프) 기호를 사용하여 둘 이상의 타입 중 하나를 가질 수 있음을 나타냅니다. 예: let value: string | undefined = "Hello"; (값은 문자열이거나 undefined일 수 있음)
• 리터럴 타입 (Literal Types): 변수가 특정 고정된 값만 가질 수 있도록 형식(타입)을 제한하는 것입니다. 문자열, 숫자, 불리언 리터럴을 타입으로 사용할 수 있습니다. 예: let direction: "up" | "down" = "up"; (변수는 "up" 또는 "down" 값만 가질 수 있음)
• 열거형 (Enum Types): enum 키워드를 사용하여 숫자 값 집합에 이름을 부여하는 타입입니다. "리터럴과 80% 비슷하며 둘 중 하나를 선택하여 사용할 수 있다."는 설명은 리터럴 타입처럼 특정 값들을 제한한다는 점에서 유사하지만, 숫자에 이름을 부여하여 가독성을 높이고 특정 값들의 집합을 '미리 정의된 코드'로 사용할 때 더 유용하다는 의미입니다.
  • 목적: 숫자 형태를 이해하기 쉬운 문자로 만들어 코드 가독성을 높입니다.
  • 예시: enum Direction { Up, Down, Left, Right }
  • 특징: Up은 자동으로 0, Down은 1 등으로 숫자가 할당되며, 필요하면 직접 숫자를 지정할 수도 있습니다 (예: enum HttpStatus { OK = 200, NotFound = 404 }).
  • 정적이고 엄격한 사용: 상수로 선언하여 리터럴 타입을 사용하는 것보다 더 엄격하게, 더 정적으로 사용될 수 있습니다.

4. 객체 지향 프로그래밍 (OOP)과 클래스

• 객체 지향 프로그래밍(OOP) (방법론): 프로그래밍 방법론 중 하나로, 프로그램을 객체 위주, 객체 중심으로 구성하여 현실 세계의 사물처럼 데이터(속성)와 기능을 묶어 관리합니다. 재사용성, 유지보수성, 확장성 등을 높이는 데 목적이 있습니다.
• class (클래스): 자바스크립트의 객체 지향에서 class는 객체를 생성하기 위한 '설계도' 또는 '템플릿' 역할을 합니다. 클래스 안에는 속성(property)과 메서드(method)를 정의할 수 있습니다.
  • constructor: 클래스의 객체(인스턴스)가 생성될 때 호출되는 특별한 메서드입니다. 속성들을 초기화하는 역할을 합니다.
  • private: 클래스 내부에서만 접근할 수 있는 속성(예: private speed)을 정의할 때 사용합니다.
  • has A inheritance (포함 관계): GamePanel 클래스에서 private car: SUVCar;와 같이 선언하는 것은 "GamePanel이 SUVCar를 가지고 있다"는 의미의 포함 관계(Composition)를 나타냅니다. 이는 상속(Inheritance)과는 다른 개념으로, 한 클래스가 다른 클래스의 객체를 자신의 속성으로 가지는 것입니다.
  • 실체화(Instantiation) 및 객체 생성: this.car = new SUVCar()와 같이 new 키워드를 사용하여 클래스의 실체(객체, 인스턴스)를 만들어야만, 해당 객체의 속성과 메서드를 사용할 수 있습니다. "실체화하여야 사용이 가능, 객체가 있어야 사용 가능." 이 바로 이 부분을 설명합니다.

제네릭 (Generic)

제네릭은 선언할 때(함수나 클래스를 정의할 때) 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미합니다. 코드를 작성할 때는 타입을 확정하지 않고, 실제로 사용할 때(호출할 때) 타입을 지정할 수 있게 해주는 기능이에요.

• 목적: 한 번 작성한 코드를 여러 타입에서 재사용할 수 있도록 하여 코드 중복을 줄이고 유연성을 높입니다.
• 기본 문법: <T>와 같이 꺾쇠 괄호 안에 타입 파라미터(관례적으로 T, U, K 등을 사용)를 넣어 사용합니다.
• 예시: function print<T>(value: T): void { ... }
  • print<string>("Hello, World!"); // T는 string으로 지정
  • print<number>(42); // T는 number로 지정
  • getText<string>('hi');
  • getText<number>(10);
  • getText<boolean>(true);