selector의 우선 순위
css selector는 적용되는 우선순위가 있다
이 때, #first.second {} 와 같이 id, class를 이어서 작성한다면
우선순위 값이 합쳐져서 우선도가 높아진다
굳이 써야하는지는 모르겠다
document.addEventListener()
document(화면 전체)에 이벤트를 추가할 수도 있다
요소마다 이벤트를 추가하는 것은 성능상 좋지 않음으로
부모 요소에 이벤트를 추가한 뒤, event.target으로 찾아서 조작하는 것이 좋다
이벤트 버블링에 의해 부모 태그는 자식 요소에서 발생하는 모든 이벤트를 찾을 수 있다
js파일 import
하나의 HTML파일에 여러 개의 js파일을 import할 수 있다
이 때, import된 파일들은 하나의 코드로 취급하기 때문에
파일의 import순서를 주의해야 한다
변수가 선언된 파일이, 변수를 사용한 파일보다 늦게 나온다면 에러가 발생하기 때문이다
event.keyCode
이벤트 리스너를 통해 생성된 event객체는,
이벤트가 발생한 키를 코드로 구분할 수 있다
관련 사이트: https://www.toptal.com/developers/keycode/for/arrow-left
DOM에서 css값을 가져오는 방법
HTML이 아닌 css에서만 정의된 attribute의 경우,
element.style.attribute로 css값을 읽을 수 없다
(원하는 수치를 할당해서 조작은 가능하지만 수치를 읽을 수는 없다)
(js로 수치를 할당한 이후에는 값을 읽을 수 있다)
따라서 css에서 해당 attribute의 값을 찾아야 하는데 이런 경우
- js로 attribute에 값을 할당한 뒤 읽거나,
- 방법2. css에서 값을 주지 않고 html의 태그에 조작할 attribute값을 추가해주거나,
(<tag style="left: 400px"></tag>) - 방법3. getComputedStyle(element)를 통해 값을 찾은 뒤,
가공해서 사용할 수 있다
setInterval() 멈추기
clearInterval()을 사용하지 않아도
setInterval()에 조건부 return을 해주면
원하는 때에 setInterval을 멈출 수 있다
clearnterval()을 해주어야 setInterval()의 동작이 멈춘다
setInterval이 추가되면 어디에 기록, 저장돼서 동작하는건지 궁금하다
요소 중앙 정렬하기
방법1. left: (배경 요소의 width / 2) - (정렬할 요소의width / 2)
방법2. left: 50%, margin-left: - (정렬할 요소의 width/2)
requestAnimationFrame()
랜더링 최적화를 위하여 사용하는 API이다
className vs classList
- className을 통해 class를 조작하면 요소는 하나의 class만을 가지게 된다
(하나의 상태를 가져야 할 때 사용한다)
(ex 게임 캐릭터의 현재 방향) - classList를 통해 class를 조작하면 요소는 여러개의 class를 동시에 가질 수 있다
콜백 함수에 인자를 넣는 방법
addEventListener()의 콜백에는 콜백이 즉시 실행되는 것을 막기 위하여
소괄호를 사용하지 않고 함수명만 넣게 된다
이 때, 인자를 넣어줘야 한다면, function(event){ callback(event) }와 같이
function키워드로 한 번 감싸주면 인자를 전달할 수 있다
이벤트 객체를 사용해야 한다면
function인자와 callback의 매개변수를 통해 event객체를 전달한다
함수형 코드를 객체 지향 코드로 리팩토링 하기
클래스와 인스턴스는 속성이 같은 정보의 프로퍼티나 메서드를
한 곳에 모아서 관리하기 위하여 사용한다
- let, const로 선언된 변수를 멤버 변수(프로퍼티)로 바꿔준다
- 함수를 메서드로 바꿔준다
- 멤버 변수와 메서드 앞에 this를 추가한다
- function 키워드를 사용하면 this바인딩이 변경되므로
변경을 원하지 않을 때는 화살표 함수를 사용한다 - 다른 클래스에서 생성된 인스턴스의 정보를 사용할 때에는 현재 멤버 변수의 상태,
즉 코드의 흐름을 파악하는 것이 중요하다
(코드의 진행상황에 따라
멤버 변수들의 상태가 어떻게 변하는지에 대한 흐름을 정확하게 인지하며 코드를 작성한다)
