[개인 미션 - 성능 오답노트] 해리(최현웅) 미션 제출합니다.

index.html

@@ -7,6 +7,25 @@
     <link rel="icon" href="./public/favicon.ico" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+      rel="preload"
+      as="style"
+    />
+    <link
+      rel="preload"
+      href="https://fonts.gstatic.com/s/josefinsans/v32/Qw3aZQNVED7rKGKxtqIqX5EUDXx4Vn8sig.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="https://fonts.gstatic.com/s/josefinsans/v32/Qw3EZQNVED7rKGKxtqIqX5EUCEx6XHgOiJM6.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
     <link
       href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
       rel="stylesheet"

package.json

@@ -9,22 +9,23 @@
   "scripts": {
     "build:dev": "webpack --mode=development",
     "build:prod": "webpack --mode=production --node-env=production",
+    "prod": "webpack serve --mode=production",
+    "dev": "webpack serve --mode=development",
     "watch": "webpack --watch",
-    "serve": "webpack serve --mode=development",
     "prettier": "prettier --write .",
     "deploy": "npm run build:prod && npx gh-pages -d dist"
   },
   "keywords": [],
   "author": "woowacourse",
-  "homepage": "https://{username}.github.io/perf-basecamp",
+  "homepage": "https://hwinkr.github.io/perf-basecamp",
   "license": "MIT",
   "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": {
@@ -41,6 +42,7 @@
     "babel-loader": "^8.2.2",
     "copy-webpack-plugin": "^9.0.1",
     "css-loader": "^6.2.0",
+    "css-minimizer-webpack-plugin": "7.0.0",
     "dotenv-webpack": "^7.0.3",
     "eslint": "^8.0.1",
     "eslint-config-prettier": "^8.5.0",
@@ -53,18 +55,28 @@
     "file-loader": "^6.2.0",
     "html-loader": "^2.1.2",
     "html-webpack-plugin": "^5.3.2",
+    "image-minimizer-webpack-plugin": "4.1.0",
+    "mini-css-extract-plugin": "2.9.1",
     "prettier": "^2.3.2",
+    "sharp": "0.33.5",
     "style-loader": "^3.2.1",
     "ts-loader": "^9.3.1",
     "typescript": "^4.8.2",
     "webpack": "^5.88.2",
-    "webpack-cli": "^4.7.2",
+    "webpack-bundle-analyzer": "4.10.2",
+    "webpack-cli": "4.10.0",
     "webpack-dev-server": "^3.11.2"
   },
+  "sideEffects": [
+    "*.css"
+  ],
   "babel": {
     "presets": [
       "@babel/preset-env",
-      "@babel/preset-react"
+      "@babel/preset-react",
+      {
+        "modules": "false"
+      }
     ],
     "plugins": [
       "@babel/plugin-transform-runtime"

src/App.tsx

@@ -1,24 +1,28 @@
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 
-import Home from './pages/Home/Home';
-import Search from './pages/Search/Search';
+const Home = lazy(() => import('./pages/Home/Home'));
+const Search = lazy(() => import('./pages/Search/Search'));
 
 import NavBar from './components/NavBar/NavBar';
 import Footer from './components/Footer/Footer';
 
 import './App.css';
+import { lazy, Suspense } from 'react';
 
 const App = () => {
   return (
-    <Router basename={'/perf-basecamp'}>
+    <Router>
       <NavBar />
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/search" element={<Search />} />
-      </Routes>
+      <Suspense
+        fallback={<div style={{ width: '100vw', height: '100vh' }}>loading...please wait...</div>}
+      >
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/search" element={<Search />} />
+        </Routes>
+      </Suspense>
       <Footer />
     </Router>
   );
 };
-
 export default App;

src/apis/gifAPIService.ts

@@ -2,7 +2,7 @@ import { GifsResult } from '@giphy/js-fetch-api';
 import { IGif } from '@giphy/js-types';
 
 import { GifImageModel } from '../models/image/gifImage';
-import { apiClient, ApiError } from '../utils/apiClient';
+import { apiClient, apiClientWithCache, ApiError } from '../utils/apiClient';
 
 const API_KEY = process.env.GIPHY_API_KEY;
 if (!API_KEY) {
@@ -43,7 +43,7 @@ export const gifAPIService = {
    * @returns {Promise<GifImageModel[]>}
    * @ref https://developers.giphy.com/docs/api/endpoint#!/gifs/trending
    */
-  getTrending: async (): Promise<GifImageModel[]> => {
+  getTrending(): Promise<GifImageModel[]> {
     const url = apiClient.appendSearchParams(new URL(`${BASE_URL}/trending`), {
       api_key: API_KEY,
       limit: `${DEFAULT_FETCH_COUNT}`,
@@ -52,6 +52,14 @@ export const gifAPIService = {
 
     return fetchGifs(url);
   },
+
+  getTrendingWithCache: async () => {
+    return await apiClientWithCache({
+      queryKey: 'trending-gifs',
+      staleTime: 1000 * 60 * 5,
+      queryFn: gifAPIService.getTrending
+    });
+  },
   /**
    * 검색어에 맞는 gif 목록을 가져옵니다.
    * @param {string} keyword

src/components/NavBar/NavBar.tsx

@@ -7,7 +7,7 @@ const NavBar = () => {
     <header className={styles.header}>
       <nav className={styles.nav}>
         <Link to="/">
-          <span className={styles.logo}>memegle</span>
+          <span className={styles.logo}>Memegle</span>
         </Link>
         <Link to="/search">
           <button className={styles.searchPageButton}>start search</button>

src/pages/Home/Home.tsx

@@ -2,7 +2,8 @@ import { useRef } from 'react';
 import { Link } from 'react-router-dom';
 import classNames from 'classnames/bind';
 
-import heroImage from '../../assets/images/hero.png';
+import heroImageWebp from '../../assets/images/hero.png?as=webp';
+import heroImageJpg 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';
@@ -21,7 +22,15 @@ const Home = () => {
   return (
     <>
       <section className={styles.heroSection}>
-        <img className={styles.heroImage} src={heroImage} alt="hero image" />
+        <picture>
+          <source srcSet={heroImageWebp} type="image/webp" />
+          <img
+            className={styles.heroImage}
+            src={heroImageJpg}
+            alt="hero image"
+            fetchPriority="high"
+          />
+        </picture>
         <div className={styles.projectTitle}>
           <h1 className={styles.title}>Memegle</h1>
           <h3 className={styles.subtitle}>gif search engine for you</h3>
@@ -44,7 +53,7 @@ const Home = () => {
           </Link>
         </div>
       </section>
-      <CustomCursor text="memegle" />
+      <CustomCursor text="쑤쑤나는해리야" />
     </>
   );
 };

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

@@ -6,6 +6,7 @@
   z-index: 10;
   padding: 0 16px;
   color: var(--white);
+  will-change: transform;
 }
 
 .cursor::before {
@@ -23,6 +24,8 @@
 .cursor span {
   display: inline-block;
   animation: wave-text 1s ease-in-out infinite;
+  will-change: transform;
+  transform: translateZ(0);
 }
 
 .cursor span:nth-of-type(1) {

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

@@ -14,8 +14,7 @@ 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]);
 

src/pages/Home/hooks/useScrollEvent.tsx

@@ -1,17 +1,31 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 type ScrollHandler = () => void;
 
 const useScrollEvent = (onScroll: ScrollHandler) => {
+  const requestAnimationFrameRef = useRef<number | null>(null);
+
   useEffect(() => {
-    const handleScroll = (event: Event) => {
-      onScroll();
+    const handleScroll = () => {
+      if (requestAnimationFrameRef.current) {
+        cancelAnimationFrame(requestAnimationFrameRef.current);
+        return;
+      }
+
+      requestAnimationFrameRef.current = requestAnimationFrame(() => {
+        onScroll();
+        requestAnimationFrameRef.current = null;
+      });
     };
 
     window.addEventListener('scroll', handleScroll);
 
     return () => {
       window.removeEventListener('scroll', handleScroll);
+
+      if (requestAnimationFrameRef.current) {
+        cancelAnimationFrame(requestAnimationFrameRef.current);
+      }
     };
   }, [onScroll]);
 };

src/pages/Search/components/ArtistInfo/ArtistInfo.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { Artist } from '../../../../models/help/artist';
 
 import styles from './ArtistInfo.module.css';
@@ -21,4 +22,4 @@ const ArtistInfo = ({ artist }: ArtistProps) => {
   );
 };
 
-export default ArtistInfo;
+export default memo(ArtistInfo);

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

@@ -10,7 +10,7 @@
 
 .selectedItemContainer {
   position: fixed;
-  right: -320px;
+  right: 0;
   top: 0;
   width: 320px;
   height: 100%;
@@ -19,12 +19,14 @@
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
+  transform: translateX(100%);
   opacity: 0;
   transition: 0.5s all cubic-bezier(0.82, 0.085, 0.395, 0.895);
+  will-change: transform, opacity;
 }
 
 .selectedItemContainer.showSheet {
-  right: 0;
+  transform: translateX(0);
   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 ArtistList from '../ArtistList/ArtistList';

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

@@ -74,7 +74,7 @@ const useGifSearch = () => {
       if (status !== SEARCH_STATUS.BEFORE_SEARCH) return;
 
       try {
-        const gifs = await gifAPIService.getTrending();
+        const gifs = await gifAPIService.getTrendingWithCache();
         setGifList(gifs);
       } catch (error) {
         handleError(error);

src/types/images.d.ts

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

src/utils/apiClient.ts

@@ -1,3 +1,5 @@
+import cache from './cache';
+
 export class ApiError extends Error {
   constructor(public status: number, message?: string) {
     super(message);
@@ -22,3 +24,24 @@ export const apiClient = {
     return newUrl;
   }
 };
+
+interface ApiClientWithCacheArgs<T> {
+  queryFn: () => Promise<T>;
+  queryKey: string;
+  staleTime: number;
+}
+
+export const apiClientWithCache = async <T>({
+  queryFn,
+  queryKey,
+  staleTime
+}: ApiClientWithCacheArgs<T>) => {
+  const cachedData = cache.get<T>(queryKey);
+
+  if (cachedData && cache.isValidCache(queryKey)) return cachedData;
+
+  const newData = await queryFn();
+  cache.set(queryKey, newData, staleTime);
+
+  return newData;
+};