24일차~(비동기)

오늘은 수업시작부터 과제가 있었는데 무척 어려웠다. 보통 과제 난이도는 bare minimum, advenced, nightmare 순인데 이전까지는 nightmare까지 끝냈었는데 오늘은 bare minimum까지밖에 못 끝냈다. 시간 남을때 풀어봐야겠다. 그리고나서 비동기에 대한 이론을 공부했다. 앞에서 과제를 생각보다 많이 못한게 신경이 쓰였는지 집중이 하나도 안됐다. 그리고 내일 드디어 기다리던 합동 스터디를 진행한다. 열심히 준비하긴 했는데 다들 재미있어 하시면 좋겠다!

 

1. 비동기

나의 말로 정리하자면 동기는 하나를 진행하고 있으면 다른 것을 못한다. 하지만 비동기 같은 경우에는 하나를 진행하고 있어도 다른 일을 동시에 진행할 수 있다. 좋은 점은 여러 개의 일을 처리할 경우 동기는 하나하나 처리해야 하지만 비동기 같은 경우에는 동시에 처리해 처리 시간을 줄일 수 있다. 하지만 동시에 처리를 시작하면 끝나는 때가 달라서 순서가 뒤죽박죽 섞이게 된다.

 

2. callback

위와 같은 문제점을 보안하기 위해서 callback함수를 사용할 수 있다.

let string = (str, callback) => {
	setTimeout(
    	() => {
        console.log(str)
        callback()
    	}, Math.floor(Math.random()*100)+1 // 랜덤으로 실행시간 딜레이
    )
}

// 순차적으로 실행시키기
let printAll = () => {
	string('a', () => {
		string('b', () => {
		})
	})
}
printAll();

위와 같이 실행하면 순차적으로 실행할 수 있다. 하지만 코드의 길이가 점점 길어질수록 가독성이 매우 떨어지게 된다. (callback Hell이라고도 부름)

 

3. promise

위의 callback Hell을 벗어나기 위해 promise를 사용한다.

let string = (str) => {
	return new promise((resolve, reject) => {
		setTimeout(
    		() => {
        	console.log(str)
       		resolve()
    		}, Math.floor(Math.random()*100)+1 // 랜덤으로 실행시간 딜레이
    	)
    })
}

let printAll = () => {
    string('a')
    .then(() => {
    	return string('b')
    })
    .then(() => {
    	return string('c')
    })
}
printAll();

위와 같이 작성하면 길이가 길어질수록 점점 뒤로 밀려나지 않기 때문에 가독성이 좋아진다. 하지만 이것 또한 가독성이 안좋아질 수 있다. 바로 함수가 여러 개일 경우이다. 

let string = (str) => {
	return new promise((resolve, reject) => {
		setTimeout(
    		() => {
        	console.log(str)
       		resolve()
    		}, Math.floor(Math.random()*100)+1 // 랜덤으로 실행시간 딜레이
    	)
    })
}

let sum = (num) => {
	return new promise((resolve, reject) => {
		setTimeout(
    		() => {
        	console.log(num)
       		resolve()
    		}, Math.floor(Math.random()*100)+1 // 랜덤으로 실행시간 딜레이
    	)
    })
}

string('a')
.then(() => {
    console.log('a')
    
    sum(3)
    .then(() => {
        console.log(3)
    })
})

위와 같이 코드가 점점 뒤로 밀려나는 promise Hell이 발생할 경우 promise chaining을 사용하면 된다.

let string = (str) => {
	return new promise((resolve, reject) => {
		setTimeout(
    		() => {
        	console.log(str)
       		resolve()
    		}, Math.floor(Math.random()*100)+1 // 랜덤으로 실행시간 딜레이
    	)
    })
}

let sum = (num) => {
	return new promise((resolve, reject) => {
		setTimeout(
    		() => {
        	console.log(num)
       		resolve()
    		}, Math.floor(Math.random()*100)+1 // 랜덤으로 실행시간 딜레이
    	)
    })
}

string('a')
.then(() => {
    console.log('a')
    return sum(3)
})    
.then(() => {
    console.log(3)
})

 

4. async / await

위에 쓰인 비동기 함수들을 마치 동기적인 것처럼 사용할 수 있게 해준다.

let string = (str) => {
	return new promise((resolve, reject) => {
		setTimeout(
    		() => {
        	console.log(str)
       		resolve()
    		}, Math.floor(Math.random()*100)+1 // 랜덤으로 실행시간 딜레이
    	)
    })
}

let sum = (num) => {
	return new promise((resolve, reject) => {
		setTimeout(
    		() => {
        	console.log(num)
       		resolve()
    		}, Math.floor(Math.random()*100)+1 // 랜덤으로 실행시간 딜레이
    	)
    })
}

let result = async () => {
    let one = await stirng('a')
    console.log('a')
    
    let two = await sum(3)
    console.log(3)
}
result();

async를 사용하여 함수를 만들어야 await가 사용이 가능하다.