\uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14(Apache Cordova)\ub294 \ud558\uc774\ube0c\ub9ac\ub4dc \ubaa8\ubc14\uc77c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc744 \uc704\ud55c \ud50c\ub7ab\ud3fc\uc73c\ub85c, HTML, CSS, JavaScript \ub4f1\uc744 \uc0ac\uc6a9\ud558\uc5ec \ub2e4\uc591\ud55c \ubaa8\ubc14\uc77c \uc6b4\uc601\uccb4\uc81c\uc5d0\uc11c \uc2e4\ud589 \uac00\ub2a5\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4 \uc218 \uc788\uac8c \ud574\uc90d\ub2c8\ub2e4. \uc774 \ud50c\ub7ab\ud3fc\uc740 \uac1c\ubc1c\uc790\ub4e4\uc774 \ub3d9\uc77c\ud55c \ucf54\ub4dc\ubca0\uc774\uc2a4\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc5ec\ub7ec \ud50c\ub7ab\ud3fc(\uc608: iOS, Android, Windows \ub4f1)\uc5d0 \ubc30\ud3ec\ud560 \uc218 \uc788\ub3c4\ub85d \ud574\uc8fc\ub294 \uac15\ub825\ud55c \ub3c4\uad6c\uc785\ub2c8\ub2e4.<\/p>\n
1. \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\uc758 \uc5ed\uc0ac<\/h2>\n
\uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub294 \uc6d0\ub798 2009\ub144\uc5d0 Nitobi\ub77c\ub294 \ud68c\uc0ac\uc5d0 \uc758\ud574 \uc2dc\uc791\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc774\ud6c4 2011\ub144 \uc544\ud30c\uce58 \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uc7ac\ub2e8\uc5d0 \uc758\ud574 \uc778\uc218\ub418\uace0, \uc9c0\uae08\uc758 \uc774\ub984\uc744 \uac16\uac8c \ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ucd08\uae30\uc5d0\ub294 PhoneGap\uc774\ub77c\ub294 \uc774\ub984\uc73c\ub85c \ub354 \uc798 \uc54c\ub824\uc838 \uc788\uc5c8\uc73c\ub098, \ud604\uc7ac\ub294 \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub77c\ub294 \uc774\ub984\uc73c\ub85c \uacf5\uc2dd\uc801\uc73c\ub85c \uc0ac\uc6a9\ub418\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
2. \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\uc758 \uc8fc\uc694 \ud2b9\uc9d5<\/h2>\n\n- \ud06c\ub85c\uc2a4 \ud50c\ub7ab\ud3fc \uac1c\ubc1c:<\/strong> \uac19\uc740 \ucf54\ub4dc\ubca0\uc774\uc2a4\ub85c Android, iOS, Windows Phone \ub4f1\uc758 \ub2e4\uc591\ud55c \uc6b4\uc601\uccb4\uc81c\uc5d0\uc11c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc2e4\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n
- HTML5 \ubc0f JavaScript \uc0ac\uc6a9:<\/strong> \uae30\uc874\uc758 \uc6f9 \uae30\uc220\ub85c \uc571\uc744 \uac1c\ubc1c\ud560 \uc218 \uc788\uc5b4 \uc6f9 \uac1c\ubc1c\uc790\ub4e4\uc774 \uc27d\uac8c \uc811\uadfc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n
- \ud50c\ub7ec\uadf8\uc778 \uc544\ud0a4\ud14d\ucc98:<\/strong> \uce74\uba54\ub77c, \uc13c\uc11c, \ud30c\uc77c \uc2dc\uc2a4\ud15c \ub4f1 \ub2e4\uc591\ud55c \uae30\ub2a5\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ud50c\ub7ec\uadf8\uc778\uc744 \ud1b5\ud574 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uae30\ub2a5\uc744 \ud655\uc7a5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n
- \ucee4\ubba4\ub2c8\ud2f0 \uc9c0\uc6d0:<\/strong> \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub294 \ud65c\ubc1c\ud55c \uc624\ud508 \uc18c\uc2a4 \ucee4\ubba4\ub2c8\ud2f0\uac00 \uc788\uc5b4 \ub2e4\uc591\ud55c \uc790\ub8cc\uc640 \uc9c0\uc6d0\uc744 \ubc1b\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n
3. \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\uc758 \uc791\ub3d9 \uc6d0\ub9ac<\/h2>\n
\uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub294 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub124\uc774\ud2f0\ube0c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc73c\ub85c \ubcc0\ud658\ud574\uc8fc\ub294 \uad6c\uc870\ub97c \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uae30\ubcf8\uc801\uc73c\ub85c HTML, CSS, JavaScript \ucf54\ub4dc\ub294 WebView\ub77c\ub294 \ub124\uc774\ud2f0\ube0c \ucef4\ud3ec\ub10c\ud2b8 \ub0b4\uc5d0\uc11c \uc2e4\ud589\ub429\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 \ub124\uc774\ud2f0\ube0c API\uc640 \uc0c1\ud638\uc791\uc6a9\ud560 \uc218 \uc788\uc73c\uba70, \ub2e4\uc591\ud55c \ub514\ubc14\uc774\uc2a4 \uae30\ub2a5\uc744 \ud65c\uc6a9\ud560 \uc218 \uc788\uac8c \ub429\ub2c8\ub2e4.<\/p>\n
\uc791\ub3d9 \uacfc\uc815<\/h3>\n\n- \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ucf54\ub4dc\ub97c \uc791\uc131\ud569\ub2c8\ub2e4.<\/li>\n
- \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14 \ub3c4\uad6c\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ube4c\ub4dc\ud569\ub2c8\ub2e4.<\/li>\n
- \ube4c\ub4dc \uacfc\uc815\uc5d0\uc11c \ucf54\ub4dc\ub294 \uac01 \ubaa8\ubc14\uc77c \ud50c\ub7ab\ud3fc\uc5d0 \ub9de\ub294 \ub124\uc774\ud2f0\ube0c \ucf54\ub4dc\ub85c \ubcc0\ud658\ub429\ub2c8\ub2e4.<\/li>\n
- \ucd5c\uc885\uc801\uc73c\ub85c \uc0dd\uc131\ub41c \ud328\ud0a4\uc9c0\ub97c \ubaa8\ubc14\uc77c \uae30\uae30\uc5d0 \ubc30\ud3ec\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n
4. \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\uc758 \uc124\uce58<\/h2>\n
\uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub97c \uc124\uce58\ud558\uae30 \uc704\ud574\uc11c\ub294 Node.js\ub97c \uba3c\uc800 \uc124\uce58\ud574\uc57c \ud569\ub2c8\ub2e4. Node.js\uac00 \uc124\uce58\ub418\uace0 \ub098\uba74, npm(Node Package Manager)\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub97c \uc190\uc27d\uac8c \uc124\uce58\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc124\uce58 \uacfc\uc815<\/h3>\nnpm install -g cordova<\/code><\/pre>\n\uc124\uce58\uac00 \uc644\ub8cc\ub41c \ud6c4, \uc544\ub798\uc640 \uac19\uc740 \uba85\ub839\uc73c\ub85c \uc0c8\ub85c\uc6b4 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
cordova create MyApp com.example.myapp MyApp<\/code><\/pre>\n\uc774\ub807\uac8c \uc0dd\uc131\ub41c \ud504\ub85c\uc81d\ud2b8\ub294 MyApp \ub514\ub809\ud1a0\ub9ac \ub0b4\uc5d0 \uc704\uce58\ud558\uac8c \ub418\uba70, \ud544\uc694\ud55c \ud50c\ub7ab\ud3fc\uc744 \ucd94\uac00\ud558\ub294 \uba85\ub839\uc5b4\ub97c \ud1b5\ud574 Android \ub610\ub294 iOS \ud50c\ub7ab\ud3fc\uc744 \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
cd MyApp\ncordova platform add android\ncordova platform add ios<\/code><\/pre>\n5. \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14 \uc0d8\ud50c \uc560\ud50c\ub9ac\ucf00\uc774\uc158<\/h2>\n
\uc774\uc81c \uac04\ub2e8\ud55c \uc0d8\ud50c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc0dd\uc131\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uae30\ubcf8\uc801\uc778 \uad6c\uc870\uc640 \ucf54\ub4dc\ub97c \uc18c\uac1c\ud569\ub2c8\ub2e4.<\/p>\n
1\ub2e8\uacc4: \uae30\ubcf8 \uad6c\uc870 \uc0dd\uc131<\/h3>\ncordova create SampleApp com.example.sampleapp SampleApp\ncd SampleApp\ncordova platform add android<\/code><\/pre>\n2\ub2e8\uacc4: \uae30\ubcf8 HTML \ud30c\uc77c \uc218\uc815<\/h3>\n
www\/index.html \ud30c\uc77c\uc744 \uc5f4\uace0 \uc544\ub798\uc640 \uac19\uc774 \uae30\ubcf8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 UI\ub97c \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\n
<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=no\">\n <title>SampleApp<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n <h1>\uc548\ub155\ud558\uc138\uc694, \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14!<\/h1>\n <p>\uc774\uac83\uc740 \uc0d8\ud50c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc785\ub2c8\ub2e4.<\/p>\n <button id=\"getDeviceInfo\">\ub514\ubc14\uc774\uc2a4 \uc815\ubcf4 \uac00\uc838\uc624\uae30<\/button>\n <script src=\"cordova.js\"><\/script>\n <script src=\"index.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n3\ub2e8\uacc4: JavaScript \ub85c\uc9c1 \ucd94\uac00<\/h3>\n
www\/js\/index.js \ud30c\uc77c\uc744 \uc218\uc815\ud558\uc5ec \ub514\ubc14\uc774\uc2a4 \uc815\ubcf4\ub97c \uac00\uc838\uc624\ub294 \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n
document.addEventListener('deviceready', function() {\n document.getElementById('getDeviceInfo').addEventListener('click', function() {\n var deviceInfo = '\ub514\ubc14\uc774\uc2a4 \uc774\ub984: ' + device.name + '\\\\n' +\n '\ub514\ubc14\uc774\uc2a4 \ubc84\uc804: ' + device.version + '\\\\n' +\n '\ub514\ubc14\uc774\uc2a4 \ud50c\ub7ab\ud3fc: ' + device.platform;\n alert(deviceInfo);\n });\n});<\/code><\/pre>\n6. \uacb0\ub860<\/h2>\n
\uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub294 \ubaa8\ubc14\uc77c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc758 \ubb38\ud131\uc744 \ub0ae\ucdb0 \uc8fc\ub294 \ud6cc\ub96d\ud55c \uc194\ub8e8\uc158\uc785\ub2c8\ub2e4. \uc6f9 \uac1c\ubc1c\uc790\ub4e4\uc774 \uc790\uc2e0\uc758 \uae30\uc220\uc744 \ud65c\uc6a9\ud558\uc5ec \ubaa8\ubc14\uc77c \ud658\uacbd\uc5d0\uc11c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc27d\uac8c \ub9cc\ub4e4 \uc218 \uc788\uac8c \ud574 \uc90d\ub2c8\ub2e4. \ub2e4\uac01\uc801\uc778 \uae30\ub2a5\uacfc \ud50c\ub7ab\ud3fc \uc9c0\uc6d0 \ub355\ubd84\uc5d0, \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub294 \ud558\uc774\ube0c\ub9ac\ub4dc \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc758 \uc911\uc694\ud55c \ub3c4\uad6c\ub85c \uc790\ub9ac \uc7a1\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\ub2e4\uc74c \ube14\ub85c\uadf8 \uae00\uc5d0\uc11c\ub294 \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub85c \ud50c\ub7ec\uadf8\uc778 \ucd94\uac00, \ubc30\ud3ec \ubc29\ubc95 \ubc0f \uc131\ub2a5 \ucd5c\uc801\ud654 \ub4f1\uc5d0 \ub300\ud574 \ub2e4\ub8f0 \uc608\uc815\uc785\ub2c8\ub2e4. \ub9ce\uc740 \uad00\uc2ec \ubd80\ud0c1\ub4dc\ub9bd\ub2c8\ub2e4!<\/p>\n<\/article>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"
3. \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\uc758 \uc791\ub3d9 \uc6d0\ub9ac<\/h2>\n
\uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub294 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub124\uc774\ud2f0\ube0c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc73c\ub85c \ubcc0\ud658\ud574\uc8fc\ub294 \uad6c\uc870\ub97c \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uae30\ubcf8\uc801\uc73c\ub85c HTML, CSS, JavaScript \ucf54\ub4dc\ub294 WebView\ub77c\ub294 \ub124\uc774\ud2f0\ube0c \ucef4\ud3ec\ub10c\ud2b8 \ub0b4\uc5d0\uc11c \uc2e4\ud589\ub429\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 \ub124\uc774\ud2f0\ube0c API\uc640 \uc0c1\ud638\uc791\uc6a9\ud560 \uc218 \uc788\uc73c\uba70, \ub2e4\uc591\ud55c \ub514\ubc14\uc774\uc2a4 \uae30\ub2a5\uc744 \ud65c\uc6a9\ud560 \uc218 \uc788\uac8c \ub429\ub2c8\ub2e4.<\/p>\n
\uc791\ub3d9 \uacfc\uc815<\/h3>\n\n- \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ucf54\ub4dc\ub97c \uc791\uc131\ud569\ub2c8\ub2e4.<\/li>\n
- \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14 \ub3c4\uad6c\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ube4c\ub4dc\ud569\ub2c8\ub2e4.<\/li>\n
- \ube4c\ub4dc \uacfc\uc815\uc5d0\uc11c \ucf54\ub4dc\ub294 \uac01 \ubaa8\ubc14\uc77c \ud50c\ub7ab\ud3fc\uc5d0 \ub9de\ub294 \ub124\uc774\ud2f0\ube0c \ucf54\ub4dc\ub85c \ubcc0\ud658\ub429\ub2c8\ub2e4.<\/li>\n
- \ucd5c\uc885\uc801\uc73c\ub85c \uc0dd\uc131\ub41c \ud328\ud0a4\uc9c0\ub97c \ubaa8\ubc14\uc77c \uae30\uae30\uc5d0 \ubc30\ud3ec\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n
4. \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\uc758 \uc124\uce58<\/h2>\n
\uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub97c \uc124\uce58\ud558\uae30 \uc704\ud574\uc11c\ub294 Node.js\ub97c \uba3c\uc800 \uc124\uce58\ud574\uc57c \ud569\ub2c8\ub2e4. Node.js\uac00 \uc124\uce58\ub418\uace0 \ub098\uba74, npm(Node Package Manager)\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub97c \uc190\uc27d\uac8c \uc124\uce58\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc124\uce58 \uacfc\uc815<\/h3>\nnpm install -g cordova<\/code><\/pre>\n\uc124\uce58\uac00 \uc644\ub8cc\ub41c \ud6c4, \uc544\ub798\uc640 \uac19\uc740 \uba85\ub839\uc73c\ub85c \uc0c8\ub85c\uc6b4 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
cordova create MyApp com.example.myapp MyApp<\/code><\/pre>\n\uc774\ub807\uac8c \uc0dd\uc131\ub41c \ud504\ub85c\uc81d\ud2b8\ub294 MyApp \ub514\ub809\ud1a0\ub9ac \ub0b4\uc5d0 \uc704\uce58\ud558\uac8c \ub418\uba70, \ud544\uc694\ud55c \ud50c\ub7ab\ud3fc\uc744 \ucd94\uac00\ud558\ub294 \uba85\ub839\uc5b4\ub97c \ud1b5\ud574 Android \ub610\ub294 iOS \ud50c\ub7ab\ud3fc\uc744 \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
cd MyApp\ncordova platform add android\ncordova platform add ios<\/code><\/pre>\n5. \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14 \uc0d8\ud50c \uc560\ud50c\ub9ac\ucf00\uc774\uc158<\/h2>\n
\uc774\uc81c \uac04\ub2e8\ud55c \uc0d8\ud50c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc0dd\uc131\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uae30\ubcf8\uc801\uc778 \uad6c\uc870\uc640 \ucf54\ub4dc\ub97c \uc18c\uac1c\ud569\ub2c8\ub2e4.<\/p>\n
1\ub2e8\uacc4: \uae30\ubcf8 \uad6c\uc870 \uc0dd\uc131<\/h3>\ncordova create SampleApp com.example.sampleapp SampleApp\ncd SampleApp\ncordova platform add android<\/code><\/pre>\n2\ub2e8\uacc4: \uae30\ubcf8 HTML \ud30c\uc77c \uc218\uc815<\/h3>\n
www\/index.html \ud30c\uc77c\uc744 \uc5f4\uace0 \uc544\ub798\uc640 \uac19\uc774 \uae30\ubcf8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 UI\ub97c \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\n
<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=no\">\n <title>SampleApp<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n <h1>\uc548\ub155\ud558\uc138\uc694, \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14!<\/h1>\n <p>\uc774\uac83\uc740 \uc0d8\ud50c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc785\ub2c8\ub2e4.<\/p>\n <button id=\"getDeviceInfo\">\ub514\ubc14\uc774\uc2a4 \uc815\ubcf4 \uac00\uc838\uc624\uae30<\/button>\n <script src=\"cordova.js\"><\/script>\n <script src=\"index.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n3\ub2e8\uacc4: JavaScript \ub85c\uc9c1 \ucd94\uac00<\/h3>\n
www\/js\/index.js \ud30c\uc77c\uc744 \uc218\uc815\ud558\uc5ec \ub514\ubc14\uc774\uc2a4 \uc815\ubcf4\ub97c \uac00\uc838\uc624\ub294 \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n
document.addEventListener('deviceready', function() {\n document.getElementById('getDeviceInfo').addEventListener('click', function() {\n var deviceInfo = '\ub514\ubc14\uc774\uc2a4 \uc774\ub984: ' + device.name + '\\\\n' +\n '\ub514\ubc14\uc774\uc2a4 \ubc84\uc804: ' + device.version + '\\\\n' +\n '\ub514\ubc14\uc774\uc2a4 \ud50c\ub7ab\ud3fc: ' + device.platform;\n alert(deviceInfo);\n });\n});<\/code><\/pre>\n6. \uacb0\ub860<\/h2>\n
\uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub294 \ubaa8\ubc14\uc77c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc758 \ubb38\ud131\uc744 \ub0ae\ucdb0 \uc8fc\ub294 \ud6cc\ub96d\ud55c \uc194\ub8e8\uc158\uc785\ub2c8\ub2e4. \uc6f9 \uac1c\ubc1c\uc790\ub4e4\uc774 \uc790\uc2e0\uc758 \uae30\uc220\uc744 \ud65c\uc6a9\ud558\uc5ec \ubaa8\ubc14\uc77c \ud658\uacbd\uc5d0\uc11c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc27d\uac8c \ub9cc\ub4e4 \uc218 \uc788\uac8c \ud574 \uc90d\ub2c8\ub2e4. \ub2e4\uac01\uc801\uc778 \uae30\ub2a5\uacfc \ud50c\ub7ab\ud3fc \uc9c0\uc6d0 \ub355\ubd84\uc5d0, \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub294 \ud558\uc774\ube0c\ub9ac\ub4dc \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc758 \uc911\uc694\ud55c \ub3c4\uad6c\ub85c \uc790\ub9ac \uc7a1\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\ub2e4\uc74c \ube14\ub85c\uadf8 \uae00\uc5d0\uc11c\ub294 \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub85c \ud50c\ub7ec\uadf8\uc778 \ucd94\uac00, \ubc30\ud3ec \ubc29\ubc95 \ubc0f \uc131\ub2a5 \ucd5c\uc801\ud654 \ub4f1\uc5d0 \ub300\ud574 \ub2e4\ub8f0 \uc608\uc815\uc785\ub2c8\ub2e4. \ub9ce\uc740 \uad00\uc2ec \ubd80\ud0c1\ub4dc\ub9bd\ub2c8\ub2e4!<\/p>\n<\/article>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"
4. \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\uc758 \uc124\uce58<\/h2>\n
\uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub97c \uc124\uce58\ud558\uae30 \uc704\ud574\uc11c\ub294 Node.js\ub97c \uba3c\uc800 \uc124\uce58\ud574\uc57c \ud569\ub2c8\ub2e4. Node.js\uac00 \uc124\uce58\ub418\uace0 \ub098\uba74, npm(Node Package Manager)\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub97c \uc190\uc27d\uac8c \uc124\uce58\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc124\uce58 \uacfc\uc815<\/h3>\nnpm install -g cordova<\/code><\/pre>\n\uc124\uce58\uac00 \uc644\ub8cc\ub41c \ud6c4, \uc544\ub798\uc640 \uac19\uc740 \uba85\ub839\uc73c\ub85c \uc0c8\ub85c\uc6b4 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
cordova create MyApp com.example.myapp MyApp<\/code><\/pre>\n\uc774\ub807\uac8c \uc0dd\uc131\ub41c \ud504\ub85c\uc81d\ud2b8\ub294 MyApp \ub514\ub809\ud1a0\ub9ac \ub0b4\uc5d0 \uc704\uce58\ud558\uac8c \ub418\uba70, \ud544\uc694\ud55c \ud50c\ub7ab\ud3fc\uc744 \ucd94\uac00\ud558\ub294 \uba85\ub839\uc5b4\ub97c \ud1b5\ud574 Android \ub610\ub294 iOS \ud50c\ub7ab\ud3fc\uc744 \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
cd MyApp\ncordova platform add android\ncordova platform add ios<\/code><\/pre>\n5. \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14 \uc0d8\ud50c \uc560\ud50c\ub9ac\ucf00\uc774\uc158<\/h2>\n
\uc774\uc81c \uac04\ub2e8\ud55c \uc0d8\ud50c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc0dd\uc131\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uae30\ubcf8\uc801\uc778 \uad6c\uc870\uc640 \ucf54\ub4dc\ub97c \uc18c\uac1c\ud569\ub2c8\ub2e4.<\/p>\n
1\ub2e8\uacc4: \uae30\ubcf8 \uad6c\uc870 \uc0dd\uc131<\/h3>\ncordova create SampleApp com.example.sampleapp SampleApp\ncd SampleApp\ncordova platform add android<\/code><\/pre>\n2\ub2e8\uacc4: \uae30\ubcf8 HTML \ud30c\uc77c \uc218\uc815<\/h3>\n
www\/index.html \ud30c\uc77c\uc744 \uc5f4\uace0 \uc544\ub798\uc640 \uac19\uc774 \uae30\ubcf8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 UI\ub97c \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\n
<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=no\">\n <title>SampleApp<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n <h1>\uc548\ub155\ud558\uc138\uc694, \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14!<\/h1>\n <p>\uc774\uac83\uc740 \uc0d8\ud50c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc785\ub2c8\ub2e4.<\/p>\n <button id=\"getDeviceInfo\">\ub514\ubc14\uc774\uc2a4 \uc815\ubcf4 \uac00\uc838\uc624\uae30<\/button>\n <script src=\"cordova.js\"><\/script>\n <script src=\"index.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n3\ub2e8\uacc4: JavaScript \ub85c\uc9c1 \ucd94\uac00<\/h3>\n
www\/js\/index.js \ud30c\uc77c\uc744 \uc218\uc815\ud558\uc5ec \ub514\ubc14\uc774\uc2a4 \uc815\ubcf4\ub97c \uac00\uc838\uc624\ub294 \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n
document.addEventListener('deviceready', function() {\n document.getElementById('getDeviceInfo').addEventListener('click', function() {\n var deviceInfo = '\ub514\ubc14\uc774\uc2a4 \uc774\ub984: ' + device.name + '\\\\n' +\n '\ub514\ubc14\uc774\uc2a4 \ubc84\uc804: ' + device.version + '\\\\n' +\n '\ub514\ubc14\uc774\uc2a4 \ud50c\ub7ab\ud3fc: ' + device.platform;\n alert(deviceInfo);\n });\n});<\/code><\/pre>\n6. \uacb0\ub860<\/h2>\n
\uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub294 \ubaa8\ubc14\uc77c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc758 \ubb38\ud131\uc744 \ub0ae\ucdb0 \uc8fc\ub294 \ud6cc\ub96d\ud55c \uc194\ub8e8\uc158\uc785\ub2c8\ub2e4. \uc6f9 \uac1c\ubc1c\uc790\ub4e4\uc774 \uc790\uc2e0\uc758 \uae30\uc220\uc744 \ud65c\uc6a9\ud558\uc5ec \ubaa8\ubc14\uc77c \ud658\uacbd\uc5d0\uc11c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc27d\uac8c \ub9cc\ub4e4 \uc218 \uc788\uac8c \ud574 \uc90d\ub2c8\ub2e4. \ub2e4\uac01\uc801\uc778 \uae30\ub2a5\uacfc \ud50c\ub7ab\ud3fc \uc9c0\uc6d0 \ub355\ubd84\uc5d0, \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub294 \ud558\uc774\ube0c\ub9ac\ub4dc \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc758 \uc911\uc694\ud55c \ub3c4\uad6c\ub85c \uc790\ub9ac \uc7a1\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\ub2e4\uc74c \ube14\ub85c\uadf8 \uae00\uc5d0\uc11c\ub294 \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub85c \ud50c\ub7ec\uadf8\uc778 \ucd94\uac00, \ubc30\ud3ec \ubc29\ubc95 \ubc0f \uc131\ub2a5 \ucd5c\uc801\ud654 \ub4f1\uc5d0 \ub300\ud574 \ub2e4\ub8f0 \uc608\uc815\uc785\ub2c8\ub2e4. \ub9ce\uc740 \uad00\uc2ec \ubd80\ud0c1\ub4dc\ub9bd\ub2c8\ub2e4!<\/p>\n<\/article>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"
npm install -g cordova<\/code><\/pre>\n\uc124\uce58\uac00 \uc644\ub8cc\ub41c \ud6c4, \uc544\ub798\uc640 \uac19\uc740 \uba85\ub839\uc73c\ub85c \uc0c8\ub85c\uc6b4 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
cordova create MyApp com.example.myapp MyApp<\/code><\/pre>\n\uc774\ub807\uac8c \uc0dd\uc131\ub41c \ud504\ub85c\uc81d\ud2b8\ub294 MyApp \ub514\ub809\ud1a0\ub9ac \ub0b4\uc5d0 \uc704\uce58\ud558\uac8c \ub418\uba70, \ud544\uc694\ud55c \ud50c\ub7ab\ud3fc\uc744 \ucd94\uac00\ud558\ub294 \uba85\ub839\uc5b4\ub97c \ud1b5\ud574 Android \ub610\ub294 iOS \ud50c\ub7ab\ud3fc\uc744 \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
cd MyApp\ncordova platform add android\ncordova platform add ios<\/code><\/pre>\n5. \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14 \uc0d8\ud50c \uc560\ud50c\ub9ac\ucf00\uc774\uc158<\/h2>\n
\uc774\uc81c \uac04\ub2e8\ud55c \uc0d8\ud50c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc0dd\uc131\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uae30\ubcf8\uc801\uc778 \uad6c\uc870\uc640 \ucf54\ub4dc\ub97c \uc18c\uac1c\ud569\ub2c8\ub2e4.<\/p>\n
1\ub2e8\uacc4: \uae30\ubcf8 \uad6c\uc870 \uc0dd\uc131<\/h3>\ncordova create SampleApp com.example.sampleapp SampleApp\ncd SampleApp\ncordova platform add android<\/code><\/pre>\n2\ub2e8\uacc4: \uae30\ubcf8 HTML \ud30c\uc77c \uc218\uc815<\/h3>\n
www\/index.html \ud30c\uc77c\uc744 \uc5f4\uace0 \uc544\ub798\uc640 \uac19\uc774 \uae30\ubcf8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 UI\ub97c \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\n
<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=no\">\n <title>SampleApp<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n <h1>\uc548\ub155\ud558\uc138\uc694, \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14!<\/h1>\n <p>\uc774\uac83\uc740 \uc0d8\ud50c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc785\ub2c8\ub2e4.<\/p>\n <button id=\"getDeviceInfo\">\ub514\ubc14\uc774\uc2a4 \uc815\ubcf4 \uac00\uc838\uc624\uae30<\/button>\n <script src=\"cordova.js\"><\/script>\n <script src=\"index.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n3\ub2e8\uacc4: JavaScript \ub85c\uc9c1 \ucd94\uac00<\/h3>\n
www\/js\/index.js \ud30c\uc77c\uc744 \uc218\uc815\ud558\uc5ec \ub514\ubc14\uc774\uc2a4 \uc815\ubcf4\ub97c \uac00\uc838\uc624\ub294 \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n
document.addEventListener('deviceready', function() {\n document.getElementById('getDeviceInfo').addEventListener('click', function() {\n var deviceInfo = '\ub514\ubc14\uc774\uc2a4 \uc774\ub984: ' + device.name + '\\\\n' +\n '\ub514\ubc14\uc774\uc2a4 \ubc84\uc804: ' + device.version + '\\\\n' +\n '\ub514\ubc14\uc774\uc2a4 \ud50c\ub7ab\ud3fc: ' + device.platform;\n alert(deviceInfo);\n });\n});<\/code><\/pre>\n6. \uacb0\ub860<\/h2>\n
\uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub294 \ubaa8\ubc14\uc77c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc758 \ubb38\ud131\uc744 \ub0ae\ucdb0 \uc8fc\ub294 \ud6cc\ub96d\ud55c \uc194\ub8e8\uc158\uc785\ub2c8\ub2e4. \uc6f9 \uac1c\ubc1c\uc790\ub4e4\uc774 \uc790\uc2e0\uc758 \uae30\uc220\uc744 \ud65c\uc6a9\ud558\uc5ec \ubaa8\ubc14\uc77c \ud658\uacbd\uc5d0\uc11c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc27d\uac8c \ub9cc\ub4e4 \uc218 \uc788\uac8c \ud574 \uc90d\ub2c8\ub2e4. \ub2e4\uac01\uc801\uc778 \uae30\ub2a5\uacfc \ud50c\ub7ab\ud3fc \uc9c0\uc6d0 \ub355\ubd84\uc5d0, \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub294 \ud558\uc774\ube0c\ub9ac\ub4dc \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc758 \uc911\uc694\ud55c \ub3c4\uad6c\ub85c \uc790\ub9ac \uc7a1\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\ub2e4\uc74c \ube14\ub85c\uadf8 \uae00\uc5d0\uc11c\ub294 \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub85c \ud50c\ub7ec\uadf8\uc778 \ucd94\uac00, \ubc30\ud3ec \ubc29\ubc95 \ubc0f \uc131\ub2a5 \ucd5c\uc801\ud654 \ub4f1\uc5d0 \ub300\ud574 \ub2e4\ub8f0 \uc608\uc815\uc785\ub2c8\ub2e4. \ub9ce\uc740 \uad00\uc2ec \ubd80\ud0c1\ub4dc\ub9bd\ub2c8\ub2e4!<\/p>\n<\/article>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"