-
-
안녕하세요? 오늘은, 자바스크림트의 동기와 비동기 처리에 대해서 알아보도록 하겠습니다.
: 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) 등이 존재하며, 이에따른 개념도 같이 파악을 한다면 좋을 것 같습니다.
오늘도 즐거운 하루 되시길 바라겠습니다.
'프로그래밍 > Front-end' 카테고리의 다른 글
JavaScript로 Map과 List 클래스 구현하기 (0) | 2024.10.30 |
---|---|
자바스크립트로 HTML 색상 코드 다루기 (0) | 2024.10.30 |
자바스크립트 JSP 페이지 include 방법에 대하여! (0) | 2024.09.27 |
자바스크립트 EL태그와 JSTL태그의 정의와 사용법에 대하여! (0) | 2024.09.27 |
자바스크립트 CORS(Corss Origin Resource Sharing)과 대처방안에 대하여! (0) | 2024.09.27 |
vue 설치 및 개발환경 셋팅 (0) | 2024.09.09 |
리액트 프로젝트 만들기! 리액트 프로젝트 간단 생성 (create-react-app 사용) (0) | 2024.09.05 |
앵귤러 (=Angular) 개념 및 특징 정리 (0) | 2024.09.05 |