강의노트 - 14

동기(Synchronous) 와 비동기(Asynchronous)

동기

= 순차적으로 코드 실행

ex)
console.log(1)
console.log(2)
console.log(3)

비동기

= 순차적으로 코드를 실행하지 않음

ex)
console.log(1)
setTimeout(() => { console.log(2) }, 1000)
console.log(3)

ex2)
consot btnEl = document.querySelector('h1')
btnEl.addEventListener('click', () => {
console.log('Clicked!')
}

console.log('Hello World!')

ex3)
fetch('https://www.omdbapi.com/?apikey=7035c60c&s=frozen')
.then(res => res.json())
.then(res => console.log(res))

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

콜백(Callback) 패턴

동기적 코드)

const a = () => console.log(1)
const b = () => console.log(2)

a() // 1
b() // 2

비동기적 코드)

const a = (callback) => {
	setTimeout(() => {
    	console.log(1)
        callback()
    }, 1000)
}
const b = () => console.log(2)

a(() => {
	b()
})