callback

  • 인수로 다른 함수에 전달 된 함수
  • 명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생했을 때 시스템에 의해 호출되는 함수
    • 다른 함수의 실행이 끝나고 난 뒤에 실행되는 함수. ‘이따가 너 실행 끝나면 그 때 나를 호출해줘!’
  • 함수 호출권한을 내가 아닌 시스템이 가지게 된다.

JS함수는 일급객체

  1. 변수에 담을 수 있다.

  2. 인자로 전달할 수 있다. (callback함수)

  3. 반환값으로 전달 할 수 있다.

    return n => n + 1 (리턴자체가 함수인 경우)

setTimeout

setTimeout(function () {
    console.log('3초 후 출력됩니다.')
}, 3000)
1
VM231:2 3초 후 출력됩니다.

setTimeout (() => console.log('3초'), 3000)
2
VM376:1 3초

비동기식 처리 모델

  • 호출될 함수(콜백함수)를 미리 매개변수에 전달하고 처리가 종료되면 콜백함수를 호출하는 것.

이벤트 리스너

EventTarget.addEventListener(type, listener)

  1. 무엇을(버튼을) - EventTarget
  2. 언제(클릭했을 때) - type
  3. 어떻게(콘솔에 로그를) - listener

JS 코드를 body의 최하단에 위치하는 이유

  1. JS를 읽는 시간 떄문에 Body 안에 있는 HTML 요소들이 브라우저에 그려지는 게 지연 될 수 있기 때문
  2. JS에서 특정 HTML 요소들을 읽고 이벤트를 등록해야 할 때, JS 코드가 먼저 해석되면 해당 요소가 없다고 인식되어 이벤트 등록이되지 않을 수 있기 때문이다.

querySelector는 위에서 선택자로 요소를 찾으면 가장 먼저 찾아지는 요소를 반환(단수)

querySelectorAll 은 위에서부터 선택자로 요소를 찾으며 일치하는 요소들을 모두 반환(복수)

동기식 처리 모델 (Synchronous)

  • 직렬적으로 태스크를 수행
  • 태스크는 순차적으로 실행되며 어떤 작업이 수행중이면 다음 작업은 대기
  • 예) 서버에서 데이터를 가져와서 화면에 표시하는 작업을 수행할 때, 데이터가 응답될 때까지 이후 태스크들은 블로킹(blocking) 된다.

비동기 처리 모델(Asynchronous)

  • 병렬적으로 태스크를 수행
  • 태스크가 종료되지 않는 상태라 하더라도 대기하지 않고 ㄷ음 태스크를 실행
  • 예) 서버에서 데이터를 가져와서 화면에 표시하는 작업을 수행할 때, 데이터가 응답될 때 까지 기다리지 않고(non-blocking) 즉시 다음 태스크를 수행
  • JS 대부분의 DOM 이벤트와 Timer 함수, Ajax 요청은 비동기식 처리 모델로 동작

Blocking vs non-Blocking

이벤트 루프

  • 단 한가지 콜스택과 콜백큐를 감시하는 역할만 합니다.
  • 만약 콜스택이 비어 있으면, 이벤트 루프는 콜백큐에서 첫 번 째 이벤트를 가져다가 콜스택에 밀어넣고, 결과적으로 해당 이벤트가 실행된다.
  • 이러한 반복은 이벤트 루프에서는 tick이라고 한다.
  • 이벤트루프틑 호스팅 환경(브라우저 or nodejs)에 내장된 메커니즘(JS에 있는 것이 아님)
  • 이것은 시간의 흐름에 따라 코드의 수행을 처리하며 그 때마다 JS 엔진을 작동시킨다.

setTimeout(mycallback, msecs)

  • callback 함수가 1초 뒤에 실행될 것이다 라는 의미가 아닙니다.
  • 1초 후에 콜백 큐에 추가될 것이라는 의미
  • 만약에 콜백 큐에 mycallback보다 먼저 추가된 이벤트가 있을 수도 있기 때문ㅇ ㅔ실제 1초보다 더 오랜시간이 걸릴 수도 있다.

Axios

  • axiosXHR 을 요청으로 보내고 응답 받은 결과를 Promise 객체로 반환 해주는 라이브러리
  • axios 는 현재 JS에서 가장 HOT 한 라이브러리 중 하나이며 프론트 엔트 프레임워크(react, vue)에서 데이터를 주고 받을 때 필수적으로 사용되고 있음(프론트엔트 프레임워크 <–> api서버)