코드스테이츠 소프트웨어엔지지어링 부트캠프 +44일, 비동기 동기

동기, 비동기

• 동기(Synchronous) : 한 사건이 끝남과 동시에 다음 사건이 시작한다. 코드가 순서대로 실행된다
• 비동기(Asynchronouse) : 순서와 상관없이 먼저 준비되는 코드부터 실행된다.

동기와 비동기는 장단점이 있다.

 

• 동기는 설계가 간단하고 직관적이다. 앞의 내용이 처리되기 전까지 뒤의 내용들은 아무것도 못하고 대기해야 한다.
• 비동기는 동기보다 복잡하다. 앞의 내용이 끝나지 않아도 뒤의 내용이 먼저 실행될 수 있어서 효율적이다.

https://velog.io/@daybreak/Javascript-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC

예시

- 동기는 전화와 비슷하다. 내가 짱구와 통화를 하고 있으면 짱구와의 통화가 끝나기 전까지 철수랑 통화를 할 수 없다.

짱구랑 전화를 하고 있을때 철수가 나와 짱구의 전화가 끝나기를 기다린다면 철수는 block 상태이다.

 

console.log('1번')
console.log('2번')
console.log('3번')

-------------
실행화면

'1번'
'2번'
'3번'

 

 

- 비동기는 문자와 비슷하다. 내가 짱구와 문자를 하고 있더라도 중간에 철수에게 대답을 할 수 있다. 철수는 나의 문자를 기다리는 동안에도 다른 친구들에게 문자를 보낼 수 있으므로 non-block 상태이다.

 

console.log('1번')
setTimeout(()=>{
console.log('2번')
},2)
console.log('3번')

-------------
실행화면

'1번'
'3번'
undefined
'2번'

 

 

비동기를 동기처럼 실행하는 방법

1. Callback Hell

말 그대로 콜백함수를 넣어서 순서를 강제로 만든다.

대신 길어지면 '지옥'이 된다.

 

callback hell

2. promise 사용

Promise 는 JS에서 비동기 작업을 더 편리하게 처리할 수 있도록 ES6에 도입된 기능이다.

 

다음은 promise의 간단한 예시이다.

const k = new Promise((resolve, reject) => {
resolve('a') // resolve는 .then과 연결된다.
			 // resolve는 .then이 무엇인지는 상관하지 않고 그냥 .then과 연결되어 'a'를 전달한다.
             //.then의 매개변수로 들어간 화살표함수의 el에 'a'가 들어간다.
})

k.then(el=>console.log(el)) // .then의 매개변수는 화살표함수이다. 그 화살표함수는 'a'를 인자로 받는다.

resolve는 new Promise가 만들어질때 자동실행된다. resolve와 reject는 자바스크립트가 자체적으로 제공하는 콜백함수이다.

• resolve : 작업이 성공적으로 끝난 경우, 그 결과를 나타내는 value와 함께 호출. / .then() 과 연결된다.
• reject : 에러 발생 시 에러 객체를 나타내는 error와 함께 호출. / .catch()와 연결된다.

promise를 이용하여 비동기를 동기화 하는 방법은 .then()을 이어 붙히는 것이다.

코드스테이츠 자료

3. async/await 사용

 

async/await 는 ES8문법으로 최근 문법이다. 콜백함수와 promise의 단점을 보완하고 가독성을 높혀준다.

 

async/await는 promise를 기반으로 한다.

따라서 async함수는 promise를 리턴하고 await 함수는 promise가 된다.

 

 

-사용법 

• async : function 앞에 위치한다. function 앞에 asyncd를 붙히면 해당 함수는 항상 promise를 반환한다.
• await : 호출할 비동기함수(promise) 앞에 await를 붙힌다. promise가 처리될 때까지 진행이 멈춘다. async함수에서만 사용할 수 있다.

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function greeting() {
  console.log('hello??');
  await sleep(1000); // 1초쉬고
  console.log('Who are you??');
}

greeting()

-----------------
실행화면


hello??
Promise {<pending>}           
Who are you??         //1초후에 실행됨

 

-예외처리

async/await에서 예외를 처리하는 방법은 try-catch이다. promise에서 에러처리를 위해 .catch()를 사용했던것과 비슷하다.

 

 

 

---

참고자료:

코드스테이츠

https://velog.io/@daybreak/Javascript-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC

https://cyberx.tistory.com/91

https://private.tistory.com/24