비동기 vs 동기

우리가 코드를 짜면 보통 함수는 순차적으로 진행이된다. 즉 동기적으로 진행이 되는데 만약에 한 함수가 너무 시간을 잡아먹으면 다른 함수가 실행되지 못하는 단점이 있다! 그것을 해결해 줄 수 있는 것이 비동기! 병렬적으로 동시에 실행할 수 있도록 만들어준다.

이번 글에서는 동기식과 비동기식 프로그래밍을 이해하고 어떻게 구현하는지 파악해 보겠습니다!

javascript 코드들을 node.js 를 설치 후 실행하면서 확인해봅시당

---

Chaining 처리 / Hard Code

이 코드는 Promise와 then을 활용해서 하나의 비동기 함수가 완료된 후 다음 함수를 실행하는 코드이다 즉 동기적으로 수행된다.

function delay_word(word, delay) {
  return new Promise(resolve => {
    setTimeout(function (){
      resolve(word)
    }, delay)
  })
}


delay_word('1', 500).then((resolve) => {

	console.log(resolve)

	delay_word('2', 490).then((resolve) => { 

		console.log(resolve)
		
		delay_word('3', 480).then((resolve) => {
			
			console.log(resolve)

			delay_word('4', 470).then((resolve) => {

				console.log(resolve)

				delay_word('5', 460).then((resolve) => {

					console.log(resolve)
				})
			})
		})
	})
})

async await 로 만든 완전히 동일한 코드

function delay_word(word, delay) {
  return new Promise(resolve => {
    setTimeout(function (){
      resolve(word)
    }, delay)
  })
}


async function test(){
	const resolve_0 = await delay_word('1', 500)
	console.log(resolve_0)
	const resolve_1 = await delay_word('2', 490)
	console.log(resolve_1)
	const resolve_2 = await delay_word('3', 480)	
	console.log(resolve_2)
	const resolve_3 = await delay_word('4', 470)
	console.log(resolve_3)
	const resolve_4 = await delay_word('5', 460)
	console.log(resolve_4)
}

test()

---

Chaining 처리 / Soft Code

이 코드는 마찬가지로 동기식 방식이지만 다른점은 호출 횟수나 입력 값을 가변적으로 바꿀 수 있다.

function delay_word(word, delay) {
  return new Promise(resolve => {
    setTimeout(function (){
      resolve(word)      
    }, delay)
  })
}


const array = [{word:'1', delay:500}, {word:'2', delay:490}, {word:'3', delay:480}, {word:'4', delay:470}, {word:'5', delay:460}]

array.reduce((prev, item) => {

	return prev.then(() =>
		delay_word(item.word, item.delay).then((promise) => {console.log(promise)}))

}, Promise.resolve())

async await 코드로 변환하자면

function delay_word(word, delay) {
  return new Promise(resolve => {
    setTimeout(function (){
      resolve(word)      
    }, delay)
  })
}


const array = [{word:'1', delay:500}, {word:'2', delay:490}, {word:'3', delay:480}, {word:'4', delay:470}, {word:'5', delay:460}]

async function test(){

	for(const item of array) {
		const resolve = await delay_word(item.word, item.delay)
	
		console.log(resolve)				
	}
}

test()

---

All 처리 / 비 순차 결과

하나의 함수가 실행 중에 다음 함수를 실행하는 비동기 처리 방식 이 방식을 본다면 호출된 순서와 상관없이 먼저 완료된 순으로 출력한다. (다른 함수에 영향을 주지 않을 경우 사용가능하다!)

function delay_word(word, delay) {
  return new Promise(resolve => {
    setTimeout(function (){
      resolve(word)
    }, delay)
  })
}


const array = [{word:'1', delay:500}, {word:'2', delay:490}, {word:'3', delay:480}, {word:'4', delay:470}, {word:'5', delay:460}]


array.forEach(async (item) => {
	
	delay_word(item.word, item.delay).then((resolve) => {console.log(resolve)})			
})

async/await 코드로 변환하면

function delay_word(word, delay) {
  return new Promise(resolve => {
    setTimeout(function (){
      resolve(word)
    }, delay)
  })
}


const array = [{word:'1', delay:500}, {word:'2', delay:490}, {word:'3', delay:480}, {word:'4', delay:470}, {word:'5', delay:460}]


array.forEach(async (item) => {
	
	const resolve = await delay_word(item.word, item.delay)
	
	console.log(resolve)
	
})

---

All 처리 / 순차 결과

이 방식도 마찬가지로 비동기식 방식이다. 다른 점은 호출된 순으로 결과를 출력한다!

function delay_word(word, delay) {
  return new Promise(resolve => {
    setTimeout(function (){
      resolve(word)
    }, delay)
  })
}


const array = [{word:'1', delay:500}, {word:'2', delay:490}, {word:'3', delay:480}, {word:'4', delay:470}, {word:'5', delay:460}]

const promise_list = []

array.forEach((item) => {

	const promise = delay_word(item.word, item.delay)

	promise_list.push(promise)
})

Promise.all(promise_list).then((values) => {

	values.forEach((resolve) => {console.log(resolve)})
})

async await 변환 코드

function delay_word(word, delay) {
  return new Promise(resolve => {
    setTimeout(function (){
      resolve(word)
    }, delay)
  })
}


const array = [{word:'1', delay:500}, {word:'2', delay:490}, {word:'3', delay:480}, {word:'4', delay:470}, {word:'5', delay:460}]


async function test(){
	
	const async_fun_list = []

	for(item of array){	
	
		const async_fun = delay_word(item.word, item.delay)
	
		async_fun_list.push(async_fun)
	}
		
	for(async_fun of async_fun_list){
		
		const resolve = await async_fun
		
		console.log(resolve)
	}		
}

	
test()

---

Promise then 방식과 async await 방식 두가지 방식으로 동기 방식과 비동기 방식 코드를 작성하고 실습해보았다!

가장 중요한 것은 async를 적용한 함수는 return 형식이 모두 promise 객체가 되는 것이고, 그 객체가 실행될 때 까지 기다릴 수 있는게 '.then' 과 'await' 둘 중 하나로 수행할 수 있다.

그리고 Promise.all을 사용해서 순서를 보존하면서 병렬 작업을 통해 마지막 작업이 끝나면 한번에 결과를 보여줄 수 있다.