생활코딩 react (4~6-create react app 설치, 개발환경 구축, 셈플실행)

#4 React - 4. npm을 이용해서 create react app 설치

 

* npm 설치 (14.17.1 LTS) - https://nodejs.org/ko/

  - https://nodejs.org/ko/download/

  - windows portable x64 설치 : 압축해제 하고 NODE_HOME을 환경변수에 등록해서 path를 추가했다.

  > NODE_HOME : D:\dev\bin\node-v14.17.1-win-x64 , path : %NODE_HOME%;

   (지식정보사이트 : 서말 > NPM1 : npm을 다루는 기본방법)

 

* create-react-app 설치

 - 공식문서 가이드 : npx (임시로 설치해서 한번만 실행하고 지움 : 최신버전, 공간절약 장점)

D:\dev\bin\node-v14.17.1-win-x64>npm install -g create-react-app
D:\dev\bin\node-v14.17.1-win-x64\create-react-app -> D:\dev\bin\node-v14.17.1-win-x64\node_modules\create-react-app\index.js
+ create-react-app@4.0.3
added 67 packages from 25 contributors in 5.302s

D:\dev\bin\node-v14.17.1-win-x64>create-react-app -V
4.0.3

D:\dev\bin\node-v14.17.1-win-x64>

 

#5 React - 5. create react app을 이용해서 개발환경구축

 

* 개발환경 구성

 - D:\dev\workspace.react

D:\dev\workspace.react>create-react-app .

Creating a new React app in D:\dev\workspace.react.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


> core-js@2.6.12 postinstall D:\dev\workspace.react\node_modules\babel-runtime\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> core-js@3.14.0 postinstall D:\dev\workspace.react\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> core-js-pure@3.14.0 postinstall D:\dev\workspace.react\node_modules\core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall D:\dev\workspace.react\node_modules\ejs
> node ./postinstall.js

+ cra-template@1.1.2
+ react-scripts@4.0.3
+ react@17.0.2
+ react-dom@17.0.2
added 1899 packages from 703 contributors and audited 1902 packages in 237.642s

145 packages are looking for funding
  run `npm fund` for details

found 8 vulnerabilities (4 moderate, 4 high)
  run `npm audit fix` to fix them, or `npm audit` for details

Initialized a git repository.

Installing template dependencies using npm...
npm WARN @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.14.5 requires a peer of @babel/core@^7.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN tsutils@3.21.0 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ web-vitals@1.1.2
+ @testing-library/user-event@12.8.3
+ @testing-library/react@11.2.7
+ @testing-library/jest-dom@5.14.1
added 29 packages from 78 contributors and audited 1931 packages in 19.933s

145 packages are looking for funding
  run `npm fund` for details

found 8 vulnerabilities (4 moderate, 4 high)
  run `npm audit fix` to fix them, or `npm audit` for details
Removing template package using npm...

npm WARN @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.14.5 requires a peer of @babel/core@^7.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN tsutils@3.21.0 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

removed 1 package and audited 1930 packages in 6.83s

145 packages are looking for funding
  run `npm fund` for details

found 8 vulnerabilities (4 moderate, 4 high)
  run `npm audit fix` to fix them, or `npm audit` for details
Git commit not created Error: Command failed: git commit -m "Initialize project using Create React App"
    at checkExecSyncError (child_process.js:643:11)
    at execSync (child_process.js:679:15)
    at tryGitCommit (D:\dev\workspace.react\node_modules\react-scripts\scripts\init.js:62:5)
    at module.exports (D:\dev\workspace.react\node_modules\react-scripts\scripts\init.js:352:25)
    at [eval]:3:14
    at Script.runInThisContext (vm.js:134:12)
    at Object.runInThisContext (vm.js:311:38)
    at internal/process/execution.js:77:19
    at [eval]-wrapper:6:22
    at evalScript (internal/process/execution.js:76:60) {
  status: 128,
  signal: null,
  output: [ null, null, null ],
  pid: 19028,
  stdout: null,
  stderr: null
}
Removing .git directory...

Success! Created workspace.react at D:\dev\workspace.react
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd D:\dev\workspace.react
  npm start

Happy hacking!

D:\dev\workspace.react>

 

#6 React - 6. 샘플 웹앱 실행

 

* Visual Studio Code를 이용한 실행

 - terminal 실행 : npm run start / 종료 : Ctrl+C