const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
 
module.exports = {
  entry: './src/index.tsx',
  resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'] },
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, '/dist'),
    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(),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/i,
        exclude: /node_modules/,
        use: {
          loader: 'ts-loader',
        },
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        loader: 'file-loader',
        options: {
          name: 'static/[name].[ext]',
        },
      },
    ],
  },
  optimization: {
    minimize: false,
  },
};

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';
 
  return {
    entry: './src/index.tsx',
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.jsx'],
      mainFields: ['module', 'browser', 'main'],
    },
    output: {
      filename: isProduction ? '[name].[contenthash].js' : '[name].bundle.js',
      chunkFilename: isProduction ? '[name].[contenthash].js' : '[name].chunk.js',
      path: path.join(__dirname, 'dist'),
      clean: true,
    },
    devServer: {
      hot: true,
      open: true,
      historyApiFallback: true,
      compress: true,
      port: 3000,
    },
    devtool: isProduction ? 'hidden-source-map' : 'source-map',
    plugins: [
      new HtmlWebpackPlugin({
        template: './index.html',
        scriptLoading: 'defer',
        minify: isProduction
          ? {
              removeComments: true,
              collapseWhitespace: true,
              removeRedundantAttributes: true,
              minifyJS: true,
              minifyCSS: true,
            }
          : false,
      }),
      new CopyWebpackPlugin({ patterns: [{ from: './public', to: './public' }] }),
      new Dotenv(),
      new MiniCssExtractPlugin({
        filename: isProduction ? '[name].[contenthash].css' : '[name].css',
      }),
      ...(isProduction
        ? [
            new CompressionPlugin({
              algorithm: 'gzip',
              test: /\.(js|css|html|svg)$/,
              threshold: 8192,
              minRatio: 0.8,
            }),
          ]
        : []),
    ],
    module: {
      rules: [
        {
          test: /\.(js|jsx|ts|tsx)$/i,
          exclude: /node_modules/,
          use: { loader: 'ts-loader' },
        },
        {
          test: /\.css$/i,
          use: [isProduction ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader'],
        },
        {
          test: /\.(png|jpe?g|gif|webp|svg)$/i,
          type: 'asset',
          generator: {
            filename: isProduction ? 'static/[name].[contenthash:8][ext]' : 'static/[name][ext]',
          },
          parser: {
            dataUrlCondition: { maxSize: 8 * 1024 },
          },
        },
        {
          test: /\.(eot|ttf|woff|woff2|mp4)$/i,
          type: 'asset/resource',
          generator: {
            filename: isProduction ? 'static/[name].[contenthash:8][ext]' : 'static/[name][ext]',
          },
        },
      ],
    },
    optimization: {
      minimize: isProduction,
      minimizer: [
        new TerserPlugin({
          parallel: true,
          extractComments: false,
          terserOptions: {
            compress: {
              drop_console: isProduction,
              drop_debugger: true,
              pure_funcs: ['console.log'],
            },
            mangle: true,
            format: { comments: false },
          },
        }),
        new CssMinimizerPlugin(),
      ],
      usedExports: true,
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          react: {
            test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
            name: 'react',
            priority: 10,
            chunks: 'all',
          },
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            priority: -10,
            chunks: 'all',
          },
        },
      },
      runtimeChunk: 'single',
    },
  };
};

{
  test: /\.(png|jpe?g|gif|webp|svg)$/i,
  type: 'asset',
  generator: {
    filename: isProduction ? 'static/[name].[contenthash:8][ext]' : 'static/[name][ext]'
  },
  parser: {
    dataUrlCondition: { maxSize: 8 * 1024 } // 8KB 이하 파일은 DataURL로 인라인 처리
  }
},
{
  test: /\.(eot|ttf|woff|woff2|mp4)$/i, // mp4 지원 추가
  type: 'asset/resource',
  generator: {
    filename: isProduction ? 'static/[name].[contenthash:8][ext]' : 'static/[name][ext]'
  }
}

<img
  className={styles.heroImage}
  src={heroImage}
  alt='Memegle Hero image'
  width={1500}
  height={1001}
  loading='eager'
  fetchPriority='high'
  decoding='async'
/>

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <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="stylesheet"
  />
  <link rel="preload" as="image" href="<%= require('./src/assets/images/hero.webp') %>" />
  <title>memegle - gif search engine for you</title>
</head>

import Home from './pages/Home';
import Search from './pages/Search';
 
function App() {
  return (
    <Routes>
      <Route path='/' element={<Home />} />
      <Route path='/search' element={<Search />} />
    </Routes>
  );
}

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { Suspense, lazy } from 'react';
 
import Home from './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';
 
const App = () => {
  return (
    <Router>
      <NavBar />
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/search' element={<Search />} />
        </Routes>
      </Suspense>
      <Footer />
    </Router>
  );
};
 
export default App;

optimization: {
    ...
    usedExports: true,
    sideEffects: false,
    ...
}

// Trending 데이터 캐시
interface TrendingCache {
  data: GifImageModel[] | null;
  timestamp: number;
  expireTime: number; // 30분 = 30 * 60 * 1000ms
}
 
const trendingCache: TrendingCache = {
  data: null,
  timestamp: 0,
  expireTime: 30 * 60 * 1000, // 30분
};
 
const isCacheValid = (cache: TrendingCache): boolean => {
  return cache.data !== null && Date.now() - cache.timestamp < cache.expireTime;
};

export const gifAPIService = {
  /**
   * treding gif 목록을 가져옵니다.
   * @returns {Promise<GifImageModel[]>}
   * @ref https://developers.giphy.com/docs/api/endpoint#!/gifs/trending
   */
  getTrending: async (): Promise<GifImageModel[]> => {
    // 캐시가 유효한 경우 캐시된 데이터 반환
    if (isCacheValid(trendingCache)) {
      console.log('🚀 Trending data loaded from cache');
      return trendingCache.data!;
    }
 
    console.log('📡 Fetching trending data from API');
    const url = apiClient.appendSearchParams(new URL(`${BASE_URL}/trending`), {
      api_key: API_KEY,
      limit: `${DEFAULT_FETCH_COUNT}`,
      rating: 'g',
    });
 
    const data = await fetchGifs(url);
 
    // 캐시 업데이트
    trendingCache.data = data;
    trendingCache.timestamp = Date.now();
 
    return data;
  },
  /**
   * 검색어에 맞는 gif 목록을 가져옵니다.
   * @param {string} keyword
   * @param {number} page
   * @returns {Promise<GifImageModel[]>}
   * @ref https://developers.giphy.com/docs/api/endpoint#!/gifs/search
   */
  searchByKeyword: async (keyword: string, page: number): Promise<GifImageModel[]> => {
    const url = apiClient.appendSearchParams(new URL(`${BASE_URL}/search`), {
      api_key: API_KEY,
      q: keyword,
      limit: `${DEFAULT_FETCH_COUNT}`,
      offset: `${page * DEFAULT_FETCH_COUNT}`,
      rating: 'g',
      lang: 'en',
    });
 
    return fetchGifs(url);
  },
};

// Before
const GifItem = ({ imageUrl = '', title = '' }: GifItemProps) => {
 
// After
const GifItem = memo(({ imageUrl = '', title = '' }: GifItemProps) => {

// Before
const loadMore = async (): Promise<void> => {
 
// After
const loadMore = useCallback(async (): Promise<void> => {
  // ... 동일한 로직
}, [currentPageIndex, searchKeyword]);

.cursor {
  will-change: transform;
  transform: translate(0, 0);
}

cursorRef.current.style.transform = `translate(${x}px, ${y}px)`;

/* Before */
.gifItem:hover {
  top: -0.75rem; /* ❌ Layout Shift 발생 */
}
 
/* After */
.gifItem:hover {
  transform: translateY(-0.75rem); /* ✅ GPU 처리 */
  will-change: transform;
}

.selectedItemContainer {
  transform: translateX(100%); /* 초기 숨김 */
  will-change: transform, opacity;
}
 
.selectedItemContainer.showSheet {
  transform: translateX(0); /* right: 0 대신 */
}

.gifItem:hover {
  top: -0.75rem; /* CPU가 Layout → Paint → Composite 모든 단계 처리 */
}

Performance Timeline:
[Layout][Paint][Composite] ← 모든 단계 실행
     ↓       ↓        ↓
   느림    무겁다   Frame Drop

.gifItem:hover {
  transform: translateY(-0.75rem); /* GPU가 Composite 단계만 처리 */
  will-change: transform;
}

Performance Timeline:
           [Composite] ← GPU에서 빠르게 처리
               ↓
           부드러움

1프레임 = 16.67ms (1000ms ÷ 60fps)

[프레임 1] → [프레임 2] → [프레임 3] → ...
   16ms       16ms       16ms

JavaScript 실행 → Style 계산 → Layout → Paint → Composite
      ↑
requestAnimationFrame 콜백이 여기서 실행됨

const handleMouseMove = (e: MouseEvent) => {
  setMousePosition({ x: e.clientX, y: e.clientY }); // 즉시 실행
};
 
window.addEventListener('mousemove', handleMouseMove);

import { useCallback, useEffect, useRef, useState } from 'react';
 
export type MousePosition = Partial<MouseEvent>;
 
const useMousePosition = () => {
  const [mousePosition, setMousePosition] = useState<MousePosition>({
    clientX: 0,
    clientY: 0,
    pageX: 0,
    pageY: 0,
    offsetX: 0,
    offsetY: 0,
  });
 
  const animationRef = useRef<number>();
 
  const updateMousePosition = useCallback((e: MouseEvent) => {
    const { clientX, clientY, pageX, pageY, offsetX, offsetY } = e;
 
    if (animationRef.current) {
      cancelAnimationFrame(animationRef.current);
    }
 
    animationRef.current = requestAnimationFrame(() => {
      setMousePosition({
        clientX,
        clientY,
        pageX,
        pageY,
        offsetX,
        offsetY,
      });
    });
  }, []);
 
  useEffect(() => {
    window.addEventListener('mousemove', updateMousePosition);
 
    return () => {
      window.removeEventListener('mousemove', updateMousePosition);
      if (animationRef.current) {
        cancelAnimationFrame(animationRef.current);
      }
    };
  }, [updateMousePosition]);
 
  return mousePosition;
};
 
export default useMousePosition;

시간축: 0ms → 4ms → 8ms → 12ms → 16ms (1프레임)
이벤트:  ↓     ↓     ↓      ↓      ↓
       요청   취소   요청    취소    요청 → 16ms에 1번만 실행
결과: 1번의 리렌더링 → 부드러운 애니메이션