[레벨1 - 미션4] 자판기 기억에 남는 피드백

레벨1 마지막 미션

크루들은 어떻게 개발했나 살펴볼까요?

👍 protected 사용

private과 비슷하긴 합니다.

자손 클래스에서도 접근이 가능하다는 점이 다릅니다.

👍 interface도 분리

인터페이스나 타입도 복잡해지면 분리할 생각을 합시다.

👍 미리 타입을 선언하는 멤버함수

export interface ProductInterface extends ProductType {
  getName(): string;
  getPrice(): number;
  getQuantity(): number;

  decreaseQuantity(): void;
}

class 작성 시 멤버함수들의 타입을 미리 작성해두는 크루를 봤어요. 괜찮은 것 같아요!

👍 API 처리하기

export const requestLogin = async (email: string, password: string) => {
  const response = await request(
    '/login',
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email,
        password,
      }),
    },
    true,
  );

👆 API를 가져오는 부분은 아예 따로 빼버립시다.

interface IRequest {
  status: 'success' | 'fail';
  content: any;
}
const { status, content }: IRequest = await requestLogin(email, password);

👆 구조분해할당으로 가져와서 처리합시다. depth가 덜 깊어질 것 같아요.

👍 TS에서의 $ 유틸함수

export const $ = (selector, node: HTMLElement | DocumentFragment = document.body) =>
  node.querySelector(selector);

👍 매개변수가 3개 이상일 경우

export const generateItemPurchaseContentTemplate = (moneyAmount, itemList, change) => `

❗ 매개 변수가 3개 이상일 경우, 객체로 받는 것이 실수 방지할 수 있습니다.

👍 커링인가요?

const postServer = (baseUrl) => (path) => async (bodyData) => {
	...
}

👍 router를 객체로

 this.router = {
      [HASH.PRODUCT_MANAGEMENT]: () => {
        this.productModerator.init();
      },
      [HASH.CHARGE_CHANGES]: () => {
        this.changesModerator.init();
      },
      [HASH.PRODUCT_PURCHASE]: () => {
        this.purchaseModerator.init();
      },
      [HASH.SIGNUP]: () => {
        this.signUpModerator.init();
      },
      [HASH.LOGIN]: () => {
        this.loginModerator.init();
      },
      [HASH.USER_INFO]: () => {
        this.userInfoModerator.init();
      },
    };

this.router[hash]
      ? this.router[hash]()
      : this.router[HASH.PRODUCT_PURCHASE]();

인상적입니다!!
저는 switch문을 사용해서 많은 분기들을 거쳐가면서 라우팅이 되었는데요,
이런 식으로 객체 프로퍼티의 유무로 접근을 한다면 접근 속도가 더 빨라질 것 같다는 생각이 드네요.

👍 CustomEvent

const pushStateEvent = new CustomEvent('pushstate', {
    detail: { state },
  });

  window.history.pushState(state, '', href);
  dispatchEvent(pushStateEvent);

그냥 Event 객체와는 다르게 데이터를 전달할 수 있습니다.

👍 네이밍은 진짜 다양해...

1. 변수 이름에는 동사를 넣지 않는다
2. 변수의 단수형에는 관사를 넣지 않는다.
3. 전치사는 최대한 생략한다

하지만 동사나 명령형으로 네이밍을 하라는 리뷰어님도 계세요.

어떻게 하라고~

네이밍을 어떻게든 해보고 더 알맞다고 생각되는 방식을 채택해야겠네요..!