TIL 9. [JavaScript 비동기]

윤창현·2021년 9월 12일
3

T.I.L

목록 보기
9/10
post-thumbnail

💻 JavaScript 비동기

TIL이기도 하지만 예습도 포함되어 있는 이번 글에는 간단하게
비동기와 관련된 키워드들을 정리하고 복습하는 시간을 가지려 한다.
각 키워드들을 깊게 파고 들어서 완벽한 이해가 필요한 구간인 것 같다.



⏳ JavaScript는 동기식 언어이다.

자바스크립트는 한 번에 하나의 작업을 수행한다.

한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다리는 것을 말하며 이러한 동작을 단일 스레드(싱글 스레드), 동기(Synchronous)라고 부른다.

그렇다면 비동기란 무엇일까?

비동기(asynchronous)란?

동기(Synchronous)와는 다르게 어떠한 요청을 보내면 그 요청이 끝날 때까지 기다리는 것이 아니라, 응답에 관계없이 바로 다음 동작이 실행되는 방식을 말한다.


동기(Synchronous)는 순차적으로 한 단계씩 끝내는 것.
비동기(asynchronous)는 동시에 효율적으로 일을 수행하는 것.


⏳ Call Back 함수

  • 다른 함수에 매개변수로 넘겨준 함수를 말한다.
    매개변수로 넘겨받은 함수는 일단 넘겨받고, 때가 되면 나중에 호출(called back) 한다는 것이 콜백 함수의 개념이다.

  • 코드를 통해 명시적으로 호출하는 함수가 아니라, 개발자는 단지 함수를 등록 하기만 하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 말한다.

Callback을 활용한 비동기적 프로그래밍

Callback 함수를 사용하는 이유

  • 자바스크립트에서 비동기적 프로그래밍을 할 수 있기 때문이고
    콜백 함수 기법은 자바스크립트에서 가장 오래된 비동기적 메커니즘이다.
  • 비동기적 테크닉 : 소중한 싱글스레드의 멈춤을 방지. 즉 블록킹을 방지하여 싱글스레드가 논 블록킹으로 동작하게 한다.

⏳ Wep Api

  • API 란 Application Programing Interface, 응용프로그램에서 기능을 제어할 수 있도록 운영체제나 프로그래밍 언어가 제공하는 인터페이스를 말한다.

  • 웹에서 여러 유용한 작업을 수행할 수 있도록 제공되는 규격이며, 자바스크립트를 통해 접근할 수 있고 윈도우나 엘리먼트에 대한 작업들도 이에 속한다.

  • 브라우저에서 제공되는 API로, 비동기 작업을 담당하고 Web API는 setTimeout의 딜레이(기다리는 시간)을 받고, 시간이 지나면 callback 함수를 task queue에 전달한다.


⏳ Promise

  • 자바스크립트 비동기 처리에 사용되는 객체이다.

  • Promise의 3가지 상태(states)

    상태란 프로미스의 처리 과정을 의미하며, new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖는다.

    • Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
    • Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해 준 상태
    • Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

⏳ async / await

  • async & await는 promise를 간결/간편하고
    동기적으로 실행되는 것처럼 보이게 만들어준다.

  • async와 await는 새로운 것이 추가된 것이 아니라
    기존에 존재하는 promise 위에 조금 더 간편한 API 제공함


자바스크립트 비동기에 필요한 구성들을 간단하게 정리해보았다.
개발 공부를 하면서 느낀 점은 이해한다는 것이 얼마나 중요한 지 깨달았다.
앞으로도 이해와 반복을 통해서 꾸준히 성장하고 싶다.

profile
긍정적 영향을 전하며 함께하고 싶은 개발자를 그린다.

0개의 댓글