> For the complete documentation index, see [llms.txt](https://simian114.gitbook.io/blog/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://simian114.gitbook.io/blog/undefined-1/diary/2021/march/20210329.md).

# 20210329(월)

## 2021-03-29

### 1. 학습 날짜

* 2021-03-29

### 2. 학습 시간

* 10:00 \~ 22:00

### 3. 학습 범위 및 주제

* 자바스립트 학습하기

### 4. 학습 목표

* 강의 듣기

### 5. 학습 정리

* [오디오 관련 이슈](https://simian114.gitbook.io/blog/undefined/javascript/undefined-4)
* [setInterval 에서 클로져 사용하기](https://simian114.gitbook.io/blog/undefined/javascript/undefined-4)

### 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. 다음 학습 계획

* 자바스크립트 공부