환경버전
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
결과)
반응형
'WEB > REACT' 카테고리의 다른 글
| 8. 리덕스 활용 예제 (0) | 2019.07.09 |
|---|---|
| 7. 리덕스 (상태 관리 라이브러리) (0) | 2019.07.08 |
| 5. 리액트 컴포넌트 스타일링 방식 (0) | 2019.06.21 |
| 4. 컴포넌트의 라이플사이클 메서드 (0) | 2019.06.19 |
| 3. 이벤트 핸들링, ref (0) | 2019.06.19 |
