구차니의 잡동사니 모음

리덕스 패턴은 MVC 패턴을 대체하기 위해서 페이스북이 사용한 Flux 패턴을 살짝 바꾼 겁니다. 

getState()

dispatch(action)

subscribe(listener)

replaceReducer(nextReducer) 

모듈 시스템에 대해 알아보겠습니다. ES2015에서 바뀐 것들 중에서 가장 획기적이라고 생각하는 변화입니다.

첫 번째는 그냥 React인데, 두 번째는 { render }처럼 괄호 안에 감싸져 있네요. 간단한 차이가 있습니다. export 방식의 차이입니다. 모듈을 불러올 때 import라고 써주는 것처럼, 모듈을 다른 파일로 보내려면 export라고 명시적으로 써줘야 합니다. Example.js 파일을 보죠. 

JavaScript Expressions as Props

You can pass any JavaScript expression as a prop, by surrounding it with {}. For example, in this JSX:

JavaScript Expressions as Children

You can pass any JavaScript expression as children, by enclosing it within {}. For example, these expressions are equivalent:

C:\Users\User>npx

npx: installed 1 in 5.81s

Path must be a string. Received undefined

ERROR: You must supply a command.

Execute binaries from npm packages.

  npx [options] <command>[@version] [command-arg]...

  npx [options] [-p|--package <package>]... <command> [command-arg]...

  npx [options] -c '<command-string>'

  npx --shell-auto-fallback [shell]

Options:

  --package, -p          Package to be installed.                       [string]

  --cache                Location of the npm cache.                     [string]

  --no-install           Skip installation if a package is missing.    [boolean]

  --userconfig           Path to user npmrc.                            [string]

  --call, -c             Execute string as if inside `npm run-script`.  [string]

  --shell, -s            Shell to execute the command with, if any.

                                                       [string] [default: false]

  --shell-auto-fallback  Generate shell code to use npx as the "command not

                         found" fallback.

                                   [string] [choices: "", "bash", "fish", "zsh"]

  --ignore-existing      Ignores existing binaries in $PATH, or in the local

                         project. This forces npx to do a temporary install and

                         use the latest version.                       [boolean]

  --quiet, -q            Suppress output from npx itself. Subcommands will not

                         be affected.                                  [boolean]

  --npm                  npm binary to use for internal operations.

                                                 [string] [default: "C:\\Program

                             Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js"]

  --node-arg, -n         Extra node argument when calling a node binary.[string]

  --version, -v          Show version number                           [boolean]

  --help, -h             Show help                                     [boolean]

For the full documentation, see the manual page for npx(1).

C:\Users\User\Desktop>npx create-react-app myap

npx: installed 1 in 2.423s

Path must be a string. Received undefined

npx: installed 63 in 11.172s

C:\Users\User\AppData\Roaming\npm-cache\_npx\10196\node_modules\create-react-app\index.js

Creating a new React app in C:\Users\User\Desktop\myap.

Installing packages. This might take a couple of minutes.

Installing react, react-dom, and react-scripts...

+ react-dom@16.7.0

+ react@16.7.0

+ react-scripts@2.1.3

added 1926 packages in 197.071s

Initialized a git repository.

Success! Created myap at C:\Users\User\Desktop\myap

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 myap

  npm start

Happy hacking!

D:\work\src\myapp>npm start

> myapp@0.1.0 start D:\work\src\myapp

> react-scripts start

Starting the development server...

Compiled successfully!

You can now view myapp in the browser.

  Local:            http://localhost:3000/

  On Your Network:  http://10.0.0.4:3000/

Note that the development build is not optimized.

To create a production build, use npm run build. 

D:\work\src\myapp>npm run build

> myapp@0.1.0 build D:\work\src\myapp

> react-scripts build

Creating an optimized production build...

Compiled successfully.

File sizes after gzip:

  34.71 KB  build\static\js\1.fa92c112.chunk.js

  763 B     build\static\js\runtime~main.229c360f.js

  716 B     build\static\js\main.690c38a1.chunk.js

  512 B     build\static\css\main.659f8df7.chunk.css

The project was built assuming it is hosted at the server root.

You can control this with the homepage field in your package.json.

For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

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:

  http://bit.ly/CRA-deploy

D:\work\src\myapp>npm install -g serve

C:\Users\user\AppData\Roaming\npm\serve -> C:\Users\user\AppData\Roaming\npm\node_modules\serve\bin\serve.js

+ serve@10.1.1

added 78 packages in 3.909s

D:\work\src\myapp>serve -s build

   ┌───────────────────────────────────────────────┐

   │                                               │

   │   Serving!                                    │

   │                                               │

   │   - Local:            http://localhost:5000   │

   │   - On Your Network:  http://10.0.0.4:5000    │

   │                                               │

   │   Copied local address to clipboard!          │

   │                                               │

   └───────────────────────────────────────────────┘ 

D:\work\src\myapp> set BROWSER=none 

D:\work\src\myapp> npm start