{"id":43408,"date":"2024-11-27T03:22:56","date_gmt":"2024-11-27T03:22:56","guid":{"rendered":"https:\/\/atmokpo.com\/w\/?p=43408"},"modified":"2024-11-27T03:22:56","modified_gmt":"2024-11-27T03:22:56","slug":"%ec%95%84%ed%8c%8c%ec%b9%98-%ec%bd%94%eb%a5%b4%eb%8f%84%eb%b0%94-%ec%95%84%ed%8c%8c%ec%b9%98-%ec%bd%94%eb%a5%b4%eb%8f%84%eb%b0%94%ec%9d%98-%eb%b0%9c%ec%a0%84-%eb%b0%a9%ed%96%a5-%eb%b0%8f-%eb%8c%80","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/43408\/","title":{"rendered":"[\uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14] \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\uc758 \ubc1c\uc804 \ubc29\ud5a5 \ubc0f \ub300\uc548 \uae30\uc220"},"content":{"rendered":"

<\/p>\n

\n

1. \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub780 \ubb34\uc5c7\uc778\uac00?<\/h2>\n

\n \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14(Apache Cordova)\ub294 HTML, CSS, JavaScript\ub97c \uc0ac\uc6a9\ud558\uc5ec \ubaa8\ubc14\uc77c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc8fc\ub294 \ud50c\ub7ab\ud3fc\uc785\ub2c8\ub2e4.
\n \uae30\ubcf8\uc801\uc73c\ub85c \uc6f9 \uae30\uc220\uc744 \ud65c\uc6a9\ud558\uc5ec \ub2e4\uc591\ud55c \ubaa8\ubc14\uc77c \uc6b4\uc601 \uccb4\uc81c(Android, iOS \ub4f1)\uc5d0\uc11c \uc2e4\ud589\ub420 \uc218 \uc788\ub294 \ub124\uc774\ud2f0\ube0c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc27d\uac8c \ub9cc\ub4e4 \uc218 \uc788\ub3c4\ub85d \ud574\uc90d\ub2c8\ub2e4.\n <\/p>\n

\n \ucf54\ub974\ub3c4\ubc14\ub294 \uace0\uc720\ud55c \ud0dc\uadf8\uc640 API\ub97c \uc81c\uacf5\ud558\uc5ec \uc6f9 \uac1c\ubc1c\uc790\uac00 \ubaa8\ubc14\uc77c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc27d\uac8c\u5f00\u53d1\ud560 \uc218 \uc788\uac8c \ud574\uc90d\ub2c8\ub2e4.
\n \uc608\ub97c \ub4e4\uc5b4, \uce74\uba54\ub77c, \uc704\uce58\uc815\ubcf4, \ud30c\uc77c \uc2dc\uc2a4\ud15c \ub4f1 \ubaa8\ubc14\uc77c \uc7a5\uce58\uc758 \ub124\uc774\ud2f0\ube0c \uae30\ub2a5\uc744 \ud65c\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n

\n\n    \/\/ \uce74\uba54\ub77c API\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0ac\uc9c4\uc744 \ucc0d\ub294 \uc608\uc81c\n    navigator.camera.getPicture(onSuccess, onFail, { \n        quality: 50,\n        destinationType: Camera.DestinationType.DATA_URL \n    });\n\n    function onSuccess(imageData) {\n        var img = document.getElementById('myImage');\n        img.src = \"data:image\/jpeg;base64,\" + imageData;\n    }\n\n    function onFail(message) {\n        alert('Failed because: ' + message);\n    }\n<\/code>\n        <\/pre>\n<\/section>\n
\n
2. \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\uc758 \ubc1c\uc804 \ubc29\ud5a5<\/h2>\n
\n            \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub294 \uc9c0\uc18d\uc801\uc73c\ub85c \ubc1c\uc804\ud558\uace0 \uc788\uc73c\uba70, \uc55e\uc73c\ub85c\ub3c4 \uc5ec\ub7ec \ubc29\ud5a5\uc73c\ub85c \ub098\uc544\uac08 \uac83\uc73c\ub85c \uc608\uc0c1\ub429\ub2c8\ub2e4.
\n            \ubaa8\ubc14\uc77c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ud544\uc694\uc131\uc774 \uc99d\uac00\ud568\uc5d0 \ub530\ub77c \uc6f9 \uae30\uc220\uc758 \ud65c\uc6a9\uc774 \uc810\uc810 \ub354 \uc911\uc694\ud574\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4.
\n            \ub530\ub77c\uc11c \ucf54\ub974\ub3c4\ubc14\uc758 \ubc1c\uc804 \ubc29\ud5a5\uc740 \ubaa8\ubc14\uc77c \ucd5c\uc801\ud654, \uc131\ub2a5 \uac1c\uc120, \uadf8\ub9ac\uace0 \ub2e4\uc591\ud55c \ud50c\ub7ab\ud3fc \uc9c0\uc6d0\uc758 \ud655\ub300\uac00 \ub420 \uac83\uc785\ub2c8\ub2e4.\n        <\/p>\n
2.1. \uc131\ub2a5 \uac1c\uc120<\/h3>\n
\n            \ubaa8\ubc14\uc77c \uae30\uae30\ub294 \uc131\ub2a5\uc774 \uc81c\ud55c\uc801\uc774\uae30 \ub54c\ubb38\uc5d0, \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\uc758 \uc131\ub2a5 \uac1c\uc120\uc740 \ub9e4\uc6b0 \uc911\uc694\ud569\ub2c8\ub2e4.
\n            \uc774\ub97c \uc704\ud574 \ucf54\ub974\ub3c4\ubc14 \ud300\uc740 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ud06c\uae30\ub97c \uc904\uc774\uace0 \ub85c\ub529 \uc2dc\uac04\uc744 \ucd5c\uc18c\ud654\ud558\uae30 \uc704\ud55c \uc5ec\ub7ec \uac00\uc9c0 \ucd5c\uc801\ud654 \uc791\uc5c5\uc744 \uc9c4\ud589\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.
\n            \uc608\ub97c \ub4e4\uc5b4, WebView<\/code>\uc758 \ucd5c\uc801\ud654\ub97c \ud1b5\ud574 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc2e4\ud589 \uc18d\ub3c4\ub97c \ub192\uc774\uace0,
\n            \ub9ac\uc18c\uc2a4 \uc694\uccad \uc218\ub97c \uc904\uc774\ub294 \ub4f1\uc758 \uc791\uc5c5\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.\n        <\/p>\n
2.2. \ucd5c\uc2e0 \uc6f9 \ud45c\uc900 \ubc0f \uae30\uc220 \uc9c0\uc6d0<\/h3>\n
\n            \uc6f9 \uae30\uc220\uc740 \uae09\uc18d\ub3c4\ub85c \ubc1c\uc804\ud558\uace0 \uc788\uc73c\uba70, \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub294 \ucd5c\uc2e0 \uc6f9 \ud45c\uc900\uacfc \uae30\uc220\uc744 \uc9c0\uc18d\uc801\uc73c\ub85c \uc9c0\uc6d0\ud574\uc57c \ud569\ub2c8\ub2e4.
\n            \uc608\ub97c \ub4e4\uc5b4, Progressive Web Apps(PWAs)\uc640 \uac19\uc740 \uc0c8\ub85c\uc6b4 \ud615\ud0dc\uc758 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc9c0\uc6d0\uc744 \ud1b5\ud574,
\n            \uc6f9\uc5d0\uc11c \ub124\uc774\ud2f0\ube0c \uc571\uacfc \uc720\uc0ac\ud55c \uacbd\ud5d8\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\ub294 \ubc29\uc548\uc744 \ubaa8\uc0c9\ud574\uc57c \ud569\ub2c8\ub2e4.\n        <\/p>\n
2.3. \ucee4\ubba4\ub2c8\ud2f0 \ubc0f \uc0dd\ud0dc\uacc4 \ud655\ub300<\/h3>\n
\n            \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\uc758 \uc131\uacf5\uc740 \uac1c\ubc1c\uc790 \ucee4\ubba4\ub2c8\ud2f0\uc640 \uc0dd\ud0dc\uacc4\uc5d0 \ud06c\uac8c \uc758\uc874\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.
\n            \ub530\ub77c\uc11c \ucf54\ub974\ub3c4\ubc14\ub294 \ub354 \ub9ce\uc740 \ud50c\ub7ec\uadf8\uc778\uacfc \ub3c4\uad6c\ub97c \uc81c\uacf5\ud558\uace0, \uc0ac\uc6a9\uc790\uc640 \uac1c\ubc1c\uc790 \uac04\uc758 \ud53c\ub4dc\ubc31\uc744 \ud65c\uc131\ud654\ud558\uc5ec
\n            \uc0dd\ud0dc\uacc4\ub97c \ub113\ud600\uac00\ub294 \uac83\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.\n        <\/p>\n<\/section>\n
\n
3. \ub300\uc548 \uae30\uc220<\/h2>\n
\n            \uc544\ud30c\uce58 \ucf54\ub974\ub3c4\ubc14\ub294 \ub9e4\uc6b0 \uc720\uc6a9\ud55c \ub3c4\uad6c\uc774\uc9c0\ub9cc, \uc2dc\uc7a5\uc5d0\ub294 \ub610\ud55c \uc720\ub9dd\ud55c \ub300\uc548 \uae30\uc220\ub4e4\uc774 \uc874\uc7ac\ud569\ub2c8\ub2e4.
\n            \uc774\ub7ec\ud55c \ub300\uc548 \uae30\uc220\ub4e4\uc740 \uac01\uc790\uc758 \uc7a5\uc810\uacfc \ub2e8\uc810\uc744 \uac00\uc9c0\uace0 \uc788\uc73c\uba70, \uac1c\ubc1c\uc790\ub4e4\uc740 \ud544\uc694\uc5d0 \ub530\ub77c \uc801\ud569\ud55c \uae30\uc220\uc744 \uc120\ud0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n        <\/p>\n
3.1. \ub9ac\uc561\ud2b8 \ub124\uc774\ud2f0\ube0c (React Native)<\/h3>\n
\n            \ub9ac\uc561\ud2b8 \ub124\uc774\ud2f0\ube0c\ub294 \ud398\uc774\uc2a4\ubd81\uc5d0\uc11c \uac1c\ubc1c\ud55c \ubaa8\ubc14\uc77c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ud504\ub808\uc784\uc6cc\ud06c\ub85c,
\n            \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc640 \ub9ac\uc561\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub124\uc774\ud2f0\ube0c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc791\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n            \ub9ac\uc561\ud2b8 \ub124\uc774\ud2f0\ube0c\ub294 \ub124\uc774\ud2f0\ube0c \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0ac\uc6a9\ud558\ubbc0\ub85c \uc131\ub2a5\uc774 \ub6f0\uc5b4\ub098\uba70, \ube60\ub978 \uc18d\ub3c4\ub85c \uac1c\ubc1c\ud560 \uc218 \uc788\ub294 \uc7a5\uc810\uc774 \uc788\uc2b5\ub2c8\ub2e4.\n        <\/p>\n
\n\n    import React from 'react';\n    import { Button, View } from 'react-native';\n\n    const App = () => (\n        \n