WEB/REACT

6. 예제 - 일정관리

AKI 2019. 6. 25. 00:35

 

환경버전

node : 12.4.0

yarn : 1.16.0

Visual Studio Code : 1.35.1

브라우저 : 크롬 / 버전 75.0.3770.100(공식 빌드) (64비트)


초기생성

PS C:\Users\kcom\Documents\TEST1> npx create-react-app daily


warning ..\..\..\package.json: No license field
[1/4] Resolving packages...
warning react-scripts > fsevents@2.0.6: Please update: there are crash fixes
[2/4] Fetching packages...
info fsevents@1.2.9: The platform "win32" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@2.0.6: The platform "win32" is incompatible with this module.
info "fsevents@2.0.6" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin@1.6.0" has unmet peer dependency "typescript@*".  
warning "react-scripts > @typescript-eslint/parser@1.6.0" has unmet peer dependency "typescript@*".warning "react-scripts > @typescript-eslint/eslint-plugin > @typescript-eslint/typescript-estree@1.6.0" has 
unmet peer dependency "typescript@*".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.10.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev".
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 11 new dependencies.
info Direct dependencies
├─ react-dom@16.8.6├─ react-scripts@3.0.1
└─ react@16.8.6
info All dependencies
├─ babel-preset-react-app@9.0.0
├─ eslint-config-react-app@4.0.1
├─ fork-ts-checker-webpack-plugin@1.1.1
├─ microevent.ts@0.1.1
├─ react-app-polyfill@1.0.1
├─ react-dev-utils@9.0.1
├─ react-dom@16.8.6
├─ react-error-overlay@5.1.6
├─ react-scripts@3.0.1
├─ react@16.8.6
└─ worker-rpc@0.1.1
Done in 20.34s.

Success! Created daily at C:\Users\kcom\Documents\TEST1\daily
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 daily
  yarn start

Happy hacking!

 

Sass 설치

PS C:\Users\kcom\Documents\TEST1\daily> yarn add node-sass
yarn add v1.16.0
warning ..\..\..\package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.0.6: The platform "win32" is incompatible with this module.
info "fsevents@2.0.6" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.9: The platform "win32" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin@1.6.0" has unmet peer dependency "typescript@*".  
warning "react-scripts > @typescript-eslint/parser@1.6.0" has unmet peer dependency "typescript@*".
warning "react-scripts > @typescript-eslint/eslint-plugin > @typescript-eslint/typescript-estree@1.6.0" has 
unmet peer dependency "typescript@*".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.10.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 35 new dependencies.
info Direct dependencies
├─ node-sass@4.12.0
├─ react-dom@16.8.6
└─ react@16.8.6
info All dependencies
├─ amdefine@1.0.1
├─ array-find-index@1.0.2
├─ async-foreach@0.1.3
├─ block-stream@0.0.9
├─ camelcase-keys@2.1.0
├─ currently-unhandled@0.4.1
├─ fstream@1.0.12
├─ gaze@1.1.3
├─ globule@1.2.1
├─ in-publish@2.0.0
├─ indent-string@2.1.0
├─ is-finite@1.0.2
├─ is-utf8@0.2.1
├─ js-base64@2.5.1
├─ load-json-file@1.1.0
├─ loud-rejection@1.6.0
├─ lru-cache@4.1.5
├─ map-obj@1.0.1
├─ meow@3.7.0
├─ node-gyp@3.8.0
├─ node-sass@4.12.0
├─ nopt@3.0.6
├─ pseudomap@1.0.2
├─ react-dom@16.8.6
├─ react@16.8.6
├─ read-pkg@1.1.0
├─ redent@1.0.0
├─ repeating@2.0.1
├─ sass-graph@2.2.4
├─ scss-tokenizer@0.2.3
├─ stdout-stream@1.4.1
├─ strip-indent@1.0.1
├─ tar@2.2.2
├─ trim-newlines@1.0.0
└─ true-case-path@1.0.3
Done in 10.71s.

 

Sass-loader 커스텀 마이징

PS C:\Users\kcom\Documents\TEST1\daily> yarn eject
yarn run v1.16.0
warning ..\..\..\package.json: No license field
$ react-scripts eject
NOTE: Create React App 2+ supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

? Are you sure you want to eject? This action is permanent. (y/N) y

 

? Are you sure you want to eject? This action is permanent. Yes
Ejecting...

Copying files into C:\Users\kcom\Documents\TEST1\daily
  Adding \config\env.js to the project
  Adding \config\modules.js to the project
  Adding \config\paths.js to the project
  Adding \config\pnpTs.js to the project
  Adding \config\webpack.config.js to the project
  Adding \config\webpackDevServer.config.js to the project
  Adding \config\jest\cssTransform.js to the project
  Adding \config\jest\fileTransform.js to the project
  Adding \scripts\build.js to the project
  Adding \scripts\start.js to the project
  Adding \scripts\test.js to the project

Updating the dependencies
  Removing react-scripts from dependencies
  Adding @babel/core to dependencies
  Adding @svgr/webpack to dependencies
  Adding @typescript-eslint/eslint-plugin to dependencies
  Adding @typescript-eslint/parser to dependencies
  Adding babel-eslint to dependencies
  Adding babel-jest to dependencies
  Adding babel-loader to dependencies
  Adding babel-plugin-named-asset-import to dependencies
  Adding babel-preset-react-app to dependencies
  Adding camelcase to dependencies
  Adding case-sensitive-paths-webpack-plugin to dependencies
  Adding css-loader to dependencies
  Adding dotenv to dependencies
  Adding dotenv-expand to dependencies
  Adding eslint to dependencies
  Adding eslint-config-react-app to dependencies
  Adding eslint-loader to dependencies
  Adding eslint-plugin-flowtype to dependencies
  Adding eslint-plugin-import to dependencies
  Adding eslint-plugin-jsx-a11y to dependencies
  Adding eslint-plugin-react to dependencies
  Adding eslint-plugin-react-hooks to dependencies
  Adding file-loader to dependencies
  Adding fs-extra to dependencies
  Adding html-webpack-plugin to dependencies
  Adding identity-obj-proxy to dependencies
  Adding is-wsl to dependencies
  Adding jest to dependencies
  Adding jest-environment-jsdom-fourteen to dependencies
  Adding jest-resolve to dependencies
  Adding jest-watch-typeahead to dependencies
  Adding mini-css-extract-plugin to dependencies
  Adding optimize-css-assets-webpack-plugin to dependencies
  Adding pnp-webpack-plugin to dependencies
  Adding postcss-flexbugs-fixes to dependencies
  Adding postcss-loader to dependencies
  Adding postcss-normalize to dependencies
  Adding postcss-preset-env to dependencies
  Adding postcss-safe-parser to dependencies
  Adding react-app-polyfill to dependencies
  Adding react-dev-utils to dependencies
  Adding resolve to dependencies
  Adding sass-loader to dependencies
  Adding semver to dependencies
  Adding style-loader to dependencies
  Adding terser-webpack-plugin to dependencies
  Adding ts-pnp to dependencies
  Adding url-loader to dependencies
  Adding webpack to dependencies
  Adding webpack-dev-server to dependencies
  Adding webpack-manifest-plugin to dependencies
  Adding workbox-webpack-plugin to dependencies

Updating the scripts
  Replacing "react-scripts start" with "node scripts/start.js"
  Replacing "react-scripts build" with "node scripts/build.js"
  Replacing "react-scripts test" with "node scripts/test.js"

Configuring package.json
  Adding Jest configuration
  Adding Babel preset
  Adding ESLint configuration

Running yarn...
warning ..\..\..\package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.9: The platform "win32" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > @typescript-eslint/eslint-plugin@1.6.0" has unmet peer dependency "typescript@*".
warning " > @typescript-eslint/parser@1.6.0" has unmet peer dependency "typescript@*".
warning "@typescript-eslint/eslint-plugin > @typescript-eslint/typescript-estree@1.6.0" has unmet peer dependency "typescript@*".
warning "@typescript-eslint/eslint-plugin > tsutils@3.10.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev".
[4/4] Building fresh packages...
success Saved lockfile.
Ejected successfully!

fatal: not a git repository (or any of the parent directories): .git
Staged ejected files for commit.

Please consider sharing why you ejected in this survey:
  http://goo.gl/forms/Bi6CZjk1EqsdelXk1

Done in 24.43s.

 

config/webpack.config.js

{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'sass-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},

부분을 아래와같이 수정

{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
}).concat({
loader: require.resolve('sass-loader'),
options: {
includePaths: [paths.appSrc + '/styles'],
sourceMap: isEnvProduction && shouldUseSourceMap
}
}
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},

 

open-color 설치

PS C:\Users\kcom\Documents\TEST1\daily> yarn add open-color
yarn add v1.16.0
warning ..\..\..\package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.9: The platform "win32" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > @typescript-eslint/eslint-plugin@1.6.0" has unmet peer dependency "typescript@*".
warning " > @typescript-eslint/parser@1.6.0" has unmet peer dependency "typescript@*".
warning "@typescript-eslint/eslint-plugin > @typescript-eslint/typescript-estree@1.6.0" has unmet peer dependency "typescript@*".
warning "@typescript-eslint/eslint-plugin > tsutils@3.10.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 125 new dependencies.
info Direct dependencies
└─ open-color@1.7.0
info All dependencies
├─ agent-base@4.3.0
├─ agentkeepalive@3.5.2
├─ ansi-align@2.0.0
├─ ansicolors@0.3.2
├─ ansistyles@0.1.3
├─ aproba@2.0.0
├─ archy@1.0.0
├─ boxen@1.3.0
├─ builtins@1.0.3
├─ byline@5.0.0
├─ byte-size@5.0.1
├─ cacache@11.3.3
├─ call-limit@1.1.1
├─ capture-stack-trace@1.0.1
├─ cidr-regex@2.0.10
├─ cli-boxes@1.0.0
├─ cli-columns@3.1.2
├─ cli-table3@0.5.1
├─ clone@1.0.4
├─ cmd-shim@2.0.2
├─ colors@1.3.3
├─ columnify@1.5.4
├─ config-chain@1.1.12
├─ configstore@3.1.2
├─ create-error-class@3.0.2
├─ crypto-random-string@1.0.0
├─ defaults@1.0.3
├─ detect-indent@5.0.0
├─ duplexer3@0.1.4
├─ editor@1.0.0
├─ encoding@0.1.12
├─ err-code@1.1.2
├─ es6-promise@4.2.8
├─ fs-vacuum@1.2.10
├─ genfun@5.0.0
├─ gentle-fs@2.0.1
├─ global-dirs@0.1.1
├─ got@6.7.1
├─ http-cache-semantics@3.8.1
├─ http-proxy-agent@2.1.0
├─ https-proxy-agent@2.2.1
├─ humanize-ms@1.2.1
├─ import-lazy@2.1.0
├─ init-package-json@1.10.3
├─ is-cidr@3.0.0
├─ is-installed-globally@0.1.0
├─ is-npm@1.0.0
├─ is-redirect@1.0.0
├─ is-retry-allowed@1.1.0
├─ jsonparse@1.3.1
├─ JSONStream@1.3.5
├─ latest-version@3.1.0
├─ lazy-property@1.0.0
├─ libcipm@3.0.3
├─ libnpm@2.0.1
├─ libnpmaccess@3.0.1
├─ libnpmconfig@1.2.1
├─ libnpmorg@1.0.0
├─ libnpmpublish@1.1.1
├─ libnpmsearch@2.0.1
├─ libnpmteam@1.0.1
├─ libnpx@10.2.0
├─ lockfile@1.0.4
├─ lodash._baseindexof@3.1.0
├─ lodash._baseuniq@4.6.0
├─ lodash._bindcallback@3.0.1
├─ lodash._cacheindexof@3.0.2
├─ lodash._createcache@3.1.2
├─ lodash._createset@4.0.3
├─ lodash._getnative@3.9.1
├─ lodash._root@3.0.1
├─ lodash.clonedeep@4.5.0
├─ lodash.restparam@3.6.1
├─ lodash.union@4.6.0
├─ lodash.without@4.4.0
├─ lowercase-keys@1.0.1
├─ meant@1.0.1
├─ node-fetch-npm@2.0.2
├─ npm-audit-report@1.3.2
├─ npm-cache-filename@1.0.2
├─ npm-install-checks@3.0.0
├─ npm-profile@4.0.1
├─ npm-user-validate@1.0.0
├─ npm@6.9.0
├─ open-color@1.7.0
├─ opener@1.5.1
├─ package-json@4.0.1
├─ pacote@9.5.1
├─ prepend-http@1.0.4
├─ promzard@0.3.0
├─ proto-list@1.2.4
├─ protoduck@5.0.1
├─ qrcode-terminal@0.12.0
├─ query-string@6.8.1
├─ qw@1.0.1
├─ read-cmd-shim@1.0.1
├─ read-installed@4.0.3
├─ read-package-tree@5.2.2
├─ read@1.0.7
├─ registry-auth-token@3.4.0
├─ registry-url@3.1.0
├─ retry@0.12.0
├─ semver-diff@2.1.0
├─ sha@2.0.1
├─ slide@1.1.6
├─ smart-buffer@4.0.2
├─ socks-proxy-agent@4.0.2
├─ socks@2.3.2
├─ sorted-object@2.0.1
├─ sorted-union-stream@2.1.3
├─ split-on-first@1.1.0
├─ stream-iterate@1.2.0
├─ strict-uri-encode@2.0.0
├─ term-size@1.2.0
├─ timed-out@4.0.1
├─ tiny-relative-date@1.3.0
├─ umask@1.1.0
├─ unique-string@1.0.0
├─ unzip-response@2.0.1
├─ update-notifier@2.5.0
├─ url-parse-lax@1.0.0
├─ util-extend@1.0.3
├─ wcwidth@1.0.1
├─ widest-line@2.0.1
└─ write-file-atomic@2.4.3
Done in 15.72s.

 

파일옮기기 (components 폴더와 styles 폴더)

리액트를 다루는 기술 / 10장 파일소스 : https://github.com/velopert/learning-react/tree/master/10/todo-list/src

 

 

velopert/learning-react

[길벗] 리액트를 다루는 기술 서적에서 사용되는 코드. Contribute to velopert/learning-react development by creating an account on GitHub.

github.com

9장은 이 주소 참고 : https://velog.io/@velopert/react-component-styling

 

 

 

index.js 변경

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

를 아래로 변경

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/main.scss';
import App from './components/App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

 

시작

PS C:\Users\kcom\Documents\TEST1\daily> yarn start
You can now view daily in the browser.

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

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

// 서버를 취소하고자할때 Ctrl+C 누르면 아래와같이 물어봄 Y 누르고 엔터하면 서버정지됨
일괄 작업을 끝내시겠습니까 (Y/N)? y

 

결과)

반응형