💡비동기(Asynchoronous)
비동기적 프로그래밍은 효율적인 운영을 위해 여러개의 주문을 동시에 처리하는 작동과정입니다.
왜 비동기를 써야 할까요?
!codepen[MODAC0/embed/NWzYgvq?default-tab=html%2Cresult&theme-id=dark]
동기 프로그래밍된 코드는 먼저 실행되는 코드가 끝날 때까지 다음 코드는 기다려야 한다는 문제점이 있습니다. 위의 예제의 버튼을 실행한 후 텍스트 박스에 글을 적으려고 하면 버튼의 출력값이 반환될 때까지 기다려야 합니다. 이러한 특징은 웹사이트의 로딩 속도를 지연시키고 UX를 저하시키는 원인이 됩니다.
🚀 Javascript의 비동기 프로그래밍
웹 브라우저에는 함수를 특정 시간이 지난 뒤에 실행시키거나, 혹은 함수를 주기적으로 실행시키는 작업을 할 수 있게 해 주는 함수가 내장되어 있습니다.
!codepen[MODAC0/embed/dyKeyzK?default-tab=html%2Cresult&theme-id=dark]
{
"object": "block",
"id": "537e072d-375d-4fea-b833-2ab389247f07",
"parent": {
"type": "page_id",
"page_id": "390765fe-8b67-81d0-84c4-ebc9565d9891"
},
"created_time": "2026-07-01T14:43:00.000Z",
"last_edited_time": "2026-07-01T14:43:00.000Z",
"created_by": {
"object": "user",
"id": "2ecd872b-594c-81f7-92e3-000210a8d473"
},
"last_edited_by": {
"object": "user",
"id": "2ecd872b-594c-81f7-92e3-000210a8d473"
},
"has_children": false,
"in_trash": false,
"type": "heading_4",
"heading_4": {
"rich_text": [
{
"type": "text",
"text": {
"content": "setTimeout(callback, time)",
"link": null
},
"annotations": {
"bold": false,
"italic": false,
"strikethrough": false,
"underline": false,
"code": false,
"color": "default"
},
"plain_text": "setTimeout(callback, time)",
"href": null
}
],
"is_toggleable": false,
"color": "default"
},
"archived": false
}callback함수를 time 후에 한번만 실행시켜주는 메서드
{
"object": "block",
"id": "0fbb58b8-8872-4fd0-a919-76d37c1b4014",
"parent": {
"type": "page_id",
"page_id": "390765fe-8b67-81d0-84c4-ebc9565d9891"
},
"created_time": "2026-07-01T14:43:00.000Z",
"last_edited_time": "2026-07-01T14:43:00.000Z",
"created_by": {
"object": "user",
"id": "2ecd872b-594c-81f7-92e3-000210a8d473"
},
"last_edited_by": {
"object": "user",
"id": "2ecd872b-594c-81f7-92e3-000210a8d473"
},
"has_children": false,
"in_trash": false,
"type": "heading_4",
"heading_4": {
"rich_text": [
{
"type": "text",
"text": {
"content": "setInterval(callback, time)",
"link": null
},
"annotations": {
"bold": false,
"italic": false,
"strikethrough": false,
"underline": false,
"code": false,
"color": "default"
},
"plain_text": "setInterval(callback, time)",
"href": null
}
],
"is_toggleable": false,
"color": "default"
},
"archived": false
}callback함수를 time 간격으로 계속 실행시켜주는 메서드