멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 4

멋쟁이 사자처럼 (출처 : 나무위키)

 

오늘은 어쩌면 내가 이 과정을 신청하게 된 근본적인 이유 중 하나인 TypeScript 에 대해서 배워보는 시간을 가지려고 한다.

솔직히 처음에는 그냥 귀찮기만 했다. 정말 하나부터 열까지 타입을 일일히 명시해줘야 했고, 오히려 가독성을 떨어뜨린다고 생각했다.

하지만 많은 자유도를 부과하는만큼 많은 책임이 발생하고, 그에 따른 해답이 타입을 명시해주는 것이라고 했다.

그렇지만 조금의 이점은 있다고 생각한 부분이 에러를 명확하게 짚어주는 것이었다. 만약 height 라는 항목을 heigth 라고 작성하면 JS에선 NaN이라고 나오는데 TS에서는 '너 혹시 그거 height 쓰려고 한거 아니야?' 라고 짚어준다. 이런 부분은 마음에 들었다.

 

하지만 그럼에도 불편함을 느끼지만, 나보다 더 많이 배운 사람들이 그게 맞다고 하면 맞는거겠지.

내가 아직 너무 소규모 프로젝트만 진행해봐서 불필요하다고만 느끼는 것 같기는 하다.

 

여튼 그래서 오늘은 TypeScript 를 배우면서 시작했다.

 

1. 타입이 없는 언어의 문제점

JavaScript는 let x = 3 , x = "Hello" 이런 식으로 자유롭게 타입을 바꿀 수 있다. 그렇지만 자유도가 높은 대신, 실수를 방지할 장치가 없다. 예를 들어 x = x + "abc" 같은 코드도 오류 없이 실행은 되지만, 나중엔 원하지 않는 결과를 받아보는 상황이 발생할 수도 있다.

그래서 자유로움은 처음 코드를 접하는 개발자가 쉽게 사용할 수 있게 만들어주지만, 차츰 안정성이 떨어지기 때문에 타입이 필요해진다.

 

2. 타입의 종류

1) Primitive Type (기본 타입)

JavaScript에서 제공하는 가장 기본적인 타입들이기도 하고, TypeScript도 그대로 지원한다.

타입	설명
string	문자열
number	숫자 (정수, 실수 등)
boolean	참 / 거짓
null	값이 없음 (의도적으로 비어 있음)
undefined	값이 정의되지 않음
symbol	교유한 값 식별자

 

2) Object Types (객체 타입)

타입	설명
Array	배열
Object	일반 객체
Date	날짜 객체
Function	함수
RegExp	정규 표현식

 

3) Special Types (특수 타입)

타입	설명
any	어떤 타입이든 허용 (하지만 타입스크립의 안정성을 깨버리기 때문에 사용을 지양함)
unknown	어떤 타입인지는 모르지만, 무조건 사용할 수는 없고 타입 검사가 필요함

 

4) Composite Types (복합 타입)

타입	설명
Union ( | )	여러 타입 중 하나를 허용함
Literal	특정 값만 허용함. ex) let direction: "left" | "right"
Enum	이름이 있는 상수 집합임
Interface	객체의 구조를 정의함
Type Alias	특정 타입 구조에 이름 붙이기

 

5) 정리

• Primitive는 기본값 (문자, 숫자, Boolen 등)
• Object 는 구조화된 데이터
• Special 은 유연하거나 안전한 타입
• Composite 는 타입을 조합하거나 제약해줌

3. 변수에 타입 명시하기

TypeScript 에서는 변수 선언 시 타입을 명시해줄 수 있다. 물론 타입 추론을 자동으로 하게 두는 것도 가능하지만, 복잡한 구조에서는 먼저 명시해두는 것이 가독성이나 유지보수 측면에서 더 좋을 때도 많다고 하셨다.

let obj: string = "hello TypeScript!";

 

TypeScript는 Java 언어같은 int x = 0 방식이 아닌, : string 처럼 타입을 뒤에 붙이는 방식을 사용한다.

 

4. 배열과 객체의 타입 지정

배열의 경우에는 요소에 타입을 명시해 줄 수 있고, 객체는 key-value 형식의 타입 구조를 정의할 수 있다.

let numbers: number[] = [1, 2, 3];
let names: string[] = ["Harang", "Lion"];

let user: { name: string; age: number } = {
	name: "Harang",
    age: 25
 };

 

객체가 계속 반복될 경우에는 아래와 같이 Type Alias를 사용해 구조에 이름을 붙여 관리할 수 있다.

 

type User = {
	name: string;
    age: number;
};

const user1: User = { name: "Harang", age: 28 };

 

5. any 타입과 unknown

TypeScript를 쓰면서 가장 주의해야 하는 두 가지 타입은 any 와 unknown 이라고 한다.

• any : 말 그대로 어떤 타입이든 허용함. 너무 자유롭기 때문에 사용을 지양함
• unknown : 타입을 알 수 없지만, 타입 검사를 통해 안전하게 사용할 수 있는 any의 대체제임

let value: unknown = "hello";

if (typeof value === "string") {
	console.log(value.toUpperCase()); // 안전하게 string으로 사용 가능
};

 

6. Type Assertions (타입 단언)

개발자가 타입을 명확하게 알고 있는 경우, 컴파일러에게 '내가 책임질게' 라고 말해주는 방식이다.

그래서 신중하게 사용하여야 한다.

let someValue: unknown = "This is a string";
let strLength: number = (someValue as string).length;

 

7. 유니언 타입과 리터럴 타입

유니언 타입은 여러 타입 중 하나를 허용하는 방식이고, 리터럴 타입은 지정한 특정 값만 허용하는 것이다.

이 두가지를 조합하면 매우 유연하면서도 제약을 줄 수 있어, 선택지가 제한된 상황에서 자주 사용된다.

// 유니언 타입 
let id: string | number;
id = 1234;
id = "abcd";

// 리터럴 타입
let direction: "left" | "right";
direction = "left"; // o
direction = "up";   // x

 

8. Enum (열거형)

여러 개의 상수를 그룹화하고, 의미 있는 이름을 붙여주는 기능이다.

숫자를 직접 다루지 않고 Direction.Left처럼 의미 있는 이름으로 작성할 수 있어 코드 가독성이 높아진다.

enum Direction {
  Up = 1,
  Down,
  Left,
  Right
}

let move: Direction = Direction.Left;

 

9. Interface 와 Type Alias

둘 다 객체의 구조를 정의할 수 있지만, 확장성과 용도 면에서 차이점이 있다.

• interface 는 확장이 가능하고 선언 병합도 가능함.
• type 은 더 유연한 타입 조합이 가능하지만, 재정의는 불가능하다.

일반적인 객체 구조에서는 interface, 복잡한 조합에는 type을 쓰는것이 일반적이라고 하는데 이건 계속 써보면서 감을 잡아야 할 것 같다..

 

// interface
interface Animal {
  name: string;
}
interface Bear extends Animal {
  honey: boolean;
}

// type
type AnimalType = {
  name: string;
};
type BearType = AnimalType & {
  honey: boolean;
};

 

10. 함수에 타입 사용하기

함수의 매개변수나 반환값에도 타입을 명시할 수 있다.

function greet(name: string): string {
  return `Hello, ${name}`;
}

function getAge(): number {
  return 25;
}

 

11. 클래스와 프로토타입

JavaScript는 프로토타입 기반의 언어이기 때문에, TypeScript에서도 class가 아닌 function을 이용한 생성자 패턴을 이해하는 것이 중요하다고 한다.

function Exam(kor, eng, math) {
  this.kor = kor || 0;
  this.eng = eng || 0;
  this.math = math || 0;
}

Exam.prototype.total = function () {
  return this.kor + this.eng + this.math;
};

 

12.  네번째 강의를 마무리 하며...

사실 오늘 배운 TypeScript는 머리로 어느정도 이해는 하지만, 내가 실제로 사용하기에는 아직까지는 무리가 있다고 느낀다. 단순하게 변수에 타입을 지정해주는 것 정도야 금방 하겠지만 type alias와 interface, 그리고 생성자 패턴 까지 완전하게 머리에 담기에는 아직은 조금 무리인 것 같다. 그래도 내가 계속 코딩을 하며 느끼는 점은 이해가 명확하게 안될때는 끝까지 이해하고 넘어가려는 것 보다, 대충 감만 잡고 실제로 사용하면서 이해하는게 훨씬 이해하기가 쉬웠다.

 

이번에도 계속 사용해보면서 내 것으로 만들어 나가야겠다.