Javascript는 동기일까? 비동기일까?

Jiwon Yang·2019년 12월 4일
7
post-custom-banner

동기 VS 비동기

  • Syncronous 동기 : 요청을 보낸 후 해당 요청의 응답을 받아야 다음 동작을 실행하는 방식
  • Asynchronous 비동기 : 요청을 보낸 후 응답과 관계없이 다음 동작을 실행하는 방식

자바스크립트는 동기적이다.

  • 자바스크립트는 동기적이고, blocking이며, single-threaded한 언어입니다. 하지만, 이것은 오직 한 연산에서의 특성을 의미하며, 모든 것에서의 특성을 의미하지 않습니다.

  • 만약에, 데이터베이스로부터 많은 양의 데이터를 가져오는 요청을 해야 한다면, 어떻게 해야 할까요? 예를 들어, PGPostgreSQL가 데이터를 가져오는 동안 우리는 기다리고 싶지 않습니다. JavaScript 개발자들은 이러한 문제를 위한 해결책을 제시했습니다.

  • 사람들이 JavaScript가 비동기 언어라고 흔히 오해하는 이유는, 우리는Javascript가 비동기식으로 동작하도록 조작할 수 있기 때문입니다. 그 방법에 대해 살펴보겠습니다.


해결책1 : 비동기적 Callback

  • 동기식 세계에서 가장 간단한 해결책은 비동기 Callback을 사용하는 것입니다.
  • 데이터베이스 요청을 예로 들어보겠습니다. 비동기 Callback은 데이터베이스에 요청을 보내는 callback 함수(또는 다른 중첩된 Callback 함수를 발생시킬 수 있도록 합니다. 그 함수가 데이터베이스로부터 응답을 기다릴 동안, 남은 코드를 자유롭게 실행할 수 있습니다.
  • 일단 데이터베이스 요청이 끝나면, 그 결과(또는 다른 중첩된 코드)는 큐에 보내진 다음, 이벤트 루프를 통해 처리됩니다. Function C, E, F, G는 모두 브라우저, 큐, 이벤트 루프에 보내집니다.
  • 이는 좋은 해결책이긴 하지만, 아직 문제점이 존재합니다. Function C가 언제 해결될지 정확히 예측할 수 없기 때문에, 모든 종속 함수를 C안에 중첩시켜야 합니다. 결국 많은 중첩 함수가 생겨 코드가 복잡해지는 것이 바로 콜백 지옥 입니다.

해결책2 : Promises

  • 콜백 함수를 해결하기 위해서, 사람들은 Promise를 쓰기 시작했습니다. 이것은 동기적으로 보이는, 비동기 처리 방식 입니다.

    Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.

  • Promise를 사용하여 비동기 작업이 (성공 혹은 실패로) 완료된 후의 결과 값을 받을 수 있다.
    결과 값을 돌려받을 수 있기 때문에 이후 처리를 컨트롤 할 수 있게 된다.
  • Promise를 사용하면, 한 블록 내에 많은 중첩 함수를 쓰지 않고도 비동기 처리가 가능합니다.
  • 이같은 방법은 더 module 지향적이며, 읽기 쉽다는 비동기적 프로그래밍의 장점을 포함합니다.

Promise 의 상태값

Promise 객체는 new 키워드로 생성할 수 있으며 총 4개의 상태 값을 가진다.

1) pending: 아직 결과 값이 반환되지 않은 진행 중인 상태

2) settled: 결과 값이 성공 혹은 실패로 반환된 상태 (한번 setteld된 값은 재실행 할 수 없다.)

fulfilled : 성공
rejected : 실패


해결책3 : Async & Await

참고 자료

profile
안녕하세요 양지원입니다
post-custom-banner

0개의 댓글