Puppy's paw

create-react-app typescript-react-tutorial --scripts-version=react-scripts-ts

react에서 class를 쓰는 경우와 상태가 없는 함수를 쓰는 경우

https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

ES7은 class에서 static 변수 설정이 가능하다.

하지만 eslint는 ES6 기본이라 에러가 난다.

yaml을 사용하면 아래를 추가한다.

parser: babel-lint

jsx로 처리되는 변수들은 shadowing이 되서 eslint가 못찾아 낸다고 한다.

그래서 쓰고 있는데도 

is defined but never used같은 에러를 발생시킨다.

react도 직접 쓰지 않지만 jsx가 사용해서 필요한데 같은 에러가 나온다.

./eslintrc에

extends: ['eslint:recommended',  'plugin:react/recommended']

를 추가한다.

아니면 에러나는 줄 옆에 다음과 같은 주석을 단다.

// eslint-disable-line no-unused-vars

참고로 구체적으로 입맛에 맞는 설정도 가능하다.

{

  // I want to use babel-eslint for parsing!

  "parser": "babel-eslint",

  "env": {

    // I write for browser

    "browser": true,

    // in CommonJS

    "node": true

  },

  {

    "ecmaFeatures": {

      "jsx": true

    }

  },

  {

    "plugins": [

      "react"

    ]

  },

  // To give you an idea how to override rule options:

  "rules": {

    "quotes": [2, "single"],

    "eol-last": [0],

    "no-mixed-requires": [0],

    "no-underscore-dangle": [0],

    "react/display-name": 1,

    "react/jsx-boolean-value": 1,

    "react/jsx-no-undef": 1,

    "react/jsx-quotes": 1,

    "react/jsx-sort-prop-types": 1,

    "react/jsx-sort-props": 1,

    "react/jsx-uses-react": 1,

    "react/jsx-uses-vars": 1,

    "react/no-did-mount-set-state": 1,

    "react/no-did-update-set-state": 1,

    "react/no-multi-comp": 1,

    "react/no-unknown-property": 1,

    "react/prop-types": 1,

    "react/react-in-jsx-scope": 1,

    "react/require-extension": 1,

    "react/self-closing-comp": 1,

    "react/sort-comp": 1,

    "react/wrap-multilines": 1

  }

}

친절한 설명

http://ohyecloudy.com/ddiary/2016/09/04/til-npm-install-save-or-save-dev/

npm i -g style-loader css-loader postcss-loader

C:\Users\Sungwook\AppData\Roaming\npm

+-- css-loader@0.28.11

| +-- babel-code-frame@6.26.0

| | +-- chalk@1.1.3

| | | +-- ansi-styles@2.2.1

| | | +-- escape-string-regexp@1.0.5

| | | +-- has-ansi@2.0.0

| | | | `-- ansi-regex@2.1.1

| | | +-- strip-ansi@3.0.1

| | | `-- supports-color@2.0.0

| | +-- esutils@2.0.2

| | `-- js-tokens@3.0.2

| +-- css-selector-tokenizer@0.7.0

| | +-- cssesc@0.1.0

| | +-- fastparse@1.1.1

| | `-- regexpu-core@1.0.0

| |   +-- regenerate@1.3.3

| |   +-- regjsgen@0.2.0

| |   `-- regjsparser@0.1.5

| |     `-- jsesc@0.5.0

| +-- cssnano@3.10.0

| | +-- autoprefixer@6.7.7

| | | +-- browserslist@1.7.7

| | | | `-- electron-to-chromium@1.3.42

| | | +-- caniuse-db@1.0.30000828

| | | +-- normalize-range@0.1.2

| | | `-- num2fraction@1.2.2

| | +-- decamelize@1.2.0

| | +-- defined@1.0.0

| | +-- has@1.0.1

| | | `-- function-bind@1.1.1

| | +-- postcss-calc@5.3.1

| | | +-- postcss-message-helpers@2.0.0

| | | `-- reduce-css-calc@1.3.0

| | |   +-- balanced-match@0.4.2

| | |   +-- math-expression-evaluator@1.2.17

| | |   `-- reduce-function-call@1.0.2

| | +-- postcss-colormin@2.2.2

| | | `-- colormin@1.1.2

| | |   +-- color@0.11.4

| | |   | +-- clone@1.0.4

| | |   | +-- color-convert@1.9.1

| | |   | | `-- color-name@1.1.3

| | |   | `-- color-string@0.3.0

| | |   `-- css-color-names@0.0.4

| | +-- postcss-convert-values@2.6.1

| | +-- postcss-discard-comments@2.0.4

| | +-- postcss-discard-duplicates@2.1.0

| | +-- postcss-discard-empty@2.1.0

| | +-- postcss-discard-overridden@0.1.1

| | +-- postcss-discard-unused@2.2.3

| | | `-- uniqs@2.0.0

| | +-- postcss-filter-plugins@2.0.2

| | | `-- uniqid@4.1.1

| | |   `-- macaddress@0.2.8

| | +-- postcss-merge-idents@2.1.7

| | +-- postcss-merge-longhand@2.0.2

| | +-- postcss-merge-rules@2.1.2

| | | +-- caniuse-api@1.6.1

| | | | +-- lodash.memoize@4.1.2

| | | | `-- lodash.uniq@4.5.0

| | | +-- postcss-selector-parser@2.2.3

| | | | +-- flatten@1.0.2

| | | | +-- indexes-of@1.0.1

| | | | `-- uniq@1.0.1

| | | `-- vendors@1.0.1

| | +-- postcss-minify-font-values@1.0.5

| | +-- postcss-minify-gradients@1.0.5

| | +-- postcss-minify-params@1.2.2

| | | `-- alphanum-sort@1.0.2

| | +-- postcss-minify-selectors@2.1.1

| | +-- postcss-normalize-charset@1.1.1

| | +-- postcss-normalize-url@3.0.8

| | | +-- is-absolute-url@2.1.0

| | | `-- normalize-url@1.9.1

| | |   +-- prepend-http@1.0.4

| | |   +-- query-string@4.3.4

| | |   | `-- strict-uri-encode@1.1.0

| | |   `-- sort-keys@1.1.2

| | |     `-- is-plain-obj@1.1.0

| | +-- postcss-ordered-values@2.2.3

| | +-- postcss-reduce-idents@2.4.0

| | +-- postcss-reduce-initial@1.0.1

| | +-- postcss-reduce-transforms@1.0.4

| | +-- postcss-svgo@2.1.6

| | | +-- is-svg@2.1.0

| | | | `-- html-comment-regex@1.1.1

| | | `-- svgo@0.7.2

| | |   +-- coa@1.0.4

| | |   | `-- q@1.5.1

| | |   +-- colors@1.1.2

| | |   +-- csso@2.3.2

| | |   | `-- clap@1.2.3

| | |   +-- js-yaml@3.7.0

| | |   | +-- argparse@1.0.10

| | |   | | `-- sprintf-js@1.0.3

| | |   | `-- esprima@2.7.3

| | |   +-- mkdirp@0.5.1

| | |   | `-- minimist@0.0.8

| | |   +-- sax@1.2.4

| | |   `-- whet.extend@0.9.9

| | +-- postcss-unique-selectors@2.0.2

| | `-- postcss-zindex@2.2.0

| +-- icss-utils@2.1.0

| | `-- postcss@6.0.21

| |   +-- chalk@2.3.2

| |   | `-- ansi-styles@3.2.1

| |   +-- source-map@0.6.1

| |   `-- supports-color@5.3.0

| |     `-- has-flag@3.0.0

| +-- loader-utils@1.1.0

| | +-- big.js@3.2.0

| | +-- emojis-list@2.1.0

| | `-- json5@0.5.1

| +-- lodash.camelcase@4.3.0

| +-- object-assign@4.1.1

| +-- postcss@5.2.18

| | +-- js-base64@2.4.3

| | +-- source-map@0.5.7

| | `-- supports-color@3.2.3

| |   `-- has-flag@1.0.0

| +-- postcss-modules-extract-imports@1.2.0

| | `-- postcss@6.0.21

| |   +-- chalk@2.3.2

| |   | `-- ansi-styles@3.2.1

| |   +-- source-map@0.6.1

| |   `-- supports-color@5.3.0

| |     `-- has-flag@3.0.0

| +-- postcss-modules-local-by-default@1.2.0

| | `-- postcss@6.0.21

| |   +-- chalk@2.3.2

| |   | `-- ansi-styles@3.2.1

| |   +-- source-map@0.6.1

| |   `-- supports-color@5.3.0

| |     `-- has-flag@3.0.0

| +-- postcss-modules-scope@1.1.0

| | `-- postcss@6.0.21

| |   +-- chalk@2.3.2

| |   | `-- ansi-styles@3.2.1

| |   +-- source-map@0.6.1

| |   `-- supports-color@5.3.0

| |     `-- has-flag@3.0.0

| +-- postcss-modules-values@1.3.0

| | +-- icss-replace-symbols@1.1.0

| | `-- postcss@6.0.21

| |   +-- chalk@2.3.2

| |   | `-- ansi-styles@3.2.1

| |   +-- source-map@0.6.1

| |   `-- supports-color@5.3.0

| |     `-- has-flag@3.0.0

| +-- postcss-value-parser@3.3.0

| `-- source-list-map@2.0.0

+-- postcss-loader@2.1.3

| +-- loader-utils@1.1.0

| | +-- big.js@3.2.0

| | +-- emojis-list@2.1.0

| | `-- json5@0.5.1

| +-- postcss@6.0.21

| | +-- chalk@2.3.2

| | | +-- ansi-styles@3.2.1

| | | | `-- color-convert@1.9.1

| | | |   `-- color-name@1.1.3

| | | `-- escape-string-regexp@1.0.5

| | +-- source-map@0.6.1

| | `-- supports-color@5.3.0

| |   `-- has-flag@3.0.0

| +-- postcss-load-config@1.2.0

| | +-- cosmiconfig@2.2.2

| | | +-- is-directory@0.3.1

| | | +-- js-yaml@3.11.0

| | | | +-- argparse@1.0.10

| | | | | `-- sprintf-js@1.0.3

| | | | `-- esprima@4.0.0

| | | +-- minimist@1.2.0

| | | +-- os-homedir@1.0.2

| | | +-- parse-json@2.2.0

| | | | `-- error-ex@1.3.1

| | | |   `-- is-arrayish@0.2.1

| | | `-- require-from-string@1.2.1

| | +-- object-assign@4.1.1

| | +-- postcss-load-options@1.2.0

| | `-- postcss-load-plugins@2.3.0

| +-- schema-utils@0.4.5

| | +-- ajv@6.4.0

| | | +-- fast-deep-equal@1.1.0

| | | +-- fast-json-stable-stringify@2.0.0

| | | +-- json-schema-traverse@0.3.1

| | | `-- uri-js@3.0.2

| | |   `-- punycode@2.1.0

| | `-- ajv-keywords@3.1.0

| `-- UNMET PEER DEPENDENCY webpack@^2.0.0 || ^3.0.0 || ^4.0.0

`-- style-loader@0.20.3

  +-- loader-utils@1.1.0

  | +-- big.js@3.2.0

  | +-- emojis-list@2.1.0

  | `-- json5@0.5.1

  +-- schema-utils@0.4.5

  | +-- ajv@6.4.0

  | | +-- fast-deep-equal@1.1.0

  | | +-- fast-json-stable-stringify@2.0.0

  | | +-- json-schema-traverse@0.3.1

  | | `-- uri-js@3.0.2

  | |   `-- punycode@2.1.0

  | `-- ajv-keywords@3.1.0

  `-- UNMET PEER DEPENDENCY webpack@^2.0.0 || ^3.0.0 || ^4.0.0

npm WARN schema-utils@0.4.5 requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0 but none was installed.

npm WARN schema-utils@0.4.5 requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0 but none was installed.

npm install babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-0 --save-dev

npm WARN saveError ENOENT: no such file or directory, open 'D:\apache\htdocs\es6\package.json'

D:\apache\htdocs\es6

+-- babel-core@6.26.0

| +-- babel-generator@6.26.1

| | +-- detect-indent@4.0.0

| | | `-- repeating@2.0.1

| | |   `-- is-finite@1.0.2

| | |     `-- number-is-nan@1.0.1

| | +-- jsesc@1.3.0

| | +-- source-map@0.5.7

| | `-- trim-right@1.0.1

| +-- babel-helpers@6.24.1

| +-- babel-register@6.26.0

| | +-- home-or-tmp@2.0.0

| | | +-- os-homedir@1.0.2

| | | `-- os-tmpdir@1.0.2

| | `-- source-map-support@0.4.18

| |   `-- source-map@0.5.7

| +-- convert-source-map@1.5.1

| +-- json5@0.5.1

| +-- minimatch@3.0.4

| | `-- brace-expansion@1.1.11

| |   +-- balanced-match@1.0.0

| |   `-- concat-map@0.0.1

| +-- path-is-absolute@1.0.1

| +-- slash@1.0.0

| `-- source-map@0.5.7

+-- babel-loader@7.1.4

| +-- find-cache-dir@1.0.0

| | +-- commondir@1.0.1

| | +-- make-dir@1.2.0

| | | `-- pify@3.0.0

| | `-- pkg-dir@2.0.0

| |   `-- find-up@2.1.0

| |     `-- locate-path@2.0.0

| |       +-- p-locate@2.0.0

| |       | `-- p-limit@1.2.0

| |       |   `-- p-try@1.0.0

| |       `-- path-exists@3.0.0

| +-- loader-utils@1.1.0

| | +-- big.js@3.2.0

| | `-- emojis-list@2.1.0

| `-- mkdirp@0.5.1

|   `-- minimist@0.0.8

+-- babel-preset-env@1.6.1

| `-- babel-plugin-transform-es2015-unicode-regex@6.24.1

|   `-- regexpu-core@2.0.0

|     `-- regjsparser@0.1.5

|       `-- jsesc@0.5.0

+-- babel-preset-react@6.24.1

| +-- babel-plugin-syntax-jsx@6.18.0

| +-- babel-plugin-transform-react-display-name@6.25.0

| +-- babel-plugin-transform-react-jsx@6.24.1

| | `-- babel-helper-builder-react-jsx@6.26.0

| +-- babel-plugin-transform-react-jsx-self@6.22.0

| +-- babel-plugin-transform-react-jsx-source@6.22.0

| `-- babel-preset-flow@6.23.0

|   `-- babel-plugin-transform-flow-strip-types@6.22.0

|     `-- babel-plugin-syntax-flow@6.18.0

+-- babel-preset-stage-0@6.24.1

| +-- babel-plugin-transform-do-expressions@6.22.0

| | `-- babel-plugin-syntax-do-expressions@6.13.0

| +-- babel-plugin-transform-function-bind@6.22.0

| | `-- babel-plugin-syntax-function-bind@6.13.0

| `-- babel-preset-stage-1@6.24.1

|   +-- babel-plugin-transform-class-constructor-call@6.24.1

|   | `-- babel-plugin-syntax-class-constructor-call@6.18.0

|   +-- babel-plugin-transform-export-extensions@6.22.0

|   | `-- babel-plugin-syntax-export-extensions@6.13.0

|   `-- babel-preset-stage-2@6.24.1

|     +-- babel-plugin-syntax-dynamic-import@6.18.0

|     +-- babel-plugin-transform-class-properties@6.24.1

|     | `-- babel-plugin-syntax-class-properties@6.13.0

|     +-- babel-plugin-transform-decorators@6.24.1

|     | +-- babel-helper-explode-class@6.24.1

|     | | `-- babel-helper-bindify-decorators@6.24.1

|     | `-- babel-plugin-syntax-decorators@6.13.0

|     `-- babel-preset-stage-3@6.24.1

|       +-- babel-plugin-transform-async-generator-functions@6.24.1

|       | `-- babel-plugin-syntax-async-generators@6.13.0

|       `-- babel-plugin-transform-object-rest-spread@6.26.0

|         `-- babel-plugin-syntax-object-rest-spread@6.13.0

`-- UNMET PEER DEPENDENCY webpack@2 || 3 || 4

javascript 라이브러리 검색할 때마다

require를 많이 본다.

라이브러리를 도대체 어디서 구해야 하는 지

npm으로 install해도 어떻게 사용해야 하는지 몰라서 한참 해맸다.

일단 저 require어는 require.js 가 아니다.

그리고 apache나 tomcat같은거로 백날 올려봤자 안된다.

nodeJs서버로 돌려야 사용가능하다.

기존 서버스크립트 개발 관점에서 nodeJs 라이브러리만 껴놓으려고 생각한거 자체가 잘못이다.

nodeJs는 자바스크립트를 해석하는 도구다.

html을 파싱하지 못한다.

javascript파일을 실행한다고 생각하면 된다.

node main.js

CLI에서 이와 같이 실행하는게 끝이다.

java 클래스 실행하는 것하고 똑같다.

그러니 당연히 http서버가 아니다.

java로 서버 만들듯이 라이브러리 임포트해서 해야한다.

하지만 훨씬 쉽다.

http와 fs가 없다고 뜨면

node i http fs

하고 모듈을 설치하면 된다.

html파일로 forward한다는 개념이 아니라

그냥 파일 읽어서 스트링을 브라우저에 던져준다고 생각하면 된다. (실제로는 binary로 간다.)

resources는 실제 파일 경로를 찾아간다. 이부분은 각자 편하게 해결해주면 된다.

위 파일을 main.js로 저장했다면 node main.js로 서버를 돌릴 수 있다.

nodeJs는 가장 많은 javascript 라이브러리를 가지고 있으니 프론트엔드 개발자는 nodeJs를 쓰면 많이 이점이 있다.

함수형 프로그래밍에는 여러 공통 함수들이 있다.

예시만 보면 파악할 수 있는 것들이 많은데

reduce는 예시만 봐서는 도대체 뭔지 하나도 모르겠다.

그리고 객체 지향 프로그램에서는 reduce와 같은 패턴을 쓸 경우가 많이 없어서 생각해 내기 쉽지 않다.

하지만 가장 기초적인 최대, 최소값을 구하는 경우 대표적으로 reduce 함수를 사용한다.

getMax함수는 numbers라는 숫자로 구성된 배열을 넣으면

max값과 다음 배열값을 계속 비교한 후

max값을 반환한다.

배열을 넣었더니 number로 줄어든 값을 반환했다.

reduce라는 것은 이렇게 뭔가 나열된 것을 하나로 줄여서 반환한다는 뜻이다.

그리고 reduce는 함수를 인수로 받는다.

그리고 이 함수는 이항함수이고 max와 number가 인수가 된다.

자바스크립트는 첫번째 인자에 reduce값을 반환한다.

이를 람다식으로 표현하면 아래와 같다.

(max, number) => max

이게 기본적으로 reduce에 들어가는 함수 형식이다.

return값만 필요한 알고리즘으로 구현해 주면 된다.

아래와 같이 더 줄여 쓸 수 있다.

추가로 reduce를 사용할 때 초기값 설정이 필요한 경우가 있다.

javascript에서는 reduce의 두번째 인자가 초기값인데

reduce( function, initialValue) 다.

function의 두번째 인자랑 헷갈리지 말긴 바란다.

초기화된 객체가 필요한 경우

reduce( function, {} )

이렇게 해주면 된다.

동시성 관련 좋은 링크가 있다.
http://winterbe.com/posts/2015/04/07/java8-concurrency-tutorial-thread-executor-examples/

stream을 배우고 parellal을 배우다보면 동시성 문제를 만난다.

두가지 해결 방법이 있다.

1. atomic 클래스를 써서 쓰레드 세이프를 확보하는 방법
2. reduce사용

IntStream의 sum 메서드를 타고 들어가면 reduce쓰는데 까지 나온다.

stream 방식은 reduce가 어울린다고 생각하지만 1,2 의 특성적 차이점이 뭔지 잘 모르겠다.