본문 바로가기
프로그래밍/Front-end

자바스크립트의 동기(synchronous)와 비동기(asynchronous) 처리에 대하여!

by @GodWin 2024. 9. 27.

-

 

-

안녕하세요? 오늘은, 자바스크림트의 동기와 비동기 처리에 대해서 알아보도록 하겠습니다.


: A와 B의 작업이 실행되는 시각의 차이

 

동기(synchronous: 동시에 일어나는, 同期: 같은 시기) : 요청과 결과가 동시에 일어남, 요청을 받고, 바로 응답을 해줌, 설계가 간단하고 직관적, 결과가 주어질 때까지 대기, 반환시 반환값 리턴

 

비동기(Asynchronous: 동시에 일어나지 않는, 非同期: 같은 시기가 아닌) : 요청과 결과가 동시에 일어나지 않음, 동시에 다른 작업이 가능, 시간이 오래걸림, 반환시 콜백의 인자 리턴

 

예제)

 var f = require('f');


var d = f.readFileSync("file.txt","utf8");
console.log(d);


f.readFile("file2.txt","utf8",function(error,data){
    if (error) {throw err};
    console.log(data);
});


var d= f.readFileSync("file3.txt","utf8");
console.log(d);

 

결과물

-----------

file1

file3

file2

 

 

 

[요약]

: 동기처리와 비동시 처리의 차이는, 동기 실행이 끝마치고 그 뒤가 실행하고, 비동기 실행 도중 다른 작업이 가능합니다.

  • 동기: 작업이 완료될 때까지 기다림. 직관적이지만 블로킹이 발생할 수 있음.
  • 비동기: 작업이 완료되지 않아도 다음 작업을 진행. 더 복잡하지만 성능과 사용자 경험을 향상시킬 수 있음.

참조 및 연계 개념으로는, 블로킹(Blocking), 논블로킹(Non-blocking) 클로저(closure) 등이 존재하며, 이에따른 개념도 같이 파악을 한다면 좋을 것 같습니다.

 

오늘도 즐거운 하루 되시길 바라겠습니다.