_Async/Await_

자바스크립트에서 async/await는 뭘까?

async/await는?

Promise 기반으로 동작하지만, then/catch/finally 와 같은 프로미스 후속 처리 메서드에 콜백 함수를 전달하여

비동기 처리 결과를 후속 처리할 필요 없이 마치 동기 처리처럼 프로미스를 사용할 수 있다.

결과적으로 Promise를 더 쉽게 다룰 수 있게 해 준다.

async/await을 사용하면 비동기 함수들을 마치 동기 함수처럼 작성하여 동작할 수 있게 해 준다.

function getData(){

/*

 비동기 함수

 */

}

// 프로미스

new Promise((resolve, reject) => {

const result = getData();

if ( /* 비동기 작업 수행 성공 */) {

resolve(result);

} else {

reject(result);

}

})


// async/await

async function getData() {

await /* 비동기 함수 */

}

Async

async 함수는 async 키워드를 사용해 정의하고, 언제나 프로미스를 반환한다.

Await

await 키워드는 프로미스가 settled 상태가 될 때까지 대기하다가 settled 상태가 되면 프로미스가 resolve 한 처리 결과를 반환한다.

참고 링크

- async/await (https://learnjs.vlpt.us/async/02-async-await.html)

자바스크립트에서 사용되는 Promise는 무엇일까?

콜백

콜백 함수는 다른 함수에 인자로 전달되는 함수로

어떤 함수의 동작에서 이벤트가 발생하였을 때, 혹은 특정 시점에 도달했을 때 호출하는 함수이다.

아래 예시는 정말 러프하게 이해할 수 있게끔만 적어놓은 함수이다. 단순한 구조라면 콜백 구조가 깊지 않지만, 복잡도가 높아짐에 따라 콜백 함수가 중첩되고 그 깊이가 엄청나게 깊어지는 것을 콜백 지옥이라 한다.

function getData(){

  /*

  비동기 함수

  */

}


getData().then(

  // 완료 되었을 때

).then().then().catch().finally()

Promise

Promise 객체는 ES6에서 추가된 개념으로, 비동기 작업이 작업 완료 후 미래의 완료 혹은 실패 결과를 나타낸다.

기존의 방식으로는 작성하게 된다면 콜백 지옥에 빠지게 된다.

또한 Promise 객체는는 비동기 함수들을 병렬로 수행할 수 있도록 하며 .all() 메서드와 .allSettled() 메서드를 프로퍼티로 가진다.

_출처: https://adrianalonso.es/desarrollo-web/apis/trabajando-con-promises-pagination-promise-chain/_

Promise는 비동기 작업을 수행하고 그 작업의 성공 혹은 실패 함수를 호출할 수 있다.

function getData(){

  /*

  비동기 함수

  */

}


new Promise((resolve, reject) => {

  const result = getData();


  if ( /* 비동기 작업 수행 성공 */) {

    resolve(result);

  } else {

    reject(result);

  }

})

Promise의 상태(State)

Promise 객체의 상태 정보는 세가지가 있다.

• pending: 비동기 처리가 아직 수행되지 않은 상태 - Promise 객체가 생성된 직후 기본 상태
• fulfilled: 비동기 처리가 수행된 상태 (성공) -> resolve 함수 호출
• rejected: 비동기 처리가 수행된 상태 (실패) -> reject 함수 호출

정리

• Promise는 콜백 지옥에 빠지는 비동기 처리를 간결하게 처리할 수 있게 표현
• 상태에는 pending, fulfilled, rejected 가 있다.
• 실행 결과에 따라 실패 시 reject, 성공 시 resolve 함수를 호출할 수 있다.

참고 링크

- Promise (https://learnjs.vlpt.us/async/01-promise.html)

_Event Loop_

이벤트 루프란 무엇일까?

Event Loop

이벤트 루프는 node.js의 기본적인 동작 방식이다.

Call Stack과 Callback Queue의 상태를 체크하여, Call Stack이 빈 상태가 되면 Callback Queue의 첫번째 콜백을 Call Stack으로 밀어넣는다. 이를 틱(Tick)이라 한다.

• Call Stack: 코드가 실행될 때 쌓이는 곳. Stack 형태로 쌓임. 함수를 실행하고 값을 **return 하면 call Stack에서 제거**된다.
• Callback Queue: 비동기적으로 실행된 콜백함수가 보관된 영역. eg. setTimeout에서 타이머 완료 후 실행되는 함수 등...

이벤트 루프는 총 6개의 단계를 가진다.

이벤트 단계

• Timer 단계
  • 이벤트 루프의 시작 단계이다.
• Pending(I/O) 콜백 단계
• Idel, Prepare 단계
• Poll 단계
• Check 단계
• Close 단계

microTaskQueue

이벤트 루프는 우선적으로 Microtask Queue를 먼저 확인한다.

MicroStack Queue에 콜백이 있다면 이를 먼저 Call Stack에 담는다.

이벤트 루프는 계속 공부를 더 해야겠다..

참고 링크

• JavaScript 비동기 핵심 Event Loop 정리 (https://medium.com/sjk5766/javascript-%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%95%B5%EC%8B%AC-event-loop-%EC%A0%95%EB%A6%AC-422eb29231a8)
• Event Loop와 비동기 (https://pozafly.github.io/javascript/event-loop-and-async/)

_Node.js Logo_

Node.js가 무엇일까?

JS의 역사

자바스크립트는 브라우저에서 동적 페이지를 다루기 위해 시작된 언어였다.

그러나 브라우저에서 소스코드를 그대로 확인할 수 있었기 때문에 보안에 취약하다는 인식과 함께 프로그래밍 언어로써 인정을 받지 못하였다.

Node.JS

Node.JS는 자바스크립트 런타임이다. 즉 브라우저에서만 사용 가능했던 자바스크립트를 로컬에서 사용할 수 있게끔 해 주는 역할을 한다. 이 덕분에 자바스크립트는 프론트엔드 뿐만 아니라 백엔드에서 까지 활용할 수 있게 된 것이다. 거기에 V8엔진을 이용했기 때문에 성능 역시 인정을 받는다.

특징

싱글 스레드 방식

싱글 스레드는 작업에 사용하는 스레드를 하나 사용하는 방식이다. 그러나 엄밀히 말하면 개발자가 직접 스레드 풀을 관리하지 않고 node.js에 포함된 **libuv**가 스레드 풀을 관리하기 때문에 단일 스레드에서 동작하는 것처럼 이해하기 쉬운 코드를 작성할 수 있다.

추가로 웹 서버를 운용할 때는 프로세서(CPU)를 분산해서 관리하므로, 실질적으로는 여러 개의 코어에서 별개로 처리된다.

- P.S.

작업 요청이 동시에 발생했을 때 각 작업을 처리하기 위한 스레드를 만들고 할당하는 방식은 멀티 스레드인데, 여러 작업을 동시에 처리하기 때문에 빠르지만 자원을 관리하는 노력이 많이 들어가고 쓰레드의 개수만큼 메모리를 차지하므로 메모리 관리에 문제가 생길 수 있다.

non-blocking I/O

앞의 작업이 끝날때까지 기다리지 않고(non-blocking) 비동기로 처리한다. 즉, 입력은 하나의 스레드에서 받지만 순서대로 처리하지 않고 먼저 처리된 결과를 이벤트로 반환해줌을 의미한다.