비동기 통신

정현·2022년 7월 1일
0

JavaScript

목록 보기
6/6
post-thumbnail

1. AJAX

(1) AJAX란

  • 비동기식 JavaScript와 XML
    - 요즘은 더 가벼운 용량의 장점을 가진 JSON을 더 많이 사용함
  • 서버와 통신하기 위해 XMLHttpRequest 객체를 활용
  • JSON, XML, HTML, 일반 텍스트 형식을 포함한 다양한 포맷 (데이터를 주고 받는 형식)을 주고 받을 수 있음

(2) AJAX 특징

  • 페이지 전체를 새로고침하지 않고서도 수행되는 비동기성
    - 서버의 응답에 따라 전체 페이지가 아닌 일부분만을 업데이트 할 수 있음
  • AJAX의 주요 두 가지 특징
    - 페이지 새로고침없이 서버에 요청
    - 서버로부터 데이터를 받고 작업을 수행

(3) XMLHttpRequest 객체

  • 서버와 상호작용하기 위해 사용되며 전체 페이지의 새로고침 없이 데이터를 받아올 수 있음
  • 사용자의 작업을 방해하지 않으면서 페이지 일부를 업데이트 할 수 있음
  • XML뿐만 아니라 모든 종류의 데이터를 받아올 수 있음
  • 생성자
    - XMLHttpRequest()

2. Asynchronous JavaScript

(1) 동기식

  • 순차적, 직렬적 task 수행
  • 요청을 보낸 후 응답을 받아야만 다음 동작이 이루어짐

(2) 비동기식

  • 병렬적 task 수행
  • 요청을 보낸 후 응답을 기다리지 않고 다음 동작이 이루어짐
  • JavaScript는 single threaded
  • 데이터를 불러오는동안 지속적으로 응답하는 화면을 보여줌으로써 더욱 쾌적한 사용자 경험을 제공

(3) JavaScript는 single threaded

  • 컴퓨터가 여러 개의 CPU를 가지고 있어도 main thread라 불리는 단일 thread에서만 작업 수행
  • 이벤트를 처리하는 Call Stack이 하나인 언어
  • 이 문제를 해결하기 위해 JavaScript는
    1. 즉시 처리하지 못하는 이벤트를 Web API (브라우저 내부)로 보내서 처리하도록 한다.
    2. 처리된 이벤트들은 처리된 순서대로 Task queue에 줄을 세운다.
    3. Call Stack이 비면 Event Loop가 Task queue의 가장 앞의 이벤트를 Call Stack으로 보낸다.

(4) Concurrency model

  • Event loop를 기반으로 하는 동시성 모델
    1. Call Stack
    - 요청이 들어올 때마다 해당 요청을 순차적으로 처리하는 stack(LIFO) 형태의 자료 구조
    2. Web API (Browser API)
    - 브라우저 영역에서 제공하는 API
    - setTimeout(callback 함수, 시간), DOM events, AJAX로 데이터를 가져오는 시간이 소요되는 일들을 처리 (언제 끝날지 모르는 시간 관련된 일)
    3. Task Queue
    - 비동기 처리된 callback 함수가 대기하는 Queue(FIFO) 형태의 자료 구조
    - main thread가 끝난 후 실행되어 후속 JavaScript 코드가 차단되는 것을 방지
    4. Event Loop
    1. Call Stack이 비어있는지 확인
    2. 비어있는 경우 Task Queue에서 실행 대기 중인 callback 함수가 있는지 확인
    3. Task Queue에 대기 중인 callback 함수가 있다면 가장 앞에 있는 callback 함수를 Call Stack으로 push

(5) 순차적인 비동기 처리하기

  • Web API로 들어오는 순서는 중요하지 않고, 어떤 이벤트가 먼저 처리되느냐가 중요
  • 순차적인 비동기 처리를 위한 두가지 작성 방식
    1. Async callbacks
    - 백그라운드에서 실행을 시작할 함수를 호출할 때 인자로 지정된 함수
    2. promise-style
    - Modern Web APIs에서의 새로운 코드 스타일
    - XMLHttpRequest 객체를 사용하는 구조보다 조금 더 현대적인 버전

3. Callback Function

(1) Callback funtion

  • 다른 함수에 인자로 전달된 함수
  • 외부 함수 내에서 호출되어 일종의 루틴 또는 작업을 완료함
  • 동기식, 비동기식 모두 사용됨
    - 주로 비동기식 작업이 완료된 후 코드 실행을 계속하는 데 사용됨 => 비동기 콜백

(2) JavaScript의 함수는 "일급 객체다"

  • 일급 객체
    - 다른 객체들에 적용할 수 있는 연산을 모두 지원하는 객체(함수)
  • 일급 객체의 조건
    - 인자로 넘길 수 있어야 함
    - 함수의 반환 값으로 사용할 수 있어야 함
    - 변수에 할당할 수 있어야 함

(3) Async callbacks

  • 백그라운드에서 코드 실행을 시작할 함수를 호출할 때 인자로 지정된 함수
  • 백그라운드에서 코드 실행이 끝나면 callback 함수를 호출하여 작업이 완료되었음을 알리거나, 다음 작업을 실행하게 할 수 있음
  • callback 함수를 다른 함수의 인수로 전달할 때, 함수의 참조를 인수로 전달할 뿐이지 즉시 실행되지 않고, 함수의 body에서 "called back"됨
    정의된 함수는 때가 되면 callback 함수를 실행하는 역할을 함

(4) 왜 사용하는가?

  • callback 함수는 명시적인 호출이 아닌 특정 루틴 혹은 action에 의해 호출되는 함수
  • 비동기 로직을 수행할 때 callback 함수는 필수
    - 명시적인 호출이 아니라 다른 함수의 매개변수로 전달하여 해당 함수 내에서 특정 시점에 호출

(5) callback Hell

  • 여러 개의 연쇄 비동기 작업을 할 때 마주하는 상황
  • 디버깅 / 코드 가독성 관점에서 통제가 어려움
  • callback Hell 해결하기
    1. 코드의 깊이를 얕게 유지
    2. 모듈화
    3. 모든 단일 오류 처리
    4. Promise 콜백 방식 사용

4. Promise

(1) Promise object

  • 비동기 작업의 최종 완료 또는 실패를 나타내는 객체
    - 미래의 완료 또는 실패와 그 결과 값을 나타냄
    - 미래의 어떤 상황에 대한 약속
  • 성공(이행)에 대한 약속
    - .then()
  • 실패(거절)에 대한 약속
    - .catch()

(2) Promise methods

  • .then(callback)
    - 이전 작업 (promise)이 성공했을 때 수행할 작업을 나타내는 callback 함수
    - 각 callback 함수는 이전 작업의 성공 결과를 인자로 전달받음
    - 성공했을 때의 코드를 callback 함수 안에 작성
  • .catch(callback)
    - .then이 하나라도 실패하면 동작
    - 이전 작업의 실패로 인해 생성된 error 객체는 catch 블록 안에서 사용할 수 있음
  • 각각의 .then().catch() 블록은 서로 다른 promise를 반환
    - 연쇄적인 작업을 수행할 수 있음
    - 여러 비동기 작업을 차례대로 수행할 수 있음
  • 반환 값이 반드시 있어야 함 (없다면 callback 함수가 이전의 promise 결과를 받을 수 없음)
  • .finally(callback)
    - promise 객체를 반환
    - 결과와 상관없이 무조건 지정된 callback 함수가 실행
    - 어떠한 인자도 전달받지 않음
    promise가 성공되었는지 거절되었는지 판단할 수 없음
    - 무조건 실행되어야 하는 절에서 활용
    .then().catch() 블록에서의 코드 중복을 방지

(3) Promise가 보장하는 것

  1. callback 함수는 JavaScript의 Event Loop가 현재 실행 중인 Call Stack을 완료하기 이전에는 절대 호출되지 않음
  2. 비동기 작업이 성공하거나 실패한 뒤에 .then() 메서드를 이용하여 추가한 경우에도 1번과 똑같이 동작
  3. .then()을 여러 번 사용하여 여러 개의 callback 함수를 추가할 수 있음
    • 각각의 callback은 주어진 순서대로 하나하나 실행하게 됨
    • chaining은 promise의 가장 큰 장점

5. Axios

  • 브라우저를 위한 Promise 기반의 클라이언트

6. async & await

  • 비동기 코드를 작성하는 새로운 방법
  • 기존 Promise 시스템 위에 구축된 syntactic sugar
    - Promise 구조의 then chaining을 제거
    - 비동기 코드를 조금 더 동기 코드처럼 표현
    - Syntactic sugar
    • 더 쉽게 읽고 표현할 수 있도록 설계된 프로그래밍 언어 내의 구문
  • 사용 방법
    1. 함수로 묶어야 한다.
    2. 해당 함수 앞에 async 키워드를 사용한다.
    (async function 함수이름() {})
    3. 함수 블록 내부에 비동기로 동작하는 함수들을 찾아서 앞에 await 키워드를 사용한다.
    (const res = await axios.get(URL))
profile
try to be happy :D

0개의 댓글