[자바스크립트 문법] 동기(Synchronous) 비동기(Asynchronous) 프로그래밍

안녕하세요 요즘 빈번하게 글이 올라와서 죄송합니다ㅠㅠ 작업하면서 포스팅 하는 것을 깜빡했네요. 지금이라도 달려보겠습니다. 오늘은 자바스크립트 동기와 비동기 프로그래밍에 대한 내용을 살펴보겠습니다

목차
1. 자바스크립트는 싱글 스레드 언어이다
1-1. 블로킹(Blocking) 이란?
1-2.동기(Synchronous) 프로그래밍이란?
1-3. 동기(Synchronous)  코드 예시
2. 비동기(Asynchronous) 프로그래밍이란?
2-1. 비동기(Asynchronous) 코드 예시

 

서론 

자바스크립트에서 동기와 비동기 프로그래밍에 대해 알아보고, 이해를 돕기 위해 간단한 예시 코드들을 준비했습니다.  본론으로 넘어가시죠 

 

본론

1. 자바스크립트는 싱글 스레드 언어

 

자바스크립트는 한 번에 한 가지 작업만 수행할 수 있는 싱글 스레드 언어 입니다.

 

 

1-1. 블로킹(Blocking) 이란?

블로킹이라고 들어보신적 있으신가요?  배구나 농구 다양한 종목에서 블로킹(Blocking)이라고 들어보셨을 겁니다. "어떠한 행위를 막는다" 라고 해석이 됩니다. 자바스크립트에서 블로킹이 무엇인지 알아보시죠

 

하나의 코드가 실행되는 동안 다른 코드가 실행되지 못하고 기다려야 하는 상태를 말합니다.  동기적 프로그래밍 방식이 블로킹에 해당한다고 보시면됩니다. 

 

 

 

1-2. 동기(Synchronous) 프로그래밍이란?

작성한 코드의 순서대로 실행되는 방식으로,  작업이 끝나야 다음 작업을 실행하는 특징을 가집니다.

1-3. 동기(Synchronous)  코드 예시

console.log("하나");
console.log("둘");
console.log("셋");

 

이 코드를 보면 순차적으로 실행하는 동기적 프로그래밍 방식입니다.  여기서도 블로킹 현상이 일어납니다. 먼저 실행을 하면 첫 번째 콘솔에 "하나"가 출력되고 그 다음 코드들을 실행합니다. 다른 코드들은 이전 코드구문에 대한 실행이 끝날때 까지 기다려야 하는 상황이 발생하여 블로킹(Blocking) 현상이 나타나는 겁니다. 

 

 

2. 비동기(Asynchronous) 프로그래밍이란?

어떤 작업이 끝날 때까지 기다리지 않고 다음 작업을 진행하는 방식입니다. 주로 네트워크 요청, 파일 읽기, 타이머 함수 등에 사용됩니다.

 

 

2-1. 비동기(Asynchronous) 코드 예시

 

console.log("시작"); // 1

setTimeout(() => {
    console.log("게시글 데이터를 가져왔음"); // 3
    console.log("게시글 화면을 렌더링"); // 4
}, 1000)

console.log("메인화면 렌더링"); //2

 

이 코드를 보면 setTimeout( ) 이라는 비동기 함수를 사용하여  동기적 프로그래밍 방식이 아닌 비동기 프로그래밍 방식 코드입니다.

결론 

동기 프로그래밍은 작업을 순차적으로 처리하므로, 하나의 작업이 끝날 때까지 다른 작업이 기다려야 합니다. 이 방식은 간단하고 직관적이지만, 긴 작업이 있을 경우 프로그램이 멈춘 것처럼 보일 수 있습니다.

 

비동기 프로그래밍은 작업을 백그라운드에서 처리하여 다른 작업이 동시에 진행될 수 있게 해줍니다. 이를 통해 응답 속도를 높이고 프로그램의 흐름을 끊지 않게 할 수 있습니다. 

 

이렇게 동기 프로그래밍과 비동기 프로그래밍  방식에 대해 알아보았습니다. 감사합니다