[TDL] 08/08 Today's-Done-List

- 알고리즘 leetcode 연결 리스트 1문제

아직도 연결 리스트라니...
하루에 적어도 한 문제씩 풀 수 있도록 노력하자! 

---

-  드림 코딩 TS 강의

클래스 생성자 함수 안에 속성?을 설정할 때 클래스 멤버 변수를 지우게 될 경우, type error가 발생한다.

무슨 말이냐면, 자바스크립트의 경우에는 아래와 같이 작성해도 에러가 나지 않지만,

class GoodGreeter {   
  constructor() {
    this.name = "hello";
  }
}

타입 스크립트의 경우에는 name property가 존재하지 않는다는 에러가 나타나는 것을 볼 수 있다.

그  이유는 타입 스크립트 이므로 지정해주지 않아서 당연히 에러가 나는 것.
따라서 타입 스크립트에서는 아래와 같이 타입 지정을 해주어야 한다.

class GoodGreeter {
  name: string;
   
  constructor() {
    this.name = "hello";
  }
}

---

Getter

생성자 함수에 fullname을 저렇게 넣는다면, 변수 user를 재사용할 방법이 없다.
생성자에 넣은 이름들은 외부에서 변경이 불가능하기 때문임.
그렇기에 getter를 이용해서 재사용성을 할 수 있는 코드로 변환시켜보자. 

class User {
    firstName: string;
    lastName: string;
    fullName: string;
    
    constructor(firstName: string, lastName: string) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.fullName = `${firstName} ${lastName}`;
    }
}

const user = new User("Amy", "Kim");
console.log(user.fullName); // Amy Kim

접근(출력)할 땐 fullName인 함수가 아니라, 멤버 변수에 접근하는 것처럼 firstName 또는 lastName에 접근해야 함.

class User {
    firstName: string;
    lastName: string;
    get fullName(): string {
        return `${this.firstName} ${this.lastName}`;
    }

    constructor(firstName: string, lastName: string) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
}

const user = new User("Amy", "Kim");
console.log(user.fullName); // Amy Kim
user.firstName = "Jason";
console.log(user.fullName); // Jason Kim

---

이렇게 하고, 프로퍼티와 생성자 함수 내부를 간결하게 작성하기 위해 리팩터링을 하였음.

class User {
    get fullName(): string {
        return `${this.firstName} ${this.lastName}`;
    }

    constructor(private firstName: string, private lastName: string) {
    }
}

const user = new User("Amy", "Kim");
console.log(user.fullName); // Amy Kim

user.fullName = "" // Cannot assign to 'fullName' because it is a read-only property

---

Setter

이후, fullName을 다시 변경하려고 하니깐 getter밖에 없어서 에러가 발생하였다. setter를 넣어주자.
setter에는 파라미터를 한 개만 넣을  수 있기에, 두 개의 setter를 만들어주었음.
(error : A 'set' accessor must have exactly one parameter)

class User {
    get fullName(): string {
        return `${this.firstName} ${this.lastName}`;
    }
    set fristFullName(first: string) {
        this.firstName = first;
    }
    set lastFullName(last: string) {
        this.lastName = last;
    }

    constructor(private firstName: string, private lastName: string) {}
}

const user = new User("Amy", "Kim");
console.log(user.fullName);        // Amy Kim
user.fristFullName = "jason";
user.lastFullName = "park";
console.log(user.fullName);        // jason park
console.log(user);                 // User { firstName: 'jason', lastName: 'park' }

---

오후 회고 (만족도: 6)

초반에 집중이 잘 안 돼서 집중을 못했다. 프리온 보딩 챌린지를 듣고 있었는데,
zoom 인원을 늘려서 방을 다시 만든다 해서 나갔는데, 결국 인원 늘리는 걸 실패해서 기존에 보고 있던 나는 다시 만든 방에 못 들어갔다;; 황당해 부려... 그 뒤로 약간 의욕을 상실함.. 어쩔 수없지 이따 밤에 녹화본으로 보자.

이번 주 동안은 저녁 회고 스터디 전에 ts, react를 마무리할 수 있도록 노력해보자.

---

- 드림 코딩 REACT 강의

youtube api 활용 간단한 프로젝트

---

저녁 회고 (만족도: 6)

엄청난  폭우가 와서 관련 뉴스 조금 보는 거 제외하고는 모두 집중했다.
youtube api를 사용해서 비디오 정보 불러오는 것 구현하는 중인데, 기존의 api와는 조금 다른 부분들이 있어서 데이터 처리하는데 생각보다 오래 걸렸고, fetch함수에서 axios로 변경 후 비동기 처리해주는 것에서도 조금 애먹었다ㅠ
아직도 이런곳에서 애먹다니.. 흙흙 분발해라!

---