[레벨1 - 미션4] 1단계 자판기 미션 피드백

레벨1 자판기 미션 1단계 PR

Typescript를 처음으로 사용해보았습니다.

굉장히 어렵고 엄청 많은 곳에서 빨간색 밑줄이 뜨더라구요.

여태까지 JS로 개발하면서 "에러 처리를 많이 놓치고 있었구나😢" 느낄 수 있었습니다.

Typescript의 필요성을 엄청 느꼈습니다.

앞으로 공부해야할 산🗻이 하나 더 생긴 느낌인데 그래도 Type narrowing해가는 과정이 재미있어서 좋았어요.

피드백을 살펴보러갑시다!

💪 JS

forEach

• Throw / Return 차이를 압시다.

forEach문 내부 return true, false는 continue를 의미합니다.

forEach문 내부 강제 break는 없어요.

대신 방법이 3가지 있어요.

1. try catch문 안에서 forEach를 돌리고, 강제 throw에러로 루프를 벗어나는 방법

2. Array.some() 메소드를 쓰는 방법

   • return true: break
   • return false: continue

3. Array.every() 메소드를 쓰는 방법

   • return true: continue
   • return false: break

Object.prototype.hasOwnProperty.call() vs hasOwnProperty()

1) 기본 hasOwnProperty()는 프로토타입 체인은 확인하지 않고, 해당 객체가 스스로 정의한 프로퍼티만을 판단해요.

obj.b = 2;
Object.prototype.c = 3;
obj.b; // 2
obj.c; // 3

obj.hasOwnProperty("b"); // true
obj.hasOwnProperty("c"); // false

"나는 프로토타입 체인을 통해 추가적인 프로퍼티를 만들지 않았고, 추후에도 그럴 예정이 없어. 확실해" 👉 괜찮을까요?

const obj = {
  a: 1,
  b: 2,
  c: 3
};
const copy = {};

let sum = 0;
for (let key in obj) {
  sum += copy[key] = obj[key] * 2;
}

겉으로는 안전한 코드일지라도, 미래를 대비하지 못하는 코드예요.

👇 만약 아래와 같은 코드가 추가되면 어떻게 될까요? 에러가 발생할 거예요.

Object.prototype.toText = function() {...}

코드의 실행 환경 또는 prototype 접근 및 확장 여부와 같은 것들을 스스로 가정하면 안됩니다.

👇 아래처럼 해줘야 진짜 obj 내부의 key값들만 가져올 수 있겠죠?

for (let key in obj) {
  if (obj.hasOwnProperty(key)) { // 프로퍼티로 정의한 친구들은 제외!
    sum += copy[key] = obj[key] * 2;
  }
}

🤔 만약 프로퍼티로 정의된 친구들도 접근하기를 의도한 상황이라면 Object.prototype.hasOwnProperty.call()를 사용할 수도 있겠네요.

결론: 예기치 못한 상황에 따른 버그 대비, 코드의 가독성 향상을 위해 hasOwnProperty를 기본적으로 고려하자!

Deep Copy vs Object Shape of One Depth

• 이번 미션에서는 Deep Copy를 구현했어요.

하지만 애초에 객체의 깊이를 1단계로 유지하려는 설계도 고려해봅시다.

👉 왜냐하면, 성능 문제 (Deep Copy를 하는 과정 자체가 비쌉니다.)

💪 TS

우리는 어떻게 사용해봤을까?

• Lv1. Document for TS
• Lv2. Interface for TS
• Lv3. Safety Application for TS

TS를 쓰는 이유는 알다시피 Lv3으로 가야 알 수 있죠.

❓ 왜 자꾸 빡빡하게 가려고 하나요?

한 마디로 유저의 입력값을 믿을 수 없을 수 없거든요.

never 고려

함수의 리턴 값을 : void로 한 사람들이 많아요. (일단 나부터..)

Never를 고려해보세요!

void는 null 혹은 undefined 값의 반환을 허용
never는 허용하지 않아요.

overload

overloads로 사용하거나 객체로 사용해봅시다.

import type

타입스크립트 타입을 밖으로 명시해주면서 사용해줍시다. (type.ts를 만들어서 관리해줍시다!)

네이밍 컨벤션

T, I Prefix

• 타입은 T
• 인터페이스는 I를 붙였네요.

하지만 마소는 쓰지 말래요 + 우리 코치들도 쓰는걸 반대하네요!
네이밍에 대한 판단은 본인이 직접 느껴봐야할 것 같아요.

타입 재활용하기

타입은 재활용합시다.

any 순차적 지양하기

any만 쓴다면 javascript를 쓰는거와 다름이 없어요.

함수의 생김새도 기술하자

인자, return type에 대한 생김새를 기술해줍시다.

반환 타입이 없다면 의심해보기

반환 타입이 없는 void()의 경우 한 가지 역할을 하지 않는 경우가 대부분입니다.

❗ 과연 당신의 함수,메서드는 한 가지 일만 하고 있나요?

Generic 타입 좁히기

❗ 타입 스크립트를 썼으면 메서드 내부에서 수많은 검증이 사라져야합니다!

제너릭 : 매개변수를 동적으로 받는 느낌

• <E extends Element>

💪 리뷰어님의 피드백

이번 피드백은 크게 3가지였어요.

1. 네이밍

2. 라우터에서 라우팅의 기능을 다하자(마운트를 여기서 해주자)

3. 불필요한 state를 만들지 말자

함수 네이밍

• 함수나 메서드는 동사형이나 명령형을 시작합시다!
  moneyToCoin 보다는 converMoneyToCoin 이 낫겠죠~