\uc77c\ubc18\uc801\uc73c\ub85c \ub3d9\uae30\ub77c\ub294 \uc758\ubbf8\ub294 \ub3d9\uc2dc\uc5d0 \ub3d9\uc791\ud55c\ub2e4\ub294 \ub73b\uc774 \uc788\uc2b5\ub2c8\ub2e4.
\ubc18\ub300\ub85c \ube44\ub3d9\uae30\ub77c\ub294 \uc758\ubbf8\ub294 \ub3d9\uc2dc\uc5d0 \ub3d9\uc791\ud558\uc9c0 \uc54a\ub294\ub2e4\ub294 \ub73b\uc774 \uc788\uc2b5\ub2c8\ub2e4.
\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c \ub3d9\uae30\ub77c\ub294 \uc758\ubbf8\ub294 \uc21c\ucc28\uc801\uc778 \uc2e4\ud589\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4.
\ubc18\ub300\ub85c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c \ube44\ub3d9\uae30\ub294 \uc21c\ucc28\uc801\uc778 \uc2e4\ud589\uc774 \uc544\ub2d8\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
In general, synchronous means operating simultaneously.
Conversely, asynchronous means that they do not operate simultaneously.
In JavaScript, synchronous means sequential execution.
Conversely, in JavaScript, asynchronous means non-sequential execution.<\/p>\n\n\n\n
1.\ube44\ub3d9\uae30\ucc98\ub9ac\uac00 \ud544\uc694\ud55c \uc774\uc720 Why asynchronous processing is necessary<\/p>\n\n\n\n
\uae30\ubcf8\uc801\uc73c\ub85c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \ud568\uc218\ub294 \ucc98\ub9ac \uc18d\ub3c4\uac00 \ub290\ub9b0 \ud568\uc218\ub294 \ub098\uc911\uc5d0 \uc2e4\ud589\ub429\ub2c8\ub2e4.
\uadf8\ub798\uc11c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \ud568\uc218\ub294 \ube44\ub3d9\uae30\uc801\uc785\ub2c8\ub2e4.
\ud504\ub85c\uadf8\ub7a8\uc774 \ube44\ub3d9\uae30\uc801\uc774\uba74 \uc2e4\ud589 \uc18d\ub3c4\uac00 \ube60\ub985\ub2c8\ub2e4.
\ud558\uc9c0\ub9cc \ub85c\uadf8\uc778\uc774 \ub418\uc9c0 \uc54a\uc73c\uba74 \uc11c\ube44\uc2a4\ub97c \uc774\uc6a9\ud560 \uc218 \uc5c6\ub294 \uc6f9\uc0ac\uc774\ud2b8\ucc98\ub7fc
\ub290\ub824\ub3c4 \ub85c\uadf8\uc778 \uacfc\uc815\uc774 \ubc18\ub4dc\uc2dc \uc120\ud589 \ub418\uc5b4\uc57c \ud558\ub294 \uacbd\uc6b0\uac00 \uc788\uc2b5\ub2c8\ub2e4.
\uc774\ucc98\ub7fc \ud568\uc218\uc758 \uc21c\ucc28\uc801\uc778 \uc0ac\uc6a9\uc5d0 \ud544\uc694\ud55c \uac83\uc774 async function\uc640 promise\ub77c\uace0 \uc0dd\uac01\ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4. <\/p>\n\n\n\n
By default, JavaScript functions that are slow to process are executed later.
So functions in JavaScript are asynchronous.
If a program is asynchronous, it runs faster.However, like a website where you cannot use the service unless you log in,
There are times when the login process must take precedence, even if it is slow.
Like this, promises and async functions are necessary for sequential use of functions.<\/p>\n\n\n\n
\uc774\uc804\uc5d0 \ub2e4\ub918\ub358 call back function\uc73c\ub85c \ud568\uc218\uc758 \uc21c\ucc28\uc801\uc778 \uc2e4\ud589\uc774 \uac00\ub2a5\ud558\uc9c0\ub9cc
\ud504\ub85c\uadf8\ub7a8\uc774 \ucee4\uc9c8 \uc218\ub85d \uc774\ud574\ud558\uae30 \uc5b4\ub824\uc6b4 \ucf54\ub4dc\uac00 \ub429\ub2c8\ub2e4.(call back hell\uc774\ub77c\uace0 \ubd80\ub985\ub2c8\ub2e4.)
\uc774\uac83\uc744 \uac1c\uc120\ud558\uae30 \uc704\ud574\uc11c async function\uacfc promise\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.(promise hell\ub3c4 \uc788\uc2b5\ub2c8\ub2e4.)<\/p>\n\n\n\n
It is possible to execute functions sequentially with the previously discussed call back function, but
As the program grows, the code becomes more difficult to understand.(It’s called call back hell)
To improve this, use async functions and promises. (There is also promise hell.)<\/p>\n\n\n\n
2.delay \ud568\uc218(delay function)<\/p>\n\n\n\n
Promise\ub97c return\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.\uc544\uaddc\uba3c\ud2b8 ‘ms’\ub294 \ubc00\ub808\uc138\ucee8\ub4dc \uac12\uc785\ub2c8\ub2e4.
setTimeout()\ud568\uc218\ub294 ‘ms’\ubc00\ub9ac\uc138\ucee8\ub4dc\ub77c\ub294 \uc2dc\uac04\uc774 \uc9c0\ub098\uba74 \uc791\uc5c5\uc744 \uc2e4\ud589 \ud558\ub294 \ud568\uc218 \uc785\ub2c8\ub2e4.
\uc774 \ud568\uc218\ub294 \ube44\ub3d9\uae30\uc801\uc778 \uc791\uc5c5\uc774 \ub420 \uc218\ubc16\uc5d0 \uc5c6\ub294 \ud568\uc218 \uc785\ub2c8\ub2e4.<\/p>\n\n\n\n
It is returning a Promise. The argument ‘ms’ is the millisecond value.
The setTimeout() function is a function that executes a task after a period of ‘ms’ milliseconds.
This function has no choice but to operate asynchronously.<\/p>\n\n\n\n
function delay(ms) {\n return new Promise(resolve => {\n setTimeout(() => {\n console.log(`${ms} milliseconds.`);\n resolve();\n }, ms);\n });\n}<\/code><\/pre>\n\n\n\n3. async function\/await<\/p>\n\n\n\n
await\ud0a4\uc6cc\ub4dc\ub294 function\uc55e\uc5d0 async\ub77c\ub294 \ud0a4\uc6cc\ub4dc\uac00 \uc788\ub294 \ud568\uc218 \ub0b4\uc5d0\uc11c\ub9cc \uc0ac\uc6a9 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
await\ud0a4\uc6cc\ub4dc\uac00 \uc9c0\uc815\ub418\uba74 \uc791\uc5c5\uc774 \uc644\ub8cc\ub418\uae30\uae4c\uc9c0 \ub2e4\uc74c \uc791\uc5c5\uc73c\ub85c \uc9c4\ud589\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.
await delay(1000);\uc740 delay(1000);\uc758 \uc791\uc5c5\uc774 \ub05d\ub098\uace0 \ub098\uc11c \ub2e4\uc74c \uc791\uc5c5\uc73c\ub85c \uc9c4\ud589\ud558\ub77c\ub294 \uc758\ubbf8 \uc785\ub2c8\ub2e4.
const result = await Promise.resolve(‘end’);\ub294 promise\uc758 return\uac12\uc73c\ub85c end \uac12\uc744 result\ubcc0\uc218\uc5d0 \ud560\ub2f9 \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
The await keyword can only be used within a function that has the async keyword in front of the function.
If the await keyword is specified, the next task will not proceed until the task is completed.
await delay(1000); means to proceed to the next task after the task of delay(1000); is completed.
const result = await Promise.resolve(‘end’); assigns the end value as the return value of the promise to the result variable<\/p>\n\n\n\n
async function main() {\n console.log(0); \/\/1\n await delay(1000); \/\/await 2\n\n console.log(1); \/\/3\n console.log(2); \/\/4\n \n await delay(2000); \/\/await 5\n \n console.log(3); \/\/6\n const result = await Promise.resolve('end');\n \n console.log(4); \/\/7\n console.log(result); \/\/8\n console.log(5); \/\/9\n}\n\nmain();<\/code><\/pre>\n\n\n\n4.function mainse()<\/p>\n\n\n\n
\uc77c\ubc18\uc801\uc778 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud568\uc218\uc785\ub2c8\ub2e4.
delay()\ud568\uc218\uac00 \uac00\uc7a5 \ub098\uc911\uc5d0 \uc2e4\ud589\ub418\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.
delay()\ud568\uc218\uac00 \ube44\ub3d9\uae30\uc801\uc73c\ub85c \uc2e4\ud589\ub41c\ub2e4\ub294 \uc758\ubbf8 \uc785\ub2c8\ub2e4.<\/p>\n\n\n\n
This is a common JavaScript function.
You can see that the delay() function is executed last.
This means that the delay() function is executed asynchronously.<\/p>\n\n\n\n
\/\/return promise\n\/\/ create delay function\/ return Promise\nfunction delay(ms) {\n return new Promise(resolve => {\n setTimeout(() => {\n console.log(`${ms} milliseconds.`);\n resolve();\n }, ms);\n });\n}<\/mark>\n\n\/\/ async\/await\nasync function main() {\n console.log(0); \/\/1\n await delay(1000); \/\/await 2\n\n console.log(1); \/\/3\n console.log(2); \/\/4\n \n await delay(2000); \/\/await 5\n \n console.log(3); \/\/6\n const result = await Promise.resolve('end');\n \n console.log(4); \/\/7\n console.log(result); \/\/8\n console.log(5); \/\/9\n}\n<\/mark>\nmain();\n\n\n\/*\n\/\/ default \nfunction mainse(){\n console.log(0); \/\/0\n delay(1000); \/\/7\n\n console.log(1); \/\/1\n console.log(2); \/\/2\n \n delay(2000); \/\/8\n \n console.log(3); \/\/3\n const result = 'end'; \/\/8\n console.log(4); \/\/4\n console.log(result); \/\/5\n console.log(5); \/\/6\n}\nmainse();\n*\/<\/mark><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\uc77c\ubc18\uc801\uc73c\ub85c \ub3d9\uae30\ub77c\ub294 \uc758\ubbf8\ub294 \ub3d9\uc2dc\uc5d0 \ub3d9\uc791\ud55c\ub2e4\ub294 \ub73b\uc774 \uc788\uc2b5\ub2c8\ub2e4.\ubc18\ub300\ub85c \ube44\ub3d9\uae30\ub77c\ub294 \uc758\ubbf8\ub294 \ub3d9\uc2dc\uc5d0 \ub3d9\uc791\ud558\uc9c0 \uc54a\ub294\ub2e4\ub294 \ub73b\uc774 \uc788\uc2b5\ub2c8\ub2e4.\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c \ub3d9\uae30\ub77c\ub294 \uc758\ubbf8\ub294 \uc21c\ucc28\uc801\uc778 \uc2e4\ud589\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4.\ubc18\ub300\ub85c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c \ube44\ub3d9\uae30\ub294 \uc21c\ucc28\uc801\uc778 \uc2e4\ud589\uc774 \uc544\ub2d8\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4. In general, synchronous means operating simultaneously.Conversely, asynchronous means that they do not operate simultaneously.In JavaScript, synchronous means sequential execution.Conversely, in JavaScript, asynchronous means non-sequential execution. 1.\ube44\ub3d9\uae30\ucc98\ub9ac\uac00 \ud544\uc694\ud55c \uc774\uc720 Why asynchronous […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-542","post","type-post","status-publish","format-standard","hentry","category-nodejs","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/542","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=542"}],"version-history":[{"count":12,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/542\/revisions"}],"predecessor-version":[{"id":1144,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/542\/revisions\/1144"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=542"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=542"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}