레벨1 - 점심 뭐 먹지 피드백

 

1. 파일 네이밍을 할 때 2 depth가 같은 네이밍이 들어가는 경우를 지양하자

파일과 디렉터리의 이름이 같으면 모호성이 생겨 개발자가 프로젝트를 탐색하기가 더 어려워질 수 있다.  "type.ts"라는 파일이 "type"이라는 디렉터리에 존재하는 경우, 파일이 "type" 디렉터리에서 사용되도록 의도된 것인지 아니면 별도의 엔티티인지 명확하지 않게 된다. 혼란을 방지하고 프로젝트 내에서 파일을 더 쉽게 찾을 수 있도록 하기 위해 같은 네이밍은 지양하자. 

 

2. Type 강제

as로 타입을 강제하는 것은 좋지 않다. 타입스크립트에게 '내가 더 잘 알아!'하고 강제하는 행위에 가깝다. 이는 타입스크립트의 보급과 개발자의 유연한 상황 그리고 런타임 환경 대응을 위해 일부 불건전한 타입 선언을 허용하는 경우라고 보면 된다. 타입이 터질 때 타입만 고려하는 것이 아니라 내가 작성한 코드 자체가 문제가 있지 않은지 확인하는 것이 중요하다. 

 

3. TypeScript에서 Object.freeze 대체

TypeScript에서는 Object.freeze 대신 ReadOnly를 사용할 수 있다. ReadOnly의 경우 객체의 타입까지 정할 수 있어 내부 불변성을 보장하기 좋다. 따라서 개체 또는 배열의 속성이 실수로 변경되거나 수정되는 것을 방지할 수 있다. 

 

4. Event Target 상용화

const selectedOption = select.options[select.selectedIndex];

 

이 경우 selectedIndex 값이 유효하지 않으면 작동이 안 될 위험이 있다. 따라서 event Target을 통해 접근하는 것이 더 바람직하다.

 

5. 불필요한 CSS 클래스 사용 지양

굳이 클래스를 지정할 필요가 없다면 하지 않는 것이 좋다. 요소 선택자를 통해 접근할 수 있으면 이를 사용하자. 

 

6. 자식 요소 제거

innerHTML = '' 로 자식 요소를 제거하는 것은 큰 연산이 드는 초기화 방법이다. while문을 사용해 removeChild를 하나씩 해주면서 자식 요소를 제거하자. 아래 링크는 두 자식 요소 제거 방법의 차이점을 작성한 글이다.

 

GitHub - hae-on/woowacourse: 💙 우아한 테크코스 기록 저장소 💙

 

7. type 전용 import

import 할 때 type의 경우 앞에 type을 명시해 줄 수 있다. import 한 목록 중 type을 손쉽게 찾을 수 있다.

 

Documentation - TypeScript 3.8

 

8. 요소를 배열에 넣고 forEach

$(".item-sheet--close")?.addEventListener("click", () => {
      this.closeSheet();
    });
$(".item-sheet-backdrop")?.addEventListener("click", () => {
      this.closeSheet();
    });

 

각 요소를 클릭했을 때 sheet를 닫는 동작을 한다. 요소만 다를 뿐 반복되는 것을 알 수 있다. 요소를 배열에 넣고 forEach를 하면 아래와 같이 간단하게 줄일 수 있다.

 

const itemSheetElements = [$(".item-sheet--close"), $(".item-sheet-backdrop")];

itemSheetElements.forEach((itemSheetElement) => itemSheetElement?.addEventListener("click", () => {
  this.closeSheet();
}))