TIL - 21.07.26 👨‍💻

• 비동기 vs 동기
• 타이머 Web API

비동기, 동기

• 동기적(synchronous) - 코드가 실행되면 해당 코드가 완료될때까지 다음 줄의 코드 실행을 막는 것을 동기적이라 한다.
  여기서 다음 코드가 실행되는 걸 막는 것을 Blocking 이라 한다.

• 이 동기적인 흐름과 반대되는 개념이 비동기적(asynchronous)이며 코드를 막지 않는 것을 non-blocking이라 한다.

Blocking vs Non-Blocking

• Blocking - 요청에 대한 결과가 동시에 일어난다. => synchronous

• Non-Blocking - 요청에 대한 결과가 동시에 일어나지 않는다. => asynchronous

비동기 호출

• 콜백(callback) - 다른 함수 A의 전달인자로 넘겨주는 함수 B를 콜백함수라고 한다.
  넘겨 받는 삼수는 콜백함수를 필요에 따라 즉시 실행하거나 나중에 실행가능하다.

콜백을 연결할 때 함수 자체를 연결한다.( 실행하는 것이 아님. )

비동기의 사례

• DOM 요소의 이벤트 핸들러
  • 마우스, 키보드 입력
  • 페이지 로딩
    
    
• 타이머
  • 타이머 API (setTimeout 등)
  • 애니메이션 API (requestAnimationFrame 등)
    
    
• 서버에 자원 요청 및 응답 ( 사용 빈도가 가장 높다. )
  • Fetch API
  • AJAX(XHR)

promise

promise는 콜백 체인을 다루는 방법으로, 함수에 콜백을 전달하는 대신에 콜백을 첨부하는 방식의 객체이다.
함수의 반환을 new Promise(resolve, reject) 와 같은 식으로 반환하는 것으로 사용한다.

콜백 체인을 연결하는 방법은 .then(callback) 메소드를 이용하는 방법이 있는데
new Promise가 반환된 함수 다음에 작성해줌으로 동기적으로 실행할 콜백함수(resolve)를 지정할 수 있다.

.then을 이용할때 주의할 점은 반드시 반환 값이 있어야 한다는 점이다.

.catch() 같은 경우는 보통 콜백 체인의 가장 마지막에 위치하는데 .catch 상단에 위하는 콜백함수에서 에러가 발생할 경우 catch의 콜백함수를 실행하게 된다.
.catch() 밑에 .then()을 체이닝 할 수 있다.

promise의 특징

• 콜백은 자바스크립트의 Event Loop가 현재 실행중인 콜 스택을 완료하기 이전에는 절대 호출하지 않는다.
• 비동기 작업이 성공하거나 실패한 뒤에 then(callback)을 이용해 추가한 콜백의 경우도 위와 같다.
• then(callback)을 여러번 이용해서 여러개의 콜백을 추가 할 수 있으며, 각각의 콜백은 주어진 순서대로 동기적으로 실행되게 된다.

타이머 Web API

setTimeout(callback, milisec)

실행할 콜백함수와 기다릴 밀리초를 인자로 받는 API이다.
반환 값으로 임의의 타이머 ID를 가지며 setTimeout API를 변수에 할당하는 것으로 clearTimeout(setTimeout이(타이머 ID가) 할당된 변수)로 해당 메소드를 실행전 취소 시킬 수 있다.

setInterval(callback, milisec)

일정시간 간격을 가지고 함수를 반복 실행하는 API이다.
실행할 콜백함수와 콜백함수를 반복할 간격인 밀리초를 인자로 받는 API이며 반환 값으로 임의의 타이머 ID를 가진다.

해당 API 역시 clearInterval(타이머 ID)로 반복 실행중인 타이머를 멈출 수 있다.

오늘의 포인트

• 메소드 구현할때 콜백함수 자리만 명기해주면 된다. ( 실행하는 것이 아니다. )

• 자바스크립트 코드 실행은 컴파일 순서대로 실행되나 콜백함수는 비동기적으로 실행된다.

TO DO 🔥

• DFS, BFS 숙련
• 비동기 처리 복습

Reference 🙇

https://developer.mozilla.org/