[개인 미션 - 성능 오답노트] 윤생(이윤성) 미션 제출합니다.

package.json

@@ -18,10 +18,10 @@
   "dependencies": {
     "@giphy/js-fetch-api": "^4.1.1",
     "@giphy/js-types": "^4.2.1",
+    "@react-icons/all-files": "^4.1.0",
     "classnames": "^2.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.4.0",
     "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
@@ -33,13 +33,14 @@
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^5.35.1",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@webpack-cli/generators": "^2.2.0",
     "babel-loader": "^8.2.2",
     "copy-webpack-plugin": "^9.0.1",
     "css-loader": "^6.2.0",
+    "css-minimizer-webpack-plugin": "^5.0.1",
     "dotenv-webpack": "^7.0.3",
-    "eslint": "^7.32.0",
+    "eslint": "^8.0.1",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-standard-with-typescript": "^22.0.0",
     "eslint-plugin-hooks": "^0.4.3",
@@ -50,11 +51,13 @@
     "file-loader": "^6.2.0",
     "html-loader": "^2.1.2",
     "html-webpack-plugin": "^5.3.2",
+    "mini-css-extract-plugin": "^2.7.6",
     "prettier": "^2.3.2",
     "style-loader": "^3.2.1",
     "ts-loader": "^9.3.1",
     "typescript": "^4.8.2",
-    "webpack": "^5.50.0",
+    "webpack": "^5.88.2",
+    "webpack-bundle-analyzer": "^4.9.1",
     "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^3.11.2"
   },

src/App.tsx

@@ -1,7 +1,8 @@
+import React, { Suspense } from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 
-import Home from './pages/Home/Home';
-import Search from './pages/Search/Search';
+const Home = React.lazy(() => import('./pages/Home/Home'));
+const Search = React.lazy(() => import('./pages/Search/Search'));
 
 import NavBar from './components/NavBar/NavBar';
 import Footer from './components/Footer/Footer';
@@ -10,13 +11,15 @@ import './App.css';
 
 const App = () => {
   return (
-    <Router basename={'/perf-basecamp'}>
+    <Router>
       <NavBar />
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/search" element={<Search />} />
-      </Routes>
-      <Footer />
+      <Suspense>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/search" element={<Search />} />
+        </Routes>
+        <Footer />
+      </Suspense>
     </Router>
   );
 };

src/pages/Home/Home.tsx

@@ -2,10 +2,10 @@ import { useRef } from 'react';
 import { Link } from 'react-router-dom';
 import classNames from 'classnames/bind';
 
-import heroImage from '../../assets/images/hero.png';
-import trendingGif from '../../assets/images/trending.gif';
-import findGif from '../../assets/images/find.gif';
-import freeGif from '../../assets/images/free.gif';
+import heroImage from '../../assets/images/hero.webp';
+import trendingMp4 from '../../assets/images/trending.mp4';
+import findMp4 from '../../assets/images/find.mp4';
+import freeMp4 from '../../assets/images/free.mp4';
 
 import FeatureItem from './components/FeatureItem/FeatureItem';
 import CustomCursor from './components/CustomCursor/CustomCursor';
@@ -33,9 +33,9 @@ const Home = () => {
         <div className={styles.featureSectionWrapper}>
           <h2 className={styles.featureTitle}>Features</h2>
           <div className={styles.featureItemContainer}>
-            <FeatureItem title="See trending gif" imageSrc={trendingGif} />
-            <FeatureItem title="Find gif for free" imageSrc={findGif} />
-            <FeatureItem title="Free for everyone" imageSrc={freeGif} />
+            <FeatureItem title="See trending gif" videoSrc={trendingMp4} />
+            <FeatureItem title="Find gif for free" videoSrc={findMp4} />
+            <FeatureItem title="Free for everyone" videoSrc={freeMp4} />
           </div>
           <Link to="/search">
             <button className={styles.linkButton}>start search</button>

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

@@ -1,7 +1,8 @@
-import { useEffect, useRef } from 'react';
+import { memo, useEffect, useRef } from 'react';
 import useMousePosition from '../../hooks/useMousePosition';
 
 import styles from './CustomCursor.module.css';
+import CustomCursorChar from './CustomCursorChar';
 
 type CustomCursorProps = {
   text: string;
@@ -14,20 +15,17 @@ const CustomCursor = ({ text = '' }: CustomCursorProps) => {
 
   useEffect(() => {
     if (cursorRef.current) {
-      cursorRef.current.style.top = `${mousePosition.pageY}px`;
-      cursorRef.current.style.left = `${mousePosition.pageX}px`;
+      cursorRef.current.style.transform = `translate(${mousePosition.pageX}px, ${mousePosition.pageY}px)`;
     }
   }, [mousePosition]);
 
   return (
     <div ref={cursorRef} className={styles.cursor}>
       {cursorTextChars.map((char, index) => (
-        <span key={index} className={styles.character}>
-          {char}
-        </span>
+        <CustomCursorChar key={index} char={char} />
       ))}
     </div>
   );
 };
 
-export default CustomCursor;
+export default memo(CustomCursor);

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

@@ -0,0 +1,11 @@
+import styles from './CustomCursor.module.css';
+import { memo } from 'react';
+interface CustomeCursorCharProps {
+  char: string;
+}
+
+const CustomCursorChar = ({ char }: CustomeCursorCharProps) => {
+  return <span className={styles.character}>{char}</span>;
+};
+
+export default memo(CustomCursorChar);

src/pages/Home/components/FeatureItem/FeatureItem.tsx

@@ -2,13 +2,15 @@ import styles from './FeatureItem.module.css';
 
 type FeatureItemProps = {
   title: string;
-  imageSrc: string;
+  videoSrc: string;
 };
 
-const FeatureItem = ({ title, imageSrc }: FeatureItemProps) => {
+const FeatureItem = ({ title, videoSrc }: FeatureItemProps) => {
   return (
     <div className={styles.featureItem}>
-      <img className={styles.featureImage} src={imageSrc} />
+      <video className={styles.featureImage} autoPlay loop playsInline muted>
+        <source src={videoSrc} type="video/mp4" />
+      </video>
       <div className={styles.featureTitleBg}></div>
       <h4 className={styles.featureTitle}>{title}</h4>
     </div>

src/pages/Search/components/GifItem/GifItem.module.css

@@ -14,7 +14,7 @@
 }
 
 .gifItem:hover {
-  top: -0.75rem;
+  transform: translateY(-0.75rem);
 }
 
 .gifImage {

src/pages/Search/components/GifItem/GifItem.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { GifImageModel } from '../../../../models/image/gifImage';
 
 import styles from './GifItem.module.css';
@@ -16,4 +17,4 @@ const GifItem = ({ imageUrl = '', title = '' }: GifItemProps) => {
   );
 };
 
-export default GifItem;
+export default memo(GifItem);

src/pages/Search/components/HelpPanel/HelpPanel.module.css

@@ -24,7 +24,7 @@
 }
 
 .selectedItemContainer.showSheet {
-  right: 0;
+  transform: translateX(-320px);
   opacity: 1;
 }
 

src/pages/Search/components/HelpPanel/HelpPanel.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { AiOutlineInfo, AiOutlineClose } from 'react-icons/ai';
+import { AiOutlineInfo } from '@react-icons/all-files/ai/AiOutlineInfo';
+import { AiOutlineClose } from '@react-icons/all-files/ai/AiOutlineClose';
 import classNames from 'classnames/bind';
 
 import { artists } from '../../../../constants/artistData';

src/pages/Search/components/SearchBar/SearchBar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AiOutlineSearch } from 'react-icons/ai';
+import { AiOutlineSearch } from '@react-icons/all-files/ai/AiOutlineSearch';
 
 import styles from './SearchBar.module.css';
 

src/pages/Search/hooks/useGifSearch.tsx

@@ -57,7 +57,15 @@ const useGifSearch = () => {
   useEffect(() => {
     const fetch = async () => {
       if (status === SEARCH_STATUS.BEFORE_SEARCH) {
-        const gifs: GifImageModel[] = await gifAPIService.getTrending();
+        if (!sessionStorage.getItem('trending')) {
+          const newTrendingGifs = await gifAPIService.getTrending();
+          sessionStorage.setItem('trending', JSON.stringify(newTrendingGifs));
+        }
+
+        const cachedTrendingGifs = sessionStorage.getItem('trending');
+        if (!cachedTrendingGifs) return;
+
+        const gifs: GifImageModel[] = JSON.parse(cachedTrendingGifs);
 
         setGifList(gifs);
       }

src/types/images.d.ts

@@ -2,3 +2,5 @@ declare module '*.png';
 declare module '*.jpg';
 declare module '*.gif';
 declare module '*.svg';
+declare module '*.webp';
+declare module '*.mp4';

webpack.config.js

@@ -2,12 +2,15 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const Dotenv = require('dotenv-webpack');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = {
   entry: './src/index.tsx',
   resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'] },
   output: {
-    filename: 'bundle.js',
+    filename: '[contenthash].js',
     path: path.join(__dirname, '/dist'),
     clean: true
   },
@@ -24,7 +27,9 @@ module.exports = {
     new CopyWebpackPlugin({
       patterns: [{ from: './public', to: './public' }]
     }),
-    new Dotenv()
+    new Dotenv(),
+    new BundleAnalyzerPlugin(),
+    new MiniCssExtractPlugin()
   ],
   module: {
     rules: [
@@ -37,10 +42,10 @@ 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,
+        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif|webp|mp4)$/i,
         loader: 'file-loader',
         options: {
           name: 'static/[name].[ext]'
@@ -49,6 +54,7 @@ module.exports = {
     ]
   },
   optimization: {
-    minimize: false
+    minimize: true,
+    minimizer: [new CssMinimizerPlugin(), '...']
   }
 };