0124 - 0130

0124

타입스크립트란?

자바스크립트에 타입을 부여한 언어
자바스크립트의 확장된 언어로 실행하려면 컴파일 과정을 거쳐야 한다.

타입스크립트 장점

에러를 사전에 방지하여 코드의 품질을 높이고, 코드 자동 완성 기능을 최대로 활용하고 가이드 역할을 통해 개발 생산성을 높일 수 있다.

자바스크립트를 타입스크립트처럼 코딩하는 방법

// @ts-check

/**
 * @param {number} a 첫번째 숫자
 * @param {number} b 두번째 숫자
 */
function sum(a, b) {
  return a + b;
}

JSDoc의 기능과 @ts-check 주석을 활용하여 자바스크립트를 타입스크립트처럼 코딩할 수 있다.
다만 이렇게 하면 코드의 양이 많아지고 불편하다는 단점이 있다.

타입스크립트 설치와 사용

npm i typescript -g
- 타입스크립트를 전역 설치한다.
타입스크립트로 작성된 코드는 브라우저가 해석할 수 없기 때문에 JS 파일로 컴파일 해줘야 한다.
tsc 변환할파일
- ts 확장자를 가진 파일을 js 파일로 컴파일한다.

타입스크립트 설정 파일

tsconfig.json 파일을 생성하고 키 값 형태로 작성한다.

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "noImplicitAny": true
  },
  "include": ["./src/**/*"]
}

compilerOptions는 컴파일 할 때의 옵션을 설정한다.
allowJs는 프로젝트 내에 자바스크립트를 허용하겠다는 의미
checkJs는 @ts-check의 기능과 동일하다.
noImplicitAny는 모든 타입에 대해서 최소 Any라고 하는 기본적인 타입이라도 작성해야한다는 의미

타입스크립트 플레이그라운드

위의 사이트에서 타입스크립트로 작성한 코드를 컴파일한 결과를 확인해 볼 수 있다.

reference
타입스크립트 공식 문서
타입스크립트 핸드북
타입스크립트 입문 - 기초부터 실전까지

0125

변수와 함수 타입 정의

기본 타입

String

자바스크립트 변수 타입이 문자열인 경우 아래와 같이 선언해서 사용한다.

let str: string = "hi";

위와 같이 :을 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기라고 한다.

Number

let num: number = 10;

Boolean

let isLoggedIn: boolean = false;

Array

let arr: number[] = [1, 2, 3];
let arr: Array<number> = [1, 2, 3];

배열의 경우에는 두 가지 방법으로 선언할 수 있다.
배열 리터럴 앞에 배열에 포함될 값을 명시하거나, 제네릭을 사용하여 선언할 수 있다.

Tuple

튜플은 배열의 길이가 고정되고 각 인덱스에 위치한 타입이 지정되어 있는 배열 형식을 의미한다.

let address: [string, number] = ["gangnam", 100];

Object

let person: { name: string; age: number } = {
  name: "thor",
  age: 1000,
};

Any

기존 자바스크립트로 구현되어 있는 웹 서비스 코드에 타입스크립트를 점진적으로 적용할 때 활용하면 좋은 타입
단어 의미 그대로 모든 타입에 대해서 허용

let str: any = "hi";
let num: any = 10;
let arr: any = ["a", 2, true];

Void

변수에는 undefined와 null만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입

let unuseful: void = undefined;

function notuse(): void {
  console.log("sth");
}

함수 타입

파라미터 타입 정의

function sum(a: number, b: number) {
  return a + b;
}

타입스크립트에서는 함수의 인자를 모두 필수 값으로 간주하고, 추가로 인자를 넘기면 오류를 발생시킨다.

반환값 타입 정의

function getTen(): number {
  return 10;
}

반환값의 경우 함수명과 매개변수 뒤에 작성한다.
적절한 값을 반환하지 않으면 컴파일러가 오류를 검출한다.

옵셔널 파라미터

매개변수의 갯수 만큼 인자를 넘기지 않아도 되는 자바스크립트의 특성을 살리기 위해서는 ?를 이용해서 아래와 같이 정의할 수 있다.

function sum(a: number, b?: number): number {
  return a + b;
}

reference
타입스크립트 공식 문서
타입스크립트 핸드북
타입스크립트 입문 - 기초부터 실전까지

0126

인터페이스 & 타입 별칭

할일 관리 애플리케이션 실습을 진행하며 공부한 타입스크립트 기본 적용을 시도해보았다.
타입을 일일히 작성하며 느낀 점은 객체의 경우 매번 중복해서 작성하는 데에 불편함을 느꼈고, 코드의 가독성에도 좋지 않다는 생각이 들었다.
이 문제를 해결하기 위해 인터페이스라는 개념에 대해 학습해보았다.

인터페이스란?

인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다. 타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있다.

객체의 스펙(속성과 속성의 타입)
함수의 파라미터
함수의 스펙(파라미터, 반환 타입 등)
배열과 객체를 접근하는 방식
클래스

interface User {
  age: number;
  name: string;
}

let junghoon: User = {
  age: 27,
  name: "정훈",
};

함수에 인터페이스 적용

function getUser(user: User) {
  console.log(user);
}

const capt = {
  name: "캡틴",
  age: 100,
};
getUser(capt);

파라미터에 인터페이스를 지정하고, 함수를 호출할 때 인자가 인터페이스의 규칙을 따르는지 확인해준다.
인터페이스를 인자로 받아 사용할 때, 인터페이스에 정의된 속성과 타입의 조건만 만족한다면 객체의 속성 갯수가 더 많아도 상관 없다.

함수의 스펙을 인터페이스로 정의

interface SumFunction {
  (a: number, b: number): number;
}

let sum: SumFunction;
sum = function (a: number, b: number): number {
  return a + b;
};

라이브러리를 직접 만들거나 협업을 할 때 틀을 잡는 용도로 활용 가능

인덱싱 방식 정의

interface StringArray {
  [index: number]: string;
}

const arr: StringArray = ["a", "b", "c"];
arr[0] = 10; // 에러

배열에 인덱스로 접근했을 때 요소의 값은 모두 문자열이라는 것을 정의한다.
즉, 모든 요소는 문자열 타입이다.

딕셔너리 패턴

위의 인덱싱 방식과 비슷한 패턴이다

interface StringRegexDictionary {
  [key: string]: RegExp;
}

var obj: StringRegexDictionary = {
  sth: /abc/,
  cssFile: /\.css$/,
  jsFile: /\.js$/,
};

obj["cssFile"] = "a";

값으로 오는 모든 값들은 정규표현식 형태여야 한다.

인터페이스 확장(상속)

인터페이스는 다른 인터페이스를 상속받아 확장이 가능하다.

interface Person {
  name: string;
  age: number;
}

interface Developer extends Person {
  language: string;
}

const junghoon: Developer = {
  language: "ts",
  age: 27,
  name: "jh",
};

타입 별칭

타입 별칭은 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미한다.

type myName = string;
const name: MyName = "capt";

type Developer = {
  name: string;
  skill: string;
};

타입 별칭의 특징

타입 별칭은 타입 값을 생성하는 것이 아니라 정의한 타입에 대해 나중에 쉽게 참고할 수 있게 이름을 부여하는 것과 같다.

인터페이스로 선언한 타입을 프리뷰 했을 때는 interface 명만 나타나는 반면,
타입 별칭을 사용해서 선언한 타입을 프리뷰로 확인했을 때는 속성과 그 속성의 타입까지 확인할 수 있다.

type과 interface의 차이점

타입 별칭과 인터페이스의 가장 큰 차이점은 타입의 확장 가능 / 불가능 여부이다.
인터페이스는 확장이 가능한데 반해 타입 별칭은 확장이 불가능하기에 가능한 type 보다 interface로 선언해서 사용하는 것이 좋다.

reference
타입스크립트 공식 문서
타입스크립트 핸드북
타입스크립트 입문 - 기초부터 실전까지

0127

연산자를 이용한 타입 정의

Union Type

유니온 타입은 자바스크립트 OR 연산자 ||와 같이 A이거나 B이다 라는 의미의 타입이다.

function logText(text: string | number) {}

위 함수의 파라미터 text에는 숫자나 문자 타입의 값이 모두 올 수 있다.
이처럼 | 연산자를 이용하여 타입을 여러 개 연결하는 방식을 유니온 타입 정의 방식이라고 부른다.

장점

function logMessage(value: string | number) {
  if (typeof value === "number") {
    value.toLocaleString();
  }
  if (typeof value === "string") {
    value.toString();
  }
  throw new TypeError("value must be string or number");
}

위와 같이 코드를 작성하면 value의 타입이 추론되기 때문에 타입과 관련된 API를 쉽게 자동완성할 수 있다.
위와 같이 특정 타입으로 타입의 범위를 좁혀가는 과정을 타입 가드라고 한다.

특징

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}

function askSomeone(someone: Developer | Person) {
  someone.name;
  someone.skill; // error
}

유니온 타입을 사용하면 Developer와 Person의 모든 속성을 사용할 수 있을 것이라고 생각할 수 있지만 실제로는 그렇지 않다.
타입스크립트 관점에서는 someone이 어떤 값이 들어올 지 모르기 때문에 타입 검증도 없이 공통되지 않은 속성을 사용하게 되면 에러를 발생할 수 있다고 생각한다.
그렇기에 이러한 속성을 사용하려면 타입 가드를 사용해야 하고, 일반적으로는 공통된 속성만 사용 가능하다.

Intersection Type

인터섹션 타입은 여러 타입을 모두 만족하는 하나의 타입이다.
이는 & 연산자를 이용해 여러 개의 타입 정의를 하나로 합치는 방식이다.

function askSomeone(someone: Developer & Person) {
  someone.name;
  someone.skill;
  someone.age;
}

인터섹션 타입은 Developer과 Person의 모든 속성에 접근이 가능하다.
단, 인자로 someone을 넘길 때 Developer과 Person에 해당하는 모든 속성을 넘겨야만 한다.

이넘(Enum)

Enum은 특정 값들의 집합을 의미하는 자료형이다.

숫자형 이넘

타입스크립트에서 숫자형 이넘은 다음과 같이 선언한다.

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

위와 같이 숫자형 이넘을 선언할 때 초기 값을 주면 초기 값부터 차례로 1씩 증가한다.
초기 값을 주지 않으면 0부터 차례로 1씩 증가한다.
리버스 매핑은 숫자형 이넘에만 존재하는 특징으로 이넘의 키로 값을, 값으로 키를 얻을 수 있는 특징이다.

문자형 이넘

문자형 이넘은 이넘 값 전부 다 특정 문자 또는 다른 이넘 값으로 초기화 해줘야 한다.
숫자형 이넘과는 다르게 auto-incrementing이 없다.

enum Shoes {
  Nike = "나이키",
  Adidas = "아디다스",
}

let myShoes = Shoes.Adidas;
console.log(myShoes); // 아디다스

이넘에 문자와 숫자를 혼합하여 생성할 순 있지만 권고하지 않는다.

활용

enum Answer {
  Yes = "Y",
  No = "N",
}

function askQuestion(answer: Answer) {
  if (answer === Answer.Yes) {
    console.log("정답입니다");
  }
  if (answer === Answer.No) {
    console.log("오답입니다");
  }
}

askQuestion(Answer.Yes);
askQuestion("Yes"); // 에러

기존에 문자열로 하드 코딩하던 코드를 enum 타입으로 비교하는 코드로 변경해 안정성과 가독성을 높일 수 있다.
파라미터 타입을 enum 타입으로 지정하여 문자열은 인자로 넘길 수 없다.

클래스

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

타입스크립트에서의 클래스는 자바스크립트에서의 클래스와는 다르게 초기화할 속성들을 상단에 타입과 함께 정의해둬야 한다.
constructor 파라미터에서 타입을 정의할 수도 있다.

readonly

클래스의 속성에 readonly 키워드를 사용하면 접근만 가능하다.

class Person {
  readonly name: string;

  constructor(readonly name: string) {}
}

readonly를 사용하면 constructor 함수에 초기 값 설정 로직을 넣어줘야 하므로 인자에 readonly 키워드를 추가해서 코드를 줄일 수 있다.

Accessor

타입스크립트는 객체의 특정 속성의 접근과 할당에 대해 제어할 수 있다.
이를 위해서는 해당 객체가 클래스로 생성한 객체여야 한다.

class Developer {
  private name: string;

  get name(): string {
    return this.name;
  }

  set name(newValue: string) {
    this.name = newValue;
  }
}

위와 같이 name 속성에 제약 사항을 추가하고 싶다면 get과 set을 활용할 수 있다.

제네릭

제네릭은 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다.
한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용된다.

function getText<T>(text: T): T {
  return text;
}

getText<string>("hi"); // 제네릭 타입이 `<string>`이 됨
getText<number>(10); // 제네릭 타입이 `<number>`이 됨
getText<boolean>(true); // 제네릭 타입이 `<boolean>`이 됨

제네릭을 사용하면 함수를 호출할 때 함수에서 사용할 타입 값을 넘길 수 있다.
예를 들어 getText<string>('hi')를 호출하면 제네릭은 다음과 같이 동작한다.

function getText<string>(text: string): string {
  return text;
}

제네릭을 사용하는 이유

function logText(text: string): string {
  return text;
}

위 코드는 인자를 하나 넘겨 받아 반환해주는 함수다. 여기서 함수의 인자와 반환값은 string으로 지정되어 있지만 여러 가지 타입을 허용하고 싶다면 any를 사용할 수 있다.

하지만 any 타입의 경우 함수의 인자로 어떤 타입이 들어갔고 어떤 값이 반환되는지 알 수 없다. any 타입은 타입 검사를 하지 않기 때문이다. 또한 타입은 보다 구체적으로 명시하는 것이 더 좋다.

이러한 문제를 해결하는 것이 제네릭이다.

function logText<T>(text: T): T {
  return text;
}

함수의 이름 바로 뒤에 <T>라는 코드를 추가한다. 그리고 함수의 인자와 반환 값에 모두 T라는 타입을 추가하면 함수를 호출할 때 넘긴 타입에 대해 타입스크립트가 추정할 수 있게 된다.

이렇게 선언한 함수는 2가지 방법으로 호출 가능하다.

const text = logText<string>("Hello Generic");
const text = logText("Hello Generic");

보통 두 번째 방법이 코드도 더 짧고 가독성이 좋기 때문에 흔하게 사용된다.
그렇지만 복잡한 코드에서 두 번째 코드로 타입 추정이 되지 않는다면 첫 번째 방법을 사용하면 된다.

인터페이스에 제네릭 선언

interface Dropdown<T> {
  value: T;
  selected: boolean;
}

const obj: Dropdown<string> = { value: "abc", selected: false };

인터페이스를 선언할 때, 제네릭을 사용하여 타입 코드의 양을 줄일 수 있다.
예를 들어, value의 값으로 number나 string이 올 수 있는 인터페이스를 작성해야 한다면 각각 따로 작성하는 것이 아닌 제네릭을 활용하여 하나의 인터페이스만 작성할 수 있다.

타입 제한

제네릭 타입 변수

function logText<T>(text: T): T {
  console.log(text.length); // Error: T doesn't have .length
  return text;
}

위와 같이 코드를 작성하게 되면 text에 length 프로퍼티에 접근할 수 없기 때문에 에러가 발생한다.
이런 경우에는 제네릭에 타입을 줄 수 있다.

function logText<T>(text: T[]): T[] {
  console.log(text.length); // 제네릭 타입이 배열이기 때문에 length를 허용한다.
  return text;
}

이 코드는 일단 T라는 타입 변수를 받고, 인자 값으로는 배열 형태의 T를 받는다.
T[] 대신 Array<T>와 같이 좀 더 명시적으로 제네릭 타입을 선언할 수도 있다.

정의된 타입으로 타입 제한

interface LengthType {
  length: number;
}

function logTextLength<T extends LengthType>(text: T): T {
  console.log(text.length);
  return text;
}

logTextLength(10); // 숫자 타입에는 'length'가 존재하지 않으므로 오류 발생
logTextLength({ length: 0, value: "hi" }); // text.length에 접근 가능하므로 오류 없음

제네릭 타입 변수 말고도 타입 힌트를 줄 수 있는 방법이 있다.
타입 T를 구체적으로 정의하지 않고도 length 속성을 허용하려면 위와 같이 extends 키워드로 특정 인터페이스를 지정한다.
위와 같이 작성하게 되면 length에 대해 동작하는 인자만 넘겨받을 수 있게 된다.

keyof로 제네릭 타입 제한

interface ShoppingItem {
  name: string;
  price: number;
  stock: number;
}

function getShoppingItemOption<T extends keyof ShoppingItem>(itemOption: T): T {
  return itemOption;
}
getShoppingItemOption(10); // 에러 발생. 인자로는 ShoppingItem의 키값 중 하나만 넘길 수 있다.

getShoppingItemOption 함수에서 인터페이스의 key 값 중 하나만 받을 수 있도록 제약할 수 있다.
제네릭에다가 extends keyof 키워드로 인터페이스를 지정하면 인터페이스에 존재하는 키 중 한 가지가 제네릭이 된다는 뜻이다.

reference
타입스크립트 공식 문서
타입스크립트 핸드북
타입스크립트 입문 - 기초부터 실전까지

0128

전화번호 애플리케이션 실습

지금까지 공부한 타입스크립트 내용을 가지고 간단한 실습을 진행해보았다.

전화번호 리스트를 반환하는 api를 가정하고 코드를 작성한 뒤, 이와 관련된 코드들을 클래스로 묶어서 타입스크립트를 적용해 보았다.

tsconfig 설정

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "target": "es5",
    "lib": ["es2015", "dom", "dom.iterable"],
    "noImplicitAny": true,
    "strict": true,
    "strictFunctionTypes": true
  },
  "include": ["./src/**/*"]
}

strict와 strictFuncitonTypes를 true로 설정하여 명시적으로 엄격하게 검사하도록 했다.

알게 된 점

Promise를 이용한 API 함수 타입 정의

interface PhoneNumberDictionary {
  [phone: string]: {
    num: number;
  };
}

interface Contact {
  name: string;
  address: string;
  phones: PhoneNumberDictionary;
}

// api
function fetchContacts(): Promise<Contact[]> {
  const contacts: Contact[] = [
    {
      name: "Tony",
      address: "Malibu",
      phones: {
        home: {
          num: 11122223333,
        },
        office: {
          num: 44455556666,
        },
      },
    },
    {
      name: "Banner",
      address: "New York",
      phones: {
        home: {
          num: 77788889999,
        },
      },
    },
    {
      name: "마동석",
      address: "서울시 강남구",
      phones: {
        home: {
          num: 213423452,
        },
        studio: {
          num: 314882045,
        },
      },
    },
  ];
  return new Promise((resolve) => {
    setTimeout(() => resolve(contacts), 2000);
  });
}

위와 같이 프로미스를 반환하는 코드이기에 처음에는 함수의 반환값으로 Promise를 지정했다.
하지만 비동기 코드 내부에서는 무슨 일이 일어나는지 타입스크립트가 알 수 없기 때문에 프로미스 내부적으로 제네릭을 전달받아야 하도록 구현되어 있다.
그렇기에 프로미스를 사용할 때는 제네릭으로 Contact 배열을 전달해줘서 문제를 해결했다.

Enum 활용

PhoneType의 종류가 home, office, studio 세 종류가 존재할 때, 이 중 하나의 값만 받을 수 있도록 enum을 정의하고 활용해보았다.

enum PhoneType {
  Home = 'home',
  Office = 'office',
  Studio = 'studio',
}

findContactByPhone(phoneNumber: number, phoneType: PhoneType): Contact[] {
  return this.contacts.filter(
    contact => contact.phones[phoneType].num === phoneNumber
  );
}

위와 같이 작성하니 enum 내부에 값 중 하나인지 체크해주고, 리터럴이 아닌 이넘을 자동완성과 함께 사용하며 개발의 용이성을 느낄 수 있었다.

타입 모듈화

타입스크립트에서도 인터페이스나 enum으로 선언한 것들을 별도의 모듈로 구분하고, import 해서 사용하여 폴더를 구조화 하였다.

// types.ts
interface PhoneNumberDictionary {
  [phone: string]: {
    num: number;
  };
}

interface Contact {
  name: string;
  address: string;
  phones: PhoneNumberDictionary;
}

enum PhoneType {
  Home = "home",
  Office = "office",
  Studio = "studio",
}

export { Contact, PhoneType };

사용법은 ES6의 모듈과 개념이 유사하다.

인터페이스와 enum 등을 어떻게 더 상세하게 폴더 구조화할 지는 추후 프로젝트에 적용하며 더 고민해봐야겠다.

reference
타입스크립트 공식 문서
타입스크립트 핸드북
타입스크립트 입문 - 기초부터 실전까지

이정훈

0124

타입스크립트란?

타입스크립트 장점

자바스크립트를 타입스크립트처럼 코딩하는 방법

타입스크립트 설치와 사용

타입스크립트 설정 파일

타입스크립트 플레이그라운드

0125

변수와 함수 타입 정의

기본 타입

String

Number

Boolean

Array

Tuple

Object

Any

Void

함수 타입

파라미터 타입 정의

반환값 타입 정의

옵셔널 파라미터

0126

인터페이스 & 타입 별칭

인터페이스란?

함수에 인터페이스 적용

함수의 스펙을 인터페이스로 정의

인덱싱 방식 정의

딕셔너리 패턴

인터페이스 확장(상속)

타입 별칭

타입 별칭의 특징

type과 interface의 차이점

0127

연산자를 이용한 타입 정의

Union Type

장점

특징

Intersection Type

이넘(Enum)

숫자형 이넘

문자형 이넘

활용

클래스

readonly

Accessor

제네릭

제네릭을 사용하는 이유

인터페이스에 제네릭 선언

타입 제한

제네릭 타입 변수

정의된 타입으로 타입 제한

keyof로 제네릭 타입 제한

0128

전화번호 애플리케이션 실습

tsconfig 설정

알게 된 점

Promise를 이용한 API 함수 타입 정의

Enum 활용

타입 모듈화

0129

최신 브라우저 내부

CPU, GPU, 메모리 그리고 다중 프로세스 아키텍처

CPU

GPU

프로세스와 스레드로 프로그램 실행

브라우저 아키텍처

브라우저 프로세스

렌더러 프로세스

플러그인 프로세스

GPU 프로세스

다중 프로세스 아키텍처라 크롬에 주는 이점

보안과 격리

더 많은 메모리 절약 - 크롬의 서비스화

프레임별로 실행되는 렌더러 프로세스 - 사이트 격리

내비게이션 과정

1단계: 입력 처리

2단계: 내비게이션 시작

3단계: 응답 읽기