[Thurs/11/25/2021] Today I Learned

 

1. Hello Coding Algorithm 스터디 : Recursion & Tail Recursion

오늘 스터디에서는 어제 정독한 챕터 3의 재귀를 중심으로 진행되었다.

기본 단계와 재귀 단계, 그리고 호출 스택이 재귀 함수에서는 어떤 식으로 쌓이고 리턴되는지에 대해 복습하였다.

읽어 온 부분이 같기 때문에, 좀더 확장해서 꼬리 재귀에 대해 공부하는 시간도 가졌다.

얄팍한 코딩사전 유튜브 채널에서 재귀함수를 잘 설명한 영상을 찾아서 함께 봤다. 

https://youtu.be/aPYE0anPZqI

하노이의 탑을 예시로 들어서 재귀함수를 설명한 영상인데, 한 번 보고는 잘 이해가 되지 않아서 제대로 이해하기 위해서 다시 볼 예정이다. 

함수형 프로그래밍 - 재귀 함수(Recursive Function)

함수형 프로그래밍과 재귀 함수를 연관지어 설명한 블로그 글이다. 

꼬리 재귀 최적화, Memoization, Trampoline과 같은 기법으로 재귀 함수의 단점을 보완할 수 있다는 것을 간략하게 훑어보았다. 

 

2. Event Delegation 공부와 적용 + Refactoring

어제 만들었던 스마트 드롭다운 메뉴에 각각 li 요소에 forEach로 이벤트 리스너를 등록했는데, 

이것보다는 li의 바로 윗 조상인 ul에 이벤트 리스너를 등록하는 식으로. 

이벤트 버블링에 대해서도 복습 - parent element는 child element에서 발생하는 이벤트를 다 들을 수 있다.

일일이 이벤트를 자식 노드에 추가하는 것보다 parent element에 등록하고, 원하는 타깃을 찝어서 거기에만 이벤트를 등록하는 식으로 할 수 있다.

  let timer;
  
  // Before 
  $li.forEach(li => {
    li.addEventListener('mousemove', e => {
      if (!timer) {
        timer = setTimeout(() => {
          timer = null;
          const fruit = e.target.textContent;
          displayFruitsCount(fruit);
        }, 500);
      }
    });
  });

  // Event Delegation
  $ul.addEventListener('mousemove', e => {
    if (e.target.tagName === 'LI' && !timer) {
      timer = setTimeout(() => {
        timer = null;
        const fruit = e.target.textContent;
        displayFruitsCount(fruit);
      }, 500);
    }
  });

 

이것 말고도 다양한 부분에서 코드 리팩토링을 했다. 

원시적이던 코드가 점점 나아지는 것이 보였다.

먼저 pseudo code를 작성한 뒤, 하나하나 구현해 나갔는데 무작정 바로 코드를 짜는 것으로 돌입하는 것보다 훨씬 더 효율적이었다. 

 

3. Event Loop 복습 

https://youtu.be/wRPcxR1M7Uc

이벤트 루프를 설명한 제로초 영상을 다시 보면서 비동기 함수(setTimeout)이 어떻게 자바스크립트 환경에서 실행되는지를 복습하였다.

오늘 코코아 피어 세션에서 setTimeout을 사용해서 비동기를 구현한 부분을 좀 더 자세하게 설명하지 못한 것 같아서 더 공부를 해야겠다고 느꼈다.

비동기 프로그래밍을 제대로 이해해야 자바스크립트를 이해한 거라고 말할 수 있다는 말을 듣고, 정말 이것은 간단히 넘어갈 건 아니라고 생각했다.

const baseData = [1, 2, 3, 4, 5, 6, 100];

const asyncRun = (arr, fn) => {
  arr.forEach((v, i) => {
    setTimeout(() => {
      setTimeout(() => {
        console.log('cb 2');
        fn(i);
      }, 1000);
      console.log('cb 1');
    }, 1000);
  });
};

asyncRun(baseData, idx => console.log(idx));

위와 같은 코드가 어떻게 동작하는지 눈으로 보고 설명할 수 있으면 OK.

인간 V8 엔진이 되었다고 생각하고 정말 많이 훈련해야겠다. 

[JS] 비동기 동작 과정

위에 있는 코드의 동작 원리를 아주 자세히 풀어서 쓴 글이다. 

 

http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIkNsaWNrIHRoZSBidXR0b24hIik7Cn0sIDUwMDApOwoKY29uc29sZS5sb2coIldlbGNvbWUgdG8gbG91cGUuIik7Cgo%3D!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D

자바스크립트 비동기 프로그래밍 동작 원리를 이해하기 쉽도록 보여 주는 사이트이다. 

---

내일 공부할 것 

- 클래스, MVC 패턴을 공부한 후 기존 함수만 있는 Todo List를 클래스로 개편

- 알고리즘 문제풀이와 코드리뷰