Promise 하기 전에 알아보는 비동기 처리 -Promise(1)

예진·2024년 10월 24일

🍋JavaScript 내가 볼라고 정리해놓은 개념정리

목록 보기

2/11

Promise를 알려면 비동기처리를 알아야한다.
비동기방식은 전 글에서 ajax에서 간단하게 살펴봤었는데 정리 한 번 더 해보려고한다. 비동기처리를 할 때 Promise를 사용한다고 한다.
진짜 하나 몰라서 찾아보면 줄줄이 소세지마냥 모르는 것과 혼돈되는 것들이 나와서 이렇게 글이 길어지는 것같다.

비동기처리

비동기 처리는 쉽게 말해서 앞서 처리되고 있는 연산이 끝나고 다음 연산이 진행되는 것이 아니라 동시에 연산이 처리하는 방식을 말한다.
비동기와 반대인 동기 처리를 보면서 비동기가 뭔지 이해해보자.

동기처리방식(Synchronous) | 비동기처리방식(Asynchronous)
아래 표처럼 동기처리는 처리중인 연산을 다끝내고 다음 연산으로 넘어간다.
비동기처리는 한꺼번에 연산을 처리하는 걸 확인할 수 있다.
동기처리 방식으로 앱을 실행한다거나 유튜브에서 영상하나 보려면 시간이 오래걸릴 거다.

코드로 비동기처리 이해해보기

// #1
console.log('Hello');
// #2
setTimeout(function() {
	console.log('Bye');
}, 3000);
// #3
console.log('Hello Again');

위 코드를 예상해보자.
-Hello -> 3초뒤 Bye -> Hello Again
-Hello -> setTimeout실행,Hello Again ->3초가 지나 Bye
난 사실 별 생각없이 첫 번째지 (후비적) 해버렸다.두 번째 순서가 맞는 처리 순서다.!
setTimeout()함수가 Web API라고 한다. 그거랑 비동기랑 상관이 있나? 한번 찾아봤다.

Web API

Web API는 타이머, 네트워크 요청, 파일 입출력, 이벤트 처리 등 브라우저에서 제공하는 다양한 API를 포괄하는 API의 총칭이다. 브라우저마다 다르겠지만, 크롬 브라우저 일 경우 Web API는 멀티 스레드로 구현되어 있다.

아 그래서 멀티 스레드라서 비동기라는건가? 정답은 노우

멀티스레드, 싱글 스레드, 비동기, 동기 모두 다 다른 말이다.
어떤 일을 같이하는 것 같아보이는 건 비슷하지만 다르다.
스레드부터 차근차근 알아보자.

싱글 스레드, 멀티 스레드
- 스레드란 프로세스 내에 실행되는 작업의 단위라고 볼 수 있다.
  여기서 프로세스는 실행 중인 프로그램을 말한다.
- 싱글 스레드 : 하나의 프로세스 안에서 하나의 스레드가 작업한다. 일반적으로 하나의 프로세스에 하나의 스레드로 작업한다.
- 멀티 스레드 : 하나의 프로세스 내에서 둘 이상의 스레드가 동시에 작업을 수행하는 것

싱글,멀티 스레드와 동기,비동기는 어떻게 봐야할까
많은 분들이 동기 = 순서, 쓰레드 = 공간 이라고 나눠서 생각하더라.
그런 경우에 아래와 같이 구분지을 수있다.
- 싱글 스레드 - 동기
- 싱글 스레드 - 비동기 ( 자바스크립트 )
- 멀티 스레드 - 동기
- 멀티 스레드 - 비동기

아래 사진을 보면 좀 더 이해하기 쉬울 거다.
난 멀티 스레드 - 비동기 표현을 보고 예? 했는데,
하나의 Task를 여러 개로 나눠 여러 쓰레드에 넣은 거라고 생각했다.
상황에 따라 장단점이 있어서 상황에 맞게 사용하면 되겠다.

Promise를 보려다가 여기까지 와버렸다. 다시 Promise로 돌아가자.