{"id":1697,"date":"2026-05-26T09:23:33","date_gmt":"2026-05-26T09:23:33","guid":{"rendered":"https:\/\/wayhope.kro.kr\/?p=1697"},"modified":"2026-08-31T07:32:45","modified_gmt":"2026-08-31T07:32:45","slug":"javascript-%ec%96%b8%ec%96%b4-%ed%95%b5%ec%8b%ac-%ec%a0%95%eb%a6%ac","status":"publish","type":"post","link":"https:\/\/wayhope.kro.kr\/?p=1697","title":{"rendered":"JavaScript \uc5b8\uc5b4 \ud575\uc2ec \uc815\ub9ac"},"content":{"rendered":"\n

JavaScript\ub294 \uc6f9 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \ub3d9\uc801\uc778 \ub3d9\uc791\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud574 \ub9cc\ub4e4\uc5b4\uc9c4 \ud504\ub85c\uadf8\ub798\ubc0d \uc5b8\uc5b4\ub2e4. \ud604\uc7ac\ub294 \ube0c\ub77c\uc6b0\uc800\ubfd0\ub9cc \uc544\ub2c8\ub77c Node.js \uac19\uc740 \ub7f0\ud0c0\uc784\uc744 \ud1b5\ud574 \uc11c\ubc84, CLI, \uc790\ub3d9\ud654 \ub3c4\uad6c \ub4f1\uc5d0\uc11c\ub3c4 \uc0ac\uc6a9\ub41c\ub2e4.<\/p>\n\n\n\n

JavaScript\uc758 \ud2b9\uc9d5\uc740 \ub2e8\uc21c\ud788 \ubb38\ubc95\uc774 \uac04\ub2e8\ud558\ub2e4\ub294 \ub370 \uc788\uc9c0 \uc54a\ub2e4. \ub3d9\uc801 \ud0c0\uc785, \ud504\ub85c\ud1a0\ud0c0\uc785 \uae30\ubc18 \uac1d\uccb4 \ubaa8\ub378, \uc77c\uae09 \ud568\uc218, \ud074\ub85c\uc800, \uc774\ubca4\ud2b8 \ub8e8\ud504, \ube44\ub3d9\uae30 \ud504\ub85c\uadf8\ub798\ubc0d \uac19\uc740 \ud2b9\uc131\uc774 \ud558\ub098\uc758 \uc2e4\ud589 \ubaa8\ub378\uc744 \uad6c\uc131\ud558\uace0 \uc788\ub2e4.<\/p>\n\n\n\n

\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c\ub294 HTML\uacfc CSS\ub85c \uad6c\uc131\ub41c \ud398\uc774\uc9c0\ub97c JavaScript\uac00 \uc870\uc791\ud558\uace0, \uc11c\ubc84\uc5d0\uc11c\ub294 Node.js \uac19\uc740 \ub7f0\ud0c0\uc784\uc774 JavaScript \ucf54\ub4dc\ub97c \uc2e4\ud589\ud55c\ub2e4.<\/p>\n\n\n\n

JavaScript -> JavaScript Runtime -> Execution\n<\/code><\/pre>\n\n\n\n
\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c\ub294 V8, SpiderMonkey, JavaScriptCore \uac19\uc740 JavaScript \uc5d4\uc9c4\uc774 \uc0ac\uc6a9\ub41c\ub2e4. Node.js \uc5ed\uc2dc V8\uc744 \uae30\ubc18\uc73c\ub85c \ud55c\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
JavaScript\uc758 \uae30\ubcf8 \uad6c\uc870<\/h2>\n\n\n\n
\uac00\uc7a5 \uae30\ubcf8\uc801\uc778 \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
const name = \"Player\";\n\nconsole.log(name);\n<\/code><\/pre>\n\n\n\n
\ubcc0\uc218\ub294 let<\/code>, const<\/code>\ub85c \uc120\uc5b8\ud55c\ub2e4.<\/p>\n\n\n\n
let score = 100;\nconst maxScore = 1000;\n<\/code><\/pre>\n\n\n\n
\uacfc\uac70\uc5d0\ub294 var<\/code>\ub3c4 \ub9ce\uc774 \uc0ac\uc6a9\ud588\uc9c0\ub9cc \ud604\uc7ac\ub294 \ud2b9\ubcc4\ud55c \uc774\uc720\uac00 \uc5c6\ub2e4\uba74 let<\/code>\uacfc const<\/code>\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc77c\ubc18\uc801\uc774\ub2e4.<\/p>\n\n\n\n
const<\/code>\ub294 \ubcc0\uc218 \uc790\uccb4\uc758 \uc7ac\ud560\ub2f9\uc744 \ub9c9\ub294\ub2e4.<\/p>\n\n\n\n
const value = 10;\n\n\/\/ value = 20; \/\/ \uc624\ub958\n<\/code><\/pre>\n\n\n\n
\ud558\uc9c0\ub9cc \uac1d\uccb4 \ub0b4\ubd80\uc758 \uac12\uc744 \ubcc0\uacbd\ud558\ub294 \uac83\uae4c\uc9c0 \ub9c9\ub294 \uac83\uc740 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n
const player = {\n    health: 100\n};\n\nplayer.health = 50;\n<\/code><\/pre>\n\n\n\n
\uc5ec\uae30\uc11c player<\/code>\ub77c\ub294 \ucc38\uc870 \uc790\uccb4\ub294 \ubcc0\uacbd\ub418\uc9c0 \uc54a\uc558\uae30 \ub54c\ubb38\uc5d0 \uac00\ub2a5\ud558\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
\ub3d9\uc801 \ud0c0\uc785<\/h2>\n\n\n\n
JavaScript\ub294 \ub3d9\uc801 \ud0c0\uc785 \uc5b8\uc5b4\ub2e4.<\/p>\n\n\n\n
let value = 10;\n\nvalue = \"Hello\";\nvalue = true;\nvalue = { x: 10 };\n<\/code><\/pre>\n\n\n\n
\ud558\ub098\uc758 \ubcc0\uc218\uc5d0 \uc11c\ub85c \ub2e4\ub978 \ud0c0\uc785\uc758 \uac12\uc744 \ud560\ub2f9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\ubcc0\uc218 \uc120\uc5b8 \uc2dc \ud0c0\uc785\uc744 \uc9c0\uc815\ud558\uc9c0 \uc54a\uace0 \ub7f0\ud0c0\uc784\uc5d0 \uc2e4\uc81c \uac12\uc5d0 \ub530\ub77c \ud0c0\uc785\uc774 \uacb0\uc815\ub41c\ub2e4.<\/p>\n\n\n\n
\ub300\ud45c\uc801\uc778 \ub370\uc774\ud130 \ud0c0\uc785\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
Primitive -> string \/ number \/ bigint \/ boolean \/ undefined \/ symbol \/ null\nObject -> Object \/ Array \/ Function \/ ...\n<\/code><\/pre>\n\n\n\n
JavaScript\uc758 number<\/code>\ub294 \uc815\uc218\uc640 \uc2e4\uc218\ub97c \ubcc4\ub3c4\uc758 \ud0c0\uc785\uc73c\ub85c \uad6c\ubd84\ud558\uc9c0 \uc54a\uace0 \uc77c\ubc18\uc801\uc73c\ub85c IEEE 754 \ubc30\uc815\ubc00\ub3c4 \ubd80\ub3d9\uc18c\uc218\uc810 \ud615\uc2dd\uc73c\ub85c \ud45c\ud604\ud55c\ub2e4.<\/p>\n\n\n\n
\uc815\uc218 \ubc94\uc704\uac00 \ub9e4\uc6b0 \ud070 \uacbd\uc6b0\uc5d0\ub294 BigInt<\/code>\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
const value = 12345678901234567890n;\n<\/code><\/pre>\n\n\n\n
\n\n\n\n
\uc6d0\uc2dc \ud0c0\uc785\uacfc \uac1d\uccb4<\/h2>\n\n\n\n
JavaScript\uc758 \uac12\uc740 \ud06c\uac8c \uc6d0\uc2dc \uac12\uacfc \uac1d\uccb4\ub85c \ub098\ub220\uc11c \uc0dd\uac01\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
let a = 10;\nlet b = a;\n\nb = 20;\n<\/code><\/pre>\n\n\n\n
\uc774 \uacbd\uc6b0 a<\/code>\ub294 \uadf8\ub300\ub85c 10<\/code>\uc774\ub2e4.<\/p>\n\n\n\n
\uac1d\uccb4\ub294 \ucc38\uc870\ub97c \ud1b5\ud574 \uc811\uadfc\ud55c\ub2e4.<\/p>\n\n\n\n
const a = {\n    health: 100\n};\n\nconst b = a;\n\nb.health = 50;\n<\/code><\/pre>\n\n\n\n
a<\/code>\uc640 b<\/code>\ub294 \uac19\uc740 \uac1d\uccb4\ub97c \uac00\ub9ac\ud0a4\uae30 \ub54c\ubb38\uc5d0 a.health<\/code>\ub3c4 50<\/code>\uc774 \ub41c\ub2e4.<\/p>\n\n\n\n
\uc774 \ucc28\uc774\ub294 \ud568\uc218\uc5d0 \uac12\uc744 \uc804\ub2ec\ud560 \ub54c\ub3c4 \uc774\uc5b4\uc9c4\ub2e4.<\/p>\n\n\n\n
JavaScript\ub294 \uae30\ubcf8\uc801\uc73c\ub85c \uac12\uc5d0 \uc758\ud55c \uc804\ub2ec(pass-by-value)<\/strong>\uc744 \uc0ac\uc6a9\ud55c\ub2e4. \uac1d\uccb4\uc758 \uacbd\uc6b0 \uc804\ub2ec\ub418\ub294 \uac12\uc774 \uac1d\uccb4\uc5d0 \ub300\ud55c \ucc38\uc870\uc774\uae30 \ub54c\ubb38\uc5d0 \uacb0\uacfc\uc801\uc73c\ub85c \uac1d\uccb4\uc758 \ub0b4\ubd80 \uc0c1\ud0dc\uac00 \uacf5\uc720\ub418\ub294 \uac83\ucc98\ub7fc \ubcf4\uc778\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
\uac1d\uccb4<\/h2>\n\n\n\n
JavaScript\uc758 \uac1d\uccb4\ub294 \ud0a4\uc640 \uac12\uc758 \ud615\ud0dc\ub85c \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
const player = {\n    name: \"Player\",\n    health: 100,\n\n    attack() {\n        console.log(\"Attack\");\n    }\n};\n<\/code><\/pre>\n\n\n\n
\ud504\ub85c\ud37c\ud2f0\uc5d0 \uc811\uadfc\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
player.health;\nplayer.attack();\n<\/code><\/pre>\n\n\n\n
\ub3d9\uc801\uc73c\ub85c \ud504\ub85c\ud37c\ud2f0\ub97c \ucd94\uac00\ud558\ub294 \uac83\ub3c4 \uac00\ub2a5\ud558\ub2e4.<\/p>\n\n\n\n
player.level = 10;\n<\/code><\/pre>\n\n\n\n
\uc0ad\uc81c\ub3c4 \uac00\ub2a5\ud558\ub2e4.<\/p>\n\n\n\n
delete player.level;\n<\/code><\/pre>\n\n\n\n
JavaScript \uac1d\uccb4\ub294 \uc815\ud574\uc9c4 \ud074\ub798\uc2a4\uc758 \uc778\uc2a4\ud134\uc2a4\ub9cc\uc744 \uc758\ubbf8\ud558\ub294 \uac83\uc774 \uc544\ub2c8\ub77c \uc0c1\ub2f9\ud788 \ubc94\uc6a9\uc801\uc778 \ub370\uc774\ud130 \uad6c\uc870\ub85c \uc0ac\uc6a9\ub41c\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
\ubc30\uc5f4<\/h2>\n\n\n\n
JavaScript\uc758 \ubc30\uc5f4\uc740 \uc5ec\ub7ec \uac12\uc744 \uc800\uc7a5\ud558\ub294 \uac1d\uccb4\ub2e4.<\/p>\n\n\n\n
const scores = [100, 200, 300];\n<\/code><\/pre>\n\n\n\n
\uc778\ub371\uc2a4\ub85c \uc811\uadfc\ud55c\ub2e4.<\/p>\n\n\n\n
scores[0];\nscores[1];\n<\/code><\/pre>\n\n\n\n
\ud06c\uae30\ub3c4 \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
scores.push(400);\n<\/code><\/pre>\n\n\n\n
\ub2e4\uc591\ud55c \ud0c0\uc785\uc758 \uac12\uc744 \ud558\ub098\uc758 \ubc30\uc5f4\uc5d0 \ub123\ub294 \uac83\ub3c4 \ubb38\ubc95\uc801\uc73c\ub85c \uac00\ub2a5\ud558\ub2e4.<\/p>\n\n\n\n
const values = [10, \"Hello\", true, null];\n<\/code><\/pre>\n\n\n\n
\ub2e4\ub9cc \uc2e4\uc81c \ucf54\ub4dc\uc5d0\uc11c\ub294 \ud2b9\ubcc4\ud55c \uc774\uc720\uac00 \uc5c6\ub2e4\uba74 \ud558\ub098\uc758 \ubc30\uc5f4\uc5d0 \uc11c\ub85c \ub2e4\ub978 \ud0c0\uc785\uc744 \uc11e\ub294 \ubc29\uc2dd\uc740 \ud53c\ud558\ub294 \ud3b8\uc774 \uad00\ub9ac\ud558\uae30 \uc88b\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
\ud568\uc218<\/h2>\n\n\n\n
JavaScript\uc5d0\uc11c \ud568\uc218\ub294 \ub9e4\uc6b0 \uc911\uc694\ud55c \uac1c\ub150\uc774\ub2e4.<\/p>\n\n\n\n
function add(a, b)\n{\n    return a + b;\n}\n<\/code><\/pre>\n\n\n\n
\ud568\uc218\ub97c \ubcc0\uc218\uc5d0 \uc800\uc7a5\ud560 \uc218\ub3c4 \uc788\ub2e4.<\/p>\n\n\n\n
const add = function(a, b)\n{\n    return a + b;\n};\n<\/code><\/pre>\n\n\n\n
\ub354 \uc9e7\uac8c\ub294 \ud654\uc0b4\ud45c \ud568\uc218\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
const add = (a, b) => a + b;\n<\/code><\/pre>\n\n\n\n
\ud568\uc218\ub97c \ubcc0\uc218\uc5d0 \uc800\uc7a5\ud558\uace0 \ub2e4\ub978 \ud568\uc218\uc5d0 \uc804\ub2ec\ud560 \uc218 \uc788\ub2e4\ub294 \uac83\uc740 JavaScript\uac00 \ud568\uc218\ub97c \uc77c\uae09 \uac1d\uccb4(first-class object)<\/strong>\ub85c \ucde8\uae09\ud558\uae30 \ub54c\ubb38\uc774\ub2e4.<\/p>\n\n\n\n
\uc774 \ud2b9\uc131\uc740 \ucf5c\ubc31, \uc774\ubca4\ud2b8, \ube44\ub3d9\uae30 \ucc98\ub9ac, \ud568\uc218\ud615 \ud504\ub85c\uadf8\ub798\ubc0d\uacfc \uc9c1\uc811 \uc5f0\uacb0\ub41c\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
\ucf5c\ubc31<\/h2>\n\n\n\n
\ud568\uc218\ub97c \ub2e4\ub978 \ud568\uc218\uc5d0 \uc804\ub2ec\ud560 \uc218 \uc788\uae30 \ub54c\ubb38\uc5d0 \ucf5c\ubc31 \ud328\ud134\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
function process(value, callback)\n{\n    const result = value * 2;\n\n    callback(result);\n}\n\nprocess(10, value =>\n{\n    console.log(value);\n});\n<\/code><\/pre>\n\n\n\n
\uc5ec\uae30\uc11c callback<\/code>\uc5d0\ub294 \ud568\uc218\uac00 \uc804\ub2ec\ub41c\ub2e4.<\/p>\n\n\n\n
JavaScript\uc5d0\uc11c\ub294 \ube0c\ub77c\uc6b0\uc800 \uc774\ubca4\ud2b8\ubd80\ud130 \ube44\ub3d9\uae30 \uc791\uc5c5\uae4c\uc9c0 \ucf5c\ubc31\uc774 \ub9e4\uc6b0 \ub9ce\uc774 \uc0ac\uc6a9\ub418\uc5b4 \uc654\ub2e4.<\/p>\n\n\n\n
\ub2e4\ub9cc \ucf5c\ubc31\uc744 \uacc4\uc18d \uc911\ucca9\ud558\uba74 \ucf54\ub4dc\uac00 \ubcf5\uc7a1\ud574\uc9c8 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
callback -> callback -> callback -> callback\n<\/code><\/pre>\n\n\n\n
\uc774\ub97c \uac1c\uc120\ud558\uae30 \uc704\ud574 Promise\uc640 async\/await<\/code>\uac00 \uc0ac\uc6a9\ub41c\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
\uc2a4\ucf54\ud504<\/h2>\n\n\n\n
JavaScript\uc5d0\ub294 \ubcc0\uc218\uc758 \uc811\uadfc \ubc94\uc704\ub97c \uacb0\uc815\ud558\ub294 \uc2a4\ucf54\ud504\uac00 \uc788\ub2e4.<\/p>\n\n\n\n
let<\/code>\uacfc const<\/code>\ub294 \ube14\ub85d \uc2a4\ucf54\ud504\ub97c \uac00\uc9c4\ub2e4.<\/p>\n\n\n\n
if (true)\n{\n    let value = 10;\n}\n\n\/\/ value\uc5d0 \uc811\uadfc\ud560 \uc218 \uc5c6\uc74c\n<\/code><\/pre>\n\n\n\n
\ubc18\uba74 var<\/code>\ub294 \ud568\uc218 \uc2a4\ucf54\ud504\ub97c \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n
function test()\n{\n    var value = 10;\n}\n<\/code><\/pre>\n\n\n\n
\ud604\ub300 JavaScript\uc5d0\uc11c\ub294 var<\/code>\ubcf4\ub2e4 let<\/code>, const<\/code>\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc77c\ubc18\uc801\uc774\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
\ud074\ub85c\uc800<\/h2>\n\n\n\n
JavaScript\ub97c \uc774\ud574\ud560 \ub54c \ud074\ub85c\uc800\ub3c4 \uc911\uc694\ud558\ub2e4.<\/p>\n\n\n\n
function createCounter()\n{\n    let count = 0;\n\n    return function()\n    {\n        count++;\n        return count;\n    };\n}\n\nconst counter = createCounter();\n\nconsole.log(counter());\nconsole.log(counter());\n<\/code><\/pre>\n\n\n\n
createCounter()<\/code>\uac00 \uc885\ub8cc\ub41c \uc774\ud6c4\uc5d0\ub3c4 \ub0b4\ubd80 \ud568\uc218\uac00 count<\/code>\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\ub0b4\ubd80 \ud568\uc218\uac00 \uc790\uc2e0\uc774 \uc0dd\uc131\ub41c \ub809\uc2dc\uceec \ud658\uacbd\uc744 \uacc4\uc18d \ucc38\uc870\ud558\uae30 \ub54c\ubb38\uc774\ub2e4.<\/p>\n\n\n\n
\uc774\ub7f0 \uad6c\uc870\ub97c \ud074\ub85c\uc800\ub77c\uace0 \ud55c\ub2e4.<\/p>\n\n\n\n
\ud074\ub85c\uc800\ub294 \ub2e8\uc21c\ud55c \ubb38\ubc95 \uae30\ub2a5\uc774 \uc544\ub2c8\ub77c \uc0c1\ud0dc\ub97c \ucea1\uc290\ud654\ud558\uac70\ub098 \ucf5c\ubc31\uc5d0 \ub370\uc774\ud130\ub97c \uc720\uc9c0\ud558\ub294 \ub4f1 \ub2e4\uc591\ud55c \uacf3\uc5d0\uc11c \uc0ac\uc6a9\ub41c\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
this<\/h2>\n\n\n\n
JavaScript\uc758 this<\/code>\ub294 \ub2e4\ub978 \uac1d\uccb4\uc9c0\ud5a5 \uc5b8\uc5b4\uc640 \ube44\uad50\ud558\uba74 \uc0c1\ub2f9\ud788 \ud2b9\uc774\ud558\ub2e4.<\/p>\n\n\n\n
const player =\n{\n    name: \"Player\",\n\n    printName()\n    {\n        console.log(this.name);\n    }\n};\n\nplayer.printName();\n<\/code><\/pre>\n\n\n\n
\uc774\ub54c this<\/code>\ub294 \uba54\uc11c\ub4dc\ub97c \ud638\ucd9c\ud55c \uac1d\uccb4\ub97c \uac00\ub9ac\ud0a8\ub2e4.<\/p>\n\n\n\n
\ud558\uc9c0\ub9cc \ud638\ucd9c \ubc29\uc2dd\uc5d0 \ub530\ub77c this<\/code>\uac00 \ub2ec\ub77c\uc9c8 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\ud654\uc0b4\ud45c \ud568\uc218\ub294 \uc77c\ubc18 \ud568\uc218\uc640 \ub2e4\ub974\uac8c \uc790\uccb4\uc801\uc778 this<\/code>\ub97c \uac16\uc9c0 \uc54a\uace0 \ubc14\uae65\ucabd\uc758 this<\/code>\ub97c \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n
const player =\n{\n    name: \"Player\",\n\n    start()\n    {\n        setTimeout(() =>\n        {\n            console.log(this.name);\n        }, 1000);\n    }\n};\n<\/code><\/pre>\n\n\n\n
JavaScript\uc5d0\uc11c this<\/code> \uad00\ub828 \ubb38\uc81c\ub97c \uc81c\ub300\ub85c \uc774\ud574\ud558\ub824\uba74 “\ud604\uc7ac \ud074\ub798\uc2a4\uc758 \uac1d\uccb4”\ub77c\uace0 \ub2e8\uc21c\ud558\uac8c \uc678\uc6b0\uae30\ubcf4\ub2e4 \ud568\uc218\uac00 \uc5b4\ub5a4 \ubc29\uc2dd\uc73c\ub85c \ud638\ucd9c\ub418\uc5c8\ub294\uac00<\/strong>\ub97c \ubd10\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
\ud504\ub85c\ud1a0\ud0c0\uc785<\/h2>\n\n\n\n
JavaScript\uc758 \uac1d\uccb4 \ubaa8\ub378\uc740 \ud504\ub85c\ud1a0\ud0c0\uc785 \uae30\ubc18\uc774\ub2e4.<\/p>\n\n\n\n
\uac1d\uccb4\ub294 \ub2e4\ub978 \uac1d\uccb4\ub97c \ud504\ub85c\ud1a0\ud0c0\uc785\uc73c\ub85c \ucc38\uc870\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
const animal =\n{\n    speak()\n    {\n        console.log(\"Animal\");\n    }\n};\n\nconst dog = Object.create(animal);\n\ndog.speak();\n<\/code><\/pre>\n\n\n\n
dog<\/code>\uc5d0 speak()<\/code>\uac00 \uc9c1\uc811 \uc874\uc7ac\ud558\uc9c0 \uc54a\ub354\ub77c\ub3c4 \ud504\ub85c\ud1a0\ud0c0\uc785\uc744 \ud1b5\ud574 \ucc3e\uc744 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
dog -> animal -> Object.prototype -> null\n<\/code><\/pre>\n\n\n\n
\ud504\ub85c\ud37c\ud2f0\ub97c \ucc3e\uc744 \ub54c \uc790\uc2e0\uc758 \uac1d\uccb4\uc5d0\uc11c \ucc3e\uace0 \uc5c6\uc73c\uba74 \ud504\ub85c\ud1a0\ud0c0\uc785 \uccb4\uc778\uc744 \ub530\ub77c\uac00\uba70 \ucc3e\ub294\ub2e4.<\/p>\n\n\n\n
\uc774 \uad6c\uc870\uac00 JavaScript\uc758 \uc0c1\uc18d \ubaa8\ub378\uc758 \uae30\ubc18\uc774\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
class<\/h2>\n\n\n\n
JavaScript\uc5d0\uc11c\ub3c4 class<\/code> \ubb38\ubc95\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
class Player\n{\n    constructor(health)\n    {\n        this.health = health;\n    }\n\n    attack()\n    {\n        console.log(\"Attack\");\n    }\n}\n<\/code><\/pre>\n\n\n\n
\uac1d\uccb4\ub97c \uc0dd\uc131\ud55c\ub2e4.<\/p>\n\n\n\n
const player = new Player(100);\n<\/code><\/pre>\n\n\n\n
\uc0c1\uc18d\ub3c4 \uac00\ub2a5\ud558\ub2e4.<\/p>\n\n\n\n
class Monster extends Player\n{\n    attack()\n    {\n        console.log(\"Monster Attack\");\n    }\n}\n<\/code><\/pre>\n\n\n\n
\ub2e4\ub9cc JavaScript\uc758 class<\/code>\uac00 C++\uc774\ub098 Java\uc758 \ud074\ub798\uc2a4\uc640 \uc644\uc804\ud788 \uac19\uc740 \ubc29\uc2dd\uc73c\ub85c \ub3d9\uc791\ud558\ub294 \uac83\uc740 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n
JavaScript\uc758 class<\/code>\ub294 \ud504\ub85c\ud1a0\ud0c0\uc785 \uae30\ubc18 \uac1d\uccb4 \ubaa8\ub378 \uc704\uc5d0 \uc81c\uacf5\ub418\ub294 \ubb38\ubc95\uc801 \ucd94\uc0c1\ud654\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
\uad6c\uc870 \ubd84\ud574 \ud560\ub2f9<\/h2>\n\n\n\n
JavaScript\uc5d0\uc11c\ub294 \uac1d\uccb4\ub098 \ubc30\uc5f4\uc758 \uac12\uc744 \uc27d\uac8c \uaebc\ub0bc \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
const player =\n{\n    name: \"Player\",\n    health: 100\n};\n\nconst { name, health } = player;\n<\/code><\/pre>\n\n\n\n
\ubc30\uc5f4\ub3c4 \uac00\ub2a5\ud558\ub2e4.<\/p>\n\n\n\n
const scores = [100, 200];\n\nconst [first, second] = scores;\n<\/code><\/pre>\n\n\n\n
\ud568\uc218 \ub9e4\uac1c\ubcc0\uc218\uc5d0\uc11c\ub3c4 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
function printPlayer({ name, health })\n{\n    console.log(name, health);\n}\n<\/code><\/pre>\n\n\n\n
\uc6f9 \uac1c\ubc1c\uc5d0\uc11c\ub294 API \uc751\ub2f5 \uac1d\uccb4\ub97c \ub2e4\ub8f0 \ub54c \uc0c1\ub2f9\ud788 \uc790\uc8fc \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
Spread\uc640 Rest<\/h2>\n\n\n\n
Spread \ubb38\ubc95\uc740 \ubc30\uc5f4\uc774\ub098 \uac1d\uccb4\ub97c \ud3bc\uce58\ub294 \ub370 \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n
const a = [1, 2, 3];\nconst b = [...a, 4, 5];\n<\/code><\/pre>\n\n\n\n
\uac1d\uccb4\uc5d0\uc11c\ub3c4 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
const player =\n{\n    name: \"Player\",\n    health: 100\n};\n\nconst updatedPlayer =\n{\n    ...player,\n    health: 50\n};\n<\/code><\/pre>\n\n\n\n
Rest \ubb38\ubc95\uc740 \uc5ec\ub7ec \uac12\uc744 \ud558\ub098\ub85c \ubaa8\uc740\ub2e4.<\/p>\n\n\n\n
function add(...values)\n{\n    return values.reduce(\n        (sum, value) => sum + value,\n        0\n    );\n}\n<\/code><\/pre>\n\n\n\n
\uac19\uc740 ...<\/code> \ubb38\ubc95\uc774 \uc704\uce58\uc5d0 \ub530\ub77c \ub2e4\ub978 \uc5ed\ud560\uc744 \ud55c\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
Map\uacfc Set<\/h2>\n\n\n\n
\uac1d\uccb4 \uc678\uc5d0\ub3c4 Map<\/code>\uacfc Set<\/code>\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
Map<\/code>\uc740 \ud0a4\uc640 \uac12\uc744 \uc800\uc7a5\ud55c\ub2e4.<\/p>\n\n\n\n
const players = new Map();\n\nplayers.set(1, \"Player\");\nplayers.set(2, \"Monster\");\n\nconsole.log(players.get(1));\n<\/code><\/pre>\n\n\n\n
Set<\/code>\uc740 \uc911\ubcf5\ub418\uc9c0 \uc54a\ub294 \uac12\uc744 \uc800\uc7a5\ud55c\ub2e4.<\/p>\n\n\n\n
const ids = new Set();\n\nids.add(1);\nids.add(1);\nids.add(2);\n<\/code><\/pre>\n\n\n\n
\uacb0\uacfc\uc801\uc73c\ub85c 1<\/code>, 2<\/code>\ub9cc \uc874\uc7ac\ud55c\ub2e4.<\/p>\n\n\n\n
\ub2e8\uc21c\ud55c \ud0a4-\uac12 \ub370\uc774\ud130\uc5d0\ub294 \uac1d\uccb4\ub97c \uc0ac\uc6a9\ud560 \uc218\ub3c4 \uc788\uc9c0\ub9cc, \uba85\ud655\ud55c Map semantics\uac00 \ud544\uc694\ud55c \uacbd\uc6b0\uc5d0\ub294 Map<\/code>\uc744 \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc88b\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
\uace0\ucc28 \ud568\uc218<\/h2>\n\n\n\n
JavaScript\uc5d0\uc11c\ub294 \ud568\uc218\ub97c \ub2e4\ub978 \ud568\uc218\uc5d0 \uc804\ub2ec\ud560 \uc218 \uc788\uae30 \ub54c\ubb38\uc5d0 \uace0\ucc28 \ud568\uc218\ub97c \ub9ce\uc774 \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n
\ub300\ud45c\uc801\uc73c\ub85c \ubc30\uc5f4 \uba54\uc11c\ub4dc\uac00 \uc788\ub2e4.<\/p>\n\n\n\n
const scores = [10, 20, 30, 40];\n\nconst result = scores\n    .filter(x => x >= 20)\n    .map(x => x * 2);\n<\/code><\/pre>\n\n\n\n
\uc5ec\uae30\uc11c filter()<\/code>\uc640 map()<\/code>\uc5d0 \ud568\uc218\ub97c \uc804\ub2ec\ud558\uace0 \uc788\ub2e4.<\/p>\n\n\n\n
\ub300\ud45c\uc801\uc778 \ubc30\uc5f4 \ucc98\ub9ac \uba54\uc11c\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
map \/ filter \/ reduce \/ find \/ some \/ every \/ forEach \/ sort\n<\/code><\/pre>\n\n\n\n
\uc774\ub7f0 \uae30\ub2a5\uc744 \uc774\uc6a9\ud558\uba74 \ubc18\ubcf5\ubb38\uc744 \uc9c1\uc811 \uc791\uc131\ud558\uc9c0 \uc54a\uace0 \ub370\uc774\ud130 \ucc98\ub9ac \uacfc\uc815\uc744 \ud45c\ud604\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
Promise<\/h2>\n\n\n\n
JavaScript\uc758 \ube44\ub3d9\uae30 \ucc98\ub9ac\ub97c \uc774\ud574\ud558\ub824\uba74 Promise\ub97c \uc54c\uc544\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
const promise = fetch(\"\/api\/player\");\n<\/code><\/pre>\n\n\n\n
Promise\ub294 \ubbf8\ub798\uc5d0 \uc644\ub8cc\ub420 \uc218 \uc788\ub294 \ube44\ub3d9\uae30 \uc791\uc5c5\uc758 \uacb0\uacfc\ub97c \ud45c\ud604\ud55c\ub2e4.<\/p>\n\n\n\n
\uc0c1\ud0dc\ub294 \ud06c\uac8c \ub2e4\uc74c\uacfc \uac19\uc774 \uc0dd\uac01\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
Pending -> Fulfilled \/ Rejected\n<\/code><\/pre>\n\n\n\n
Promise\ub97c \uc774\uc6a9\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 \ucc98\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
fetch(\"\/api\/player\")\n    .then(response => response.json())\n    .then(data =>\n    {\n        console.log(data);\n    })\n    .catch(error =>\n    {\n        console.error(error);\n    });\n<\/code><\/pre>\n\n\n\n
\uc774 \uad6c\uc870\ub294 \ucf5c\ubc31 \uc911\ucca9\uc744 \uc904\uc774\uace0 \ube44\ub3d9\uae30 \uc791\uc5c5\uc758 \uc131\uacf5\uacfc \uc2e4\ud328\ub97c \uccb4\uacc4\uc801\uc73c\ub85c \uc5f0\uacb0\ud560 \uc218 \uc788\uac8c \ud55c\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
async\uc640 await<\/h2>\n\n\n\n
Promise\ub97c \ub354 \uc77d\uae30 \uc26c\uc6b4 \ud615\ud0dc\ub85c \uc791\uc131\ud558\uae30 \uc704\ud574 async<\/code>\uc640 await<\/code>\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
async function loadPlayer()\n{\n    const response = await fetch(\"\/api\/player\");\n    const data = await response.json();\n\n    return data;\n}\n<\/code><\/pre>\n\n\n\n
\ud638\ucd9c\ud558\ub294 \ucabd\uc5d0\uc11c\ub294:<\/p>\n\n\n\n
const player = await loadPlayer();\n<\/code><\/pre>\n\n\n\n
\ucc98\ub7fc \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\uc5ec\uae30\uc11c await<\/code>\uac00 \uc2a4\ub808\ub4dc\ub97c \uba48\ucd94\ub294 \uac83\uc740 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n
JavaScript\uc758 \ube44\ub3d9\uae30 \ucc98\ub9ac\ub294 \uc774\ubca4\ud2b8 \ub8e8\ud504\uc640 Promise \ub4f1\uc758 \uba54\ucee4\ub2c8\uc998\uc744 \uae30\ubc18\uc73c\ub85c \uc2e4\ud589\ub41c\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
\uc774\ubca4\ud2b8 \ub8e8\ud504<\/h2>\n\n\n\n
JavaScript\ub97c \uc81c\ub300\ub85c \uc774\ud574\ud558\ub824\uba74 \uc774\ubca4\ud2b8 \ub8e8\ud504\ub97c \uc54c\uc544\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
\ube0c\ub77c\uc6b0\uc800\ub098 Node.js\uc5d0\uc11c JavaScript \ucf54\ub4dc\uac00 \uc2e4\ud589\ub418\ub294 \ubc29\uc2dd\uc740 \ub2e8\uc21c\ud55c \ud568\uc218 \ud638\ucd9c\uc758 \uc5f0\uc18d\uc774 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n
\uac1c\ub150\uc801\uc73c\ub85c \ub2e4\uc74c\uacfc \uac19\uc740 \uad6c\uc870\ub85c \ubcfc \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
Call Stack -> JavaScript Execution\nWeb APIs \/ Runtime -> Task Queue \/ Microtask Queue -> Event Loop -> Call Stack\n<\/code><\/pre>\n\n\n\n
\uc608\ub97c \ub4e4\uc5b4:<\/p>\n\n\n\n
console.log(\"A\");\n\nsetTimeout(() =>\n{\n    console.log(\"B\");\n}, 0);\n\nconsole.log(\"C\");\n<\/code><\/pre>\n\n\n\n
\uacb0\uacfc\ub294:<\/p>\n\n\n\n
A -> C -> B\n<\/code><\/pre>\n\n\n\n
setTimeout(..., 0)<\/code>\uc740 \uc989\uc2dc \uc2e4\ud589\ub418\ub294 \uac83\uc774 \uc544\ub2c8\ub77c \ud574\ub2f9 \ucf5c\ubc31\uc774 \ub098\uc911\uc5d0 \uc2e4\ud589\ub420 \uc218 \uc788\ub3c4\ub85d \ub7f0\ud0c0\uc784\uc5d0 \ub4f1\ub85d\ud55c\ub2e4.<\/p>\n\n\n\n
\ud604\uc7ac \uc2e4\ud589 \uc911\uc778 \ub3d9\uae30 \ucf54\ub4dc\uac00 \ub05d\ub09c \ub4a4 \uc774\ubca4\ud2b8 \ub8e8\ud504\uac00 \ucf5c\ubc31\uc744 \uc2e4\ud589\ud55c\ub2e4.<\/p>\n\n\n\n
Promise\uc758 continuation \uac19\uc740 microtask\ub294 \uc77c\ubc18\uc801\uc778 task\ubcf4\ub2e4 \uba3c\uc800 \ucc98\ub9ac\ub418\ub294 \ub4f1 \ub354 \uc138\ubd80\uc801\uc778 \uc2e4\ud589 \uaddc\uce59\uc774 \uc874\uc7ac\ud55c\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
\ube44\ub3d9\uae30 \ud504\ub85c\uadf8\ub798\ubc0d<\/h2>\n\n\n\n
JavaScript\uc5d0\uc11c \ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc774\ub098 \ud30c\uc77c \ucc98\ub9ac \uac19\uc740 \uc791\uc5c5\uc744 \ub3d9\uae30\uc801\uc73c\ub85c \uae30\ub2e4\ub9ac\uba74 \uc2e4\ud589 \ud750\ub984\uc774 \ub9c9\ud790 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\uadf8\ub798\uc11c \ube44\ub3d9\uae30 API\ub97c \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n
Request -> Wait -> Other JavaScript Execution -> Response -> Callback \/ Promise Continuation\n<\/code><\/pre>\n\n\n\n
Node.js\uc5d0\uc11c\ub3c4 \uc774 \uad6c\uc870\ub97c \uc774\uc6a9\ud574 \ub9ce\uc740 I\/O \uc791\uc5c5\uc744 \ud6a8\uc728\uc801\uc73c\ub85c \ucc98\ub9ac\ud55c\ub2e4.<\/p>\n\n\n\n
\ub2e4\ub9cc JavaScript \ucf54\ub4dc \uc790\uccb4\uac00 CPU \uc5f0\uc0b0\uc744 \ubcd1\ub82c\ub85c \ucc98\ub9ac\ud574\uc8fc\ub294 \uac83\uc740 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n
CPU\ub97c \uc624\ub798 \uc810\uc720\ud558\ub294 \uc791\uc5c5\uc740 \uc774\ubca4\ud2b8 \ub8e8\ud504\ub97c \ub9c9\uc744 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\uc774\ub7f0 \uc791\uc5c5\uc740 Worker Threads\ub098 Web Workers \uac19\uc740 \ubcc4\ub3c4\uc758 \uc2e4\ud589 \ubaa8\ub378\uc744 \uace0\ub824\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
\ubaa8\ub4c8<\/h2>\n\n\n\n
JavaScript\ub294 \ucf54\ub4dc\ub97c \uc5ec\ub7ec \ud30c\uc77c\ub85c \ub098\ub204\uace0 \ubaa8\ub4c8 \ub2e8\uc704\ub85c \uad00\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
ES Module\uc5d0\uc11c\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \uc791\uc131\ud55c\ub2e4.<\/p>\n\n\n\n
\/\/ math.js\n\nexport function add(a, b)\n{\n    return a + b;\n}\n<\/code><\/pre>\n\n\n\n
\ub2e4\ub978 \ud30c\uc77c\uc5d0\uc11c \uac00\uc838\uc628\ub2e4.<\/p>\n\n\n\n
import { add } from \".\/math.js\";\n\nconsole.log(add(10, 20));\n<\/code><\/pre>\n\n\n\n
\ubaa8\ub4c8\uc744 \uc0ac\uc6a9\ud558\uba74 \uc804\uc5ed \ubcc0\uc218\uc5d0 \ubaa8\ub4e0 \ucf54\ub4dc\ub97c \ub123\ub294 \uad6c\uc870\ub97c \ud53c\ud558\uace0 \uae30\ub2a5\ubcc4\ub85c \ucf54\ub4dc\ub97c \ubd84\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
Node.js\uc5d0\uc11c\ub3c4 ES Module\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uace0, \uae30\uc874\uc5d0\ub294 CommonJS\uc758 require()<\/code>\uc640 module.exports<\/code>\ub3c4 \ub110\ub9ac \uc0ac\uc6a9\ub410\ub2e4.<\/p>\n\n\n\n
const fs = require(\"fs\");\n<\/code><\/pre>\n\n\n\n
\ud604\uc7ac\ub294 \ud504\ub85c\uc81d\ud2b8 \uc124\uc815\uc5d0 \ub530\ub77c ES Module\uacfc CommonJS\ub97c \uc120\ud0dd\ud558\uac8c \ub41c\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
npm\uacfc JavaScript \uc0dd\ud0dc\uacc4<\/h2>\n\n\n\n
JavaScript\ub294 \uc5b8\uc5b4 \uc790\uccb4\ubcf4\ub2e4 \uc0dd\ud0dc\uacc4\uac00 \uc0c1\ub2f9\ud788 \ud070 \ud3b8\uc774\ub2e4.<\/p>\n\n\n\n
Node.js \ud658\uacbd\uc5d0\uc11c\ub294 npm\uc744 \uc774\uc6a9\ud574 \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud55c\ub2e4.<\/p>\n\n\n\n
npm install express\n<\/code><\/pre>\n\n\n\n
package.json<\/code>\uc5d0 \ud504\ub85c\uc81d\ud2b8\uc758 \uc758\uc874\uc131\uacfc \uc124\uc815\uc744 \uad00\ub9ac\ud55c\ub2e4.<\/p>\n\n\n\n
{\n    \"dependencies\": {\n        \"express\": \"^5.1.0\"\n    }\n}\n<\/code><\/pre>\n\n\n\n
\uc6f9 \uac1c\ubc1c\uc5d0\uc11c\ub294 JavaScript \ucf54\ub4dc\ub9cc \uc791\uc131\ud558\ub294 \uac83\uc774 \uc544\ub2c8\ub77c \ud328\ud0a4\uc9c0 \ub9e4\ub2c8\uc800, \ube4c\ub4dc \ub3c4\uad6c, \ud14c\uc2a4\ud2b8 \ub3c4\uad6c, \ud504\ub808\uc784\uc6cc\ud06c\uae4c\uc9c0 \ud568\uaed8 \uc0ac\uc6a9\ud558\uac8c \ub41c\ub2e4.<\/p>\n\n\n\n
React, Vue, Express \uac19\uc740 \ub3c4\uad6c\ub294 JavaScript \uc5b8\uc5b4 \uc790\uccb4\uac00 \uc544\ub2c8\ub77c JavaScript \uc0dd\ud0dc\uacc4\uc5d0 \uc18d\ud558\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub098 \ud504\ub808\uc784\uc6cc\ud06c\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c JavaScript<\/h2>\n\n\n\n
\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c\ub294 JavaScript\uac00 DOM\uc744 \uc870\uc791\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
const button =\n    document.querySelector(\"#button\");\n\nbutton.addEventListener(\"click\", () =>\n{\n    console.log(\"Clicked\");\n});\n<\/code><\/pre>\n\n\n\n
HTML \uc694\uc18c\ub97c \uac00\uc838\uc624\uace0 \uc774\ubca4\ud2b8\ub97c \ub4f1\ub85d\ud558\uace0 \ub0b4\uc6a9\uc744 \ubcc0\uacbd\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
HTML \/ CSS \/ JavaScript -> Web Page\n<\/code><\/pre>\n\n\n\n
JavaScript\ub294 \ube0c\ub77c\uc6b0\uc800\uc758 Web API\uc640 \uc5f0\uacb0\ub418\uc5b4 DOM, \ub124\ud2b8\uc6cc\ud06c, \uc800\uc7a5\uc18c, \ud0c0\uc774\uba38 \ub4f1\uc758 \uae30\ub2a5\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\uc774\ub54c DOM\uc774\ub098 fetch()<\/code>\uac00 JavaScript \uc5b8\uc5b4 \uc790\uccb4\uc5d0 \ud3ec\ud568\ub41c \uae30\ub2a5\uc774\ub77c\uace0 \uc0dd\uac01\ud558\uba74 \uc548 \ub41c\ub2e4. \ube0c\ub77c\uc6b0\uc800\uac00 \uc81c\uacf5\ud558\ub294 API\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
Node.js<\/h2>\n\n\n\n
Node.js\ub294 JavaScript\ub97c \uc11c\ubc84\uc640 \uc77c\ubc18\uc801\uc778 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ud658\uacbd\uc5d0\uc11c \uc2e4\ud589\ud560 \uc218 \uc788\ub3c4\ub85d \ub9cc\ub4e0 \ub7f0\ud0c0\uc784\uc774\ub2e4.<\/p>\n\n\n\n
\ube0c\ub77c\uc6b0\uc800 JavaScript\uc640 \uac19\uc740 \uc5b8\uc5b4\ub97c \uc0ac\uc6a9\ud558\uc9c0\ub9cc \uc81c\uacf5\ud558\ub294 API\uac00 \ub2e4\ub974\ub2e4.<\/p>\n\n\n\n
Browser -> DOM \/ Web APIs \/ JavaScript Engine\nNode.js -> File System \/ Network \/ Process \/ JavaScript Engine\n<\/code><\/pre>\n\n\n\n
Node.js\uc5d0\uc11c\ub294 \ud30c\uc77c \uc2dc\uc2a4\ud15c\uc774\ub098 TCP \uc11c\ubc84 \uac19\uc740 \uae30\ub2a5\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
const fs = require(\"fs\");\n\nconst data = fs.readFileSync(\"data.txt\", \"utf8\");\n\nconsole.log(data);\n<\/code><\/pre>\n\n\n\n
Node.js \uc790\uccb4\uac00 JavaScript \uc5b8\uc5b4\ub294 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n
JavaScript\ub294 \uc5b8\uc5b4\uc774\uace0 Node.js\ub294 JavaScript\ub97c \uc2e4\ud589\ud558\uae30 \uc704\ud55c \ub7f0\ud0c0\uc784\uc774\ub2e4.<\/strong><\/p>\n\n\n\n
\n\n\n\n
\ud0c0\uc785 \ubcc0\ud658<\/h2>\n\n\n\n
JavaScript\ub294 \ub3d9\uc801 \ud0c0\uc785 \uc5b8\uc5b4\uc774\uae30 \ub54c\ubb38\uc5d0 \ud0c0\uc785 \ubcc0\ud658\uc774 \uc790\uc8fc \ubc1c\uc0dd\ud55c\ub2e4.<\/p>\n\n\n\n
const value = \"100\";\n\nconst number = Number(value);\n<\/code><\/pre>\n\n\n\n
\ubb38\uc790\uc5f4\ub85c \ubcc0\ud658\ud560 \uc218\ub3c4 \uc788\ub2e4.<\/p>\n\n\n\n
const text = String(100);\n<\/code><\/pre>\n\n\n\n
JavaScript\uc5d0\ub294 \uc554\ubb35\uc801 \ud0c0\uc785 \ubcc0\ud658\ub3c4 \uc874\uc7ac\ud55c\ub2e4.<\/p>\n\n\n\n
\"10\" + 20;\n<\/code><\/pre>\n\n\n\n
\uacb0\uacfc\ub294 \ubb38\uc790\uc5f4\uc774 \ub41c\ub2e4.<\/p>\n\n\n\n
\uc774\ub7f0 \ub3d9\uc791 \ub54c\ubb38\uc5d0 \ube44\uad50 \uc5f0\uc0b0\uc5d0\uc11c\ub294 ==<\/code>\ubcf4\ub2e4 ===<\/code>\ub97c \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0\uac00 \uc77c\ubc18\uc801\uc774\ub2e4.<\/p>\n\n\n\n
10 === \"10\"; \/\/ false\n10 == \"10\";  \/\/ true\n<\/code><\/pre>\n\n\n\n
===<\/code>\ub294 \ud0c0\uc785 \ubcc0\ud658\uc744 \ud558\uc9c0 \uc54a\uace0 \uac12\uacfc \ud0c0\uc785\uc744 \ud568\uaed8 \ube44\uad50\ud55c\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
null\uacfc undefined<\/h2>\n\n\n\n
JavaScript\uc5d0\ub294 \uac12\uc774 \uc5c6\uc74c\uc744 \ud45c\ud604\ud558\ub294 \ubc29\uc2dd\uc774 \ub450 \uac00\uc9c0 \uc788\ub2e4.<\/p>\n\n\n\n
let a = null;\nlet b;\n<\/code><\/pre>\n\n\n\n
null<\/code>\uc740 \uac1c\ubc1c\uc790\uac00 \uba85\uc2dc\uc801\uc73c\ub85c \uac12\uc774 \uc5c6\uc74c\uc744 \ub098\ud0c0\ub0b4\ub294 \uacbd\uc6b0\uac00 \ub9ce\ub2e4.<\/p>\n\n\n\n
undefined<\/code>\ub294 \uac12\uc774 \ud560\ub2f9\ub418\uc9c0 \uc54a\uc740 \uc0c1\ud0dc \ub4f1\uc744 \ub098\ud0c0\ub0b8\ub2e4.<\/p>\n\n\n\n
let value;\n\nconsole.log(value);\n\/\/ undefined\n<\/code><\/pre>\n\n\n\n
\ub458\uc740 \uc11c\ub85c \ub2e4\ub978 \uac12\uc774\ub2e4.<\/p>\n\n\n\n
null === undefined;\n\/\/ false\n<\/code><\/pre>\n\n\n\n
\uc2e4\uc81c \ucf54\ub4dc\uc5d0\uc11c\ub294 null<\/code>\uacfc undefined<\/code>\ub97c \uc5b4\ub5a4 \uc758\ubbf8\ub85c \uc0ac\uc6a9\ud560\uc9c0 \ud504\ub85c\uc81d\ud2b8 \uc218\uc900\uc5d0\uc11c \uc77c\uad00\ub418\uac8c \uc815\ud558\ub294 \uac83\uc774 \uc88b\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
\uc624\ub958 \ucc98\ub9ac<\/h2>\n\n\n\n
JavaScript\uc5d0\uc11c\ub294 try<\/code>, catch<\/code>\ub97c \uc774\uc6a9\ud574 \uc608\uc678\ub97c \ucc98\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
try\n{\n    throw new Error(\"Something went wrong\");\n}\ncatch (error)\n{\n    console.error(error);\n}\n<\/code><\/pre>\n\n\n\n
\ube44\ub3d9\uae30 \ucf54\ub4dc\uc5d0\uc11c\ub294 Promise rejection\ub3c4 \ucc98\ub9ac\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
async function load()\n{\n    try\n    {\n        const response = await fetch(\"\/api\");\n        return await response.json();\n    }\n    catch (error)\n    {\n        console.error(error);\n    }\n}\n<\/code><\/pre>\n\n\n\n
Promise\uc758 \uc2e4\ud328\ub97c \ucc98\ub9ac\ud558\uc9c0 \uc54a\uc73c\uba74 \uc608\uc0c1\ud558\uc9c0 \ubabb\ud55c \uc624\ub958\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
\uba54\ubaa8\ub9ac \uad00\ub9ac<\/h2>\n\n\n\n
JavaScript\ub294 \uc77c\ubc18\uc801\uc73c\ub85c \uac1c\ubc1c\uc790\uac00 \uc9c1\uc811 \uba54\ubaa8\ub9ac\ub97c \ud574\uc81c\ud558\uc9c0 \uc54a\ub294\ub2e4.<\/p>\n\n\n\n
\uac1d\uccb4\uac00 \ub354 \uc774\uc0c1 \ub3c4\ub2ec\ud560 \uc218 \uc5c6\ub294 \uc0c1\ud0dc\uac00 \ub418\uba74 \uac00\ube44\uc9c0 \uceec\ub809\ud130\uac00 \uba54\ubaa8\ub9ac\ub97c \ud68c\uc218\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
let player = {\n    health: 100\n};\n\nplayer = null;\n<\/code><\/pre>\n\n\n\n
\ub2e4\ub978 \ucc38\uc870\uac00 \uc5c6\ub2e4\uba74 \uae30\uc874 \uac1d\uccb4\ub294 GC\uc758 \ub300\uc0c1\uc774 \ub420 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\ud558\uc9c0\ub9cc \uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108, \ud0c0\uc774\uba38, \uc804\uc5ed \uac1d\uccb4 \ub4f1\uc758 \ucc38\uc870\uac00 \uac1d\uccb4\ub97c \uacc4\uc18d \uc7a1\uace0 \uc788\uc73c\uba74 \uc608\uc0c1\ubcf4\ub2e4 \uc624\ub798 \uc0b4\uc544\ub0a8\uc744 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\ub530\ub77c\uc11c GC\uac00 \uc788\ub2e4\uace0 \ud574\uc11c \uba54\ubaa8\ub9ac \uad00\ub9ac\uac00 \uc644\uc804\ud788 \uc0ac\ub77c\uc9c0\ub294 \uac83\uc740 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
JavaScript\uc758 \uc2e4\ud589 \ubaa8\ub378<\/h2>\n\n\n\n
JavaScript\ub97c \uc804\uccb4\uc801\uc73c\ub85c \ubcf4\uba74 \uc5ec\ub7ec \uac1c\ub150\uc774 \uc5f0\uacb0\ub41c\ub2e4.<\/p>\n\n\n\n
Source Code -> JavaScript Engine -> Call Stack -> Runtime API -> Task \/ Microtask Queue -> Event Loop -> Async Continuation\n<\/code><\/pre>\n\n\n\n
\uc5ec\uae30\uc5d0 \uc5b8\uc5b4 \ucc28\uc6d0\uc758 \uae30\ub2a5\ub4e4\uc774 \ub4e4\uc5b4\uac04\ub2e4.<\/p>\n\n\n\n
JavaScript -> Dynamic Typing \/ Object \/ Prototype \/ Function \/ Closure \/ Class \/ Promise \/ async \/ await \/ Module\n<\/code><\/pre>\n\n\n\n
\uadf8\ub9ac\uace0 \uc2e4\ud589 \ud658\uacbd\uc774 \uae30\ub2a5\uc744 \ucd94\uac00\ud55c\ub2e4.<\/p>\n\n\n\n
Browser -> DOM \/ Web APIs\nNode.js -> File System \/ Network \/ Process\n<\/code><\/pre>\n\n\n\n
\uc774 \uad6c\uc870\ub97c \uad6c\ubd84\ud574\uc11c \ubcf4\uba74 JavaScript \uc790\uccb4\uc640 \ube0c\ub77c\uc6b0\uc800, Node.js, \ud504\ub808\uc784\uc6cc\ud06c\uc758 \uc5ed\ud560\uc744 \ud63c\ub3d9\ud560 \uc77c\uc774 \uc904\uc5b4\ub4e0\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
JavaScript\ub97c \uc0ac\uc6a9\ud560 \ub54c \uc0dd\uac01\ud574\uc57c \ud558\ub294 \uac83<\/h2>\n\n\n\n
JavaScript\ub294 \ubb38\ubc95\ub9cc \ubcf4\uba74 \uc0c1\ub2f9\ud788 \uc811\uadfc\ud558\uae30 \uc26c\uc6b4 \uc5b8\uc5b4\ub2e4.<\/p>\n\n\n\n
\ud558\uc9c0\ub9cc \uaddc\ubaa8\uac00 \ucee4\uc9c0\uba74 \ub3d9\uc801 \ud0c0\uc785\uacfc \uac1d\uccb4 \ucc38\uc870, \ube44\ub3d9\uae30 \uc2e4\ud589, \uc774\ubca4\ud2b8 \ub8e8\ud504 \uac19\uc740 \ubd80\ubd84\uc5d0\uc11c \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud558\uae30 \uc27d\ub2e4.<\/p>\n\n\n\n
\ud2b9\ud788 \ub2e4\uc74c \ubd80\ubd84\uc740 \uacc4\uc18d \uc2e0\uacbd \uc4f0\uac8c \ub41c\ub2e4.<\/p>\n\n\n\n
\ud0c0\uc785 \/ \uc2a4\ucf54\ud504 \/ \ucc38\uc870 \/ \ud074\ub85c\uc800 \/ this \/ \ud504\ub85c\ud1a0\ud0c0\uc785 \/ Promise \/ Event Loop \/ \uba54\ubaa8\ub9ac \/ \ubaa8\ub4c8\n<\/code><\/pre>\n\n\n\n
\uc5b8\uc5b4 \uc790\uccb4\uac00 \uc720\uc5f0\ud55c \ub9cc\ud07c \ucf54\ub4dc \uc791\uc131 \ubc29\uc2dd\ub3c4 \uc0c1\ub2f9\ud788 \uc790\uc720\ub86d\ub2e4.<\/p>\n\n\n\n
\uadf8\ub798\uc11c \ud504\ub85c\uc81d\ud2b8\uac00 \ucee4\uc9c8\uc218\ub85d TypeScript \uac19\uc740 \uc815\uc801 \ud0c0\uc785 \uc2dc\uc2a4\ud15c\uc744 \ucd94\uac00\ud558\uac70\ub098, \ubaa8\ub4c8 \uad6c\uc870\uc640 \ucf54\ub529 \uaddc\uce59\uc744 \uba85\ud655\ud558\uac8c \uc815\ud558\ub294 \uacbd\uc6b0\uac00 \ub9ce\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
\uc815\ub9ac<\/h2>\n\n\n\n
JavaScript\ub97c \ud070 \ud750\ub984\uc73c\ub85c \uc815\ub9ac\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
\uae30\ubcf8 \ubb38\ubc95 -> Dynamic Typing -> Object \/ Array -> Function -> Scope \/ Closure -> Prototype \/ Class -> Module -> Promise \/ async \/ await -> Event Loop -> Runtime -> Browser \/ Node.js\n<\/code><\/pre>\n\n\n\n
JavaScript\ub97c \ucc98\uc74c \ubcf4\uba74 C++, Java, C# \uac19\uc740 \uc5b8\uc5b4\uc640 \ubb38\ubc95\uc774 \ube44\uc2b7\ud55c \ubd80\ubd84\uc774 \ub9ce\ub2e4.<\/p>\n\n\n\n
\ud558\uc9c0\ub9cc \ub0b4\ubd80 \ubaa8\ub378\uc740 \uc0c1\ub2f9\ud788 \ub2e4\ub974\ub2e4.<\/p>\n\n\n\n
\ud074\ub798\uc2a4\uac00 \uc788\uc9c0\ub9cc \ud504\ub85c\ud1a0\ud0c0\uc785 \uae30\ubc18 \uac1d\uccb4 \ubaa8\ub378 \uc704\uc5d0\uc11c \ub3d9\uc791\ud558\uace0, \ud568\uc218\uac00 \uc77c\ubc18\uc801\uc778 \uba54\uc11c\ub4dc \uc774\uc0c1\uc758 \uc758\ubbf8\ub97c \uac00\uc9c0\uba70, \ube44\ub3d9\uae30 \ucc98\ub9ac\ub294 \uc2a4\ub808\ub4dc\ub97c \uc9c1\uc811 \uc0dd\uc131\ud558\ub294 \ubc29\uc2dd\ubcf4\ub2e4 \uc774\ubca4\ud2b8 \ub8e8\ud504\uc640 \ub7f0\ud0c0\uc784\uc758 \uc791\uc5c5 \ud050\ub97c \uc911\uc2ec\uc73c\ub85c \ub3cc\uc544\uac04\ub2e4.<\/p>\n\n\n\n
\ud2b9\ud788 JavaScript\uc5d0\uc11c \uc911\uc694\ud55c \uac83\uc740 \uc5b8\uc5b4 \uc790\uccb4\uc640 \uc2e4\ud589 \ud658\uacbd\uc744 \ubd84\ub9ac\ud574\uc11c \uc774\ud574\ud558\ub294 \uac83<\/strong>\uc774\ub2e4.<\/p>\n\n\n\n
JavaScript\ub294 \uc5b8\uc5b4\uc774\uace0, \ube0c\ub77c\uc6b0\uc800\uc640 Node.js\ub294 \uadf8 \uc5b8\uc5b4\ub97c \uc2e4\ud589\ud558\uba74\uc11c \uac01\uac01 \ub2e4\ub978 API\uc640 \uc2e4\ud589 \ud658\uacbd\uc744 \uc81c\uacf5\ud55c\ub2e4.<\/p>\n\n\n\n
\uacb0\uad6d JavaScript\ub97c \uc81c\ub300\ub85c \uc774\ud574\ud558\ub824\uba74 \ubb38\ubc95\ubcf4\ub2e4 Function<\/code>, Object<\/code>, Prototype<\/code>, Closure<\/code>, Promise<\/code>, Event Loop<\/code> \uc0ac\uc774\uc758 \uad00\uacc4\ub97c \uc7a1\ub294 \uac83\uc774 \ub354 \uc911\uc694\ud558\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"
JavaScript\ub294 \uc6f9 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \ub3d9\uc801\uc778 \ub3d9\uc791\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud574 \ub9cc\ub4e4\uc5b4\uc9c4 \ud504\ub85c\uadf8\ub798\ubc0d \uc5b8\uc5b4\ub2e4. \ud604\uc7ac\ub294 \ube0c\ub77c\uc6b0\uc800\ubfd0\ub9cc \uc544\ub2c8\ub77c Node.js \uac19\uc740 \ub7f0\ud0c0\uc784\uc744 \ud1b5\ud574 \uc11c\ubc84, CLI, \uc790\ub3d9\ud654 \ub3c4\uad6c \ub4f1\uc5d0\uc11c\ub3c4 \uc0ac\uc6a9\ub41c\ub2e4. JavaScript\uc758 \ud2b9\uc9d5\uc740 \ub2e8\uc21c\ud788 \ubb38\ubc95\uc774 \uac04\ub2e8\ud558\ub2e4\ub294 \ub370 \uc788\uc9c0 \uc54a\ub2e4. \ub3d9\uc801 \ud0c0\uc785, \ud504\ub85c\ud1a0\ud0c0\uc785 \uae30\ubc18 \uac1d\uccb4 \ubaa8\ub378, \uc77c\uae09 \ud568\uc218, \ud074\ub85c\uc800, \uc774\ubca4\ud2b8 \ub8e8\ud504, \ube44\ub3d9\uae30 \ud504\ub85c\uadf8\ub798\ubc0d \uac19\uc740 \ud2b9\uc131\uc774 \ud558\ub098\uc758 \uc2e4\ud589 \ubaa8\ub378\uc744 \uad6c\uc131\ud558\uace0 \uc788\ub2e4. \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c\ub294 HTML\uacfc CSS\ub85c \uad6c\uc131\ub41c […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[50],"tags":[],"class_list":["post-1697","post","type-post","status-publish","format-standard","hentry","category-language"],"_links":{"self":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts\/1697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1697"}],"version-history":[{"count":3,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts\/1697\/revisions"}],"predecessor-version":[{"id":1980,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts\/1697\/revisions\/1980"}],"wp:attachment":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}