{"id":25974,"date":"2024-10-27T06:48:49","date_gmt":"2024-10-27T06:48:49","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=25974"},"modified":"2024-11-26T07:48:08","modified_gmt":"2024-11-26T07:48:08","slug":"%eb%a6%ac%ec%95%a1%ed%8a%b8-%ea%b0%95%ec%a2%8c-%ec%9d%bc%ea%b8%b0%ec%9e%a5-%ec%95%b1-%ec%98%88%ec%a0%9c-%eb%a6%ac%ec%95%a1%ed%8a%b8-%eb%9d%bc%ec%9a%b0%ed%84%b0%eb%a1%9c-%ed%8e%98%ec%9d%b4%ec%a7%80","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/25974\/","title":{"rendered":"\ub9ac\uc561\ud2b8 \uac15\uc88c: \uc77c\uae30\uc7a5 \uc571 \uc608\uc81c, \ub9ac\uc561\ud2b8 \ub77c\uc6b0\ud130\ub85c \ud398\uc774\uc9c0 \ub77c\uc6b0\ud305\ud558\uae30"},"content":{"rendered":"

<\/p>\n

\uc774\ubc88 \uac15\uc88c\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc5ec \uac04\ub2e8\ud55c \uc77c\uae30\uc7a5 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \ub2e8\uacc4\ubcc4\ub85c \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4. \uc774 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 \uc0ac\uc6a9\uc790\uac00 \uc77c\uae30\ub97c \uc791\uc131\ud558\uace0, \uc218\uc815\ud558\uba70, \uc0ad\uc81c\ud560 \uc218 \uc788\ub294 \uae30\ub2a5\uc744 \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ub610\ud55c, \ub9ac\uc561\ud2b8 \ub77c\uc6b0\ud130\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub2e4\uc591\ud55c \ud398\uc774\uc9c0\ub85c\uc758 \ub77c\uc6b0\ud305\uc744 \uad6c\ud604\ud558\ub294 \ubc29\ubc95\ub3c4 \ub2e4\ub8f0 \uac83\uc785\ub2c8\ub2e4. \ubcf8 \uac15\uc88c\ub294 \ucd08\ubcf4\uc790\ub3c4 \uc27d\uac8c \ub530\ub77c \ud560 \uc218 \uc788\ub3c4\ub85d \uc790\uc138\ud788 \uc124\uba85\ud560 \uc608\uc815\uc785\ub2c8\ub2e4.<\/p>\n

\ubaa9\ucc28<\/h2>\n
    \n
  1. 1. \ud504\ub85c\uc81d\ud2b8 \uc18c\uac1c<\/a><\/li>\n
  2. 2. \uac1c\ubc1c \ud658\uacbd \uc124\uc815<\/a><\/li>\n
  3. 3. \ub9ac\uc561\ud2b8 \uc571 \uc0dd\uc131<\/a><\/li>\n
  4. 4. \ub9ac\uc561\ud2b8 \ub77c\uc6b0\ud130 \ucd94\uac00\ud558\uae30<\/a><\/li>\n
  5. 5. \ucef4\ud3ec\ub10c\ud2b8 \uad6c\uc131\ud558\uae30<\/a><\/li>\n
  6. 6. \uc0c1\ud0dc \uad00\ub9ac<\/a><\/li>\n
  7. 7. \ud14c\uc2a4\ud2b8 \ubc0f \ub514\ubc84\uae45<\/a><\/li>\n
  8. 8. \ubc30\ud3ec\ud558\uae30<\/a><\/li>\n
  9. 9. \uacb0\ub860<\/a><\/li>\n<\/ol>\n

    1. \ud504\ub85c\uc81d\ud2b8 \uc18c\uac1c<\/h2>\n

    \uc77c\uae30\uc7a5 \uc571\uc740 \uc0ac\uc6a9\uc790\ub4e4\uc774 \uac1c\uc778\uc801\uc778 \uc77c\uae30\ub97c \uc791\uc131\ud558\ub294 \uacf5\uac04\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\ub294 \uc0c8\ub85c\uc6b4 \uc77c\uae30\ub97c \uc791\uc131\ud558\uace0, \uc774\ubbf8 \uc791\uc131\ud55c \uc77c\uae30\ub97c \ubaa9\ub85d\uc73c\ub85c \ubcf4\uba70, \ud544\uc694\ud560 \uacbd\uc6b0 \uc218\uc815\ud558\uac70\ub098 \uc0ad\uc81c\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uacfc\uc815\uc5d0\uc11c \uc6b0\ub9ac\ub294 \uae30\ubcf8\uc801\uc778 \ub9ac\uc561\ud2b8\uc758 \uac1c\ub150\uacfc \ub9ac\uc561\ud2b8 \ub77c\uc6b0\ud130\uc758 \uc0ac\uc6a9\ubc95\uc744 \ubc30\uc6b0\uac8c \ub429\ub2c8\ub2e4.<\/p>\n

    2. \uac1c\ubc1c \ud658\uacbd \uc124\uc815<\/h2>\n

    \ub9ac\uc561\ud2b8\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c\ub294 Node.js\uc640 npm(Node Package Manager)\uc744 \uba3c\uc800 \uc124\uce58\ud574\uc57c \ud569\ub2c8\ub2e4. Node.js\uc640 npm\uc744 \uc124\uce58\ud558\uba74 \ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc27d\uac8c \uc0dd\uc131\ud558\uace0 \uad00\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uacf5\uc2dd \uc6f9\uc0ac\uc774\ud2b8\uc5d0\uc11c \ub2e4\uc6b4\ub85c\ub4dc \ud6c4 \uc124\uce58\ud574 \uc8fc\uc138\uc694.<\/p>\n

    Node.js \uc124\uce58<\/h3>\n

    Node.js \uacf5\uc2dd \uc6f9\uc0ac\uc774\ud2b8<\/a>\uc5d0\uc11c \uc6b4\uc601\uccb4\uc81c\uc5d0 \ub9de\ub294 \uc124\uce58 \ud30c\uc77c\uc744 \ub2e4\uc6b4\ub85c\ub4dc\ud558\uace0 \uc124\uce58\ud569\ub2c8\ub2e4.<\/p>\n

    \ud328\ud0a4\uc9c0 \ub9e4\ub2c8\uc800 \uc5c5\ub370\uc774\ud2b8<\/h3>\n

    \uc124\uce58 \ud6c4, npm\uc774 \ucd5c\uc2e0 \ubc84\uc804\uc778\uc9c0 \ud655\uc778\ud558\uace0 \ud544\uc694\ud558\ub2e4\uba74 \uc5c5\ub370\uc774\ud2b8\ud569\ub2c8\ub2e4. \ucf58\uc194\uc5d0\uc11c \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud569\ub2c8\ub2e4:<\/p>\n

    npm install -g npm@latest<\/code><\/pre>\n
    3. \ub9ac\uc561\ud2b8 \uc571 \uc0dd\uc131<\/h2>\n
    \uc774\uc81c create-react-app\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc0c8\ub85c\uc6b4 \ub9ac\uc561\ud2b8 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \ucf58\uc194\uc5d0\uc11c \uc544\ub798 \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud558\uc138\uc694:<\/p>\n
    npx create-react-app my-diary-app<\/code><\/pre>\n
    \ud504\ub85c\uc81d\ud2b8 \ud3f4\ub354\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4:<\/p>\n
    cd my-diary-app<\/code><\/pre>\n
    \uadf8 \ub2e4\uc74c, \uac1c\ubc1c \uc11c\ubc84\ub97c \uc2dc\uc791\ud569\ub2c8\ub2e4:<\/p>\n
    npm start<\/code><\/pre>\n
    \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c http:\/\/localhost:3000<\/strong>\uc73c\ub85c \uc774\ub3d9\ud558\uc5ec \uae30\ubcf8 \ub9ac\uc561\ud2b8 \ud398\uc774\uc9c0\uac00 \ud45c\uc2dc\ub418\ub294\uc9c0 \ud655\uc778\ud569\ub2c8\ub2e4.<\/p>\n
    4. \ub9ac\uc561\ud2b8 \ub77c\uc6b0\ud130 \ucd94\uac00\ud558\uae30<\/h2>\n
    \uc774\uc81c \ub9ac\uc561\ud2b8 \ub77c\uc6b0\ud130\ub97c \uc124\uce58\ud558\uc5ec \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 \ub77c\uc6b0\ud305 \uae30\ub2a5\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4. \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud558\uc5ec \ub9ac\uc561\ud2b8 \ub77c\uc6b0\ud130\ub97c \uc124\uce58\ud569\ub2c8\ub2e4:<\/p>\n
    npm install react-router-dom<\/code><\/pre>\n
    app\/src\/index.js \ud30c\uc77c\uc744 \uc5f4\uc5b4 \ub77c\uc6b0\ud130\ub97c \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n
    import { BrowserRouter as Router } from 'react-router-dom';<\/code><\/pre>\n
    \uc571\uc744 Router\ub85c \uac10\uc2f8\uc90d\ub2c8\ub2e4:<\/p>\n
    \n    ReactDOM.render(\n      \n        <\/app>\n      <\/router>,\n      document.getElementById('root')\n    );<\/code><\/pre>\n
    5. \ucef4\ud3ec\ub10c\ud2b8 \uad6c\uc131\ud558\uae30<\/h2>\n
    \uc774\uc81c \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0dd\uc131\ud558\uc5ec \ub77c\uc6b0\ud305\ud560 \ud398\uc774\uc9c0\ub97c \uad6c\uc131\ud574 \ubd05\uc2dc\ub2e4. \uc77c\uae30 \ubaa9\ub85d \ud398\uc774\uc9c0\uc640 \uc77c\uae30 \uc791\uc131 \ud398\uc774\uc9c0\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n
    \uc77c\uae30 \ubaa9\ub85d \ucef4\ud3ec\ub10c\ud2b8<\/h3>\n
    app\/src\/components\/DairyList.js \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc544\ub798 \ucf54\ub4dc\ub97c \uc785\ub825\ud569\ub2c8\ub2e4:<\/p>\n
    \n    import React from 'react';\n\n    const DiaryList = () => {\n        return (\n            
    \n                
    \uc77c\uae30 \ubaa9\ub85d<\/h2>\n                
      \n                    
    • \uc81c\ubaa9: \uccab\uc9f8 \ub0a0, \ub0b4\uc6a9: \uc624\ub298\uc740 \uae30\ubd84\uc774 \uc88b\uc558\ub2e4.<\/li>\n                    
    • \uc81c\ubaa9: \ub458\uc9f8 \ub0a0, \ub0b4\uc6a9: \ub0a0\uc528\uac00 \uc88b\uc558\ub2e4.<\/li>\n                    {\/* \ub354 \ub9ce\uc740 \uc77c\uae30 \ucd94\uac00 \uac00\ub2a5 *\/}\n                <\/ul>\n            <\/div>\n        );\n    };\n\n    export default DiaryList;<\/code><\/pre>\n
      \uc77c\uae30 \uc791\uc131 \ucef4\ud3ec\ub10c\ud2b8<\/h3>\n
      app\/src\/components\/CreateDiary.js \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc544\ub798 \ucf54\ub4dc\ub97c \uc785\ub825\ud569\ub2c8\ub2e4:<\/p>\n
      \n    import React from 'react';\n\n    const CreateDiary = () => {\n        return (\n            
      \n                
      \uc77c\uae30 \uc791\uc131<\/h2>\n                
      \n