[Javascript] 01~05 Review

1. 배경

한 번 들었던 강의들을 복습하기 위해, 포스팅한 내용을 한 번 읽고, 혼자서 코드를 작성해본 뒤, 정답과 비교해 보았다. 처음 공부했을 때 눈에 들어오지 않았던 사실이나, 코드를 작성할 때 잘 되지 않았던 부분 등을 기록한다.

 

2. Drum Kit

 - window, 즉 전역객체에 대한 이벤트 리스너를 설정하고, keydown 이벤트가 발생하면 그 중 정해진 keyCode에 해당하는 이벤트에만 반응하도록 해야 한다.

 - 속성 선택자 []

 - currentTime은 플레이백 시간을 의미하므로, 0으로 설정하면 소리가 재생되는 중에 한 번 더 재생하면, 즉시 두 번째 재생이 시작된다.

if (e.propertyName !== 'transform') return;

 - 이벤트가 전달될 때, 원하는 이벤트 이외에 다른 이벤트도 전달되므로, 위와 같이 propertyName을 찾아 원하지 않는 이벤트들은 아무것도 반환하지 않도록 설정해야 퍼포먼스가 개선된다.

 

 

2. CSS Clock

 - CSS의 속성인 transform-origin은 해당 요소의 중심을 이동시킨다.

 - 자바스크립트를 통해 CSS의 특성 속성의 값을 변경시킬 때는, 'elements.style.propertyName = 수정하려는 값'형태로 작성한다.

 

 

3. CSS Variables

 - CSS 루트 속성들의 값을 변경할 때, document.documentElement.style.setProperty를 사용했는데, document.documentElement는 HTML을 의미하고, setProperty는 새롭게 속성과 값을 추가할 때 사용하는 매소드이다. 위의 CSS Clock에서는 속성 이름이 transform으로 고정되고 값만 변하였으나, 여기에서는 어떤 속성의 값을 바꿀지가 동적으로 결정되므로, setProperty 매소드로 기존의 값을 덮어쓰는 형태로 작성하였다.

 - 데이터셋 속성을 선택할 때, 속성 값을 동적으로 받아올 대에는 속성 선택자를 사용하나, 이 프로젝트에서는 상수를 사용하므로 .으로 가져온다.

 

 

4. Array Cardio

제작 프로젝트를 우선하였으므로 생략하였다.

 

 

5. Flex Panel Gallery

 - flex는 flex-grow, flex-shrink, flex-basis의 단축 속성이다. flex-grow는 플렉스 아이템들이 플렉스 컨테이너 내부에서 할당 가능한 공간의 정도를 선언한다. flex-shrink는 플렉스 아이템이 플렉스 컨테이너 요소보다 클 때, 값을 입력함으로써 플렉스 컨테이너 내부로 들어갈 수 있도록 축소된다. 0을 주면 축소하지 않는다. flex-basis는 플렉스 아이템의 초기 크기를 지정한다.

 - classList.toggle은 해당 클래스가 add 상태인 경우 제거하고, remove 상태인 경우 add한다.