wecode TIL : 동기와 비동기

Damdaridam·2022년 3월 13일

wecode TIL

목록 보기

5/8

📌 학습목표

프로그래밍 언어에서 동기와 비동기가 무엇인지 설명할 수 있다.

자바스크립트가 동기 방식으로 진행된다는 것을 이해하며 비동기 패턴 구현에 대한 필요성을 느낀다.

자바스크립트에서 비동기를 구현하는 방식을 이해하고 스스로 구현할 수 있다.

JavaScript에서 비동기에 대해 블로그 글로 정리한다.

✏️ 동기와 비동기 (Asynchronous)

자바스크립트는 동기적이다.
: 호이스팅(hoisting) 이후 코드가 하나하나씩 순차적으로 실행된다.
ㄴ 호이스팅 : 함수 선언들이 자동으로 가장 위로 가서 선언되는 것

⭐️ 그렇다면 비동기적은?

로직 A와 B의 코드가 있다면 A코드 실행 후 바로 B코드를 실행함. 즉 A 코드의 진행이 끝나는 여부와 상관없이 바로 다음코드로 넘어가며, 코드의 결과는 빨리 나오는 대로 넘겨줌.

ex. 음식점에서 A, B, C 메뉴를 주문함
동기적 처리
A 주문을 넣고 A를 만들고 A를 내보냄.
B 주문을 넣고 B를 만들고 B를 내보냄.
C 주문을 넣고 C를 만들고 C를 내보냄.
비동기적 처리
A주문 넣고 바로 B주문 넣고 바로 C주문 넣은 후 먼저 만들어져서 나오는 순서대로 내보냄. (A 주문 진행상황과 상관없이 바로 B 주문 코드로 넘어감)

📌 자바스크립트의 비동기 처리방식

1. CallBack 함수

콜백함수 란?
나중에 호출되는 함수.
즉, 함수를 우선 등록만 해두고, 특정 이벤트나 시점에 도달이 되었을 때 시스템에서 해당 함수가 동작하도록 호출하는 함수이다.
대표적인 콜백함수는 eventhandler가 있다.
<button onclick="button_click();"> 버튼 </button>
<script>
function button_click() {
	alert("버튼을 누르셨습니다.");
}
</script>
여기서 얼럿을 띄우는 함수는 "클릭" 이라는 이벤트행위가 발생하면 호출되는 콜백함수이다.
~
수행하는 함수가 많아지면서 발생하는 문제점 : 콜백지옥 📞📞📞😹
1) 가독성이 떨어짐
2) 에러 발생 시 유지보수가 힘들고, 디버깅이 복잡함.

2. Promise

자바스크립트에서 제공하는 비동기 처리를 위한 객체(Object)
정해진 장시간의 기능을 수행한 후 정상적으로 기능이 되었다면, 🥂성공의 메시지🥂와 함께 결과값을 전달, 예상치 못한 문제가 발생하면 🚨ERROR🚨를 전달함.
.
1) State에 대한 이해
수행중 : Pending

수행완료 : fulfilled
수행불가 : rejected
.
2) Producer vs Consumer
const Promise = new Promise((resolve, reject) => {
   // data를 받아오거나 읽어오는 함수 
})```

Promise를 전달하는 순간 excuter 함수가 작동한다는 부분 기억하기!
When new Promise is created, the excutor runs automatically.

🌈 then, catch, finally

then : promise 의 콜백함수들이 이행상태가 되면, then을 통해 처리된 결과값을 받아서 다른 작업을 수행할 수 있습니다.

catch : promise의 이행이 실패된 경우, catch를 통해서 실패상황에 대한 이유와 값을 받아 확인할 수 있습니다.

finally : 이행 성공여부와 상관 없이 무조건 마지막에 호출되어지는 함수입니다.
promise //
  .then (value => {
  console.log(value)
  .catch (error => {
  console.log(error)
  })
  .fanally
프로미스의 에러처리방법
// then()의 두번째 인자로 에러를 처리하는 방법
  getData().then(
  handleSuccess,
  handleError
);
// catch를 이용하는 방법
  getData().then().catch();

3. Async, Await

프로미스를 더욱 간결하고 동기적으로 사용할 수 있도록 도와주는 문법 Sysntactic Sugar!!

async : 함수 앞에 쓰면 코드블럭이 자동으로 "promise" 로 바뀜!
간단한 키워드 추가만으로 바로 promise를 간편하게 쓸 수 있음.
즉 async 함수를 호출 한다는 것 = 프로미스 객체를 반환하는 것
async function fetchUser(){
//do network request in 10secs....
return 'ellie'
}  --> 콘솔에 출력하면 promise로 나옴!
await : async가 붙은 함수 안에서만 사용할 수 있음

[async & await 기본 문법]

async function 함수명() {
try{await 비동기_처리_메서드_명();
} catch (error) {
} } ```

주의점
1) await의 대상이 되는 비동기 처리 코드는 Axios 등 프로미스를 반환하는 API 호출 함수
2) try, catch 는 promise의 .then / .catch 유사한 기능.

💡 Useful Promise.all API

Wecode 실습과제 (promise 의 then 콜백지옥에 빠지지 않는 해결법)
1번. async/await으로 감싼 후 동기적으로 실행
장점 : 깔끔 / 치명적 단점 : 오래걸림

async function getName(id) { ...DB에서 가져와서 이름을 return 하는 함수 };
async function getAge(id) { ...DB에서 가져와서 나이를 return 하는 함수 }
async function getGender(id) { ...DB에서 가져와서 성별을 return 하는 함수 }
async function getInfoSlow(id) {
	const name = await getName(id);
const age = await getAge(id);
const gender = await getGender(id);
return {
  name,
  age,
  gender
}
}

2번. promise.all 메소드를 사용하여 동시에 처리하기

async function getName(id) { ...DB에서 가져와서 이름을 return 하는 함수 };
async function getAge(id) { ...DB에서 가져와서 나이를 return 하는 함수 }
async function getGender(id) { ...DB에서 가져와서 성별을 return 하는 함수 }
async function getInfoFast(id) {
	const results = await Promise.all([ getName(id), getAge(id), getGender(id) ]);
	// .then, .catch도 사용할 수 있습니다.
	return {
  name: results[0],
  age: results[1],
  gender: results[2]
}
}

📌 추가 개념 학습

자바스크립트는 동기적이며 single-thread한 언어이고, 이런 자바스크립트를 비동기적으로 동작하게 하는 핵심요소는 브라우저 등의 구동환경이다.

🔥 주요 개념 공부하기

Event Loop : 구동환경 (브라우저, Node.js 등)에서 자바스크립트 엔진과 상호 연동하기 위해 사용하는 장치.

Web API : 브라우저에서 제공하는 API
API 가 뭐죠? Application Programming Interface의 약자로 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만드는 인터페이스

Task Queue : callback queue와 혼용되어 쓰이나 정식명칭으로 확인됨. callback은 task의 일종.

Call Stack : 콜백 함수들이 대기하는 곳(FIFO 선입선출)