{"id":25902,"date":"2024-10-27T06:48:25","date_gmt":"2024-10-27T06:48:25","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=25902"},"modified":"2024-11-26T07:51:37","modified_gmt":"2024-11-26T07:51:37","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-%ed%94%84%eb%a1%9c%ec%a0%9d%ed%8a%b8-%eb%b0%b0%ed%8f%ac-%ec%a4%80%eb%b9%84%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/25902\/","title":{"rendered":"\ub9ac\uc561\ud2b8 \uac15\uc88c: [\uc77c\uae30\uc7a5\uc571] \ud504\ub85c\uc81d\ud2b8 \ubc30\ud3ec \uc900\ube44\ud558\uae30"},"content":{"rendered":"

<\/p>\n

\uc548\ub155\ud558\uc138\uc694, \uc5ec\ub7ec\ubd84! \uc774\ubc88 \uac15\uc88c\uc5d0\uc11c\ub294 \uc5ec\ub7ec\ubd84\uacfc \ud568\uaed8 \ub9ac\uc561\ud2b8\ub85c \ub9cc\ub4e0 \uc77c\uae30\uc7a5 \uc571\uc744 \ubc30\ud3ec\ud558\uae30 \uc704\ud55c \uc900\ube44 \uacfc\uc815\uc744 \uc790\uc138\ud788 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \ub9ac\uc561\ud2b8\ub85c \uac1c\ubc1c\ud55c \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ubc30\ud3ec\ub294 \ub2e8\uc21c\ud788 \ud30c\uc77c\uc744 \uc11c\ubc84\uc5d0 \uc62c\ub9ac\ub294 \uac83 \uc774\uc0c1\uc73c\ub85c \uc5ec\ub7ec \ub2e8\uacc4\ub97c \ud544\uc694\ub85c \ud569\ub2c8\ub2e4. \uc774\ubc88 \uae00\uc5d0\uc11c\ub294 \ubc30\ud3ec \uc804 \uc810\uac80 \ubc0f \ucd5c\uc801\ud654, \uae30\ubcf8\uc801\uc778 \ubc30\ud3ec \ubc29\ubc95, \ubc30\ud3ec \ud6c4\uc758 \uad00\ub9ac \ubc0f \uc720\uc9c0\ubcf4\uc218\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

1. \ud504\ub85c\uc81d\ud2b8 \ucd5c\uc801\ud654<\/h2>\n

\ubc30\ud3ec\ud558\uae30 \uc804\uc5d0, \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ucd5c\uc801\ud654\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4. \ucd5c\uc801\ud654\ub294 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uac1c\uc120\ud558\uace0, \ub85c\ub4dc \uc2dc\uac04\uc744 \uc904\uc774\uba70, \uc11c\ubc84 \ube44\uc6a9\uc744 \uc808\uac10\ud558\ub294 \ub370 \ub3c4\uc6c0\uc774 \ub429\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \ucd5c\uc801\ud654 \uacfc\uc815\uc5d0\uc11c \uace0\ub824\ud574\uc57c \ud560 \uba87 \uac00\uc9c0 \uc0ac\ud56d\uc785\ub2c8\ub2e4.<\/p>\n

1.1. \ucf54\ub4dc \ubd84\ud560<\/h3>\n

\ub9ac\uc561\ud2b8\uc5d0\uc11c\ub294 \ucf54\ub4dc \ubd84\ud560\uc744 \ud1b5\ud574 \ucd08\uae30 \ub85c\ub4dc \uc2dc\uac04\uc744 \uc904\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ucf54\ub4dc \ubd84\ud560\uc740 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uac01 \ubd80\ubd84\uc744 \ubcc4\ub3c4\uc758 \uccad\ud06c\ub85c \ub098\ub204\uc5b4 \ud544\uc694\ud560 \ub54c\ub9cc \ub85c\ub4dc\ud558\ub294 \ubc29\uc2dd\uc785\ub2c8\ub2e4. \uc774\ub294 \uc0ac\uc6a9\uc790\uac00 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc0ac\uc6a9\ud560 \ub54c \ub354 \ube60\ub978 \ubc18\uc751\uc131\uc744 \uc81c\uacf5\ud558\uac8c \ub429\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574\uc11c\ub294 React.lazy<\/code>\uc640 Suspense<\/code>\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

\n    \/\/ \uc608\uc2dc \ucf54\ub4dc\n    const LazyComponent = React.lazy(() => import('.\/LazyComponent'));\n\n    function App() {\n        return (\n            Loading...}>\n                <\/lazycomponent>\n            <\/react.suspense>\n        );\n    }\n    <\/code><\/pre>\n
1.2. \ud504\ub85c\ub355\uc158 \ube4c\ub4dc \uc0dd\uc131<\/h3>\n
\uac1c\ubc1c \ubaa8\ub4dc\uc5d0\uc11c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc2e4\ud589\ud558\uba74 \ub2e4\uc591\ud55c \uac1c\ubc1c \ub3c4\uad6c\uac00 \ud65c\uc131\ud654\ub418\uae30 \ub54c\ubb38\uc5d0 \uc131\ub2a5\uc774 \uc800\ud558\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub530\ub77c\uc11c \ud504\ub85c\ub355\uc158 \ubaa8\ub4dc\uc5d0\uc11c \ube4c\ub4dc\ub97c \uc0dd\uc131\ud574\uc57c \ud569\ub2c8\ub2e4. \ub9ac\uc561\ud2b8 \uc571\uc5d0\uc11c \ud504\ub85c\ub355\uc158 \ube4c\ub4dc\ub97c \uc0dd\uc131\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n
npm run build<\/code><\/pre>\n
\uc774 \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud558\uba74 build<\/code> \ud3f4\ub354\uc5d0 \ucd5c\uc801\ud654\ub41c \ud30c\uc77c\ub4e4\uc774 \uc0dd\uc131\ub429\ub2c8\ub2e4.<\/p>\n
2. \ubc30\ud3ec \ubc29\ubc95 \uc18c\uac1c<\/h2>\n
\uc774\uc81c \ubc30\ud3ec \ubc29\ubc95\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \ub2e4\uc591\ud55c \ubc30\ud3ec \ud50c\ub7ab\ud3fc\uc774 \uc788\uc9c0\ub9cc, \uc5ec\uae30\uc11c\ub294 \ub300\ud45c\uc801\uc778 \ub450 \uac00\uc9c0 \ubc29\ubc95\uc778 GitHub Pages\uc640 Netlify\ub97c \uc18c\uac1c\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
2.1. GitHub Pages<\/h3>\n
GitHub Pages\ub294 \uc815\uc801 \uc6f9\uc0ac\uc774\ud2b8\ub97c \ud638\uc2a4\ud305\ud560 \uc218 \uc788\ub294 \ubb34\ub8cc \uc11c\ube44\uc2a4\uc785\ub2c8\ub2e4. \ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 GitHub Pages\uc5d0 \ubc30\ud3ec\ud558\ub294 \uacfc\uc815\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
    \n
  1. GitHub \ub9ac\ud3ec\uc9c0\ud1a0\ub9ac \uc0dd\uc131:<\/strong> GitHub\uc5d0\uc11c \uc0c8\ub85c\uc6b4 \ub9ac\ud3ec\uc9c0\ud1a0\ub9ac\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/li>\n
  2. npm gh-pages \uc124\uce58:<\/strong> GitHub Pages\uc5d0 \ubc30\ud3ec\ud558\uae30 \uc704\ud574 gh-pages<\/code> \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud569\ub2c8\ub2e4.<\/li>\n
    npm install --save gh-pages<\/code><\/pre>\n
  3. package.json \uc218\uc815:<\/strong> package.json<\/code> \ud30c\uc77c\uc5d0 homepage<\/code> \uc18d\uc131\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4.<\/li>\n
    \n        {\n            \"homepage\": \"https:\/\/username.github.io\/repository-name\"\n        }\n        <\/code><\/pre>\n
  4. \ubc30\ud3ec \uc2a4\ud06c\ub9bd\ud2b8 \ucd94\uac00:<\/strong> package.json<\/code>\uc758 scripts<\/code> \uc139\uc158\uc5d0 \ubc30\ud3ec \uc2a4\ud06c\ub9bd\ud2b8\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.<\/li>\n
    \n        \"scripts\": {\n            \"predeploy\": \"npm run build\",\n            \"deploy\": \"gh-pages -d build\"\n        }\n        <\/code><\/pre>\n
  5. \ubc30\ud3ec \uc2e4\ud589:<\/strong> \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud558\uc5ec \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ubc30\ud3ec\ud569\ub2c8\ub2e4.<\/li>\n
    npm run deploy<\/code><\/pre>\n<\/ol>\n
    \uc774\uc81c \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c {homepage}<\/code> URL\ub85c \uc811\uc18d\ud558\uba74 \ubc30\ud3ec\ub41c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
    2.2. Netlify<\/h3>\n
    Netlify\ub294 \uc815\uc801 \uc6f9\uc0ac\uc774\ud2b8 \ud638\uc2a4\ud305\uc744 \uc704\ud55c \ub9e4\uc6b0 \uc778\uae30 \uc788\ub294 \ud50c\ub7ab\ud3fc\uc785\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 Netlify\uc5d0 \ubc30\ud3ec\ud558\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4.<\/p>\n
      \n
    1. Netlify \uacc4\uc815 \uc0dd\uc131:<\/strong> Netlify \uc6f9\uc0ac\uc774\ud2b8\uc5d0 \uc811\uc18d\ud558\uc5ec \ubb34\ub8cc \uacc4\uc815\uc744 \ub9cc\ub4ed\ub2c8\ub2e4.<\/li>\n
    2. \uc0c8 \uc0ac\uc774\ud2b8 \uc0dd\uc131:<\/strong> New site from Git<\/code> \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uc5ec GitHub \ub9ac\ud3ec\uc9c0\ud1a0\ub9ac\uc640 \uc5f0\uacb0\ud569\ub2c8\ub2e4.<\/li>\n
    3. \ube4c\ub4dc \uc124\uc815:<\/strong> \ube4c\ub4dc \uba85\ub839\uc744 npm run build<\/code>\ub85c \uc124\uc815\ud558\uace0, \ubc30\ud3ec\ud560 \ub514\ub809\ud1a0\ub9ac\ub97c build<\/code>\ub85c \uc124\uc815\ud569\ub2c8\ub2e4.<\/li>\n
    4. \uc0ac\uc774\ud2b8 \ubc30\ud3ec:<\/strong> Deploy site<\/code> \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uc5ec \ubc30\ud3ec\ub97c \uc2dc\uc791\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n
      \ubc30\ud3ec\uac00 \uc644\ub8cc\ub418\uba74 Netlify\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 URL\ub85c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 \uc811\uadfc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
      3. \ubc30\ud3ec \ud6c4 \uad00\ub9ac \ubc0f \uc720\uc9c0\ubcf4\uc218<\/h2>\n
      \ubc30\ud3ec\uac00 \uc644\ub8cc\ub41c \ud6c4, \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \uc548\uc815\uc801\uc73c\ub85c \uc791\ub3d9\ud558\ub294\uc9c0 \uc810\uac80\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \ubc30\ud3ec \ud6c4 \uad00\ub9ac\ud574\uc57c \ud560 \uba87 \uac00\uc9c0 \uc0ac\ud56d\uc785\ub2c8\ub2e4.<\/p>\n
      3.1. \uc624\ub958 \ubaa8\ub2c8\ud130\ub9c1<\/h3>\n
      \ubc30\ud3ec\ub41c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \ubc1c\uc0dd\ud560 \uc218 \uc788\ub294 \uc624\ub958\ub97c \ubaa8\ub2c8\ud130\ub9c1\ud558\uae30 \uc704\ud574 \uc624\ub958 \ucd94\uc801 \ub3c4\uad6c\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc88b\uc2b5\ub2c8\ub2e4. Sentry\uc640 \uac19\uc740 \ub3c4\uad6c\ub97c \uc0ac\uc6a9\ud558\uba74 \uc2e4\uc2dc\uac04\uc73c\ub85c \uc5d0\ub7ec\ub97c \ucd94\uc801\ud558\uace0 \ubb38\uc81c\ub97c \ud574\uacb0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
      3.2. \uc131\ub2a5 \ubaa8\ub2c8\ud130\ub9c1<\/h3>\n
      Google Analytics\uc640 \uac19\uc740 \ub3c4\uad6c\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc131\ub2a5\uc744 \ubaa8\ub2c8\ud130\ub9c1\ud558\uc138\uc694. \uc774\ub97c \ud1b5\ud574 \uc0ac\uc6a9\uc790 \ud2b8\ub798\ud53d\uacfc \uc0ac\uc6a9\uc790\uc758 \ud589\ub3d9\uc744 \uc774\ud574\ud558\uace0, \uc81c\ud488 \uac1c\uc120\uc5d0 \ud544\uc694\ud55c \ub370\uc774\ud130\ub97c \uc218\uc9d1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
      3.3. \uc0ac\uc6a9\uc790 \ud53c\ub4dc\ubc31 \uc218\uc9d1<\/h3>\n
      \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ubc30\ud3ec\ud55c \ud6c4, \uc0ac\uc6a9\uc790\ub4e4\ub85c\ubd80\ud130 \ud53c\ub4dc\ubc31\uc744 \uc218\uc9d1\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\ub4e4\uc774 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 \ub300\ud574 \ub290\ub07c\ub294 \uc810\uc744 \ub2e4\uc591\ud55c \ubc29\ubc95\uc73c\ub85c \uc218\uc9d1\ud558\uace0 \uc774\ub97c \ubc14\ud0d5\uc73c\ub85c \uc571\uc744 \uac1c\uc120\ud574\ub098\uac00\uc138\uc694.<\/p>\n
      4. \uacb0\ub860<\/h2>\n
      \uc624\ub298\uc740 \ub9ac\uc561\ud2b8\ub85c \ub9cc\ub4e0 \uc77c\uae30\uc7a5 \uc571\uc744 \ubc30\ud3ec\ud558\uae30 \uc704\ud55c \uc900\ube44 \uacfc\uc815\uc5d0\uc11c\uc758 \uc8fc\uc694 \ub2e8\uacc4\ub97c \uc0b4\ud3b4\ubcf4\uc558\uc2b5\ub2c8\ub2e4. \ucf54\ub4dc \ucd5c\uc801\ud654, \ubc30\ud3ec \ubc29\ubc95, \uadf8\ub9ac\uace0 \ubc30\ud3ec \ud6c4 \uad00\ub9ac \ubc0f \uc720\uc9c0\ubcf4\uc218\uc5d0 \ub300\ud55c \ub0b4\uc6a9\uc744 \ub2e4\ub8e8\uc5c8\uc2b5\ub2c8\ub2e4. \uc774 \uae00\uc774 \uc5ec\ub7ec\ubd84\uc758 \ub9ac\uc561\ud2b8 \uc571 \ubc30\ud3ec\uc5d0 \ud070 \ub3c4\uc6c0\uc774 \ub418\uae38 \ubc14\ub78d\ub2c8\ub2e4. \ubc30\ud3ec\uac00 \uc644\ub8cc\ub41c \ud6c4\uc5d0\ub3c4 \uc9c0\uc18d\uc801\uc73c\ub85c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\uc120\ud558\uace0 \uad00\ub9ac\ud558\ub294 \uac83\uc744 \uc78a\uc9c0 \ub9c8\uc138\uc694!<\/p>\n
      5. \ucd94\uac00 \uc790\ub8cc<\/h2>\n
      \ub2e4\uc74c\uc740 \ub9ac\uc561\ud2b8 \ubc0f \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ubc30\ud3ec\uc640 \uad00\ub828\ub41c \ucd94\uac00 \uc790\ub8cc\uc785\ub2c8\ub2e4:<\/p>\n