Node.js \ub2e4\uc6b4\ub85c\ub4dc<\/a><\/li>\n<\/ul>\n\uc124\uce58\uac00 \uc644\ub8cc\ub418\uba74, \ud130\ubbf8\ub110\uc5d0\uc11c \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud558\uc5ec \uc124\uce58\uac00 \uc815\uc0c1\uc801\uc73c\ub85c \uc774\ub8e8\uc5b4\uc84c\ub294\uc9c0 \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n
node -v<\/code><\/pre>\nnpm -v<\/code><\/pre>\n2.3 Create React App\uc73c\ub85c \ub9ac\uc561\ud2b8 \ud504\ub85c\uc81d\ud2b8 \ub9cc\ub4e4\uae30<\/h3>\n
VS Code\uc640 Node.js, npm\uc744 \uc124\uce58\ud55c \ud6c4, \uc0c8\ub85c\uc6b4 \ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. Create React App\uc744 \uc0ac\uc6a9\ud558\uba74 \ubaa8\ub4e0 \uc124\uc815\uc774 \uc790\ub3d9\uc73c\ub85c \uad6c\uc131\ub41c \uae30\ubcf8 \ub9ac\uc561\ud2b8 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud558\uc5ec \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4:<\/p>\n
npx create-react-app my-app<\/code><\/pre>\n\uc704\uc5d0\uc11c my-app<\/code>\ub294 \uc0dd\uc131\ud560 \ud504\ub85c\uc81d\ud2b8\uc758 \uc774\ub984\uc785\ub2c8\ub2e4. \uc6d0\ud558\ub294 \uc774\ub984\uc73c\ub85c \ubcc0\uacbd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uba85\ub839\uc5b4\uac00 \uc644\ub8cc\ub418\uba74, \ud574\ub2f9 \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4:<\/p>\ncd my-app<\/code><\/pre>\n3. VS Code\uc5d0\uc11c \ud504\ub85c\uc81d\ud2b8 \uc5f4\uae30<\/h2>\n
VS Code\ub97c \uc2e4\ud589\ud55c \ud6c4, \uc0c1\ub2e8 \uba54\ub274\uc5d0\uc11c \ud30c\uc77c > \ud3f4\ub354 \uc5f4\uae30<\/strong>\ub97c \uc120\ud0dd\ud558\uace0, \uc0dd\uc131\ud55c my-app<\/code> \ud3f4\ub354\ub97c \uc120\ud0dd\ud569\ub2c8\ub2e4. \uc774\uc81c \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870\ub97c \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n4. \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870 \uc774\ud574\ud558\uae30<\/h2>\n
Create React App\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc0dd\uc131\ub41c \uae30\ubcf8 \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n
\nnode_modules\/<\/code>: \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \ubaa8\ub4e0 \ud328\ud0a4\uc9c0\uac00 \uc800\uc7a5\ub429\ub2c8\ub2e4.<\/li>\npublic\/<\/code>: \uc815\uc801 \ud30c\uc77c\uc774 \ud3ec\ud568\ub418\uc5b4 \uc788\uc73c\uba70, HTML \ud15c\ud50c\ub9bf\uc774 \uc704\uce58\ud569\ub2c8\ub2e4.<\/li>\nsrc\/<\/code>: \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ucf54\ub4dc\uac00 \uc704\uce58\ud558\uba70, \uc8fc\ub85c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ubc0f CSS \ud30c\uc77c\uc774 \ub4e4\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\npackage.json<\/code>: \ud504\ub85c\uc81d\ud2b8\uc5d0 \ub300\ud55c \uc815\ubcf4\ub97c \ud3ec\ud568\ud558\uace0, \uc758\uc874\uc131 \ubc0f \uc2a4\ud06c\ub9bd\ud2b8\ub97c \uad00\ub9ac\ud569\ub2c8\ub2e4.<\/li>\nREADME.md<\/code>: \ud504\ub85c\uc81d\ud2b8\uc5d0 \ub300\ud55c \uc124\uba85\uc11c \ud30c\uc77c\uc785\ub2c8\ub2e4.<\/li>\n<\/ul>\n5. \uac1c\ubc1c \ud658\uacbd \uc124\uc815<\/h2>\n5.1 Code Formatting\uacfc Linting<\/h3>\n
\ucf54\ub4dc \uc2a4\ud0c0\uc77c\uc744 \uc77c\uad00\ub418\uac8c \uc720\uc9c0\ud558\uace0, \ucf54\ub4dc\uc758 \ud488\uc9c8\uc744 \ud5a5\uc0c1\uc2dc\ud0a4\uae30 \uc704\ud574 ESLint\uc640 Prettier\ub97c \uc124\uc815\ud569\ub2c8\ub2e4. \ud130\ubbf8\ub110\uc5d0\uc11c \ub2e4\uc74c \uba85\ub839\uc5b4\ub85c \ub450 \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud569\ub2c8\ub2e4:<\/p>\n
npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev<\/code><\/pre>\n\uc774\ud6c4, \ud504\ub85c\uc81d\ud2b8\uc758 \ub8e8\ud2b8 \ub514\ub809\ud1a0\ub9ac\uc5d0 .eslintrc.js<\/code>\uc640 .prettierrc<\/code> \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uc5ec \uc124\uc815\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4. .eslintrc.js<\/code> \ud30c\uc77c\uc758 \ub0b4\uc6a9\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\nmodule.exports = {\n env: {\n browser: true,\n es2021: true,\n },\n extends: [\n 'eslint:recommended',\n 'plugin:react\/recommended',\n 'prettier',\n ],\n parserOptions: {\n ecmaFeatures: {\n jsx: true,\n },\n ecmaVersion: 12,\n sourceType: 'module',\n },\n plugins: [\n 'react',\n 'prettier',\n ],\n rules: {\n 'prettier\/prettier': 'error',\n },\n};<\/code><\/pre>\n\uadf8\ub9ac\uace0 .prettierrc<\/code> \ud30c\uc77c\uc5d0\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \uc124\uc815\uc744 \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n{\n \"semi\": true,\n \"singleQuote\": true\n}<\/code><\/pre>\n5.2 VS Code \ud655\uc7a5 \ud504\ub85c\uadf8\ub7a8 \uc124\uce58<\/h3>\n
VS Code\uc758 \ud655\uc7a5 \ud504\ub85c\uadf8\ub7a8\uc740 \ud3b8\ub9ac\ud55c \uac1c\ubc1c \ub3c4\uad6c\ub85c, \ub9ac\uc561\ud2b8 \uac1c\ubc1c\uc5d0 \uc720\uc6a9\ud55c \uba87 \uac00\uc9c0 \ud655\uc7a5\uc744 \uc124\uce58\ud569\ub2c8\ub2e4. \ucd94\ucc9c\ud558\ub294 \ud655\uc7a5 \ud504\ub85c\uadf8\ub7a8\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n
\n- ESLint<\/li>\n
- Prettier – Code formatter<\/li>\n
- Simple React Snippet<\/li>\n
- Reactjs code snippets<\/li>\n<\/ul>\n
\ud655\uc7a5 \uae30\ub2a5\uc740 \uc88c\uce21 \uc0ac\uc774\ub4dc\ubc14\uc758 Extensions<\/strong> \uc544\uc774\ucf58\uc744 \ud074\ub9ad\ud55c \ud6c4, \uac80\uc0c9\ucc3d\uc5d0 \uac01\uac01\uc758 \uc774\ub984\uc744 \uc785\ub825\ud558\uc5ec \uc124\uce58\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n6. \ub9ac\uc561\ud2b8 \uae30\ubcf8 \uac1c\ub150<\/h2>\n
\ub9ac\uc561\ud2b8\ub97c \uc774\ud574\ud558\uae30 \uc704\ud574\uc11c\ub294 \uba87 \uac00\uc9c0 \uae30\ubcf8 \uac1c\ub150\uc744 \uc54c\uc544\uc57c \ud569\ub2c8\ub2e4:<\/p>\n
\n- \ucef4\ud3ec\ub10c\ud2b8(Component)<\/strong>: \ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uae30\ubcf8 \uad6c\uc131 \uc694\uc18c\uc785\ub2c8\ub2e4. \ucef4\ud3ec\ub10c\ud2b8\ub294 JavaScript \ud568\uc218\ub85c \uc815\uc758\ub418\uba70, \ucf54\ub4dc \uc7ac\uc0ac\uc6a9\uc744 \ub3d5\uc2b5\ub2c8\ub2e4.<\/li>\n
- JSX<\/strong>: JavaScript XML\uc758 \uc57d\uc790\ub85c, HTML\uacfc \uc720\uc0ac\ud55c \ubb38\ubc95\uc744 \uc0ac\uc6a9\ud574 UI\ub97c \ud45c\ud604\ud569\ub2c8\ub2e4.<\/li>\n
- \uc0c1\ud0dc(State)<\/strong>: \ucef4\ud3ec\ub10c\ud2b8\uc758 \ub370\uc774\ud130 \uc0c1\ud0dc\ub97c \ub098\ud0c0\ub0b4\uba70, \ub370\uc774\ud130\uac00 \ubcc0\uacbd\ub420 \ub54c \ub9ac\ub80c\ub354\ub9c1\uc774 \ubc1c\uc0dd\ud569\ub2c8\ub2e4.<\/li>\n
- \uc18d\uc131(Props)<\/strong>: \ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub85c \uc804\ub2ec\ub418\ub294 \ub370\uc774\ud130\uc785\ub2c8\ub2e4.<\/li>\n<\/ul>\n
7. \ub9ac\uc561\ud2b8 \ucef4\ud3ec\ub10c\ud2b8 \ub9cc\ub4e4\uae30<\/h2>\n
\uc774\uc81c \ub9ac\uc561\ud2b8 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0dd\uc131\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. src\/<\/code> \ud3f4\ub354\uc5d0 MyComponent.js<\/code>\ub77c\ub294 \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0, \ub2e4\uc74c \ucf54\ub4dc\ub97c \uc785\ub825\ud569\ub2c8\ub2e4:<\/p>\nimport React from 'react';\n\nconst MyComponent = () => {\n return (\n \n
\uc548\ub155\ud558\uc138\uc694, \ub9ac\uc561\ud2b8!<\/h1>\n
\uc774\uac83\uc740 \ub098\uc758 \uccab \ubc88\uc9f8 \ub9ac\uc561\ud2b8 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.<\/p>\n <\/div>\n );\n};\n\nexport default MyComponent;<\/code><\/pre>\n
\uc774\uc81c src\/App.js<\/code> \ud30c\uc77c\uc5d0\uc11c \uc774 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0ac\uc6a9\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \ucf54\ub4dc\ub97c \ub2e4\uc74c\uacfc \uac19\uc774 \uc5c5\ub370\uc774\ud2b8\ud569\ub2c8\ub2e4:<\/p>\nimport React from 'react';\nimport MyComponent from '.\/MyComponent';\n\nfunction App() {\n return (\n \n
<\/mycomponent>\n <\/div>\n );\n}\n\nexport default App;<\/code><\/pre>\n8. \ub9ac\uc561\ud2b8 \ub77c\uc6b0\ud305 \uc124\uc815\ud558\uae30<\/h2>\n
\ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \ud398\uc774\uc9c0 \uac04 \uc774\ub3d9\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud574 react-router-dom \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \ub2e4\uc74c \uba85\ub839\uc5b4\ub85c \uc774 \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud569\ub2c8\ub2e4:<\/p>\n
npm install react-router-dom<\/code><\/pre>\n\uc774\uc81c, \ub77c\uc6b0\ud305\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. src\/App.js<\/code> \ud30c\uc77c\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud569\ub2c8\ub2e4:<\/p>\nimport React from 'react';\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\nimport MyComponent from '.\/MyComponent';\n\nfunction App() {\n return (\n \n \n <\/route>\n <\/route>\n <\/switch>\n <\/router>\n );\n}\n\nexport default App;<\/code><\/pre>\n\uc704 \ucf54\ub4dc\uc5d0\uc11c AboutComponent<\/code>\ub294 \uc0c8\ub86d\uac8c \ucd94\uac00\ud560 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4. \uac19\uc740 \ubc29\uc2dd\uc73c\ub85c \uc0c8\ub85c\uc6b4 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0dd\uc131\ud558\uc5ec \ub77c\uc6b0\ud305\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n9. API\uc640\uc758 \ud1b5\uc2e0<\/h2>\n
\ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc678\ubd80 API\uc640 \ud1b5\uc2e0\ud558\uae30 \uc704\ud574 axios\uc640 \uac19\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c \uba85\ub839\uc5b4\ub85c axios\ub97c \uc124\uce58\ud569\ub2c8\ub2e4:<\/p>\n
npm install axios<\/code><\/pre>\naxios\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\ub294 \uac04\ub2e8\ud55c \uc608\uc81c\ub97c \uc18c\uac1c\ud558\uaca0\uc2b5\ub2c8\ub2e4. \uc544\ub798\uc640 \uac19\uc774 src\/MyComponent.js<\/code>\ub97c \uc218\uc815\ud569\ub2c8\ub2e4:<\/p>\nimport React, { useState, useEffect } from 'react';\nimport axios from 'axios';\n\nconst MyComponent = () => {\n const [data, setData] = useState([]);\n\n useEffect(() => {\n const fetchData = async () => {\n const result = await axios('https:\/\/api.example.com\/data');\n setData(result.data);\n };\n\n fetchData();\n }, []);\n\n return (\n