[레벨1 - 미션1] 자동차 게임 인상 깊었던 피드백

🧐인상적인 피드백

• 다 읽진 못해도 많은 크루들의 코드와 피드백들을 읽어봤는데요,
• 그 중에서 인상 깊은 피드백과 코딩 스타일들을 모아봤어요.

---

Object.freeze() , 객체 꼼짝마🥶

export const ERROR_MESSAGE = Object.freeze({
  CAR_NAME_MULTIPLE_INPUT: '자동차 이름을 최소 2개 이상 입력해주세요.',
  CAR_NAME_LENGTH_RANGE: `자동차 이름은 1~5자까지 입력할 수 있습니다.`,
  CAR_NAME_UNIQUE: '자동차 이름은 중복으로 입력할 수 없습니다.',
  RACE_TIME_ONLY_NUMBER: '시도 횟수는 1 이상의 숫자만 입력할 수 있습니다.',
});

• Object.freeze가 왜 쓰는지 이해를 못했었는데 이번 주 JS Data Type을 공부하고 이해가 갑니다.
• 객체는 const 선언을 해도 참조형 타입입니다. 따라서, mutable 한데요.
• 의도치 않게 값이 변경되는 것을 방지하기 위해 Object.freeze() 감싸서 얼려버리는 모습입니다.

---

private , 나만 쓸꺼야🛡️

• private를 사용하면 외부에서 값을 참조/변경할 수 없어요.
• 변수, 함수를 안전하게 보호합시다.

class Car {
	construct() {
		#carNames = [];
	  #winnerNames = [];
	}
	#racingGameModel() {
		...
	};
	
	#racingGameView() {
		...
	};
}

---

Heading Tag , 찬물도 위아래가 있는 법👆👇

Heading

• h3가 있다는 얘기는 h2와 h1이 문서에 존재한다는 얘기입니다.
• 순서대로 작성해주세요.
• 웹 접근성과도 관련된 이야기입니다.

---

Cypress Command , test에서도 함수를 만들어봐요💯

Cypress Command

• 구현을 위한 코드는 메소드 분리 깔끔하게 하면서 왜 테스트는 신경 안 쓰니 내 자신아..
• 테스트도 이제 가독성있게 해봅시다.

---

Demo Page/디렉토리 트리 , 남을 위한 배려👍

• 특히나 프론트엔드 개발자들에게 데모 페이지를 제공하는 것은 한 눈에 웹 앱에 대한 사이트를 제공한다고 생각합니다.
• 디렉토리 트리도 만들어 docs에 삽입하면 구조를 한 눈에 보기 편할 것 같아요.

---

dataset , element에 정보를 담고 class 남용 멈춰!🚫

• 엘리먼트에 특정 정보를 담기위해서는 dataset을 통해 데이터를 넣어봅시다.

<div class="car-${index} step-container"></div> // 흠... 뭐 하나 정도는 괜찮죠.

• 지금이야 괜찮지만... 나중에 element에 필요한 데이터가 생겨날수록 className이 계속 불어어 난다고 생각해봐요. (끔찍)
• dataset을 이용해서 어떤 데이터인지에 대해 라벨링을 하는 연습을 해봅시다.

---

인자를 객체로 넘기기 , 콜백지옥만 있는게 아니예요 (파라미터 지옥..🔥)

• 인자가 너무 많으면 객체를 인자로 넘기는 건 어떨까요?
• 넘기는 인자가 많아서 이게 어떤 값인지 호출 함수를 다시 확인해야 하고...
• 객체로 묶어서 키, 값으로 전달할 수 있게 하면 편하지 않을까요?

waitRepeatedly({
	selector: SELECTOR.$SPINNER,
	type: 'be.visible',
	delay: DELAY_TIME.RACING_PROGRESS,
	repeatCount: racingCount,
});

---

XXS 방어? textcontent 만으로?

XXS 방어? textcontent?

XXS 의 기본 방어하는 방법은 스크립트 삽입하는 방식으로 주로 발생하기 때문에 태그 코드로 사용되는 < , > 와 같은 문자를 이스케이프 처리된 텍스트로 변경하는 거라고 하네요. 그래서 textCotent만 사용해서는 안되고 위와 같은 처리를 별도로 해줘야 하는데 저희는 일단 이런 방법이 있다 정도만 알고 다음에 이러한 처리가 필요한 상황에서 적용해 보심 될 것 같아요!

textContent를 사용하면 태그는 제외하고 삽입되니 해결이 되는 줄 알았어요.. 🥲DOMPurify 라이브러리를 사용하면 된다고 하는데 추가적으로 학습을 해봐야겠어요! 감사합니다! 🙏🏼

---

이벤트 리스너 해제 , 앞 뒤가 다르면 쓰나

• 이벤트 리스너는 원래 '등록'과 '해제'를 함께 고려해줘야 해요.
• 사용하지 않을 때 제대로 해제해주지 않으면, 메모리가 낭비될 뿐 아니라, 경우에 따라 중복 등록되어 한 번의 이벤트에 대해 같은 함수가 무한대로 호출될 수도..
• 익명함수인 것이 문제예요😠
• 언젠가 해제해야할 상황이 발생했을 때 최소한의 작업으로 원하는 결과를 얻기 위해서는 처음부터 listener를 익명함수가 아닌 접근 가능한 변수 내지 메서드로 빼두는 편이 좋습니다.
• 그러니 다음처럼 작성하면 어떨까요?

class Car {
	...
	$(SELECTOR.CAR_NAMES_FORM).addEventListener('submit',  **this.carNameSubmitHandler**)
	...
	**carNamesSubmitHandler** = e => {
	  e.preventDefault();
	  ...
	}
}

---

beforeEach의 맹점 , 무지성 beforeEach? 이거 의도하지 않은 반복일지도..☠️

• E2E 테스트는 연속되는 과정속에서의 동작 파악을 기본으로 가져가는 것이 좋아요.
• beforeEach로 매 테스트마다 새로 접속을 하게 되면 (cy.visit)
• A동작에 대한 확인을 마친 이후, A동작이 선행되어야 하는 B동작을 테스트하고자 할 때에도

A동작을 다시 한 번 수행해야 하는 번거로움이 따르겠죠.

• 불가피하게 새로접속해야 하는 경우가 아니라면, visit 명령은 beforeEach가 아닌 before

로 넣어주면 좋을 것 같아요.

---

utils, constants 의미 , 엄연히 다릅니다↔

• utility
  • 다용도, 다목적의, 실용적으로 유용하게 쓰일 범용성 있는 도구
  • 반대로 가치가 덜 한 곳일 수도 있죠.
• constant
  • 말 그대로 상수
  • 주로 프로젝트 곳 곳에서 사용하는 변수들 중에서 일괄하여 취급할 필요가 있는 것들
  • 프로젝트 운영에 매우 중요한 것도 있을 수 있고, 그렇지 않은 것도 있을 수 있겠죠.
• 결국 constant와 utility는 개념이 명확히 분리됩니다. 의미와 상황에 맞게 파일의 위치를 조정해보면 어떨까?
  • 예를 들면 constant가 controller에서 주로 쓰이면 controller 내부로 옮긴다든지...