[멋쟁이사자처럼] 프론트엔드 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);
728x90
'멋쟁이사자처럼' 카테고리의 다른 글
| [멋쟁이사자처럼] 7일차 정리 (0) | 2025.06.25 |
|---|---|
| [멋쟁이사자처럼] 프론트엔드 6일차 정리 (0) | 2025.06.25 |
| [멋쟁이사자처럼] 프론트엔드 4일차 정리 (0) | 2025.06.22 |
| [멋쟁이사자처럼] 프론트엔드 3일차 정리 (0) | 2025.06.20 |
| [멋쟁이사자처럼] 프론트엔드 2일차 정리 (0) | 2025.06.18 |