[성능 베이스캠프 미션] 병민(윤병인) 미션 제출합니다.

package.json

@@ -49,6 +49,7 @@
     "file-loader": "^6.2.0",
     "html-loader": "^2.1.2",
     "html-webpack-plugin": "^5.3.2",
+    "mini-css-extract-plugin": "^2.6.1",
     "prettier": "^2.3.2",
     "style-loader": "^3.2.1",
     "ts-loader": "^9.3.1",

src/App.tsx

@@ -1,20 +1,29 @@
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 
 import Home from './pages/Home/Home';
-import Search from './pages/Search/Search';
 
 import NavBar from './components/NavBar/NavBar';
 import Footer from './components/Footer/Footer';
 
 import './App.css';
+import React from 'react';
+
+const Search = React.lazy(() => import('./pages/Search/Search'));
 
 const App = () => {
   return (
     <Router>
       <NavBar />
       <Routes>
         <Route path="/" element={<Home />} />
-        <Route path="/search" element={<Search />} />
+        <Route
+          path="/search"
+          element={
+            <React.Suspense fallback={<>loading...</>}>
+              <Search />
+            </React.Suspense>
+          }
+        />
       </Routes>
       <Footer />
     </Router>

src/pages/Home/Home.tsx

@@ -2,7 +2,7 @@ import { useRef } from 'react';
 import { Link } from 'react-router-dom';
 import classNames from 'classnames/bind';
 
-import heroImage from '../../assets/images/hero.png';
+import heroImage from '../../assets/images/hero.jpg';
 import trendingGif from '../../assets/images/trending.gif';
 import findGif from '../../assets/images/find.gif';
 import freeGif from '../../assets/images/free.gif';

src/pages/Home/components/CustomCursor/CustomCursor.module.css

@@ -12,8 +12,8 @@
   content: '';
   display: block;
   position: absolute;
-  top: -12px;
-  left: -12px;
+  top: 0px;
+  left: 0px;
   width: 24px;
   height: 24px;
   background: rgba(255, 255, 255, 0.25);

src/pages/Home/components/CustomCursor/CustomCursor.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useRef } from 'react';
-import useMousePosition from '../../hooks/useMousePosition';
 
 import styles from './CustomCursor.module.css';
 
@@ -9,15 +8,26 @@ type CustomCursorProps = {
 
 const CustomCursor = ({ text = '' }: CustomCursorProps) => {
   const [...cursorTextChars] = text;
-  const mousePosition = useMousePosition();
   const cursorRef = useRef<HTMLDivElement>(null);
 
+  const updateCursorPosition = (e: MouseEvent) => {
+    if (!cursorRef.current) return;
+    const { current: $cursor } = cursorRef;
+    const { pageX, pageY } = e;
+    const cursorBefore = window.getComputedStyle($cursor, ':before');
+    const { width: widthPx, height: heightPx } = cursorBefore;
+    const width = parseInt(widthPx, 10);
+    const height = parseInt(heightPx, 10);
+    const xCoordinate = pageX - Math.floor(width / 2) + 'px';
+    const yCoordinate = pageY - Math.floor(height / 2) + 'px';
+    cursorRef.current.style.transform = `translate3d(${xCoordinate},${yCoordinate}, 0px)`;
+  };
+
   useEffect(() => {
-    if (cursorRef.current) {
-      cursorRef.current.style.top = `${mousePosition.pageY}px`;
-      cursorRef.current.style.left = `${mousePosition.pageX}px`;
-    }
-  }, [mousePosition]);
+    console.log('useEffect is called');
+    window.addEventListener('mousemove', updateCursorPosition);
+    return () => window.removeEventListener('mousemove', updateCursorPosition);
+  }, [cursorRef.current, updateCursorPosition]);
 
   return (
     <div ref={cursorRef} className={styles.cursor}>

webpack.config.js

@@ -2,29 +2,41 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const Dotenv = require('dotenv-webpack');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const AggresiveWebpackPlugin = require('webpack/lib/optimize/AggressiveSplittingPlugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = {
   entry: './src/index.tsx',
   resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'] },
   output: {
-    filename: 'bundle.js',
     path: path.join(__dirname, '/dist'),
+    filename: '[chunkhash].js',
+    chunkFilename: '[chunkhash].js',
     clean: true
   },
   devServer: {
-    hot: true,
     open: true,
     historyApiFallback: true
   },
-  devtool: 'source-map',
   plugins: [
     new HtmlWebpackPlugin({
       template: './index.html'
     }),
     new CopyWebpackPlugin({
       patterns: [{ from: './public', to: './public' }]
     }),
-    new Dotenv()
+    new Dotenv(),
+    new AggresiveWebpackPlugin({
+      // https://webpack-v3.jsx.app/plugins/aggressive-splitting-plugin/
+      minSize: 30000, // Byte, split point. Default: 30720
+      maxSize: 50000, // Byte, maxsize of per file. Default: 51200
+      chunkOverhead: 0, // Default: 0
+      entryChunkMultiplicator: 1 // Default: 1
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[id].css'
+    })
   ],
   module: {
     rules: [
@@ -37,7 +49,7 @@ module.exports = {
       },
       {
         test: /\.css$/i,
-        use: ['style-loader', 'css-loader']
+        use: [MiniCssExtractPlugin.loader, 'css-loader']
       },
       {
         test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
@@ -48,7 +60,5 @@ module.exports = {
       }
     ]
   },
-  optimization: {
-    minimize: false
-  }
+  optimization: {}
 };