자바스크립트 동기? 비동기? 초보 개발자 공부

자바스크립트 동기? 비동기?  초보 개발자 공부

 

오늘은 자바스크립트의 동기, 비동기 함수에 관해서 이야기해보려 합니다.

우리는 개발을 진행함에 따라 이러한 말들을 많이 들어볼 텐데요.

오늘도 아주 쉽게 알아보도록 하겠습니다.

 

1. 자바스크립트 작동원리.
2. 동기 함수란?
3. 비동기 함수이란?
4. 마무리.

 

1. 자바스크립트 동작원리.

우리는 동기, 비동기 함수들을 알아보기 전 자바스크립트가 어떻게 작동을 하는지

잠시 들여다볼 필요가 있습니다.

우리가 사용하는 언어는 대부분 2가지의 형태를 띠고 있습니다.

컴파일러 언어 혹은 인터프리터 언어가 그것입니다.

(자바 혹은 C#과 같이 JIT 컴파일러를 사용하는 언어도 있습니다.)

컴파일러와 인터프리터에 관해 좀 더 자세히 알고 싶으시다면,

아래의 링크를 확인해주세요.

https://ko-de-dev-green.tistory.com/20?category=864457

Compiler(컴파일러) 와 Interpreter(인터프리터) 차이점.

우리가 사용하는 자바스크립트는 인터프리터 언어입니다.

인터프리터 언어는 쉽게 말해 컴퓨터와 코드 사이에 중간 해석자가 존재하며,

코드를 한 줄 한 줄 읽는 대로 컴퓨터에 해석해서 알려주는 것을 의미합니다.

 

또한 자바스크립트는 기본적으로 여러 가지 작업을 동시에 작업할 수 없습니다.

자바스크립트는 기본적으로 위에서 아래로 하나의 동작씩 수행해 나갑니다.

 

왜 그러한지는 아래에서 알아보겠습니다.

 

 

2. 동기 함수란?

동기 함수란 전혀 어려울 게 없습니다.

아래의 코드와 같이 우리가 평소에 사용하는 함수입니다.

 

const sayHello = () => console.log("hello");

 

 

3. 비동기 함수란?

자 그럼 이제 비동기 함수를 알아봅시다.

제가 위에서 언급했듯이, 자바스크립트는 하나의 작업씩 차례대로 수행해 나간다고 했습니다.

하지만 비동기 함수를 만난다면 자바스크립트는 비동기 함수를 일반 동기 함수처럼

수행하는 것이 아닌 대기하는 공간에 두게 되고 거기서 비동기 함수가 수행됩니다.

즉 자바스크립트 스스로

"아 이건 비동기 함수네, 일단 대기하는 공간에 미뤄두고 결과가 나오면 그때 받아서 사용해야지"

라고 생각하고 수행합니다.

즉 비동기 함수는 스택에(Stack)서 동기 함수처럼 실행되고 결과가 나올 때까지 기다리는 것이 아닌,

비동기 함수는 옆에 대기하는 공간에서 실행되고 결과를 받아오면 다시 스택에 올려 보내게 됩니다.

하지만 바로 스택에 올라가는 것이 아닌 큐(Queue)에서 결과를 받아온 뒤 스택으로 올려 보냅니다.

큐는 스택이 비어있다면 그때 하나씩 결과를 올려 보내고 스택이 결과를 받아 수행하게 됩니다.

 

자 설명이 길었습니다.

이제 어떻게 비동기 함수를 작성하는지 보겠습니다.

 

비동기 함수는 대략 2가지 종류가 있습니다.

오늘은 async await을 작성하고 다음에는 promise를 작성하겠습니다.

 

async await은 비교적 최근 문법이며, promise보다 쉽고 가독성 높게

코드를 작성할 수 있습니다.

그렇기에 이번 시간에 먼저 async await을 다루고 다음에 promise를 다루기로 했습니다.

아래의 코드를 보겠습니다.

 

// 동기 함수
const fetchData = () => {
	const data = fetchSomthing('fetching URL');
	console.log(data);
};

// 비동기 함수
const fetchData2 = async() => {
	const data = await fetchSomthing('fetching URL');
	console.log(data);
};

자 위에 동기와 비동기 함수가 존재합니다

위의 두 함수가 둘 다 실행된다고 한다면

첫 번째 fetchData함수 동기 함수로써 undefined 혹은 null이 나오게 될 것입니다.

그 이유는 fetchSomething이라는 함수가 api를 통해 데이터를 가져오기 전 콘솔 로그가 출력되기 때문입니다.

 

아래의 코드는 비동기 함수입니다.

함수의 파라미터 앞에 async라는 키워드가 있고,

그리고 fetchSomething이라는 함수 앞에 await이라는 키워드가 붙어있습니다.

이 뜻은 즉 fetchSomething이라는 함수를 실행하고 데이터를 가져오기까지 기다린 뒤

결괏값을 받아오면 그때 콘솔 로그를 출력해라 라는 뜻입니다.

 

사용방법이 전혀 어렵지 않습니다.

두 가지 키워드만 사용하면 비동기 함수를 만들 수 있는 것입니다.

 

4. 마무리.

자 다시 한번 키워드만 짚어보겠습니다.

 

1. 자바스크립트는 사실 하나의 작업만 수행하고 그 작업이 끝날 시 다음 작업으로 넘어갑니다.

2. 비동기 함수는 스택에서 실행되지 않고 대기하는 공간으로 보내진 뒤 그곳에서 실행됩니다.

3. 대기하는 공간에서 실행되어 결과를 얻은 함수는 큐에 보내져 스택이 비워진 뒤 큐에서 스택에 보내게 됩니다.

4. 비동기 함수는 2가지가 있습니다. promise와 async await

5. async await은 최신 문법이며 await 키워드가 있다면 키워드가 붙어있는 작업이 끝날 때까지 기다린 뒤

다음 작업으로 넘어가게 됩니다.

 

매번 말씀드리지만 시작이 가장 어렵습니다.

천천히 차근차근 배우신다면 어떠한 일이든 꼭 좋은 결과가 있을 겁니다.

다 같이 힘내서 공부합시다.

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.

Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.