'facebook' 태그의 글 목록

facebook

React 초기 개발환경 설정 및 실행 방법 - create-react-app 사용방법 2020.07.01

React 초기 개발환경 설정 및 실행 방법 - create-react-app 사용방법

2020. 7. 1. 10:55

728x90

create-react-app을 이용한 React 초기 개발 환경 설정

참고URL

https://xiubindev.tistory.com/92

https://velog.io/@cjy9306/create-react-app%EC%97%90%EC%84%9C-react%EA%B0%80-%EC%8B%A4%ED%96%89%EB%90%98%EB%8A%94-%EA%B8%B0%EB%B3%B8-%EC%9B%90%EB%A6%AC-yjk56rqzlk

Yarn - 개선된 버전의 npm

리눅스, 혹은 macOS 에서 nvm 을 통하여 Node.js 를 설치했다면 yarn global 설치가 제대로 작동하기 위해선 다음 커맨드를 profile에 입력해줘야 합니다.

-- macOS
$ echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bash_profile

-- Linux
$ echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bashrc

1. create-react-app 설치

$ npm install -g create-react-app

또는 

$ yarn global add create-react-app

2. react app 생성

$ create-react-app first-react-app

$ npx create-react-app firstReactApp

카멜방식의 프로젝트는 생성할 수 없습니다.

단어사이에 대문자를 넣지 말고 "-" 으로 표기하여 폴더를 생성하여야 합니다.

$ npx create-react-app firstReactApp

npx: 98개의 패키지를 3.66초만에 설치했습니다.
Cannot create a project named "firstReactApp" because of npm naming restrictions:

  * name can no longer contain capital letters

Please choose a different project name.


$ cd firstReactApp
-bash: cd: firstReactApp: No such file or directory

$ npx create-react-app first-react-app

리엑트 프로젝트 생성

$ npx create-react-app first-react-app
npx: 98개의 패키지를 3.102초만에 설치했습니다.

Creating a new React app in /Users/jaehonghan/dev/workspace_nodejs/first-react-app.

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

yarn add v1.22.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "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".
[4/4] 🔨  Building fresh packages...
[1/4] ⡀ fsevents
[-/4] ⡀ waiting...
[-/4] ⡀ waiting...
warning Error running install script for optional dependency: "/Users/jaehonghan/dev/workspace_nodejs/first-react-app/node_modules/fsevents: Command failed.
Exit code: 1
Command: node-gyp rebuild
Arguments: 
Directory: /Users/jaehonghan/dev/workspace_nodejs/first-react-app/node_modules/fsevents
Output:
gyp info it worked if it ends with ok
gyp info using node-gyp@5.1.0
gyp info using node@14.4.0 | darwin | x64
gyp info find Python using Python version 2.7.16 found at \"/System/Library/Frameworks/Python.framework/Versions/2.7/Resources/Python.app/Contents/MacOS/Python\"
gyp info spawn /System/Library/Frameworks/Python.framework/Versions/2.7/Resources/Python.app/Contents/MacOS/Python
gyp info spawn args [
gyp info spawn args   '/usr/local/Cellar/node/14.4.0/libexec/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args   'binding.gyp',
gyp info spawn args   '-f',
gyp info spawn args   'make',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/jaehonghan/dev/workspace_nodejs/first-react-app/node_modules/fsevents/build/config.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/usr/local/Cellar/node/14.4.0/libexec/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/jaehonghan/Library/Caches/node-gyp/14.4.0/include/node/common.gypi',
gyp info spawn args   '-Dlibrary=shared_library',
gyp info spawn args   '-Dvisibility=default',
gyp info spawn args   '-Dnode_root_dir=/Users/jaehonghan/Library/Caches/node-gyp/14.4.0',
gyp info spawn args   '-Dnode_gyp_dir=/usr/local/Cellar/node/14.4.0/libexec/lib/node_modules/npm/node_modules/node-gyp',
gyp info spawn args   '-Dnode_lib_file=/Users/jaehonghan/Library/Caches/node-gyp/14.4.0/<(target_arch)/node.lib',
gyp info spawn args   '-Dmodule_root_dir=/Users/jaehonghan/dev/workspace_nodejs/first-react-app/node_modules/fsevents',
gyp info spawn args   '-Dnode_engine=v8',
gyp info spawn args   '--depth=.',
gyp info spawn args   '--no-parallel',
gyp info spawn args   '--generator-output',
gyp info spawn args   'build',
gyp info spawn args   '-Goutput_dir=.'
gyp info spawn args ]
No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/usr/local/Cellar/node/14.4.0/libexec/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (events.js:315:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:276:12)
gyp ERR! System Darwin 19.5.0
gyp ERR! command \"/usr/local/Cellar/node/14.4.0/bin/node\" \"/usr/local/Cellar/node/14.4.0/libexec/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js\" \"rebuild\"
gyp ERR! cwd /Users/jaehonghan/dev/workspace_nodejs/first-react-app/node_modules/fsevents
gyp ERR! node -v v14.4.0
success Saved lockfile.
success Saved 14 new dependencies.
info Direct dependencies
├─ cra-template@1.0.3
├─ react-dom@16.13.1
├─ react-scripts@3.4.1
└─ react@16.13.1
info All dependencies
├─ @babel/plugin-syntax-typescript@7.10.4
├─ @babel/plugin-transform-flow-strip-types@7.9.0
├─ @babel/plugin-transform-runtime@7.9.0
├─ @babel/plugin-transform-typescript@7.10.4
├─ @babel/preset-typescript@7.9.0
├─ babel-preset-react-app@9.1.2
├─ cra-template@1.0.3
├─ eslint-config-react-app@5.2.1
├─ react-dev-utils@10.2.1
├─ react-dom@16.13.1
├─ react-error-overlay@6.0.7
├─ react-scripts@3.4.1
├─ react@16.13.1
└─ scheduler@0.19.1
✨  Done in 11.28s.

Initialized a git repository.

Installing template dependencies using yarnpkg...
yarn add v1.22.4
[1/4] 🔍  Resolving packages...
warning @testing-library/react > @types/testing-library__react > @types/testing-library__dom@7.5.0: This is a stub types definition. testing-library__dom provides its own type definitions, so you do not need this installed.
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "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".
warning " > @testing-library/user-event@7.2.1" has unmet peer dependency "@testing-library/dom@>=5".
[4/4] 🔨  Building fresh packages...
warning Error running install script for optional dependency: "/Users/jaehonghan/dev/workspace_nodejs/first-react-app/node_modules/fsevents: Command failed.
Exit code: 1
Command: node-gyp rebuild
Arguments: 
Directory: /Users/jaehonghan/dev/workspace_nodejs/first-react-app/node_modules/fsevents
Output:
gyp info it worked if it ends with ok
gyp info using node-gyp@5.1.0
gyp info using node@14.4.0 | darwin | x64
gyp info find Python using Python version 2.7.16 found at \"/System/Library/Frameworks/Python.framework/Versions/2.7/Resources/Python.app/Contents/MacOS/Python\"
gyp info spawn /System/Library/Frameworks/Python.framework/Versions/2.7/Resources/Python.app/Contents/MacOS/Python
gyp info spawn args [
gyp info spawn args   '/usr/local/Cellar/node/14.4.0/libexec/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args   'binding.gyp',
gyp info spawn args   '-f',
gyp info spawn args   'make',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/jaehonghan/dev/workspace_nodejs/first-react-app/node_modules/fsevents/build/config.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/usr/local/Cellar/node/14.4.0/libexec/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/jaehonghan/Library/Caches/node-gyp/14.4.0/include/node/common.gypi',
gyp info spawn args   '-Dlibrary=shared_library',
gyp info spawn args   '-Dvisibility=default',
gyp info spawn args   '-Dnode_root_dir=/Users/jaehonghan/Library/Caches/node-gyp/14.4.0',
gyp info spawn args   '-Dnode_gyp_dir=/usr/local/Cellar/node/14.4.0/libexec/lib/node_modules/npm/node_modules/node-gyp',
gyp info spawn args   '-Dnode_lib_file=/Users/jaehonghan/Library/Caches/node-gyp/14.4.0/<(target_arch)/node.lib',
gyp info spawn args   '-Dmodule_root_dir=/Users/jaehonghan/dev/workspace_nodejs/first-react-app/node_modules/fsevents',
gyp info spawn args   '-Dnode_engine=v8',
gyp info spawn args   '--depth=.',
gyp info spawn args   '--no-parallel',
gyp info spawn args   '--generator-output',
gyp info spawn args   'build',
gyp info spawn args   '-Goutput_dir=.'
gyp info spawn args ]
No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/usr/local/Cellar/node/14.4.0/libexec/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (events.js:315:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:276:12)
gyp ERR! System Darwin 19.5.0
gyp ERR! command \"/usr/local/Cellar/node/14.4.0/bin/node\" \"/usr/local/Cellar/node/14.4.0/libexec/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js\" \"rebuild\"
gyp ERR! cwd /Users/jaehonghan/dev/workspace_nodejs/first-react-app/node_modules/fsevents
gyp ERR! node -v v14.4.0
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok"
info This module is OPTIONAL, you can safely ignore this error
success Saved lockfile.
success Saved 21 new dependencies.
info Direct dependencies
├─ @testing-library/jest-dom@4.2.4
├─ @testing-library/react@9.5.0
├─ @testing-library/user-event@7.2.1
├─ react-dom@16.13.1
└─ react@16.13.1
info All dependencies
├─ @babel/runtime-corejs3@7.10.4
├─ @sheerun/mutationobserver-shim@0.3.3
├─ @testing-library/dom@6.16.0
├─ @testing-library/jest-dom@4.2.4
├─ @testing-library/react@9.5.0
├─ @testing-library/user-event@7.2.1
├─ @types/prop-types@15.7.3
├─ @types/react-dom@16.9.8
├─ @types/react@16.9.41
├─ @types/testing-library__dom@7.5.0
├─ @types/testing-library__react@9.1.3
├─ aria-query@4.2.2
├─ css.escape@1.5.1
├─ csstype@2.6.10
├─ dom-accessibility-api@0.3.0
├─ min-indent@1.0.1
├─ react-dom@16.13.1
├─ react@16.13.1
├─ redent@3.0.0
├─ strip-indent@3.0.0
└─ wait-for-expect@3.0.2
✨  Done in 6.09s.
Removing template package using yarnpkg...

yarn remove v1.22.4
[1/2] 🗑  Removing module cra-template...
[2/2] 🔨  Regenerating lockfile and installing missing dependencies...
warning " > @testing-library/user-event@7.2.1" has unmet peer dependency "@testing-library/dom@>=5".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "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".
[-/4] ⢀ waiting...
[2/4] ⢀ fsevents
[-/4] ⢀ waiting...
warning Error running install script for optional dependency: "/Users/jaehonghan/dev/workspace_nodejs/first-react-app/node_modules/fsevents: Command failed.
Exit code: 1
Command: node-gyp rebuild
Arguments: 
Directory: /Users/jaehonghan/dev/workspace_nodejs/first-react-app/node_modules/fsevents
Output:
gyp info it worked if it ends with ok
gyp info using node-gyp@5.1.0
gyp info using node@14.4.0 | darwin | x64
gyp info find Python using Python version 2.7.16 found at \"/System/Library/Frameworks/Python.framework/Versions/2.7/Resources/Python.app/Contents/MacOS/Python\"
gyp info spawn /System/Library/Frameworks/Python.framework/Versions/2.7/Resources/Python.app/Contents/MacOS/Python
gyp info spawn args [
gyp info spawn args   '/usr/local/Cellar/node/14.4.0/libexec/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args   'binding.gyp',
gyp info spawn args   '-f',
gyp info spawn args   'make',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/jaehonghan/dev/workspace_nodejs/first-react-app/node_modules/fsevents/build/config.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/usr/local/Cellar/node/14.4.0/libexec/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/jaehonghan/Library/Caches/node-gyp/14.4.0/include/node/common.gypi',
gyp info spawn args   '-Dlibrary=shared_library',
gyp info spawn args   '-Dvisibility=default',
gyp info spawn args   '-Dnode_root_dir=/Users/jaehonghan/Library/Caches/node-gyp/14.4.0',
gyp info spawn args   '-Dnode_gyp_dir=/usr/local/Cellar/node/14.4.0/libexec/lib/node_modules/npm/node_modules/node-gyp',
gyp info spawn args   '-Dnode_lib_file=/Users/jaehonghan/Library/Caches/node-gyp/14.4.0/<(target_arch)/node.lib',
gyp info spawn args   '-Dmodule_root_dir=/Users/jaehonghan/dev/workspace_nodejs/first-react-app/node_modules/fsevents',
gyp info spawn args   '-Dnode_engine=v8',
gyp info spawn args   '--depth=.',
gyp info spawn args   '--no-parallel',
gyp info spawn args   '--generator-output',
gyp info spawn args   'build',
gyp info spawn args   '-Goutput_dir=.'
gyp info spawn args ]
No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/usr/local/Cellar/node/14.4.0/libexec/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (events.js:315:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:276:12)
gyp ERR! System Darwin 19.5.0
gyp ERR! command \"/usr/local/Cellar/node/14.4.0/bin/node\" \"/usr/local/Cellar/node/14.4.0/libexec/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js\" \"rebuild\"
gyp ERR! cwd /Users/jaehonghan/dev/workspace_nodejs/first-react-app/node_modules/fsevents
gyp ERR! node -v v14.4.0
success Uninstalled packages.
✨  Done in 5.94s.

Created git commit.

Success! Created first-react-app at /Users/jaehonghan/dev/workspace_nodejs/first-react-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn 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 first-react-app
  yarn start

Happy hacking!

npm start 또는 yarn start

브라우저 창에 http://localhost:3000/로 접속하시면 에 react 초기 페이지 나타납니다.

$ yarn start

$ yarn start

........


Compiled successfully!

You can now view first-react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.54:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

http://localhost:3000/

'reactJS' 카테고리의 다른 글

React 초기 개발환경 설정 및 실행 방법 - 순수 설정 방법 (0)	2020.07.01
MAC에서 [RN] React-Native 설치하기/ react-native-cli / create-react-native-app (0)	2020.06.30

PREV 1 NEXT

프로그래머로 살아가기