{"id":5,"date":"2023-07-15T20:16:34","date_gmt":"2023-07-15T11:16:34","guid":{"rendered":"http:\/\/www.viw.co.kr\/ep\/?p=5"},"modified":"2025-05-04T17:54:03","modified_gmt":"2025-05-04T08:54:03","slug":"react%eb%a6%ac%ec%95%a1%ed%8a%b8-%ea%b0%9c%eb%b0%9c-%ed%99%98%ea%b2%bd-%ea%b5%ac%ec%b6%95","status":"publish","type":"post","link":"http:\/\/www.viw.co.kr\/ep\/react%eb%a6%ac%ec%95%a1%ed%8a%b8-%ea%b0%9c%eb%b0%9c-%ed%99%98%ea%b2%bd-%ea%b5%ac%ec%b6%95\/","title":{"rendered":"React(\ub9ac\uc561\ud2b8) \uac1c\ubc1c \ud658\uacbd \uad6c\ucd95"},"content":{"rendered":"\n

\uac1c\ubc1c\ud658\uacbd \uc14b\ud305<\/strong><\/p>\n\n\n\n

1. \uc544\ub798\uc758 Nodejs \uc0ac\uc774\ud2b8\uc5d0 \uc811\uc18d\ud558\uc5ec LTS\ub77c\uace0 \uc368\uc788\ub294 \ubc84\uc804\uc744 \ub2e4\uc6b4\ubc1b\uc544 \uc124\uce58\ud569\ub2c8\ub2e4.<\/strong><\/p>\n\n\n\n

https:\/\/nodejs.org\/ko\/<\/a><\/p>\n\n\n\n

\u2013 \uc124\uce58 \uacbd\ub85c\ub294 C\ub4dc\ub77c\uc774\ube0c\ub97c \uad8c\uc7a5\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

npm \ubc84\uc804 \ud655\uc778<\/p>\n\n\n\n

node -v<\/pre>\n\n\n\n
\ud328\ud0a4\uc9c0 \ubc84\uc804 \ud655\uc778<\/p>\n\n\n\n
npm show [\ud328\ud0a4\uc9c0\uba85] version<\/pre>\n\n\n\n
npm \ubc84\uc804 \ubcc0\uacbd<\/p>\n\n\n\n
npm install -g npm@6.14.13

yarn set version 1.22.1<\/code><\/pre>\n\n\n\n
\u203b \ubc84\uc804\uc5d0 \ub530\ub77c \ub2e4\ub978 \ubb38\uc81c\uac00 \ubc1c\uc0dd \ud560 \uc218 \uc788\uae30 \ub54c\ubb38\uc5d0 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 \ud1b5\uc77c\ub41c \ubc84\uc804\uc744 \uc124\uce58\ud558\uc154\uc57c \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
2. \uc544\ub798\uc758 Visual Studio Code \uc0ac\uc774\ud2b8\uc5d0 \uc811\uc18d\ud558\uc5ec \ucd5c\uc2e0 \ubc84\uc804\uc744 \ub2e4\uc6b4\ubc1b\uc544 \uc124\uce58\ud569\ub2c8\ub2e4.<\/strong><\/p>\n\n\n\n
https:\/\/code.visualstudio.com\/<\/a><\/p>\n\n\n\n
3. \uae43(Git) \uc124\uce58<\/strong><\/p>\n\n\n\n
\uac1c\uc778\uc740 GitHub \uc0ac\uc774\ud2b8 \uacc4\uc815 \uc0dd\uc131\ud574\uc11c \uc18c\uc2a4\uad00\ub9ac \ud560 \uc218 \uc788\uace0 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 \ub0b4\ubd80  Git \uc11c\ubc84\ub97c \ud1b5\ud574 \uad00\ub9ac\ud558\ub2c8 \ub3c4\uad6c \uc0ac\uc6a9\ud558\ub294 \uac83\ub3c4 \uc775\uc219\ud574\uc9c0\ub294 \uac83\uc774 \uc911\uc694\ud558\ub2c8 \uaf2d \uc124\uce58\ud574\uc11c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
https:\/\/git-scm.com\/<\/a><\/p>\n\n\n\n
4. \uc18c\uc2a4\ud2b8\ub9ac(Source Tree) \uc124\uce58<\/strong><\/p>\n\n\n\n
Git \uc0ac\uc6a9\uc744 \uc27d\uac8c \uc0ac\uc6a9 \ud560 \uc218 \uc788\ub294 \ub3c4\uad6c \uc785\ub2c8\ub2e4. \uc5ec\ub7ec \uc7a5\uc810\uc774 \uc788\uc73c\ub2c8 \uaf2d \uc124\uce58\ud574\uc11c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
\u203b \uc790\uc2e0\uc774 \uc120\ud638\ud558\ub294 \ubcc4\ub3c4 \ub3c4\uad6c\uac00 \uc788\ub2e4\uba74 \ub2e4\uc740 \ub3c4\uad6c \uc0ac\uc6a9\ud574\ub3c4 \uc0c1\uad00 \uc5c6\uc9c0\ub9cc \ud504\ub85c\uc81d\ud2b8 \ub0b4\ubd80\uc5d0\uc11c\ub294 \ud1b5\uc77c\ub41c \ub3c4\uad6c \uc0ac\uc6a9\uc744 \uad8c\uc7a5\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
https:\/\/www.sourcetreeapp.com\/<\/a><\/p>\n\n\n\n
5. \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131<\/strong><\/p>\n\n\n\n
\uc6d0\ub3c4\uc6b0\uc5d0\uc11c  Command  \ucc3d\uc5d0\uc11c \ud560 \uc218 \uc788\uc9c0\ub9cc \uc800\ud76c\ub294 PowerShell\ub97c \uc0ac\uc6a9 \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
PowerShell \uc2e4\ud589\ubc25\ubc95<\/p>\n\n\n\n
– \ud574\ub2f9 \ud3f4\ub354\ub97c \uc120\ud0dd\ud558\uace0 Shift\ud0a4\ub97c \ub204\ub974\uace0 \uc624\ub978\ucabd \ub9c8\uc6b0\uc2a4 \ud074\ub9ad\ud558\uc5ec \u201c\uc5ec\uae30\uc5d0 PowerShell \ucc3d \uc5f4\uae30\u201d\ub97c \uc120\ud0dd\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
\ud2b9\uc815 \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574\uc11c\ub294 \uad00\ub9ac\uc790 \uad8c\ud55c\uc73c\ub85c \uc2e4\ud589\ud574\uc57c \ud558\ub294 \uacbd\uc6b0\uac00 \uc788\uc73c\ub2c8 \uc6d0\ub3c4\uc6b0 \uac80\uc0c9\uc5d0 powershell\ub97c \uc785\ub825\ud558\uba74 \uc544\ub798\uc640 \uac19\uc774 Windows PowerShell \uad00\ub9ac\uc790\ub85c \uc2e4\ud589\uc744 \uc120\ud0dd \ud55c\ub2e4.<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
\ub9ac\uc561\ud2b8 \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131<\/strong><\/p>\n\n\n\n
React &TypeScript \ud504\ub85c\uc81d\ud2b8 \ud3f4\ub354 \uc0dd\uc131 \ubc0f \uc124\uce58<\/p>\n\n\n\n
npx create-react-app aboutw3 --template typescript<\/pre>\n\n\n\n
\uc774\ubbf8 \uc0dd\uc131\ub41c \uc0c1\ud0dc\uc5d0\uc11c\ub294 \uc544\ub798\uc640 \uac19\uc774 \uc124\uce58\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
npm install typescript @types\/node @types\/react @types\/react-dom @types\/jest\n\nyarn add typescript @types\/node @types\/react @types\/react-dom @types\/jest<\/pre>\n\n\n\n
Yarn \uc124\uce58 \ud55c\ub2e4.<\/p>\n\n\n\n
npm install -g yarn\n\n\ud504\ub85c\uc81d\ud2b8 \uc2e4\ud589 \uc804\uc5d0 \ub77c\uc774\ube0c\ub7ec\ub9ac \uc124\uce58\ud55c\ub2e4.<\/strong>\nyarn install<\/code><\/pre>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
\uc624\ub958 \uc870\uce58 \ubc29\ubc95<\/p>\n\n\n\n
‘react-scripts’\uc740(\ub294) \ub0b4\ubd80 \ub610\ub294 \uc678\ubd80 \uba85\ub839, \uc2e4\ud589\ud560 \uc218 \uc788\ub294 \ud504\ub85c\uadf8\ub7a8, \ub610\ub294 \ubc30\uce58 \ud30c\uc77c\uc774 \uc544\ub2d9\ub2c8\ub2e4.<\/p>\n\n\n\n
 – npm<\/p>\n\n\n\n
npm install -save react-scripts<\/pre>\n\n\n\n
 – yarn<\/p>\n\n\n\n
yarn add react-scripts<\/pre>\n\n\n\n
\uc804\uc5ed\uc73c\ub85c react-scripts \ub77c\uc774\ube0c\ub7ec\ub9ac \uc124\uce58\ud558\uae30<\/strong><\/p>\n\n\n\n
 – npm<\/p>\n\n\n\n
npm install -g react-scripts<\/pre>\n\n\n\n
 – yarn<\/p>\n\n\n\n
yarn add global react-scripts<\/pre>\n\n\n\n
\ud328\ud0a4\uc9c0 \ub9e4\ub2c8\uc800 (yarn, npm) \uc5c5\ub370\uc774\ud2b8<\/strong><\/p>\n\n\n\n
\u203b \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 \ub2e4\ub978 \ucc44\ud0a4\uc9c0\ub4e4\uacfc \ubc84\uc804\uc774 \ub2e4\ub978 \uacbd\uc6b0\uac00 \uc788\uc73c\ub2c8 \uc5c5\ub370\uc774\ud2b8\ub294 \ud655\uc778 \ud6c4 \uc2e4\ud589\ud558\uc138\uc694.<\/p>\n\n\n\n
 – npm<\/p>\n\n\n\n
npm update\nnpm start<\/pre>\n\n\n\n
 – yarn<\/p>\n\n\n\n
yarn upgrade\nyarn start<\/pre>\n\n\n\n
ERROR in [eslint] Failed to load config “react-app” to extend from.<\/p>\n\n\n\n
npm install eslint-config-react-app\n\nyarn add eslint-config-react-app<\/pre>\n\n\n\n
\uc624\ub958<\/p>\n\n\n\n
\\yarn.ps1 \ud30c\uc77c\uc744 \ub85c\ub4dc\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4. \uc624\ub958.<\/pre>\n\n\n\n
\uc870\uce58 \ubc29\ubc95<\/p>\n\n\n\n
C:\\VIW\\aboutw3> ExecutionPolicy\nRestricted\n\n\uc704\uc640 \uac19\ub2e4\uba74 \uc138\ud305 \ubcc0\uacbd\nPS C:\\Windows\\system32> Set-ExecutionPolicy RemoteSigned\n\n\uc2e4\ud589 \uaddc\uce59 \ubcc0\uacbd\n\uc2e4\ud589 \uc815\ucc45\uc740 \uc2e0\ub8b0\ud558\uc9c0 \uc54a\ub294 \uc2a4\ud06c\ub9bd\ud2b8\ub85c\ubd80\ud130 \uc0ac\uc6a9\uc790\ub97c \ubcf4\ud638\ud569\ub2c8\ub2e4. \uc2e4\ud589 \uc815\ucc45\uc744 \ubcc0\uacbd\ud558\uba74 about_Execution_Policies \ub3c4\uc6c0\ub9d0\n\ud56d\ubaa9(https:\/\/go.microsoft.com\/fwlink\/?LinkID=135170)\uc5d0 \uc124\uba85\ub41c \ubcf4\uc548 \uc704\ud5d8\uc5d0 \ub178\ucd9c\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc2e4\ud589 \uc815\ucc45\uc744\n\ubcc0\uacbd\ud558\uc2dc\uaca0\uc2b5\ub2c8\uae4c?\n[Y] \uc608(Y)  [A] \ubaa8\ub450 \uc608(A)  [N] \uc544\ub2c8\uc694(N)  [L] \ubaa8\ub450 \uc544\ub2c8\uc694(L)  [S] \uc77c\uc2dc \uc911\ub2e8(S)  [?] \ub3c4\uc6c0\ub9d0 (\uae30\ubcf8\uac12\uc740 \"N\"): y\nPS C:\\Windows\\system32><\/pre>\n\n\n\n
https:\/\/nodejs.org\/download\/release\/v14.17.0\/\nhttps:\/\/git-scm.com\/\nhttps:\/\/sourcetreeapp.com\/\n\n* npm \ubc84\uc804 \ud655\uc778\nnode -v\n\n* \ud328\ud0a4\uc9c0 \ubc84\uc804 \ud655\uc778\nnpm show [\ud328\ud0a4\uc9c0\uba85] version\n\n* npm \ubc84\uc804 \ubcc0\uacbd\nnpm install -g npm@6.14.13\n\n*TypeScript \uc124\uce58\nnpm install typescript @types\/node @types\/react @types\/react-dom @types\/jest\n\nyarn add typescript @types\/node @types\/react @types\/react-dom @types\/jest<\/pre>\n\n\n\n
[eslint] Failed to load config “react-app” to extend from.<\/p>\n\n\n\n
eslint-config-react-app\uc0ad\uc81c\ud6c4 eslint-config-react-app@6\ub85c \uc7ac\uc124\uce58<\/p>\n\n\n\n
yarn remove eslint-config-react-app<\/pre>\n\n\n\n
yarn add eslint-config-react-app@6<\/pre>\n\n\n\n
\ud328\ud0a4\uc9c0 \uc5c6\uc744 \uacbd\uc6b0 \uc124\uce58<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
\uad6c\uae00\uc5d0\uc11c \uc544\ub798\uc640 \uac19\uc774 \uac80\uc0c9\uc5b4 \uc785\ub825 \ud6c4 \uc870\ud68c<\/p>\n\n\n\n
npm install react-router-dom<\/em><\/strong> typescript<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
npm i @types\/react-router-dom\nnpm i @types\/lodash\nnpm i @emotion\/react\nnpm i @emotion\/styled\nnpm i date-and-time\nnpm i jsx-runtime<\/pre>\n\n\n\n
error No lockfile in this directory. Run `yarn install` to generate one.<\/p>\n\n\n\n
yarn remove\n\nnpm install -g yarn<\/pre>\n\n\n\n
Module not found: Error: Can’t resolve ‘react-router-dom’ \uc624\ub958<\/p>\n\n\n\n
npm i -s react-router-dom<\/pre>\n\n\n\n
Module ‘”react-router-dom”‘ has no exported member ‘Switch’<\/p>\n\n\n\n
react-router-dom v6\ub85c \uc5c5\ub370\uc774\ud2b8 \ub418\uba74\uc11c \ubcc0\uacbd\ub41c \ubd80\ubd84 \uc911\uc5d0 \ud558\ub098\uac00 Switch\uac00 Routes \ub85c \ubc14\ub00c\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\/\/ \ubc84\uc804 5\n<Switch>\n  <Route ... \/>\n<\/Switch>\n\n\/\/ \ubc84\uc804 6\n<Routes>\n  <Route ... \/>\n<\/Routes><\/pre>\n\n\n\n
<BrowserRouter>\n  <Switch>\n    <Route path='\/' component={App05} \/>\n    <Route path='\/app01' component={App01} \/>\n    <Route exact path='\/app02' component={App02} \/>\n  <\/Switch>\n<\/BrowserRouter>\n  \n<Routes>\n  <Route path='\/' element={<App05 \/>} \/>\n  <Route path='\/app01' element={<App01 \/>} \/>\n  <Route path='\/app02' element={<App02 \/>} \/>\n<\/Routes><\/pre>\n\n\n\n
useRoutes() may be used only in the context of a <Router> component.<\/p>\n\n\n\n
import React from 'react';\nimport { BrowserRouter as Router, Route, Routes } from \"react-router-dom\";\nimport App01 from '.\/QuickStart\/App01';\nimport App02 from '.\/QuickStart\/App02';\nimport App05 from '.\/QuickStart\/App05';\n\nfunction App() {\n  return (\n    <Router>\n      <Routes>\n        <Route path='\/' element={<App05 \/>} \/>\n        <Route path='\/app01' element={<App01 \/>} \/>\n        <Route path='\/app02' element={<App02 \/>} \/>\n      <\/Routes>\n    <\/Router>\n  );\n}\n\nexport default App;<\/pre>\n","protected":false},"excerpt":{"rendered":"
\uac1c\ubc1c\ud658\uacbd \uc14b\ud305 1. \uc544\ub798\uc758 Nodejs \uc0ac\uc774\ud2b8\uc5d0 \uc811\uc18d\ud558\uc5ec LTS\ub77c\uace0 \uc368\uc788\ub294 \ubc84\uc804\uc744 \ub2e4\uc6b4\ubc1b\uc544 \uc124\uce58\ud569\ub2c8\ub2e4. https:\/\/nodejs.org\/ko\/ \u2013 \uc124\uce58 \uacbd\ub85c\ub294 C\ub4dc\ub77c\uc774\ube0c\ub97c \uad8c\uc7a5\ud569\ub2c8\ub2e4. npm \ubc84\uc804 \ud655\uc778 node -v \ud328\ud0a4\uc9c0 \ubc84\uc804 \ud655\uc778 npm show [\ud328\ud0a4\uc9c0\uba85] version npm \ubc84\uc804 \ubcc0\uacbd npm install -g npm@6.14.13yarn set version 1.22.1 \u203b…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-5","post","type-post","status-publish","format-standard","hentry","category-tips","no-post-thumbnail"],"_links":{"self":[{"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/posts\/5","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/comments?post=5"}],"version-history":[{"count":6,"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/posts\/5\/revisions"}],"predecessor-version":[{"id":124,"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/posts\/5\/revisions\/124"}],"wp:attachment":[{"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/media?parent=5"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/categories?post=5"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/tags?post=5"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}