Archive

Typescript Day 04 - 클래스

|

Typescript Day 04 - 클래스


클래스

타입스크립트는 C++, Java와 같은 객체지향 언어에서 흔히 볼 수 있는 클래스 관련 키워드를 제공한다

클래스 선언문의 기본 형태

class 클래스명 {
    [private | protected | public] 속성명[?]: 속성타입[...]
}

접근제한자를 생략하면 일반적으로 public으로 간주한다

접근제한자

  • private : 클래스 내부에서만 접근 가능
  • protected : 상속했을 때 접근 가능

둘다 인스턴스로 외부에서 호출 시 에러 발생


생성자

생성자에 접근제한자를 붙이면 함축된 표현이 가능하다

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

// 함축된 표현
class test2 {
    constructor(public name: string, public age?: number) {}
}


인터페이스 구현

implements 키워드로 인터페이스를 구현할 수 있다.

클래스 바디에는 반드시 인터페이스의 속성을 멤버로 가져야 한다.

interface IPerson {
    name: string;
    age?: number;
}

class test3 implements IPerson {
    constructor(public name: string, public age?: number) {}
}


추상 클래스

abstract 키워드를 통해 추상 클래스를 만들 수 있다.

메서드나 속성 앞에 abstract를 붙이면 이를 상속하는 다른 클래스에서 반드시 구현해야한다.

추상 클래스는 인스턴스화 할 수 없다.

abstract class AbstractPerson {
    abstract name: string;
    abstract move(): void;
    constructor(public age?: number){}
}

class Human extends AbstractPerson {
    constructor(public name: string, public age?: number) {
        super(age);
    }
    
    move(): void {
        console.log('walking');
    }
}

let jack: AbstractPerson = new AbstractPerson(); // 오류
let jack: Human = new Human('jack', 32);
jack.move();


상속

상속을 통하여 이미 존재하는 클래스를 확장해 새 클래스를 만들 수 있다.

class Animal {
    move(): void {
        console.log('walking');
    }
}

class Dog extends Animal {
    bark(): void {
        console.log('wal wal');
    }
}

const dog: Dog = new Dog();
dog.move(); // walking
dog.bark(); // wal wal


Read-only

readonly 키워드를 통해 읽기전용 속성을 선언할 수 있다. readonly 속성은 선언 시 또는 생성자 내부에서만 값을 할당할 수 있다. 그 외의 경우에는 값 할당 시 오류 발생.

이를 이용하여 상수의 선언에 사용한다.

class Foo {
    readonly name: string = 'jack';
    readonly age: number;
    constructor(readonly age: number = 30) {}
}


static

클래스의 인스턴스를 생성하지 않아도 호출할 수 있다.

class A {
    static value = 5;
    static cal() {
        // 정적 메소드는 this를 사용할 수 없다.
        // 정적 메소드 내부에서 this는 클래스의 인스턴스가 아닌
        // 클래스 자신을 가리킨다.
        return 'cal';
    }
}

console.log(A.value); // 5
console.log(A.cal()); // cal

const AA = new A();
AA.cal(); // 타입 오류, 정적 메소드는 인스턴스로 호출할 수 없다

참고 자료


Do it 타입스크립트 프로그래밍

Typescript-Handbook

2021-06-01 TIL

|

2021-06-01 TIL


  • 오늘 한 것

    1. 짤해 프로젝트 상세페이지 작성, 카드 액션 추가 - 무한스크롤 테스트를 하다가 하루 할당 쿼리문을 다 써버려서 429 에러가 뜨는 사태가 발생했다. 더미데이터를 넣어서 하는 방법도 있었지만 그러려면 꽤나 많이 수정을 봐야한다. 일단 무한스크롤은 제쳐두고 상세페이지를 작성했다. 랜딩 페이지의 카드를 클릭하면 상세페이지로 이동하는데 이동할때 카드에 대한 데이터를 물고 넘어가야했다. 이미지 url 같은 경우는 파라미터로 넘길 수가 없어서 찾아보다가 react router의 location의 옵션인 state에 넣어서 보내는 방법을 알았다. 또, 카드 액션으로 찜하기, 편집하기, SNS공유하기 기능을 넣을 예정인데 우선은 이벤트만 걸어놓았다. 내일 상세 페이지를 완벽하게 끝내고 하나씩 순차적으로 시작해야겠다.

    2. 타입스크립트 이론 정리 - 클래스와 함수에서의 타입스크립트 사용법에 대해 공부하고 정리했다.

    3. 리액트 tutorial 프로젝트 - 해외 리액트 강의를 결제해놓고 수강을 미루고 있다가 그 강좌의 tutorial 프로젝트에 쓸만한게 많아서 시간이 날때마다 하나씩 만들예정이다.


  • 내일 할 것
    1. 타입스크립트 이론 정리
    2. 짤해 프로젝트 - 상세페이지 완성, 찜하기, 다운로드기능, SNS공유 기능
    3. 리액트 tutorial 프로젝트



  • 끝으로

무한스크롤이 생각처럼 잘 되지 않는다. 페이지의 끝에 스크롤이 도달하면 axios 요청 메소드가 호출되어야하는데 스크롤을 하지 않아도 마구잡이로 요청이 되어버린다. 이 부분은 조금 더 연구를 해보고 정 안되면 버튼을 만들어서 해결해야겠다..

오늘의 한 줄 총평 : 쉽지가 않아


react-router-dom 페이지 이동시 props 전달하기

|

e.stopPropagation() vs e.preventDefault() 이해하기

|

2021-05-31 TIL

|

2021-05-31 TIL


  • 오늘 한 것

    1. 짤해 프로젝트 lazy load, spinner - lazy load 구현을 위해 React 내장 유틸인 lazy와 Suspense를 사용했다. 기존에 카드 컴포넌트를 Suspense 컴포넌트로 감싸고 카드 이미지 컴포넌트를 하나 더 만들어서 이를 카드 컴포넌트에서 lazy 메소드를 이용해 import를 해서 사용했다. Suspense 컴포넌트의 fallback으로 spinner를 보여주도록 하였다.

    2. 짤해 프로젝트 auto complete - ant design의 AutoComplete 컴포넌트를 이용해 검색어 자동완성을 구현했다. AutoComplete의 option datasource는 util 폴더에 따로 파일을 빼서 작성했다. 수 많은 검색어를 모두 이 곳에 작성해야하는걸까? 그건 너무 비효율적이다. 주소나 지명 같은 데이터는 오픈소스 데이터를 받아서 사용할 수 있지만, 한글로 된 검색어 자동완성 데이터는 도대체 어디서 나오는걸까..

    3. 짤해 프로젝트 infinite scroll - react-virtualized 패키지를 이용해 이를 구현하려했으나, 현재 나의 레벨로는 이 패키지의 사용법을 이해할 수 없었다. 그렇다고 scroll event를 걸어서 DOM에 접근하는 방식은 하기 싫었다. 찾아보던 중 javascript에서 지원하는 IntersectionObserver라는 것을 알게 되었다. 타겟의 상위 엘리먼트와 뷰포트가 교차되는 부분을 비동기적으로 관찰하는 녀석인데, scroll event는 스크롤시 매번 함수를 호출해서 비효율적인 반면, 옵저버는 호출 수를 제한하고 reflow를 하지 않는 등 성능면에서 훨씬 뛰어나다. 다만 이를 react에 어떻게 적용시킬 것인가에 대해서 계속 삽질하며 어찌어찌 구현했다만, google custom search api의 하루 요청 할당량을 초과하고 말았다…. 24시간 후에 계속


  • 내일 할 것
    1. 타입스크립트 이론 정리
    2. 짤해 프로젝트 - 상세페이지 작성, 카드 액션 추가
    3. 리액트 tutorial 프로젝트



  • 끝으로

6월은 더욱 빡세게 살아보자

오늘의 한 줄 총평 : 지금까지 사놓은 책, 강의 전부 다 보기