Skip to content
Snippets Groups Projects
Commit 75f20cf3 authored by snacky's avatar snacky
Browse files

first commit

parent 2c6d0994
Branches
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 783 additions and 354 deletions
.babelrc 0 → 100644
+ 6
− 0
View file @ 75f20cf3
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
\ No newline at end of file
README.md
+ 247
− 68
View file @ 75f20cf3
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). # React Boilerplate Code
## Available Scripts - Express 기반으로 React App을 개발할 경우 사용하는 보일러플레이트 코드입니다.
- Webpack, Babel을 통해 React 코드를 빌드하도록 설정되어 있습니다.
In the project directory, you can run:
## 사전준비
### `npm start` - node v10.0+
- npm v6.0+
Runs the app in the development mode.<br> - yarn v1.13.0+
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
## Boilerplate Code 작성가이드
The page will reload if you make edits.<br>
You will also see any lint errors in the console. 1. `create-react-app`을 통한 기본코드 생성
```bash
### `npm test` $ npx create-react-app [project name]
```
Launches the test runner in the interactive watch mode.<br>
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 2. 가장 기본적인 파일을 제외하고는 모두 제거합니다.
```bash
### `npm run build` $ cd [project name]
$ rm public/favicon.ico public/manifest.json
Builds the app for production to the `build` folder.<br> $ rm src/App.css src/App.test.js src/logo.svg src/serviceWorker.js index.css
It correctly bundles React in production mode and optimizes the build for the best performance. ```
The build is minified and the filenames include the hashes.<br> 3. 제외한 코드들을 import 하는 부분들도 제거해줍니다. 위의 내용처럼 파일들을 삭제한 후 남은 3개 파일을 아래와같이 수정해줍니다.
Your app is ready to be deployed! - `public/index.html`
```html
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. <!DOCTYPE html>
<html lang="en">
### `npm run eject` <head>
<meta charset="utf-8" />
**Note: this is a one-way operation. Once you `eject`, you can’t go back!** <meta
name="viewport"
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. <title>React App</title>
</head>
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. <body>
<div id="root"></div>
## Learn More </body>
</html>
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). ```
- `src/App.js`
To learn React, check out the [React documentation](https://reactjs.org/). ```js
import React, { Component } from 'react';
### Code Splitting
class App extends Component {
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting render() {
return (
### Analyzing the Bundle Size <div>
Hello, React Boilerplate
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size </div>
);
### Making a Progressive Web App }
}
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
export default App;
### Advanced Configuration ```
- `src/index.js`
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration ```js
import React from 'react';
### Deployment import ReactDOM from 'react-dom';
import App from './App';
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
ReactDOM.render(<App />, document.getElementById('root'));
### `npm run build` fails to minify ```
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 4. `webpack`과 `webpack-cli`를 설치합니다.
```bash
$ yarn add -D webpack webpack-cli
```
5. `package.json`의 빌드 스크립트를 수정합니다.
```json
"scripts": {
"build": "webpack --mode production"
}
```
6. `babel`과 `babel`에서 사용할 `preset`들, 그리고 `babel-loader`를 설치합니다.
```bash
$ yarn add -D @babel/core babel-loader @babel/preset-env @babel/preset-react
```
7. 설치한 두 `preset`을 `.babelrc`라는 설정파일을 생성하고 적어줍니다.
- 프로젝트의 최상단에 `.babelrc` 파일을 생성합니다.
```bash
$ touch .babelrc
```
- 생성된 `.babelrc` 파일에 아래 내용을 작성합니다.
```json
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
```
8. `webpack` 설정을 위해 root 디렉토리에 `webpack.config.js`를 생성하고 `babel-loader`를 비롯한 설정을 해 줍니다.
- 경로에 대한 설정을 좀 더 깔끔하게 할 수 있도록 `path` 패키지를 설치합니다.
```bash
$ yarn add path
```
- 프로젝트의 최상단에 `webpack.config.js` 파일을 생성합니다.
```bash
$ touch webpack.config.js
```
- 생성된 `webpack.config.js` 파일에 아래 내용을 작성합니다.
```js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: { // 시작 위치
app: './src/index.js'
},
output: { // 결과가 출력될 위치, [name]은 entry에 설정된 key 값
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'public')
},
module: { // 사용할 모듈과 모듈을 사용할 파일, 여기서는 babel-loader로 js와 jsx를 로드
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}]
},
devServer: { // webpack-dev-server 사용시 사용될 contentBase 디렉토리
contentBase: './public',
hot: true
},
plugins: [ // webpack-dev-server 의 hot-reloading을 위한 플러그인 설정
new webpack.HotModuleReplacementPlugin()
]
};
```
9. `webpack.HotModuleReplacementPlugin()`이 적용되도록 `src/index.js`의 가장 밑에 아래 내용을 추가합니다.
```js
module.hot.accept()
```
10. `webpack.config.js`의 `output` 설정에 따라 `webpack`의 빌드 결과는 `public` 디렉토리에 `app.bundle.js`로 생성됩니다. 여기에 맞게 `public/index.html`에 해당 파일을 아래와 같이 import 해 줍니다.
```html
<script src="./app.bundle.js"></script>
```
11. `webpack`을 통한 빌드나, `webpack-dev-server`에 대한 시작이 용이하도록 `package.json` 파일의 `scripts` 부분을 아래와 같이 수정합니다.
```json
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production"
}
```
12. 아래의 두 command를 통해 `webpack` 빌드 수행 여부와, `webpack-dev-server`의 실행 여부를 확인합니다.
```bash
$ yarn build # public 디렉토리 안에 app.bundle.js 가 생성되면 정상적으로 수행된 것입니다.
$ yarn start # 곧바로 브라우저가 열리고, App.js 의 내용 수정시 곧바로 반영되는지 확인됩니다.
```
13. 서버 사이드를 `express`로 작성하기 위해 프로젝트의 최상단에 `server.js` 파일을 생성하고 내용을 작성합니다.
- `express`에서 `html` 파일을 렌더링하기 위해서 `ejs` 패키지를 설치합니다.
```bash
$ yarn add ejs
```
- 프로젝트 최상단에 `server.js`를 생성합니다.
```bash
$ touch server.js
```
- `server.js` 파일에 아래 내용을 작성합니다.
```js
const path = require('path');
const express = require('express');
const app = express();
const port = 3000;
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.set('views', path.resolve(__dirname, 'public'));
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
app.use(express.static(path.resolve(__dirname, 'public')));
app.get('/', (req, res, next) => {
res.render('index.html');
});
app.listen(port, () => console.log(`Listen on port ${port}`));
```
- 서비스 실행을 위해 아래 command를 실행합니다.
```bash
$ node server.js
```
- `server.js`가 `3000`번 포트로 listening 중이므로 브라우저에서 `localhost:3000`으로 접속하여 내용이 표시되는 것을 확인합니다.
14. 라우팅하는 파일들을 분리하고 싶을 경우 별도의 `routes` 디렉토리를 생성하고 아래쪽에 router 파일을 생성하고, `server.js`에 해당 라우터를 셋팅합니다.
- `routes` 디렉토리와 `sample_router.js` 파일을 생성합니다.
```bash
$ mkdir routes
$ cd routes
$ touch sample_router.js
```
- `sample_router.js`에 아래 내용을 작성합니다.
```js
const express = require('express');
const router = express.Router();
router.get('/', (req, res, next) => {
res.send('Hello, I am sample router');
});
module.exports = router;
```
- `sample_router.js` 사용을 위해, `server.js`에 아래 내용을 추가합니다.
```js
app.use('/sample_router', require('./routes/sample_router'));
```
- 서비스 실행을 위해 아래 command를 실행합니다.
```bash
$ node server.js
```
- 라우터가 제대로 적용되었는지 확인하기 위해, 브라우저를 통해 `localhost:3000/sample_router`에 접속하여 확인합니다.
15. 실제 서비스를 할 경우에는 `pm2`나 `forever` 등을 이용하는 것을 권장합니다.
- `pm2` 설치
```bash
$ yarn global add pm2
```
- global로 `pm2`를 설치했음에도 불구하고 `pm2` 실행이 불가능할 경우, 환경변수 PATH에 `$HOME/.yarn/bin`을 추가해줍니다.
```bash
$ export PATH=$PATH:$HOME/.yarn/bin
```
- `pm2`로 서비스를 실행합니다
```bash
$ pm2 start sever.js
```
- 서비스 중지 및 삭제시에는 아래 command를 이용합니다.
```bash
$ pm2 stop [App name] # 서비스 중지
$ pm2 delete [App name] # 서비스 삭제
```
package.json
+ 15
− 6
View file @ 75f20cf3
...@@ -3,15 +3,16 @@ ...@@ -3,15 +3,16 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"ejs": "^2.6.1",
"path": "^0.12.7",
"react": "^16.7.0", "react": "^16.7.0",
"react-dom": "^16.7.0", "react-dom": "^16.7.0",
"react-scripts": "2.1.3" "react-scripts": "2.1.3",
"webpack-dev-server": "^3.1.14"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "webpack-dev-server --open --mode development",
"build": "react-scripts build", "build": "webpack --mode production"
"test": "react-scripts test",
"eject": "react-scripts eject"
}, },
"eslintConfig": { "eslintConfig": {
"extends": "react-app" "extends": "react-app"
...@@ -21,5 +22,13 @@ ...@@ -21,5 +22,13 @@
"not dead", "not dead",
"not ie <= 11", "not ie <= 11",
"not op_mini all" "not op_mini all"
] ],
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.3.1",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1"
}
} }
public/app.bundle.js 0 → 100644
+ 31
− 0
View file @ 75f20cf3
This diff is collapsed.
public/favicon.ico deleted 100755 → 0
+ 0
− 0
View file @ 2c6d0994
public/favicon.ico

3.78 KiB

public/index.html
+ 6
− 35
View file @ 75f20cf3
...@@ -2,40 +2,11 @@ ...@@ -2,40 +2,11 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title> <title>React App</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!-- <script src="./app.bundle.js"></script>
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body> </body>
</html> </html>
public/manifest.json deleted 100755 → 0
+ 0
− 15
View file @ 2c6d0994
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
routes/sample_router.js 0 → 100644
+ 8
− 0
View file @ 75f20cf3
const express = require('express');
const router = express.Router();
router.get('/', (req, res, next) => {
res.send('Hello, I am sample router');
});
module.exports = router;
\ No newline at end of file
server.js 0 → 100644
+ 21
− 0
View file @ 75f20cf3
const path = require('path');
const express = require('express');
const app = express();
const port = 3000;
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.set('views', path.resolve(__dirname, 'public'));
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
app.use(express.static(path.resolve(__dirname, 'public')));
app.get('/', (req, res, next) => {
res.render('index.html');
});
app.use('/sample_router', require('./routes/sample_router'));
app.listen(port, () => console.log(`Listen on port ${port}`));
src/App.css deleted 100755 → 0
+ 0
− 32
View file @ 2c6d0994
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
src/App.js
+ 2
− 17
View file @ 75f20cf3
import React, { Component } from 'react'; import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component { class App extends Component {
render() { render() {
return ( return (
<div className="App"> <div>
<header className="App-header"> Hello, React Boilerplate!
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div> </div>
); );
} }
......
src/App.test.js deleted 100755 → 0
+ 0
− 9
View file @ 2c6d0994
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
src/index.css deleted 100755 → 0
+ 0
− 14
View file @ 2c6d0994
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
src/index.js
+ 1
− 6
View file @ 75f20cf3
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import './index.css';
import App from './App'; import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root')); ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change module.hot.accept()
// unregister() to register() below. Note this comes with some pitfalls. \ No newline at end of file
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();
src/logo.svg deleted 100755 → 0
+ 0
− 7
View file @ 2c6d0994
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
<g fill="#61DAFB">
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
<circle cx="420.9" cy="296.5" r="45.7"/>
<path d="M520.5 78.1z"/>
</g>
</svg>
src/serviceWorker.js deleted 100755 → 0
+ 0
− 135
View file @ 2c6d0994
// This optional code is used to register a service worker.
// register() is not called by default.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.
// To learn more about the benefits of this model and instructions on how to
// opt-in, read http://bit.ly/CRA-PWA
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit http://bit.ly/CRA-PWA'
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
);
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
if (
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}
webpack.config.js 0 → 100644
+ 28
− 0
View file @ 75f20cf3
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
app: './src/index.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'public')
},
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}]
},
devServer: {
contentBase: './public',
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
\ No newline at end of file
yarn.lock
+ 418
− 10
View file @ 75f20cf3
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

feedback to tooltime@ajou.ac.kr or hwan@ajou.ac.kr