동기(Synchronous)
- 모든 일을 순서대로 하나씩 처리하는 것
- 순서대로 처리한다 = 이전 작업이 끝나면 다음작업을 시작
- 요청과 응답을 동기식으로 처리한다면 요청을 보내고 응답이 올 때까지 기다렸다가 다음 로직을 처리
비동기(Asynchronous)
- 작업을 시작한 후 결과를 기다리지 않고 다음 작업을 처리하는 것(병렬적 수행)
- 시간이 필요한 작업들은 요청을 보낸 뒤 응답이 빨리 오는 작업부터 처리
- 예) Gmail에서 메일 전송을 누르면 목록화면으로 전환되지만 실제 메일 전송을 병렬적으로 뒤에서 처리됨
function slowRequest(callBack){
console.log('1. Initiating a process taking long time')
setTimeout(function(){
callBack()
}, 3000)
}
function myCallBack(){
console.log('2. Callback Function initiated')
}
slowRequest(myCallBack)
console.log('3. Processing something else')
// 1 - 3 - 2
비동기를 사용하는 이유
- 사용자 경험
- 큰 데이터 로딩이 필요한 앱을 사용할 때 동기로 처리한다면 데이터를 모두 불러온 뒤에야 앱의 실행 로직이 수행되므로 사용자들은 앱이 멈춘 듯 한 경험을 겪게됨
- 비동기로 처리한다면 먼저 처리되는 부분부터 보여줄 수 있으므로 사용자 경험에 긍정적인 효과를 볼 수 있음
JavaScript의 비동기 처리
Single Thread Language
JavaScript Runtime
- 비동기 처리를 할 수 있도록 도와주는 환경이 필요
- 특정 언어가 동작할 수 있는 환경을 Runtime이라 함
- JS에서 비동기와 관련한 작업은 브라우저 또는 Node 환경에서 처리
- 이중 브라우저 환경에서의 비동기 동작은 크게 아래의 요소들로 구성됨
- JavaScript Engine의 Call Stack
- Web API
- Task Queue
- Event Loop
비동기 처리 동작 방식
- 브라우저 환경에서의 JavaScript의 비동기는 아래와 같이 처리됨
- 모든 작업은 Call Stack으로 들어간 후 처리됨
- 오래 걸리는 작업이 Call Stack으로 들어오면 Web API로 보내 별도로 처리하도록 함
- Web API에서 처리가 끝난 작업들은 곧바로 Call Stack으로 들어가지 못하고 Task Queue에 들어감
- Event Loop가 Call Stack이 비어있는 것을 계속 체크하고 Call Stack이 빈다면 Task Queue에서 가장 오래된(가장 앞에 있는) 작업을 Call Stack으로 보냄
비동기 처리 동작 요소
- Call Stack
- 요청이 들어올 때마다 순차적으로 처리하는 stack
- 기본적인 JS의 Single Thread 작업 처리
- Web API
동기(Synchronous)
- 모든 일을 순서대로 하나씩 처리하는 것
- 순서대로 처리한다 = 이전 작업이 끝나면 다음작업을 시작
- 요청과 응답을 동기식으로 처리한다면 요청을 보내고 응답이 올 때까지 기다렸다가 다음 로직을 처리
비동기(Asynchronous)
- 작업을 시작한 후 결과를 기다리지 않고 다음 작업을 처리하는 것(병렬적 수행)
- 시간이 필요한 작업들은 요청을 보낸 뒤 응답이 빨리 오는 작업부터 처리
- 예) Gmail에서 메일 전송을 누르면 목록화면으로 전환되지만 실제 메일 전송을 병렬적으로 뒤에서 처리됨
function slowRequest(callBack){
console.log('1. Initiating a process taking long time')
setTimeout(function(){
callBack()
}, 3000)
}
function myCallBack(){
console.log('2. Callback Function initiated')
}
slowRequest(myCallBack)
console.log('3. Processing something else')
// 1 - 3 - 2
비동기를 사용하는 이유
- 사용자 경험
- 큰 데이터 로딩이 필요한 앱을 사용할 때 동기로 처리한다면 데이터를 모두 불러온 뒤에야 앱의 실행 로직이 수행되므로 사용자들은 앱이 멈춘 듯 한 경험을 겪게됨
- 비동기로 처리한다면 먼저 처리되는 부분부터 보여줄 수 있으므로 사용자 경험에 긍정적인 효과를 볼 수 있음
JavaScript의 비동기 처리
Single Thread Language
JavaScript Runtime
- 비동기 처리를 할 수 있도록 도와주는 환경이 필요
- 특정 언어가 동작할 수 있는 환경을 Runtime이라 함
- JS에서 비동기와 관련한 작업은 브라우저 또는 Node 환경에서 처리
- 이중 브라우저 환경에서의 비동기 동작은 크게 아래의 요소들로 구성됨
- JavaScript Engine의 Call Stack
- Web API
- Task Queue
- Event Loop
비동기 처리 동작 방식
- 브라우저 환경에서의 JavaScript의 비동기는 아래와 같이 처리됨
- 모든 작업은 Call Stack으로 들어간 후 처리됨
- 오래 걸리는 작업이 Call Stack으로 들어오면 Web API로 보내 별도로 처리하도록 함
- Web API에서 처리가 끝난 작업들은 곧바로 Call Stack으로 들어가지 못하고 Task Queue에 들어감
- Event Loop가 Call Stack이 비어있는 것을 계속 체크하고 Call Stack이 빈다면 Task Queue에서 가장 오래된(가장 앞에 있는) 작업을 Call Stack으로 보냄
비동기 처리 동작 요소
- Call Stack
- 요청이 들어올 때마다 순차적으로 처리하는 stack
- 기본적인 JS의 Single Thread 작업 처리
- Web API
- JS 엔진이 아닌 브라우저에서 제공하는 runtime 환경
- 시간이 소요되는 작업을 처리(setTimeout, DOM Event, AJAX 요청 등)
- Task Queue
- 비동기 처리된 Callback 함수가 대기하는 Queue
- Event Loop
- Call Stack과 Task Queue를 지속적으로 모니터링
- Call Stack이 비어있는지 확인 후 비어있다면 Task Queue에서 대기 중인 오래된 작업을 Call Stack으로 Push
Axios
- Axios는 비동기 데이터 통신을 가능하게 하는 라이브러리
- Django REST API로 요청을 보내서 데이터를 받아온 후 처리
<script src = ".....axios...."></script>
<script>
axios.get('요청할 URL')
.then(성공하면 수행할 콜백함수)
.catch(실패하면 수행할 콜백함수)
</script>
- get, post 등 여러 method 사용 가능
- then을 이용해서 성공하면 수행할 로직을 작성
- catch를 이용해서 실패하면 수행할 로직을 작성
// 동기식
import requests
print('Cat goes meow')
cat_image_search_url = '<https://api.thecatapi.com/v1/images/search>'
response = requests.get(cat_image_search_url)
if response.status_code == 200:
print(resopnse.json())
else:
print('Failed meow')
print('meow meow')
// 비동기식
console.log('Cat goes meow')
const catImageSearchURL = '<<a href=https://api.thecatapi.com/v1/images/search>https://api.thecatapi.com/v1/images/search</a>>'
axios.get(catImageSearchURL)
.then((response)=>{
console.log(response.data)
})
.catch((error)=>{
console.log('Failed meoew')
})
console.log('meowmeow')
결과 비교
- 동기식코드는 위에서부터 순서대로 처리가 되기 때문에 첫번째 print가 출력되고 이미지를 가져온느 처리를 기다렸다가 다음 print가 출력되는 반면
- 비동기식 코드는 바로 처리가 가능한 작업(console.log)은 바로 처리하고, 오래 걸리는 작업인 이미지를 요청하고 가져오는 일은 요청을 보내놓고 기다리지 않고 다음 코드로 진행 후 완료가 된 시점에 결과 출력이 진행됨
완성하기
Come here Kitty!
console.log('Cat goes meow')
const catImageSearchURL = '<<a href=https://api.thecatapi.com/v1/images/search>https://api.thecatapi.com/v1/images/search</a>>'
const btn = document.querySelector('button')
btn.addEventListener('click', function(){
axios.get(catImageSearchURL)
.then((response)=>{
imgElem = document.createElement('img')
imgElem.setAttribute('src', response.data[0].url)
document.body.appendChild(imgElem)
})
.catch((error)=>{
console.log('Failed Meow')
})
console.log('Meow Meow')
})
Promise
- 비동기 처리의 콜백함수를 계속 이어가다보면 코드의 가독성을 해치고 유지보수가 어려워짐 - Callback Hell
- 이를 해결하기 위해 등장한 비동기 처리를 위한 객체가 Promise
- 비동기 작업의 완료 또는 실패를 나타내는 객체
- Promise 기반의 클라이언트가 비로 이전에 사용한 Axios 라이브러리
- “Promise based HTTP client for the browser and node.js”
- 성공에 대한 약속 then()
- 실패에 대한 약속 catch()
then & catch
- then(callback)
- 요청한 작업이 성공하면 callback 실행
- callback은 이전 작업의 성공 결과를 인자로 전달 받음
- catch(callback)
- then()이 하나라도 실패하면 callback 실행
- callback은 이전 작업의 실패 객체를 인자로 전달 받음
- then과 catch 모두 항상 promise 객체를 반환 - 즉, 계속해서 chaining을 할 수 있음
- axios로 처리한 비동기 로직이 항상 promise 객체를 반환 , 그래서 then을 계속 이어나가면서 작성 가능
axios.get('요청할 URL')
.then(성공시 수행할 1번 콜백함수)
.then(1번 함수 성공시 수행할 2번 콜백함수
...
.catch(실패하면 수행할 콜백함수)