JavaScript 06

동기와 비동기

 

종류	설명
동기	서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행
비동기	서버에서 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행

// 동기
console.log(1);
console.log(2);
console.log(3);

// 비동기
console.log(1);
setTimeout(() => {
	console.log(2);
}, 2000)
console.log(3);

* 참고 : 비동기적 코드의 실행 결과는 동기적 코드가 전부 실행되고 나서 값을 반환

참고 블로그 : 동기, 비동기 처리 (velog.io)

---

이벤트 루프

브라우저 동작을 제어하는 관리자로, setTimeout이나 fetch와 같은 비동기 자바스크립트 코드를 브라우저 Web APls에게 맡기고, 백그라운드 작업이 끝난 결과를 콜백 함수 형태로 큐(Callback Queue)에 넣고 처리 준비가 되면 호출 스택(Call Stack)에 넣어 마무리 작업을 진행한다.

 

참고 블로그 

🔄 자바스크립트 이벤트 루프 동작 구조 & 원리 끝판왕 (tistory.com)

 Event Loop (이벤트 루프) (velog.io)

---

module

여러 기능들에 관한 코드가 모여 있는 하나의 파일

특징	설명
유지보수성	기능들이 모듈화가 잘 되어 있다면, 의존성을 그만큼 줄일 수 있기 때문에 어떤 기능을 개선한다거나 수정할 때 훨씬 편리하다.
네임스페이스화	자바스크립트에서 전역변수는 전역공간을 가지기 때문에 코드의 양이 많아질수록 겹치는 네임스페이스가 많아질 수 있다. 그러나 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 그 문제가 해결된다.
재사용성	똑같은 코드를 반복하지 않고 모듈로 분리시켜서 필요할 때마다 사용할 수 있다.

 

// JavaScript
export let a = '예시';

<!-- // HTML -->
<script type="module">
import {a} from 'js파일경로';
console.log(a);
</script>

console

예시

 

참고 블로그 : [JS] 모듈에 대한 이해와 사용법 - 배하람의 블로그 (baeharam.netlify.app)

---

promise

주로 웹 서버에서 받아온 자료를 클라이언트에서 비동기적으로 처리하기 위한 목적.
콜백 지옥*을 방지할 수 있으며, 사용자 로그인 · 보안 설정 · 출력 등 다양한 응용이 가능하다.
Promise 객체가 만들어지면 내부적으로 executor* 자동 실행되며,
new Promise(executor)일 때 state는 "pending(대기)", result는 undefined 이고
비동기 처리가 되면 매개변수 resolve('메시지')는 then 메소드로 전달하여
state는 "fulfilled(이행)", result는 '메시지' 이다.

* executor : resolve**와 reject***를 인수로 갖는 함수
** resolve(value) : 성공적으로 끝난 경우 결과를 나타내는 value와 함께 호출
*** reject(error) : 에러 발생시 에러 객체를 나타내는 error와 함께 호출