{"id":305,"date":"2017-01-19T20:01:13","date_gmt":"2017-01-19T11:01:13","guid":{"rendered":"http:\/\/www.mukgee.com\/?p=305"},"modified":"2017-01-19T20:01:13","modified_gmt":"2017-01-19T11:01:13","slug":"reactjs-reactjs-%ed%8a%9c%ed%86%a0%eb%a6%ac%ec%96%bc-%eb%94%b0%eb%9d%bc%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"http:\/\/mukgee.com\/?p=305","title":{"rendered":"[ReactJS] ReactJS \ud29c\ud1a0\ub9ac\uc5bc \ub530\ub77c\ud558\uae30 – \uac1c\ubc1c \ud658\uacbd \uad6c\uc131"},"content":{"rendered":"

\uc774\ubc88 \uae00\uc740\u00a0https:\/\/facebook.github.io\/react\/tutorial\/tutorial.html<\/a>\u00a0\uc758 \ud29c\ud1a0\ub9ac\uc5bc\uc744 \ub530\ub77c\ud574\ubcf8 \uac83\uc774\ub2e4.<\/p>\n

Javascript \ub85c Jquery\ub97c \uc8fc\ub85c \uc0ac\uc6a9\ud588\ub358 \uac1c\uc778 \uacbd\ud5d8\uc5d0 \ube44\ucdb0\ubcf4\uba74 \uc774\uac74 \uc2e0\uc138\uacc4\ub2e4.<\/p>\n

\ub9c8\uce58 backend\uc5d0\uc11c \ube4c\ub4dc \ud30c\uc774\ud504\ub77c\uc778\uc744 \uad6c\ucd95\ud558\ub4ef\uc774 front-end \ub610\ud55c \ud30c\uc774\ud504\ub77c\uc778\uc744 \uad6c\ucd95\ud55c\ub2e4. (\ud29c\ud1a0\ub9ac\uc5bc\uc5d0 \ub530\ub974\uba74 \ud30c\uc774\ud504\ub77c\uc778 \uc5c6\uc774\ub3c4 ReactJS\ub97c \uc0ac\uc6a9 \uac00\ub2a5\ud558\ub2e4.)<\/p>\n

“A modern build pipeline”\u00a0<\/strong>\uc740 3\uac00\uc9c0\ub85c \uad6c\uc131\ub418\uc5b4 \uc788\ub2e4.<\/p>\n

    \n
  1. package manager<\/strong> : npm , yam \uac19\uc740 \ud398\ud0a4\uc9c0 \ub9e4\ub2c8\uc800 \ub4e4\uc778\ub370, \uc774\ub4e4\uc740 \uc5d0\ucf54\uc2dc\uc2a4\ud15c\uc758 third-party \ud328\ud0a4\uc9c0\ub4e4\uc744 \uc27d\uac8c \uc124\uce58\/\uc5c5\ub370\uc774\ud2b8 \uac00\ub2a5\ud558\ub3c4\ub85d \ub3c4\uc640\uc900\ub2e4.<\/li>\n
  2. bundler<\/strong> : webpack,\u00a0browserify \ub4f1\uc774 \uc788\ub294\ub370 Javascript\uc758 \ubaa8\ub4c8\ud654\ub97c \ub3c4\uc640\uc8fc\ub294 \ub3c4\uad6c\ub4e4\uc774\ub2e4. \ubaa8\ub4c8\ub4e4\uc744 \uc791\uc131\ud558\uc5ec webpack\uc73c\ub85c \ucef4\ud30c\uc77c \ud558\uba74 bundle.js \ub97c \uc0dd\uc131\ud560 \uc218 \uc788\ub294\ub370 \uc774\ub97c \ud1b5\ud574 \ube0c\ub77c\uc6b0\uc838\uc5d0\uc11c \uc2e4\ud589 \ud560\uc218 \uc788\uac8c \ub418\ub294 \uad6c\uc870\uc774\ub2e4. \uc790\uc138\ud55c \ub0b4\uc6a9\uc740\u00a0http:\/\/d2.naver.com\/helloworld\/0239818<\/a><\/li>\n
  3. compiler<\/strong>:\u00a0 Babel \ub4f1\uc774 \uc788\ub294\ub370 ES6 \uac19\uc740 \ubaa8\ub358 javascript \ubb38\ubc95\ub4e4\ub85c \uc791\uc131\ub41c javascript \ud30c\uc77c\uc744 \ube0c\ub77c\uc6b0\uc838\uac00 \uc778\uc2dd \ud560 \uc218 \uc788\ub294 \ud30c\uc77c\ub85c \ub9cc\ub4e4\uc5b4 \uc8fc\ub294 \ub3c4\uad6c\ub4e4\uc774\ub2e4.<\/li>\n<\/ol>\n

    http:\/\/www.looah.com\/article\/view\/2054<\/a>\u00a0(\uc0ac\ub791\ud574\uc694 javascript)<\/del><\/p>\n

    \uc704\uc758 3\uac00\uc9c0\ub97c \uac16\ucd98 \ud6c4 ReactJS\ub97c \uc124\uce58\ud558\uace0 \uc0ac\uc6a9\ud574\ubcf4\uc790<\/p>\n

    npm \uc124\uce58 \ud6c4 webpack\uc740 \uc5ec\uae30\uc11c<\/a>\u00a0, Babel\uc740 \uc5ec\uae30\uc11c<\/a>. npm\ub9cc \uc124\uce58 \ub41c\ub2e4\uba74 \ub2e4\ub978 \ub3c4\uad6c\ub4e4 \uc124\uce58\ub294 \uc5b4\ub835\uc9c0 \uc54a\uc74c(npm\uc740 \uc138\uacc4\uc5d0\uc11c \uac00\uc7a5 \ub9ce\uc740 \ubaa8\ub4c8\uc744 \uac00\uc9c4 \uc800\uc7a5\uc18c<\/a>)<\/p>\n

    webpack\uc744 \ubca0\uc774\uc2a4\ub85c babel \ubaa8\ub4c8\uc744 \uc124\uce58\ud574\uc11c \uac1c\ubc1c \ud658\uacbd\uc744 \uad6c\uc131\ud558\uc600\ub2e4.<\/p>\n

    webpack \uc5d0\uc11c babel\uc744 \uc774\uc6a9\ud574\uc11c \ube4c\ub4dc \ud560 \uacbd\uc6b0 \uc544\ub798 \ub450\uac00\uc9c0\ub294 npm\uc73c\ub85c \uc124\uce58<\/p>\n

    npm install –save-dev babel-preset-es2015
    \nnpm install –save-dev babel-preset-react<\/p>\n

    \ud504\ub85c\uc81d\ud2b8 \ud30c\uc77c \uad6c\uc870\ub294 \uc77c\ub2e8 \uc774\ub807\uac8c \uac00\ubcf4\uc790 ( \ucc38\uace0 :\u00a0https:\/\/velopert.com\/814<\/a> )<\/p>\n

     <\/p>\n

    \n

    .<\/p>\n

    \u251c\u2500\u2500 package<\/span>.<\/span>json<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><\/div>\n
    \u251c\u2500\u2500 dist\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0<\/span># \uc11c\ubc84 \uc6b4\uc601 \ud30c\uc77c<\/span><\/div>\n
    \u2502\u00a0\u00a0 \u2514\u2500\u2500 index<\/span>.<\/span>html<\/span>\u00a0\u00a0\u00a0\u00a0<\/span># \uba54\uc778 \ud398\uc774\uc9c0<\/span><\/div>\n
    \u251c\u2500\u2500 src<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span># React.js \ud504\ub85c\uc81d\ud2b8 \ub8e8\ud2b8<\/span><\/div>\n
    \u2502\u00a0\u00a0 \u251c\u2500\u2500 components<\/span>\u00a0\u00a0\u00a0\u00a0<\/span># \ucef4\ud3ec\ub10c\ud2b8 \ud3f4\ub354<\/span><\/div>\n
    \u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2514\u2500\u2500 App<\/span>.<\/span>js<\/span>\u00a0\u00a0\u00a0\u00a0<\/span># App \ucef4\ud3ec\ub10c\ud2b8<\/span><\/div>\n
    \u2502\u00a0\u00a0 \u2514\u2500\u2500 entry.<\/span>js<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span># Webpack Entry point<\/span><\/div>\n
    \u2514\u2500\u2500 webpack<\/span>.<\/span>config<\/span>.<\/span>js<\/span> # Webpack \uc124\uc815\ud30c\uc77c<\/span><\/div>\n<\/div>\n
    <\/div>\n
    <\/div>\n
    <\/div>\n
    \uc774\ub807\uac8c \ud658\uacbd\uc774 \uad6c\uc131\ub418\uba74\uc774\uc81c \ub4dc\ub514\uc5b4 ReactJS \ud29c\ud1a0\ub9ac\uc5bc\uc744 \ub530\ub77c\ud574\ubcfc \uc218 \uc788\ub2e4.<\/div>\n
    <\/div>\n
    \uac1c\ubc1c \ud658\uacbd \uad6c\uc131\uc774 \uae38\uc5b4\uc9c0\uba74\uc11c \ud29c\ud1a0\ub9ac\uc5bc \ub0b4\uc6a9\uc740 \ub2e4\uc74c \uae00\uc5d0\uc11c \uc815\ub9ac\ud558\uaca0\ub2e4.<\/div>\n
    <\/div>\n
    <\/div>\n
    p.s ReactJS\ub294\uc758 \ud074\ub798\uc2a4\ub294 \uccab\uae00\uc790\uac00 \ub300\ubb38\uc790\uc778 \uce90\uba40 \ub124\uc774\ubc0d \ub8f0\uc744 \ub530\ub978\ub2e4\ub294\uac83\uc744 \uae30\uc5b5\ud558\uc790<\/div>\n
    <\/div>\n
    <\/div>\n
    \uc2e4\uc81c \ud29c\ud1a0\ub9ac\uc5bc\uc740 \uc5ec\uae30\uc11c<\/span><\/a><\/div>\n
    <\/div>\n","protected":false},"excerpt":{"rendered":"

    \uc774\ubc88 \uae00\uc740\u00a0https:\/\/facebook.github.io\/react\/tutorial\/tutorial.html\u00a0\uc758 \ud29c\ud1a0\ub9ac\uc5bc\uc744 \ub530\ub77c\ud574\ubcf8 \uac83\uc774\ub2e4. Javascript \ub85c Jquery\ub97c \uc8fc\ub85c \uc0ac\uc6a9\ud588\ub358 \uac1c\uc778 \uacbd\ud5d8\uc5d0 \ube44\ucdb0\ubcf4\uba74 \uc774\uac74 \uc2e0\uc138\uacc4\ub2e4. \ub9c8\uce58 backend\uc5d0\uc11c \ube4c\ub4dc \ud30c\uc774\ud504\ub77c\uc778\uc744 \uad6c\ucd95\ud558\ub4ef\uc774 front-end \ub610\ud55c \ud30c\uc774\ud504\ub77c\uc778\uc744 \uad6c\ucd95\ud55c\ub2e4. (\ud29c\ud1a0\ub9ac\uc5bc\uc5d0…<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":""},"categories":[3],"tags":[20,30,35],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/mukgee.com\/index.php?rest_route=\/wp\/v2\/posts\/305"}],"collection":[{"href":"http:\/\/mukgee.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/mukgee.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/mukgee.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/mukgee.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=305"}],"version-history":[{"count":0,"href":"http:\/\/mukgee.com\/index.php?rest_route=\/wp\/v2\/posts\/305\/revisions"}],"wp:attachment":[{"href":"http:\/\/mukgee.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/mukgee.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=305"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/mukgee.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}