[FE] JS 언어적 특징 (동기, 비동기 처리)

동기, 비동기?

이벤트를 처리 하는 방식에 따라 분류

하나의 이벤트가 끝난 후 다른 이벤트를 처리하기 시작하는 방식을 동기적 방식이라고 한다

(서버에 데이터를 요청한 후 응답을 받아야 다음동작 실행)

발생된 이벤트의 종료를 기다리지 않고 다른 작업을 동시에 수행하는 방식을 비동기적 방식이라고 한다

(서버에 요청을 보낸 후 응답과 관계없이 다음동작 실행)

 

JavaScript는?

자바스크립트는 기본적으로 싱글 스레드 언어이기 때문에 한 번에 한가지 작업만 수행할 수 있는 동기적 방식 언어

작업이 오래걸리거나 응답이 늦어지는 경우 치명적

-> 자바스크립트에 비동기 개념을 도입!

 

비동기 처리

Q. 자바스크립트는 싱글 스레드 언어라서 한가지 작업만 수행할 수 있다며?

 A. 자바스크립트 언어 자체가 비동기 동작을 지원하는 것은 아니다

     자바스크립트를 실행하는 콜 스택은 싱글 스레드지만, 실질적으로 작업을 실행하는 Web API들은 멀티 스레드

 

     그리고 Web API와 자바스크립트 사이에서 데이터를 주고 받게 해주는 데이터형식이 AJAX

 

AJAX는?

자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신기능

웹페이지를 리로드 하지않고 데이터를 불러오는 방식이고, JSON이나 XML 형태로 필요한 데이터만 받아 갱신하기 때문에 자원과 시간을 아낄 수 있다

비동기 처리 방법

callback 함수

함수의 매개변수에 함수 자체를 넘겨서 함수 내에서 매개변수 함수를 실행하는 기법

(JS는 함수 또한 객체이기 때문에 함수 자체를 값으로 취급 가능)

doSomething(function(result) {
  doSomethingElse(result, function(newResult) {
    doThirdThing(newResult, function(finalResult) {
      console.log('Got the final result: ' + finalResult);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

함수의 반환 값을 받아서 다음 비동기를 처리해야 하는 경우 처리되야하는 이벤트들을 순차적으로 callback 함수에 넣어준다

단 비동기 처리 할 함수가 많으면 가독성이 매우 떨어지고 에러처리를 해야하는 경우 모든 콜백에서 각각 에러 핸들링을 해주어야 하는 단점이 존재

Promise 객체

자바스크립트의 비동기 처리를 위한 전용 객체

비동기 작업의 성공 또는 실패와 그 결과값을 나타낸다

• Pending : 실행중이나 결과값이 반환되지 않은 상태
• Fulfilled : 성공
• Rejected : 실패
• Settled : 결과 값이 반환 된 상태 -> 한번 Settled 된 값은 재실행 불가

const promise = new Promise(function(res, rej) {
  setTimeout(function() { // 비동기로 진행되는 코드
    res(111);
  }, 1000);
});

promise.then(function(result) {
  console.log(result); // 111
}).catch(function(error) {
  console.error(error);
});

 

async & await

Promise객체를 기반으로 사용하는 구문

비동기 코드를 좀 더 동기적인 코드처럼 작성할 수 있다

 

Promise와 완전히 다른 방식이 아니다

-> Promise 객체를 사용하지만 then, catch 메소드를 사용하여 컨트롤 하는 것이 아닌 반환 값을 변수에 할당하여 작성할 수 있도록 도와주는 문법

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function myAsyncFunction() {
  try {
    await delay(1000); // 비동기로 진행되는 코드
    console.log(111);
  } catch (error) {
    console.error(error);
  }
}

myAsyncFunction();

 

반드시 await가 좋을까?

callback 방식은 정말 단순하게 구현할 수 있는 문법이기 때문에 복잡한 상황이 아니라면 오히려 가독성이 좋아진다

따라서 복잡하지 않은 비동기 작업을 할 때는 promise 객체 방식보다 더 좋은 성능을 발휘할 수도 있으므로 상황에 맞게 사용해야 한다

---

Web API 브라우저에서 제공하는 다양한 API를 포괄하는 API의 총칭