이전에 배운 내용들을 복습하며, 개념 하나를 상세히 설명하기보다 알고 있으면 좋을만한 내용들을 기록해본다.
-
html과 css를 최대한 활용하자
자바스크립트로도 구현이 가능하지만 부담을 줄이고, 애니메이션이나 화면에 요소를 배치하는 그래픽적인 요소는 html과 css로 작성하는 것이 간단하다.
-
html 코드로 요소들을 앞/뒤 관계로 배치할 수 있다
html은 layer처럼 화면에 겹겹이 쌓을 수 있고, 앞/뒤 관계로 어떤 태그가 다른 태그보다 화면 상에서 앞에 위치할 수 있다.
순서 상 아래(마지막)에 작성한 코드일수록 화면에서 가장 위에 나타난다.
<div class="cell">
<div class="hole"></div> // 화면 상에 맨 뒤에 위치
<div class="mole"></div> // 화면 상에 중간에 위치
<div class="hole"></div> // 화면 상에 맨 앞에 위치
</div>-
비동기 코드 때문에 버그가 발생하면 항상 이벤트 루프를 분석하자
-
background에 들어간 비동기 코드의 시간 초가 같으면 먼저 호출된 함수가 task queue에 먼저 들어간다
-
원본 객체는 항상 참조 관계인 변수를 통해서 접근하자(✨ 초보자들이 많이 하는 실수!)
원시값을 담은 변수에 다른 원시값을 담아서 원본 객체를 바꾸는 것은 불가하다. 참조관계가 아니므로 원본 수정이 되지 않는다.
예를 들어, 배열인 객체를 원본 수정하고 싶을 때는 인덱스를 통해 변경할 수 있다. -
소수를 만들 때 가장 마지막에 (10 또는 100을) 나누기 연산을 하자
컴퓨터는 소숫점 계산을 잘 못한다.
소숫점이 있을 때는 항상 정수로 먼저 바꾸고, 마지막에 10의 배수를 나눠 소수로 만든다.
let time = 10;
time = (time * 10 - 1) / 10; //(O) 마지막에 나눗셈 연산
time = time - 0.1; //(X) 소숫점 계산 시 문제 발생 가능할 수 있음-
alert가 화면에 나타나기 전에 이전 코드들이 모두 실행될 수 있도록 setTimeout으로 약간의 시간을 주자
화면에 그려지는 것 모두 끝나기 전에 alert가 먼저 실행된다.
이는 화면에 그려지는 것과 alert 모두 동기적으로 작동하기 때문에 생기는 것이다.
alert를 비동기 코드로 타이머를 이용해 alert가 가장 마지막에 실행되도록 한다.
