🎉 React v17, mui 업그레이드, Webpack 최적화 (#195)

* 🎉 react v.17, material-ui v.5 업데이트, 마이그레이션

* ⚡ 데이트피커 라이브러리 변경

* 🐛 MobileDatePicker 모달 날짜 변경 반영 수정

* ⚡ material v5 반영 및 업데이트, DatePicker에 moment 반영

* ♻️ mui 라이브러리 업데이트 & Searchbar 데이트피커 반영

* 🐛 메유 업데이트하면서 깨지는 스타일 수정

* 🐛 material-ui 업데이트 글로벌 스타일 마이그레이션

* ✨ 방문기록 날짜검색 날짜 클릭시 모달 닫히기

* ⚡ mui 버전 업데이트 반영, nvmrc 추가

* ⚡ nvmrc 삭제 및 node v16 업데이트

* 🐛 서버실행 에러 관련 라이브러리 추가

* ♻️ lint 명령어 수정 후 전체 파일 lint 실행

* ✨ ProgressBarPlugin 설치

* ♻️ webpack 개선 : cahce, souremap, resolve 수정

* ✨ craco-esbuild 추가해서 esbuild-loader로 번들링

* ♻️ webpack5버전에만 있는 cache 속성 제거

* ✨ eslint, prettier 재설정 및 적용

* ✨ sass 추가: m1 맥북과 node-sass 이슈때문에 추가

* 🐛 webpackConfig.resolve 버그 해결

* 🐛 package-lock 파일 업데이트

* 🐛 서버실행 버그 & 스크롤 css 수정

Co-authored-by: anxiubin <[email protected]>

.eslintrc.js

@@ -2,8 +2,8 @@ const path = require('path')
 
 module.exports = {
   root: true,
-  extends: ['react-app', 'plugin:prettier/recommended'],
-  plugins: ['react-hooks', 'import', 'prettier'],
+  extends: ['eslint:recommended', 'plugin:react/recommended', 'eslint-config-prettier', 'plugin:prettier/recommended'],
+  plugins: ['react', 'react-hooks', 'import', 'prettier'],
   env: {
     browser: true,
     node: true,
@@ -37,6 +37,8 @@ module.exports = {
     },
   },
   rules: {
+    'react/prop-types': [0],
+    'no-unused-vars': 'off',
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
     'import/order': [
@@ -58,6 +60,11 @@ module.exports = {
         },
       },
     ],
-    'prettier/prettier': 'error',
+    'prettier/prettier': [
+      'error',
+      {
+        endOfLine: 'auto',
+      },
+    ],
   },
 }

.gitignore

@@ -6,6 +6,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.eslintcache
 
 # testing
 /coverage
@@ -25,3 +26,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 rest.http
+

craco.config.js

@@ -2,24 +2,13 @@ const path = require('path')
 
 const { whenDev, whenProd } = require('@craco/craco')
 const CracoAlias = require('craco-alias')
+const CracoEsbuildPlugin = require('craco-esbuild')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ProgressBarPlugin = require('progress-bar-webpack-plugin')
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
 const ManifestPlugin = require('webpack-manifest-plugin')
 
 module.exports = {
-  babel: {
-    presets: [
-      [
-        '@babel/preset-env',
-        {
-          targets: {
-            chrome: '55',
-          },
-        },
-      ],
-    ],
-  },
-
   webpack: {
     configure: (webpackConfig, { paths }) => {
       // multiple entry point config
@@ -93,10 +82,13 @@ module.exports = {
       whenDev(() => {
         webpackConfig.optimization.runtimeChunk = 'single'
         webpackConfig.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'server', openAnalyzer: false }))
+        webpackConfig.devtool = 'eval-cheap-module-source-map'
       })
 
       whenProd(() => {
         webpackConfig.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' }))
+        webpackConfig.plugins.push(new ProgressBarPlugin())
+        webpackConfig.devtool = false
       })
 
       return webpackConfig
@@ -111,5 +103,18 @@ module.exports = {
         baseUrl: './src',
       },
     },
+    {
+      plugin: CracoEsbuildPlugin,
+      options: {
+        esbuildLoaderOptions: {
+          loader: 'jsx',
+          target: 'es2015',
+        },
+        esbuildMinimizerOptions: {
+          target: 'es2015',
+          css: true,
+        },
+      },
+    },
   ],
 }