20210329(월)

2021-03-29

1. 학습 날짜

• 2021-03-29

2. 학습 시간

• 10:00 ~ 22:00

3. 학습 범위 및 주제

• 자바스립트 학습하기

4. 학습 목표

• 강의 듣기

5. 학습 정리

• 오디오 관련 이슈

• setInterval 에서 클로져 사용하기

6. 상세 학습 내용

• 듣고 있는 강의의 마지막 과제를 혼자 만들어봤다.

• 일단 이 과제를 진행하면서 느낀건 1. 아주 간단한 html, css 마크업인데도 생각보다 오래걸렸다. 2. 자바스크립트 구조를 아직 제대로 만들지 못한다. 여러 파일을 만들고 파일에서 export, import 등을 사용해야하는데 그러지 못하고있다.

• 해결한 문제로는 setInterval 의 가 자기가 알아서 clear 가 되게 만들었다.

  • 기존에 학습했었던 클로져 개념을 사용해서 문제를 해결함.

var interval = setInterval(function() {
  console.log("Interval");
}, 1000);

clearInterval(interval);

보통의 경우는 위처럼 interval 을 만들고 clear 하지만, 이렇게 되면 인위적으로 clear 를 해줘야한다는 단점이 있다. 즉 자기가 알아서 interval 을 관리하지 못하는게 문제점. 나같은 경우는 10초지나면 알아서 interval이 끝나게 만들고 싶다. 물론 setTimeout 으로 10초뒤에 setInterval 을 clear 할 수도 있겠지만 이렇게 되면 타이밍문제가 생길 우려가 있기 때문에 setInterval 내부에서 본인이 책임지고 clear 되게 만들어야 했다. 여기서 떠오른게 클러져를 만드는것. 아래처럼 만들어서 해결했다.

function setCountDownAsInterval() {
  let remain_time = 9;
  let myInterval = 0;

  return myInterval = setInterval(function () {
    if (remain_time === 0) {
      clearInterval(myInterval);
      myInterval = 0
      gameStop('time-out');
    }
    countDown(remain_time--)
  }, 1000);
}

• 오디오 문제

  • 버튼을 누르면 오디오를 실행하고 버튼을 삭제하는 코드를 만들었었다. 이 버튼 내부에 audio 마크업이 있었는데, 문제는 버튼을 눌렀을 때 오디오가 실행되지 않고 바로 버튼과 오디오 태그가 삭제되어 버리는것. 즉 타이밍 문제가 있었다.

  • 이 문제를 해결하기 위해 프라미스 개념을 사용했다. Web API 에 audio 을 DOM 요소로 만드는 메서드가 존재해서 해당 메서드를 사용했고 오디오가 성공적으로 끝나면 발생하는 이벤트인 ended 를 사용했다.

function play(url) {
  return new Promise(function (resolve, reject) {
    var audio = new Audio();
    audio.preload = "auto";
    audio.autoplay = true;
    audio.onerror = reject;
    audio.onended = resolve;

    audio.src = url;
  });
}

7. 오늘 학습 내용에 대한 개인적인 총평

• 흠... 이렇게 쉬운 코드를 짜는데도 버거워하다니 난 멀었다.

8. 다음 학습 계획

• 자바스크립트 공부