[엘리스 SW트랙 6기] 5주차 회고록

들어가기에 앞서

이번 주부터 본격적으로 Node.js와 typescript에 대해 배우게 되었다.

바로 백엔드를 들어간다기 보다는, 최신 ES6 문법과 요즘 필수인 타입스크립트에 대해 배울 수 있어서 좋았다.

개인적으로 일주일 잠깐 배우고 말기에는 중요성이 크다고 생각되어서,

졸업프로젝트에서는 타입스크립트를 중점적으로 사용해서 프로젝트를 진행해볼까 생각 중이다.

새로운 코치님들도 오셔서 수업을 진행해주셨는데, 너무나도 잘 이해되게 설명을 해주셔서 좋았다!

수강생들에게 인기 만점인 코치님이라는데 왜 그런지 이유를 잘 알겠다..😉

 

배운 것

1. Node.js 기초 (ES6 문법) -> 복습 느낌?

2. 타입스크립트 기본 타입과 utility type

3. Class

4. Interface

5. Generic

 

이번 주차는 주로 Typescript에 대해 자세하게 배웠던 한 주였다.

Javascript는 굉장히 유연한 언어이기 때문에, 실행 단계에서 타입이 결정된다.

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

이러한 자바스크립트 코드가 있다고 했을 때, a에 '10', b에 '20'을 할당하더라도,

문제없이 1020이라는 결과값이 반환될 것이다.

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

하지만 타입스크립트로 이렇게 작성된 코드에, a에 '10', b에 '20'을 할당한다면 오류가 발생한다.

함수 선언 단계부터 a와 b의 타입을 number로 명시했기 때문에, string 값들을 할당할 수 없기 때문이다.

이처럼 Typescript는 컴파일 단계에서 타입 에러를 잡아낼 수 있기 때문에, 실수를 방지할 수 있다..!

 

타입스크립트에서 추가되는 기본 type은 Tuple, Enum / Utility type은 Partial, Omit, Pick, ReadOnly 등이 있다.

그리고 객체지향 프로그래밍의 핵심인 Class에 대해서 학습했다.

c++에서 class에 대해 처음 배웠을 때가 생각났다. class는 붕어빵 틀, 인스턴스는 붕어빵 이렇게 이해했었다.

class Person {
  name: string
  
  constructor(name: string) {
    this.name = name
  }
  
  sayHi() {
      console.log(`my name is ${this.name}`)
  }
}

const person = new Person("홍길동");
person.sayHi();
// 홍길동 출력

위 예제의 경우, Person이라는 class를 만들고, 해당 클래스는 name이라는 변수를 가지기 때문에

외부에서 name을 할당해 줄 수 있는 constructor(생성자)를 추가했다.

또한 sayHi() 함수를 통해 현재 클래스가 가지고 있는 this.name이라는 변수를 출력할 수 있는데,

클래스 외부에서 new Person("홍길동")을 통해 person이라는 인스턴스를 만들고,

해당 인스턴스의 sayHi() 함수를 호출해 "홍길동" 이라는 출력을 얻을 수 있다.

 

class Animal {
  public name: string

  constructor(name: string) {
    this.name = name;
  }
  
  makeSound() {
    console.log(this.name + " 왈왈!!")
    }
}

class Dog extends Animal {
  constructor(name: string) {
    super(name);    
  }
  
  makeSound() {
    console.log(this.name + " 멍멍!!")
  }
}

const dog = new Dog("진돗개")
dog.makeSound() // 진돗개 멍멍!! 출력

다음은 접근 제어자와 상속에 관한 예제이다.

접근 제어자란, public/protected/private (각각 어디에서나 접근가능, 상속된 하위클래스만 접근가능, 해당 클래스에서만 접근가능) 등의 키워드들을 이용해 클래스들의 접근을 제어하는 것이다.

해당 예제에서는 public으로 선언되었기 때문에, Animal 클래스의 name 변수는 어디에서나 접근 가능하다.

그리고 extends 키워드를 통해 상속을 구현할 수 있는데, 예제에서는 Animal 클래스를 Dog 클래스가 상속 받았다.

상속받은 자식 클래스에서 생성자를 통해 부모 클래스에서 상속받은 변수에 대해 값을 재할당할 수 있다.

추가로 오버라이딩도 사용할 수 있는데, 자식 클래스에서 부모 클래스와 동일한 이름과 타입을 사용해 함수를 재정의해서 사용할 수 있다. 위 예제에서는 makeSound() 함수가 이에 해당한다.

 

abstract class Animal {
  protected name: string

  constructor(name: string) {
    this.name = name
  }

  abstract makeSound(): void
}

class Dog extends Animal {
    constructor(name: string) {
        super(name);
    }
  makeSound() {
      console.log(`${this.name} 멍멍!!`);
  }
}

const dog = new Dog("진돗개")
dog.makeSound() // 진돗개 멍멍!!

다음은 추상 클래스인데, 추상 클래스에서는 말 그대로 추상적으로 클래스를 정의하는 것이다.

해당 클래스는 인스턴스를 따로 만들 수 없고, 추상 클래스 내에서 선언된 추상 메서드는 구현을 필요로하지 않는다.

추상 클래스를 상속받은 자식 클래스에서는, 추상 클래스에서 선언되었던 추상 메서드를 반드시 구현해야 한다.

 

interface Animal {
  makeSound(): void
}


class Dog implements Animal {
    makeSound(): void {
        console.log('멍멍');
    }
}

const dog = new Dog();
dog.makeSound(); // 멍멍 출력

Interface는 주로 타입 체크에 사용되는데, 함수, 클래스, 변수 등 다양하게 사용될 수 있다.

interface는 class와 다르게 implements라는 키워드를 사용하는데,

해당 Animal interface에서 선언한 makeSound() 함수는 void를 리턴하도록 타입이 정해져있기 때문에,

이를 사용한 Dog 클래스에서 makeSound를 void로 지정해준 것을 확인할 수 있다.

 

class Queue<T> {
  private data: Array<T> = []
  push(item: T) {
      this.data.push(item);
  }
  pop(): T | undefined {
    return this.data.shift();
  }
}

const numberQueue = new Queue<number>()

numberQueue.push(0)
console.log(numberQueue.pop())
// 0 출력

마지막으로 Generic이란, 코드를 작성할 때가 아니라 실행할 때 타입을 명시할 때 사용한다.

해당 클래스에 data 타입을 여러가지 타입으로 만드려면 클래스를 여러개 생성해야 하는 불편함이 있다.

이를 해결하기 위해, 여러가지 type을 할당 가능한 generic type으로 클래스를 정의하여,

인스턴스를 생성할 때 해당 클래스의 타입을 정해줄 수 있다. 이는 c++의 템플릿과 비슷하다.

 

일단은 이번주에 배운 내용이 아주 많은데.. 사실 typescript는 일주일 배워서는 다 익히기 어렵다고 생각한다..

그래도 요즘 typescript를 안 쓰는 기업이 없고, 그만큼 중요하니 나중에라도 꼭 활용해 봐야겠다.

스터디에서는 기능 개발에 들어갔는데, 본격적으로 기능을 넣기 시작하니 너무 재밌다.

프론트엔드를 좋아하는 이유가 눈앞의 변화가 잘 보여서 좋아하는데, 역시 UI 개발보단 기능 개발이 재밌는것 같다.

팀원분들도 너무 잘 따라와 주시고 다들 넘 잘하셔서.. 다음주에 할 게 없을 것 같다..!

농담이고, 진짜 많이 바쁘지만 차근차근 성장해 나가는 나 자신이 자랑스럽다.