chore: next.js project에도 bundle analyze와 부하 테스트트 스크립트 추가 (#ci-advancement)

Author: createhb21

pnpm-lock.yaml

@@ -1,3 +1,7 @@
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+});
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   experimental: {
@@ -37,4 +41,4 @@ const nextConfig = {
   },
 };
 
-export default nextConfig;
+module.exports = withBundleAnalyzer(nextConfig);

services/one-app/next.config.ts

@@ -15,7 +15,11 @@
     "lint:fix": "pnpm lint:es:fix && pnpm lint:etc:fix",
     "test": "jest",
     "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage"
+    "test:coverage": "jest --coverage",
+    "analyze": "ANALYZE=true next build",
+    "test:perf": "node scripts/performance-test.mjs",
+    "test:perf:load": "autocannon http://localhost:3000",
+    "test:perf:lighthouse": "lighthouse http://localhost:3000 --view"
   },
   "dependencies": {
     "@lexical/react": "^0.21.0",
@@ -47,6 +51,7 @@
   "devDependencies": {
     "@ahhachul/utils": "workspace:*",
     "@faker-js/faker": "^9.0.3",
+    "@next/bundle-analyzer": "^15.1.6",
     "@svgr/webpack": "^8.1.0",
     "@tanstack/react-query-devtools": "^5.59.16",
     "@testing-library/dom": "^10.4.0",
@@ -59,11 +64,14 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@types/react-lazy-load-image-component": "^1.6.4",
+    "autocannon": "^8.0.0",
     "autoprefixer": "^10.0.1",
     "clsx": "^2.1.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "lighthouse": "^12.3.0",
     "msw": "^2.5.2",
+    "puppeteer": "^24.1.1",
     "postcss": "^8",
     "tailwind-merge": "^2.5.4",
     "tailwindcss": "^3.3.0",

services/one-app/package.json

@@ -0,0 +1,31 @@
+import autocannon from 'autocannon';
+import lighthouse from 'lighthouse';
+import puppeteer from 'puppeteer';
+
+async function runPerformanceTests() {
+  // Lighthouse 테스트
+  const browser = await puppeteer.launch({ headless: true });
+  const results = await lighthouse('http://localhost:3000', {
+    port: new URL(browser.wsEndpoint()).port,
+    output: 'html',
+    logLevel: 'info',
+  });
+
+  console.log('Lighthouse scores:', results.lhr.categories.performance.score * 100);
+
+  // 부하 테스트
+  const loadTestResults = await autocannon({
+    url: 'http://localhost:3000',
+    connections: 10,
+    duration: 10,
+  });
+
+  console.log('Load test results:', {
+    'Avg Latency': loadTestResults.latency.average,
+    'Req/Sec': loadTestResults.requests.average,
+  });
+
+  await browser.close();
+}
+
+runPerformanceTests().catch(console.error);