Vanilla JS 30

TILjavascriptjavascipt30

30 Day Vanilla JS Coding Challenge Study - 4주차

  • 14 Must Know Chrome Dev Tools Tricks
  • JS Checkbox Challenge!
  • Custom HTML5 Video Player

9. 14 Must Know Chrome Dev Tools Tricks

영상: https://youtu.be/xkzDaKwinA8

크롬 개발자 도구의 콘솔를 활용하는 팁

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 보간법
console.log('Hello I am a %s string!', '💩');

// 스타일링
console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue');

const p = document.querySelector('p');
// 테스팅
console.assert(p.classList.contains('ouch'), 'That is wrong!');

// 콘솔 그룹화
dogs.forEach(dog => {
  console.groupCollapsed(`${dog.name}`);
  console.log(`This is ${dog.name}`);
  console.log(`${dog.name} is ${dog.age} years old`);
  console.log(`${dog.name} is ${dog.age * 7} dog years old`);
  console.groupEnd(`${dog.name}`);
});

// 타이머
console.time('fetching data');
fetch('https://api.github.com/users/wesbos')
  .then(data => data.json())
  .then(data => {
    console.timeEnd('fetching data');
    console.log(data);
  });

// 테이블 표기
console.table(dogs);

콘솔이 이렇게 다양함에도 불구하고 개인적으로
console.log()와 console.dir()로 대부분 해결하고는 했다.

때문에 앞으로 의식적으로라도 활용하기 좋을 것 같은 것들만 정리했다.

10. JS Checkbox Challenge!

영상: https://youtu.be/RIPYsKx1iiU

shift 키로 전체 선택 가능한 체크박스 리스트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');


// 마지막으로 선택된 체크박스
let lastChecked;

function handleCheck(e) {
  let inBetween = false;

  // 쉬프트 키 이벤트 발생 & 체크박스 true 트리거
  if (e.shiftKey && this.checked) {

    checkboxes.forEach((checkbox) => {

      if (checkbox === this || checkbox === lastChecked) {
        inBetween = !inBetween;
      }

      if (inBetween) {
        checkbox.checked = true;
      }
    });
  }

  lastChecked = this;
}
checkboxes.forEach((checkbox) => checkbox.addEventListener('click', handleCheck));

}
  • Flag 변수 inBetween & lastChecked를 활용한다
  • this의 잦은 활용과 불필요해보이는 if문이 있어 리팩토링해볼만 할 부분으로 보인다.
  • checkboxes에 이벤트 등록 방법을 달리할 수 있을 것 같다.

11. Custom HTML5 Video Player

영상: https://youtu.be/yx-HYerClEA

HTML5 API를 활용한 비디오 플레이어 핸들링 방법을 다룬다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 비디오 플레이 토글
function togglePlay() {
  const method = video.paused ? 'play' : 'pause';
  video[method]();
}

// 비디오 플레이 버튼 아이콘 변경
function updateButton() {
  const icon = this.paused ? '►' : '❚ ❚';
  toggle.textContent = icon;
}

// 스킵 버튼 클릭시 비디오 현재 플레이 시간에 반영
function skip() {
 video.currentTime += parseFloat(this.dataset.skip);
}

// 3가지 레인지 영역에 대한 핸들링을 한번에 처리
function handleRangeUpdate() {
  video[this.name] = this.value;
}

// timeupdate 이벤트 발생시 진행바의 스타일링 수정
function handleProgress() {
  const percent = (video.currentTime / video.duration) * 100;
  progressBar.style.flexBasis = `${percent}%`;
}

// 비디오 재생 진행바에 대한 마우스 이벤트(클릭/다운/업/무브)를 처리한다
function scrub(e) {
  const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
  video.currentTime = scrubTime;
}

video API의 play, pause, timeupdate 이벤트 타입 활용도와 강력함을 알 수 있었다.

이밖에도 활용도 높은 API가 있기 때문에 HTML5 지원 환경에서 작업시
HTML5 API만으로 괜찮은 비디오 플레이어를 개발할 수 있을 것 같다.

Share Comments