[코딩 부트캠프 8주차] 집단지성을 빌어 공부하기

TIL

  지난주 solo week이 지나고 다시 강의와 학습이 시작되었다. 이번 주는 javascript의 비동기 호출에 대해서 파보는 시간이 있었는데 solo week 때 다른 건 못해도 고차 함수 부분은 복습하고 내 나름대로의 정의를 내리려고 했던 게 나름 도움이 되었던 것 같다. 커링(curring)과 같은 내용이 머리에 얼른 떠오르지 않았다면 이번 주 학습 내용도 이해하는데 꽤 시간이 걸렸을 것 같다.

[싱글 스레드]나 [event loop] 같은 개념적인 부분도 매우 흥미로웠다. 나는 이런 식의 규칙성이 잘 짜인 체계를 만나면 마음이 매우 편안해진다. 무에서 유를 창조하는 창조의 세계도 좋지만, 규칙을 통해 많은 현상을 설명할 수 있을 때가 더 멋진 순간으로 다가오는 게 내 기질인가 보다.

(난 15년째 MBTI 유형에서 "STJ"-sensing thinking judging-가 동일하게 나올 만큼 일관적이다..ㅎ)

 이번 주 들어서 이전에 이 코스를 밟은 수강생들의 후기를 많이 찾아봤다. 이맘때쯤 다들 어떤 마음들로 공부했었나 궁금하기도 했고, 코스 자체는 3주 남았다고 하지만 배운 자료를 그대로 들춰보면 그 이상 응용 내용을 공부하기가 어렵다는 생각이 들었고 또 응용을 위해서 관련된 개념이나 용례 등을 찾고자 하니 찾아서 읽으면 그저 내 것이 되나 하는 막막한 마음이 들어서였다. 나 같이 어느 부분을 더 공부해야 하나 막막함에 고민하는 사람들도 있었던 것 같고, 차분하게 주제를 정해서 공부를 진행하는 사람들도 있는 것 같았다.

나만 이런 느낌은 아니구나 하는 안도감과 용기를 얻어 스택오버플로우에 들어가 공부하면서 100% 이해하지 못했던 내용들을 찾아서 읽어나가기 시작했다. 추천 링크를 달아주면 그 링크로 들어가 계속해서 탐험을 했다.

그러면서 내가 확실히 느낀 한가지는 코딩 공부는 주어진 내용(material)으로만 되는 게 아니라 모두의 스승 [구글 선생님]과 [집단지성]을 통해 계속 학습하고 질문하고 직접 구현해보면서 '내 것으로 만드는 과정'이라는 점이다.

집단지성의 힘을 느껴보자 출처: Stackoverflow

---

8주차 TIL

Asynchronous Call-비동기 호출

Function Method

Timer API

[Asynchronous Call - 비동기 호출]

callback에 대한 개념을 미리 알고 있어야 함!

callback: 함수의 전달인자로 다른 함수를 넘길 수 있다는 개념

callback 함수는 즉시 실행될 수도 있고(동기적 실행), 나중에 실행할 수 있음(비동기적 실행)

상황별 callback 함수 
1. call back in action: 반복 실행하는 함수(iterator)
  - 반복하는 객체의 길이만큼 반복됨
2. callback in action: 이벤트에 따른 함수(event handler)
  - dom에서 사용, 이벤트에 의해서 이벤트 핸들러가 작동하는 원리

주의: callback은 함수 자체를 연결하는 것이지, 함수 실행을 연결하는 것이 아님!

.bind는 함수 자체를 실행시키지 않고 this 값을 넣은 상태의 함수를 리턴하는 method

blocking vs non-blocking
1) blocking은 마치 전화: 하던 일을 멈추고 받아야 함(현재 하던 작업에 대한 blocking 발생), 요청에 대한 결과가 동시에 일어남(synchronous)
2) non-blocking는 마치 문자: 확인한 후 나중에 실행(non-blokcing), 요청에 대한 결과가 동시다발적이지 않음(asynchronous)

비동기의 주요 사례  
1) DOM element의 이벤트 핸들러: 클릭했을 때, 마우스를 가져다 놓았을 때, 페이지가 로딩 되었을 때 등
2) 타이머: 실행을 딜레이 시키는 setTimeout이나 시간 흐름에 따라 모양이 움직이는 애니메이션 api 등
3) 서버에 자원 요청 및 응답:  가장 많이 쓰이는 사례이고, 이미 작성되어 있는 서버(버스 도착 시간 API 등)에 URL로 요청을 해서 데이터를 얻는 fetch API나 AJAX(XHR)
 → 서버 응답이 느려서 그 사이에 아무것도 못하게 되는 blocking이 발생하면 안되기 때문에 비동기 방식을 취함

비동기 함수 작동 원리: Philip Roberts: Help, I'm stuck in an event-loop (이 영상은 진짜 추천이다!)

[Function Method]

함수를 실행하는 다양한 방법 중 call 이나 apply 을 떠올릴 수 있음, bind도 있음

함수를 실행하는 다양한 방법
1) function method 호출
2) construction mode: new 키워드를 이용한 호출(객체지향적 방법)
3) 함수 method .call(), .apply(), .bind() 등 이용  

.call이나 .apply는 함수를 실행하는 방법, 다만 전달인자를 넘기는 방법이 다름
call은 쉼표로 구분해서 넘기고, apply는 array로 넘겨줌

.bind? call/apply와 다르게 함수를 바로 실행시키지 않고, this 값이 바인딩을 시켜놓고 해당하는 함수를 리턴(like closure)

.apply(this로 적용될 arg, collections)
ex) Math.max.apply(null, [1,2,3,4])

call, apply을 사용할 때 prototype 기능을 빌려와 사용하는 방법
ex) arr.filter(동사-method)(함수);
 *arr : 주어 - instance
 *filter : 동사 - method
→ 변형1) Array.prototype.filter.call(arr, 함수)
→ 변형2) Array.prototype.filter.apply(arr, [함수])
 * Array.prototype.filter : 동사 - method
 * arr : 주어 - instance

유사배열을 가지고 배열처럼 사용하는 방법:
ex) HTML NodeList는 유사배열, let list = document.querySelectorAll('a');
Array.prototype.map.call(list, 함수)로 처리하면 배열의 method map을 실행한 것 같은 결과를 얻을 수 있음
→ prototype.map이라는 Array의 기능을 빌려온 개념

bind로 setTimeout 사용시 this 문제를 어떻게 해결할 수 있나?   
setTimeout에서는 this가 기본적으로 window
this가 window로 바뀌지 않게 하기 위해서는 this값을 인스턴스로 명시해줘야 함
setTimeout(인스턴스.method함수.bind(인스턴스), ms)로 실행

bind를 이용해서 커링 구현?
- 커링: 인자 여러개를 받는 함수를 인자 하나만 받는 함수로 바꾸는 방법
- 형식: let 커링이구현된함수 = 함수.bind(this값-없으면 null, 고정인자)
- 구현 방식: 커링이구현된함수(인자2) -> 고정인자와 인자 2가 적용된 함수가 실행된 값

Click Event Listener(Handler)에서 전달 인자를 받아 함수에 적용하고자 할 때?
ex) HTML 부분 <button id=’btn’> hello </button>
JS 부분
구현① 실행되지 않음
 function handleClick(greetingMsg) {
  console.log(greetingMsg);
}
 const btn = document.querySelector(‘#btn’);
 btn.onclick = handleClick(‘hello world’);

구현②  bind를 이용해서 실행
 function handleClick(greetingMsg) {
  console.log(greetingMsg);
}
 const btn = document.querySelector(‘#btn’);
 btn.onclick = handleClick.bind(null, ‘hello world’); // this값은 필요 없어서 null 처리

구현③  bind 없이 익명함수로도 실행 가능
 function handleClick(greetingMsg) {
  console.log(greetingMsg);
}
 const btn = document.querySelector(‘#btn’);
 btn.onclick =  function () {
    handleClick.(‘hello world’);
 }

[Timer API]

setTimeout(callback, millisecond): 일정 시간 후에 함수를 실행해주는 API
- arguments: 실행할 callback 함수, callback 함수 실행 전 기다려야 할 시간(밀리 초 단위)
- return value: 임의의 타이머id

setInterval(callback, millisecond): 일정 시간의 간격을 가지고 함수를 반복적으로 실행하는 API
- arguments: 실행할 callback 함수, 반복적으로 함수를 실행시키기 위한 시간 간격(밀리 초 단위)
- return value: 임의의 타이머id

clearInterval(timeId): 반복 실행 중인 타이머를 종료
- arguments: 타이머id
- return value: 없음
- setInterval ↔ clearInterval처럼 setTimeout에 대응하는 clearTimeout도 있음

---