❶ 블로킹과 논-블로킹

  • A 함수에서 어떤 작업의 처리를 위해 B 함수를 호출했다고 가정한다.

Blocking : B 함수에서 할일을 다 마칠때까지 A 함수 제어 흐름은 대기

Non-blocking : B 함수에서 할일의 완료 여부와 상관없이 곧바로 A 함수쪽의 제어 흐름은 이어짐

❶ 동기와 비동기란?

  • A 함수에서 어떤 작업의 처리를 위해 B 함수를 호출했다고 가정한다.

❷ Sync (동기)

(1) 어떤식으로든 B 함수 작업이 끝난 것을 확인 후, 작업 마무리를 A 함수에서 하는 것
(2) B 함수 쪽의 처리결과를 A 쪽에서 계속 신경 쓰는 형태

❸ Async (비동기)

(1) A 는 B 함수 호출 까지만을 담당했을 뿐, 처리 + 마무리는 B 함수에서 하는 것
(2) B 함수 쪽으로 그냥 아예 작업을 위임 해버리는 것

💡 요약
blocking / non-blocking
제어권이 넘어갔을 때, 곧바로 반환 여부에 대한 속성

Sync / Async
특정 작업을 위한 제어흐름의 최종 마무리를 어디서 하는지에 대한 속성

❸ JavaScript는 Non-blocking + Async 방식

❶ 콜백 함수 (Callback function)

(1) 어떤 함수를 호출할 때, 인자값으로 넘기는 나중에 실행될 함수
(2) 콜백 함수가 실행되는 시점은 콜백 함수를 인자값으로 넘겨받는 함수 구현에 따라 결정

❷ 콜백 함수의 용도

(1) js의 비동기 작업을 처리하기 위한 방법
(2) 주로 어떤 작업이 끝난 이후, 그 결과 값을 가지고 뒤에 이어서 처리되어야 하는 로직을 담는다. (Ex : 성공, 실패 핸들러)

💡 참고
❶ 콜백 지옥 (callback hell)
(1) 콜백 함수를 겹겹이 연달아서 구현하는 형태
(2) 코드의 가독성이 떨어지고 이해하기도 어려워짐

❶ Ajax

(1) Asynchronous Javascript And XML (비동기 자바스크립트와 XML) 을 줄임말
(2) Web API의 *XMLHttpRequest(XHR) 라는 Object를 이용하여, 비동기적으로 서버에 요청을 날려 응답을 받아와서, 그 응답 정보를 HTML DOM에 표현하는 프로그래밍 기법
(3) Client 입장에서 화면 전체를 reload할 필요가 없어져 매끄러운 서비스 이용이 가능해짐
(4) 페이지 내 필요한 만큼만 데이터를 가져와서 동적으로 보여주면 되므로 훨씬 경제적

✏️ 용어

❶ XML (Extensible Markup Language)
(1) html과 비슷한 형식으로 정보를 표현하기위해 태그를 사용하는 마크업 언어
(2) 과거에 한창 데이터 송수신 포맷으로 활발하게 사용되던 시기가 있었으나, 이제는 JSON이 대체함


❷ XMLHttpRequest
페이지 전체 refresh 없이 비동기적으로 http요청을 날릴 수 있는 브라우저 제공 기능

❶ promise

(1) js 비동기 작업의 최종적인 성공이나 실패의 제어흐름을 알아보기 쉽게 표현해주는 객체
(2) 비동기 로직 구현 시, 콜백 함수를 활용하는 방식보다 더 편리해짐
(3) ES6에 도입
(4) 3가지 상태가 있음 : pending = 대기, fullfill = 완료/성공, reject = 완료/실패

❶ async / awaut는 무엇인가?

(1) js의 비동기 로직 처리 패턴 중 가장 인간이 알아보기 쉬운 형태
(2) 일반적으로 코드를 위에서 아래로 읽으며 실행 순서를 파악하는 점을 감안하여 만든 기능
(3) ES2017에 도입

❷ async / await 키워드 소개

  • async
    (1) 비동기 로직을 포함하는 함수 앞에 붙임
    (2) 함수가 Promise 객체를 리턴하게 만듬
    (3) 함수 내부에서 await 키워드 사용이 가능하게 됨
  • await
    (1) async 키워드를 붙인 함수 안에서만 사용가능
    (2) Promise 객체를 리턴하는 함수 호출 코드 앞쪽에만 붙일 수 있음
    (3) Promise 의 then() 부분에서 전달받던 성공 시 결과 값을 곧 바로 얻을 수 있음
profile
#UXUI #코린이

0개의 댓글