React 01

npm 설치

% brew install node

 

create-react-app 설치

% npm install -g create-react-app
/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js
+ create-react-app@3.4.1
added 98 packages from 46 contributors in 6.514s

 

개발환경 구축

% npm init -y create-react-app .

Creating a new React app in /Users/nubiform/react-app.

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


> fsevents@1.2.13 install /Users/nubiform/react-app/node_modules/jest-haste-map/node_modules/fsevents
> node install.js

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node

> fsevents@1.2.13 install /Users/nubiform/react-app/node_modules/watchpack-chokidar2/node_modules/fsevents
> node install.js

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node

> fsevents@1.2.13 install /Users/nubiform/react-app/node_modules/webpack-dev-server/node_modules/fsevents
> node install.js

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node

> core-js@2.6.11 postinstall /Users/nubiform/react-app/node_modules/babel-runtime/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"


> core-js@3.6.5 postinstall /Users/nubiform/react-app/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"


> core-js-pure@3.6.5 postinstall /Users/nubiform/react-app/node_modules/core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"

+ react-dom@16.13.1
+ cra-template@1.0.3
+ react-scripts@3.4.3
+ react@16.13.1
added 1593 packages from 755 contributors and audited 1593 packages in 98.023s

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

found 0 vulnerabilities


Initialized a git repository.

Installing template dependencies using npm...
npm WARN tsutils@3.17.1 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.

+ @testing-library/react@9.5.0
+ @testing-library/user-event@7.2.1
+ @testing-library/jest-dom@4.2.4
added 36 packages from 57 contributors and audited 1629 packages in 13.611s

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

found 0 vulnerabilities

Removing template package using npm...

npm WARN tsutils@3.17.1 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.

removed 1 package and audited 1628 packages in 6.154s

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

found 0 vulnerabilities


Created git commit.

Success! Created react-app at /Users/nubiform/react-app
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 /Users/nubiform/react-app
  npm start

Happy hacking!

 

실행

react-app % npm run start

Compiled successfully!

You can now view react-app in the browser.

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

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

 

빌드

react-app % npm run build

> react-app@0.1.0 build /Users/nubiform/react-app
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  39.88 KB       build/static/js/2.e1eeb85d.chunk.js
  774 B          build/static/js/runtime-main.ec2d9410.js
  573 B (-27 B)  build/static/js/main.dc216b7d.chunk.js
  72 B           build/static/css/main.5facb584.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  bit.ly/CRA-deploy

 

서버

react-app % npx serve -s build
npx: installed 78 in 3.457s

   ┌────────────────────────────────────────────────┐
   │                                                │
   │   Serving!                                     │
   │                                                │
   │   - Local:            http://localhost:5000    │
   │   - On Your Network:  http://10.0.1.101:5000   │
   │                                                │
   │   Copied local address to clipboard!           │
   │                                                │
   └────────────────────────────────────────────────┘