[레벨1 - 미션1] 2단계 자동차 게임 피드백

[미션1] 2단계 자동차 게임 PR

---

• 처음으로 리뷰어님께 코드에 대한 리뷰룰 받고 리팩토링을 진행해봤습니다.

• 이게 맞나? 늘 확신없이 코딩을 했었는데 현직 개발자분께서 리뷰를 해주시니 자신감이 샘 솓았습니다.

💪HTML

웹 표준 지키기

• 웹 표준을 지키면 기계(크롤링봇, 검색엔진)가 우리가 만든 웹 페이지를 좀 더 잘 이해할 수 있어요.

태그의 사용 가이드 준수하기

• semantic 태그에도 사용법이 다 있어요.
• : 일반 구획 요소 - HTML: Hypertext Markup Language | MDN (mozilla.org)

하나의 '문서'로 생각하기

• [참고 링크]
  • HTML5 Outliner, HeadingsMap
  • 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?

💪JS

DOM 구조에 의존하지 않기

• target.parentElement같은 상대적인 위치를 사용하지 맙시다.

타입 검증하기

• JS는 의도했던 타입이 맞는 지부터 검증해야 안전하게 개발할 수 있습니다.
  • 문자열인지, 숫자인지...
• 다양한 '잘못된 입력값'을 나눠보기

인스턴스마다 필요한 데이터가 맞을까

• 꼭 필요한 데이터들만 만들고 가져옵시다.

냅다 콜백 함수?

$('some-query').addEventListener('submit', () => {
    someFunc();
});

// 위 아래의 차이점은?

$('some-query').addEventListener('submit', someFunc);

• 이벤트 리스너를 필요에 따라 제거할 수 있어야 합니다.
• 위의 함수는 콜백함수여서 이름이 존재하지 않습니다. removeEventListener를 할 방법이 없어요.

스코프 생각하기

• 내가 쓴 코드의 스코프(scope) 생각해보기
• 호이스팅(Hoisting)
• var , 함수 선언형 은 선언문이 아래있어도 일단 undefined로 생성이 되는 느낌! 👉 선언되는 영역이 Global(Window)입니다.
• let , const 는 Local 입닌다.
• 디버거를 이용해서 확인해볼 수 있어요.

이벤트 루프

• Call Stack, Web API, Memory Heap, Task Queue에 대해서 잘 알아봅시다!

💪클린 코드 연습

일관성 지키기

• 틀려도 괜찮으니 상수/함수/변수 네이밍, 구현하는 방식 등에서 일관성을 지킵시다.
• 일관성있는 똥💩은 개선하기 더 편하답니다.

💪Test

DOM 구조에 의존하지 않기

• 아무튼 DOM 구조에 의존하지 마세요.
• 직접 선택자로 선택합시다.

Cypress clock, tick, wait

• cy.clock() + cy.tick()
• cy.wait()

각각의 테스트 케이스는 서로 독립적이어야 합니다.

• 사용한 리소스 잘 돌려 놓아야 해요.

  beforeEach(() => {
    cy.clock();
    cy.visit("index.html");
  });

  afterEach(() => {
    cy.clock().then((clock) => {
      clock.restore();
    });
  });

• 물론 clock은 자동으로 리소스를 반환하긴 합니다만 신경써줍시다!

---

💪리뷰어님의 피드백

• 콜백지옥을 피하기 위해 async/await에 대해 학습합시다.
  • 이해가 어려운 부분이니 반복 학습해봐요!
• MVC 패턴을 지킬 수 있도록 합시다. (캡슐화에 대해 공부하세요)
• Git에 대해 공부해봅시다. (Conflict가 발생한 이유에 대해 고민해봐요.)
• 확률에 의존하는 테스트를 작성하지 맙시다.
• Promise를 반환하는 setTimeout, setInterval 유틸 함수로 만들어 봅시다.
• Promise 내에서 resolve를 반환하도록 합시다. (단계가 깊어져 Promise 외부에서 resolve를 하지 않도록 주의합시다.)
• forEach의 주체가 되는 배열을 forEach내부에서 변환하지 맙시다.