[2023.9.8] 아이템 53~62장 퀴즈 제출

[suehdn]

데브코스 4기 프롱이들 이펙티브 타입스크립트 완독하기 🤩

아래 템플릿을 복사해서 퀴즈를 만들어주세요. 객관식, 주관식, 단답형 모두 상관없습니다!

Q. 퀴즈 내용
1.  1번
2.  2번
3.  3번

<details>
<summary>퀴즈 정답</summary>
<div markdown="1">    
정답 설명
</div>
</details>

[leeminhee119]

Q. 다음 코드는 k와 관련된 오류가 발생합니다. 오류가 발생하지 않도록 k의 타입을 구체적으로 명시해주고 for문을 수정해주세요.

const obj = {
   one: 'project',
   two: 'is',
   three: '힘들어~'
}
// 여기에 명시해주세요.
for (const k in obj) {
   const v = obj[k];
}

퀴즈 정답

```typescript const obj = { one: 'project', two: 'is', three: '힘들어~' } let k: keyof typeof obj; for (k in obj) { const v = obj[k]; } ```

[jonghyunlee95]

Q. OX퀴즈

1. 데이터를 확실하게 감추기 위해서는 무조건 private, protected를 사용하여야 한다.
2. 'use strict'는 타입스크립트 컴파일러 수준에서 사용되기 때문에 코드에서 삭제해야 한다.
3. 마이그레이션 단계에서 이상한 설계를 발견했다면 즉시 리팩토링을 진행하여야 한다.

퀴즈 정답

1. X - 데이터를 확실하게 감추기 위해서는 클로저를 사용하여야 한다.
2. O
3. X - 자바스크립트에서 타입스크립트로 마이그레이션을 진행 중 일때는 이상한 설계를 발견하여도
타입스크립트 전환에 집중하고 리팩토링은 이후에 진행하여야 한다.

[GBAJS754]

Q. 해당 오류를 수정할수있는 방법을 알려주세요!

enum Flavor {
  VANILLA = 'vanilla',
  CHOCOLATE = 'chocolate',
  STRAWBERRY = 'strawberry',
}

function scoop(flavor: Flavor) { /* ... */ }

scoop('vanilla') // 'vanilla' 형식은 Flavor 형식의 매개 변수에 할당될 수 없습니다.

퀴즈 정답

scoop(Flavor.VANILLA)
타입스크립트에서는 열거형을 임포트하고 문자열 대신 사용해야합니다.

[juyeon-park]

Q. 빈칸에 들어가야 하는 말을 작성해주세요

마이그레이션을 할 때, 의존성 관계도의 ____에서부터 ____로 올라가며 진행해야 합니다. 대부분의 프로젝트에서
의존성의 최하단에 _____ 종류의 모듈이 위치하는 패턴을 발견할 수 있습니다. 

퀴즈 정답

아래, 위, 유틸리티

[suehdn]

Q. 아래의 js코드를 ts를 이용해 클래스로 변경하려 합니다. 빈칸을 채워주세요! JS

function dev(front, back) {
  this.front = front;
  this.back = back;
}

dev.prototype.getLang = function () {
  return "front: " + this.front + ", back: " + this.back;
};

const we = new dev("JavaScript", "Java");
console.log(we.getLang());

TS

class Dev {
  (1)

  constructor(front: (2), back: (3)) {
    this.front = front;
    this.back = back;
  }

  (4){
    return "front: " + this.front + ", back: " + this.back;
  }
}

const we = new Dev("JavaScript", "Java");
console.log(we.getLang());

퀴즈 정답

1.
front: string;
back: string;
2. string
3. string
4. getLang()

[eeseung]

Q. 다음 코드에서 발생한 오류를 고쳐주세요.

function handleDrag(eDown: Event) {
  const dragStart = [eDown.clientX, eDown.clientY];
  // 'Event'에 'clientX' 속성이 없습니다.
  // 'Event'에 'clientY' 속성이 없습니다.
}

퀴즈 정답

```typescript function handleDrag(el: HTMLElement) { el.addEventListener('mousedown', eDown => { const dragStart = [eDown.clientX, eDown.clientY]; }) } ``` clientX와 clientY는 Event보다 구체적인 MouseEvent 타입입니다. `mousedown` 이벤트 핸들러를 인라인 함수로 만들어 더 많은 문맥 정보를 사용해 오류를 고칠 수 있습니다.

[jonghyunlee95]

민희님 문제

let k: keyof typeof obj
for (k in obj) {
  ...
}

다은님 문제

scoop(Flavor.VANILLA);

주연님 문제

아래, 위, 유틸리티

혜수님 문제

1) front: string; back: string; 2) string 3) string 4) getLeng()

승희님 문제

function handleDrag(e: HTMLElement) {
  e.addEventListener('mousedown', eDown => {
    const dragStart = [eDown.clientX, eDown.clientY];
  })
}

[juyeon-park]

민희님 퀴즈

const k: keyof typeof obj;

종현님 퀴즈

xox

다은님 퀴즈

scoop(Flavor.VANILLA)

혜수님 퀴즈

1. let front: string; let back: string;
2. string
3. string
4. getLang()

승희님 퀴즈

addEventListener 추가...?

[suehdn]

민희님

let k: keyof typeof obj;

종현님

XOX

다은님

scoop(Flavor.VANILLA)

주연님

아래, 위, 유틸리티

승희님

function handleDrag(event: HTMLElement) {
  event.addEventListener('mousedown', eDown => {
    ...
  })
}

[leeminhee119]

종현님 문제

1. x
2. o
3. x

다은님 문제 let flavor: Flavor = 'vanilla' scoop(flavor)

scoop(Flavor.VANILLA)

주연님 문제 최하단, 최상단, 유틸리티

혜수님 문제 (1) front: string; back: string; (2) string (3) string (4) getLang()

승희님 문제 eDown: MouseEvent

[eeseung]

민희님 퀴즈

let k: keyof typeof obj;

종현님 퀴즈

1. X
2. O
3. X

다은님 퀴즈 scoop(Flavor.VANILLA);

주연님 퀴즈 아래, 위, 유틸리티

혜수님 퀴즈 (1) front: string; back: string; (2) string (3) string (4) getLang()