[미션1] 1단계 자동차 게임 피드백
첫 피드백
- 태어나 처음으로 제가 쓴 코드를 누군가에게 피드백을 받는거라 많이 떨리고 부끄러웠어요..
하지만, 부끄럽다고 리뷰어(시니어)의 모든 말을 맹신하지마세요.
-
코드 리뷰도 수용할 수 있는 부분만 걸러서 들어봅시다.
-
리뷰어의 생각이 절대적으로 맞는게 아닙니다.
-
의문이 들면 계속 물고 늘어지세요!
👍함수 이름을 고려해서 작성해요. (네이밍)
-
prefix가 is, should, can으로 시작하면 true,false를 반환할 것이라고 예상할 수 있어요. -
prefix가 set으로 시작하면 getter/setter의 개념이 섞여서 생각될 수 있어요. -
나만 이렇게 이름을 짓나?
- grep.app 에서 검색해보세요.
👍파일 이름도 고려해서 작성해요.
-
파일 이름과 내부 함수의 이름이 같을 경우가 별로 없어요.
-
파일 하나에 다양한 함수가 존재할 확률이 높으므로 범용성 있게 파일 이름을 작성해야합니다.
👍innerHTML은 XSS 공격에 취약합니다.
-
innerHTML대신 insertAdjacentHTML를 사용하도록 합시다.
-
innerHTML보다 원하는 위치도 선택할 수 있고, 굉장히 유용해요.
👍JS API를 많이 활용합시다.
-
map, reduce, repeat, filter, some, every등 다양한 함수들이 있고 사용하면 코드가 간결해질 거예요. -
고차함수는 다른 포스트로 따로 정리할 예정입니다!
👍매직 넘버를 없앱시다.
- 간단한 숫자 하나라도 후에 리팩토링이나 유지보수를 위해
따로 상수로 분리합시다.
👍DOM의 클래스, id도 미리 constants로 빼둡시다.
- 미리 constants로 빼서 사용하면 html파일을 왔다 갔다 안 해도
자동 완성을 통해 쉽게 원하는 DOM을 가져오거나 작업을 할 수 있어요.
👍Button 에도 type을 달아주세요.
<button type="submit"> 확인 </button>- 이런 식으로 작성하면 제출하기라는 의도 명백히 드러나는 버튼이 됩니다.
👍테스트는 여러 개로 분리하세요.
- describe를 통해 공통된 로직을 포함하는 테스트들을 따로 모으세요.
- 코드의 반복을 훨씬 줄일 수 있습니다.
👍게임 다시 시작할 때 인스턴스를 새로 생성하기 보다는 초기화 해봅시다.
- 물론 Garbage Collection의 대상이 될 가능성이 높지만, 만약 이를 참조하는 다른 변수가 존재하면 위험할 수도 있을 것 같아요.
👍class의 의미 생각해보기
-
static은 인스턴스 생성을 안해도 함수를 사용할 수 있도록 해줍니다. -
어떤 클래스가 static한 함수들만 존재한다면 굳이 클래스로 안해도 되고 객체로 작성합시다.
-
JS에서는 클래스가 필수는 아니예요.
예를 들면, Validator를 클래스로 만들었는데 static만 쓴다면..
굳이 클래스를 쓸 이유가 있을까요? 차라리 객체가 나을 것 같아요!👍section과 article 같은 시맨틱 태그들도 사용해봐요.
-
확실히 의미가 있고 아마 SEO에도 좋을 것 같아요.
-
브라우저 호환성은
[caniuse.com](http://caniuse.com)에서 확인해볼 수 있어요.
👍클래스 내부에서만 쓰이는 private method는 #으로 접근지정자를 사용해줍시다.
- 그러면 코드로 보기에도 어느 역할을 하는지 보기 편할 것 같아요.
👍스타일은 CSS에 맡기기
<!-- 비추입니다!🤦🤦🤦 -->
$('.race-count-input-container').style.display = 'flex'; // CSS에 양보하세요~
.race-count-input-container {
display: flex
}js + css 조합을 사용하세요.
- 클래스의 이름을 js로
붙이기 / 떼기 - js로 변하는 클래스 이름으로 CSS 작성하는 것이 더 일반적입니다!
👍E2E의 테스트 명세는 좀 더 사용자에 가깝게
-
alert이 호출되어야 한다.🤦🤦🤦 -
잘못된 자동차 이름을 입력하면 에러 메시지를 확인할 수 있어야한다.🙆🙆🙆
👍어떤 걸 테스트 해야 할까?
- 경곗값을 기준으로 작성합니다.
- 예를 들어 자동차 이름이 1글자 ~ 5글자 이여야 한다면
- 1글자일 때
- 5글자일 때
- 1글자보다 작을 때
- 5글자보다 클 때
- 1~5는 굳이 안해도 됩니다. 🤦🤦🤦👍EOF / EOL 설정을 확인해봅시다!
- 항상 확인해줘야 합니다.
👍package.json을 체크해봅시다.
- 필요없는건 지워주세요.
