import 문은 최상단에 위치하도록..!
관련 링크.
코드 네이밍으로 '카멜 케이스'를 사용할 경우, 소문자로 시작.
✅ ex) whoIsWinner
✅ 만약 카멜 케이스를 사용하지만 변수명이 대문자로 시작한다?
-> 클래스 명 또는 절대 변하지 않는 값
관련 링크.
EventListener는 되도록이면 함수 안에 넣지 않도록 유의.
함수 내부에 EventListener를 선언하면, 함수를 재사용하게 됐을 때 같은 DOM Element에 대해서 동일한 EventListener가 중복 선언되는 문제가 발생할 수 있음.
css를 변경할 경우, css 클래스를 만들어서 수정하는 방법을 추천.
✅ document.getElementById("changeText").style.color = "red";
-> 인라인 방식으로 변경 X
✅ .txtStyle{color:red; background:blue; font-size:14px;}
✅ document.getElementById("changeText").className="txtStyle";
-> 클래스 선언 후, 해당 클래스를 더하거나 빼는 방식 O
✅ 이는, 스타일 관련은 CSS가 전부 처리하고 동적 액티비티 관련은 자바스크립트가 처리하게 하는 방식. 디버깅을 위함.
똑같은 관심사를 지닌 코드들은 한 군데에 넣어두면 아무래도 차후에 디버깅할 일이 있으면 그 부분만 확인하면 되는데 여러 곳에서 산발적으로 비슷한 관심사가 존재하면 디버깅할 때 에러를 추적하기 어렵기 때문.
관련 링크.