gzip 압축 테스트 가이드 추가 및 커스텀 서버 설정

.idea/copilotDiffState.xml

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="CopilotDiffPersistence">
-    <option name="pendingDiffs">
-      <map>
-        <entry key="$PROJECT_DIR$/preview-gzip.js">
-          <value>
-            <PendingDiffInfo>
-              <option name="filePath" value="$PROJECT_DIR$/preview-gzip.js" />
-              <option name="updatedContent" value="import express from 'express';&#10;import expressStaticGzip from 'express-static-gzip';&#10;import { fileURLToPath } from 'url';&#10;import { dirname, join } from 'path';&#10;&#10;const __filename = fileURLToPath(import.meta.url);&#10;const __dirname = dirname(__filename);&#10;&#10;const app = express();&#10;const port = 4173;&#10;&#10;// gzip 압축 파일을 우선적으로 제공&#10;app.use(&#10;&#9;'/',&#10;&#9;expressStaticGzip(join(__dirname, '.svelte-kit/output/client'), {&#10;&#9;&#9;enableBrotli: false,&#10;&#9;&#9;orderPreference: ['gz'],&#10;&#9;&#9;serveStatic: {&#10;&#9;&#9;&#9;maxAge: '1d',&#10;&#9;&#9;&#9;setHeaders: (res, path) =&gt; {&#10;&#9;&#9;&#9;&#9;if (path.endsWith('.html')) {&#10;&#9;&#9;&#9;&#9;&#9;res.setHeader('Cache-Control', 'public, max-age=0');&#10;&#9;&#9;&#9;&#9;}&#10;&#9;&#9;&#9;}&#10;&#9;&#9;}&#10;&#9;})&#10;);&#10;&#10;app.listen(port, () =&gt; {&#10;&#9;console.log(`\n  ➜  Preview server with gzip: http://localhost:${port}/`);&#10;&#9;console.log(`  ➜  Press Ctrl+C to stop\n`);&#10;});&#10;" />
-            </PendingDiffInfo>
-          </value>
-        </entry>
-      </map>
-    </option>
-  </component>
-</project>

.idea/workspace.xml

@@ -4,13 +4,8 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="027e6af4-a007-480d-9766-cd603cf60fb1" name="변경" comment="">
+    <list default="true" id="027e6af4-a007-480d-9766-cd603cf60fb1" name="변경" comment="gzip 압축 플러그인 추가 및 개발 서버 설정 개선">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/pnpm-lock.yaml" beforeDir="false" afterPath="$PROJECT_DIR$/pnpm-lock.yaml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/lib/components/ui/input/input.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/ui/input/input.svelte" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/routes/demo/lucia/login/+page.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/routes/demo/lucia/login/+page.svelte" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/vite.config.ts" beforeDir="false" afterPath="$PROJECT_DIR$/vite.config.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -31,33 +26,35 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
+  <component name="PropertiesComponent">{
-  "keyToString": {
+  &quot;keyToString&quot;: {
-    "ModuleVcsDetector.initialDetectionPerformed": "true",
+    &quot;ModuleVcsDetector.initialDetectionPerformed&quot;: &quot;true&quot;,
-    "RunOnceActivity.ShowReadmeOnStart": "true",
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    "RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager.252": "true",
+    &quot;RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager.252&quot;: &quot;true&quot;,
-    "com.intellij.ml.llm.matterhorn.ej.ui.settings.DefaultAutoModeForALLUsers.v1": "true",
+    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
-    "com.intellij.ml.llm.matterhorn.ej.ui.settings.DefaultModelSelectionForGA.v1": "true",
+    &quot;SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
-    "git-widget-placeholder": "master",
+    &quot;com.intellij.ml.llm.matterhorn.ej.ui.settings.DefaultAutoModeForALLUsers.v1&quot;: &quot;true&quot;,
-    "ignore.virus.scanning.warn.message": "true",
+    &quot;com.intellij.ml.llm.matterhorn.ej.ui.settings.DefaultModelSelectionForGA.v1&quot;: &quot;true&quot;,
-    "junie.onboarding.icon.badge.shown": "true",
+    &quot;git-widget-placeholder&quot;: &quot;master&quot;,
-    "kotlin-language-version-configured": "true",
+    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
-    "last_opened_file_path": "C:/gitea/taisai-svelte",
+    &quot;junie.onboarding.icon.badge.shown&quot;: &quot;true&quot;,
-    "node.js.detected.package.eslint": "true",
+    &quot;kotlin-language-version-configured&quot;: &quot;true&quot;,
-    "node.js.detected.package.tslint": "true",
+    &quot;last_opened_file_path&quot;: &quot;C:/gitea/taisai-svelte&quot;,
-    "node.js.selected.package.eslint": "(autodetect)",
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
-    "node.js.selected.package.tslint": "(autodetect)",
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
-    "nodejs_package_manager_path": "pnpm",
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
-    "npm.build.executor": "Run",
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
-    "npm.db:push.executor": "Run",
+    &quot;nodejs_package_manager_path&quot;: &quot;pnpm&quot;,
-    "npm.dev.executor": "Run",
+    &quot;npm.build.executor&quot;: &quot;Run&quot;,
-    "prettierjs.PrettierConfiguration.Package": "C:\\gitea\\taisai-svelte\\node_modules\\prettier",
+    &quot;npm.db:push.executor&quot;: &quot;Run&quot;,
-    "settings.editor.selected.configurable": "com.github.copilot.settings.customization.CustomizationConfigurable",
+    &quot;npm.dev.executor&quot;: &quot;Run&quot;,
-    "to.speed.mode.migration.done": "true",
+    &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;C:\\gitea\\taisai-svelte\\node_modules\\prettier&quot;,
-    "ts.external.directory.path": "C:\\giteat\\taisai-svelte\\node_modules\\typescript\\lib",
+    &quot;settings.editor.selected.configurable&quot;: &quot;com.github.copilot.settings.customization.CustomizationConfigurable&quot;,
-    "vue.rearranger.settings.migration": "true"
+    &quot;to.speed.mode.migration.done&quot;: &quot;true&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;C:\\giteat\\taisai-svelte\\node_modules\\typescript\\lib&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
   <component name="RunManager" selected="npm.dev">
     <configuration name="build" type="js.build_tools.npm" nameIsGenerated="true">
       <package-json value="$PROJECT_DIR$/package.json" />
@@ -133,13 +130,29 @@
       <option name="presentableId" value="Default" />
       <updated>1763044396291</updated>
       <workItem from="1763044399917" duration="3349000" />
-      <workItem from="1763077156406" duration="2074000" />
+      <workItem from="1763077156406" duration="2309000" />
+      <workItem from="1763079842807" duration="196000" />
+      <workItem from="1763080079076" duration="640000" />
+      <workItem from="1763093782948" duration="2350000" />
     </task>
+    <task id="LOCAL-00001" summary="gzip 압축 플러그인 추가 및 개발 서버 설정 개선">
+      <option name="closed" value="true" />
+      <created>1763079503671</created>
+      <option name="number" value="00001" />
+      <option name="presentableId" value="LOCAL-00001" />
+      <option name="project" value="LOCAL" />
+      <updated>1763079503671</updated>
+    </task>
+    <option name="localTasksCounter" value="2" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
     <option name="version" value="3" />
   </component>
+  <component name="VcsManagerConfiguration">
+    <MESSAGE value="gzip 압축 플러그인 추가 및 개발 서버 설정 개선" />
+    <option name="LAST_COMMIT_MESSAGE" value="gzip 압축 플러그인 추가 및 개발 서버 설정 개선" />
+  </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
     <select />

GZIP_GUIDE.md

@@ -0,0 +1,104 @@
+# Gzip 압축 테스트 가이드
+
+## 빌드 및 Preview 명령어
+
+### 1. 빌드 (gzip 파일 생성)
+```bash
+pnpm build
+```
+- 원본 파일과 `.gz` 파일이 함께 생성됩니다
+- 1KB 이상의 JS, CSS 파일만 압축됩니다
+
+### 2. Preview 서버
+
+#### 일반 Preview (gzip 미지원)
+```bash
+pnpm preview
+```
+- Vite 기본 preview 서버
+- `.gz` 파일을 제공하지 않음
+- 원본 파일만 제공
+
+#### Gzip Preview (gzip 지원) ⭐
+```bash
+pnpm preview:gzip
+```
+- Express 기반 커스텀 서버
+- `.gz` 파일을 우선적으로 제공
+- 브라우저가 `Accept-Encoding: gzip`을 보내면 자동으로 `.gz` 파일 제공
+- `http://localhost:4173`에서 실행
+
+## Gzip 압축 확인 방법
+
+### 방법 1: 브라우저 개발자 도구 (권장)
+
+1. `pnpm preview:gzip` 실행
+2. 브라우저에서 `http://localhost:4173` 접속
+3. F12 (개발자 도구) → **Network** 탭
+4. 페이지 새로고침 (Ctrl+R 또는 F5)
+5. JS/CSS 파일 클릭
+6. **Headers** 탭에서 확인:
+   - **Response Headers**에 `Content-Encoding: gzip` 있으면 성공 ✅
+   - **Size** 열에서 `transferred` vs `resource` 크기 비교
+
+### 방법 2: curl 명령어
+
+```bash
+# Windows PowerShell
+curl -H "Accept-Encoding: gzip" -I http://localhost:4173/_app/immutable/chunks/ChUbo8MR.js
+
+# 출력에서 "Content-Encoding: gzip" 확인
+```
+
+### 방법 3: 파일 직접 확인
+
+```bash
+# .svelte-kit/output/client/_app/immutable/chunks 폴더에서
+# 원본 파일과 .gz 파일이 함께 존재하는지 확인
+
+dir .svelte-kit\output\client\_app\immutable\chunks\*.gz
+```
+
+## 예상 압축률
+
+| 파일 타입 | 원본 크기 | 압축 크기 | 압축률 |
+|----------|---------|---------|--------|
+| CSS      | 117 KB  | 18 KB   | 84%    |
+| JS (Large)| 36 KB  | 12 KB   | 67%    |
+| JS (Small)| 3.5 KB | 1.5 KB  | 58%    |
+
+## 주의사항
+
+1. **`pnpm preview`는 gzip을 지원하지 않습니다**
+   - 반드시 `pnpm preview:gzip` 사용
+
+2. **프로덕션 배포 시**
+   - Nginx, Apache 등 웹 서버에서 gzip 설정 필요
+   - Vercel, Netlify 등은 자동으로 처리
+
+3. **이미 압축된 파일은 효과 없음**
+   - 이미지(PNG, JPEG), 비디오 파일은 추가 압축 효과 없음
+
+## 설정 파일
+
+### vite.config.ts
+- `vite-plugin-compression`: 빌드 시 `.gz` 파일 생성
+- `threshold: 1024`: 1KB 이상 파일만 압축
+
+### preview-gzip.js
+- Express 기반 커스텀 preview 서버
+- `express-static-gzip`으로 `.gz` 파일 우선 제공
+
+## 트러블슈팅
+
+### Q: Network 탭에 `Content-Encoding: gzip`이 없어요
+- `pnpm preview` 대신 `pnpm preview:gzip` 사용
+- 브라우저 캐시 삭제 후 재시도 (Ctrl+Shift+R)
+
+### Q: 파일 크기가 줄어들지 않아요
+- Network 탭에서 **transferred** 크기 확인
+- **resource** 크기는 압축 해제 후 크기 (변하지 않음)
+
+### Q: 특정 파일만 압축하고 싶어요
+- `vite.config.ts`에서 `filter` 옵션 추가 가능
+

preview-gzip.js

@@ -0,0 +1,33 @@
+import express from 'express';
+import expressStaticGzip from 'express-static-gzip';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const app = express();
+const port = 4173;
+
+// gzip 압축 파일을 우선적으로 제공
+app.use(
+	'/',
+	expressStaticGzip(join(__dirname, '.svelte-kit/output/client'), {
+		enableBrotli: false,
+		orderPreference: ['gz'],
+		serveStatic: {
+			maxAge: '1d',
+			setHeaders: (res, path) => {
+				if (path.endsWith('.html')) {
+					res.setHeader('Cache-Control', 'public, max-age=0');
+				}
+			}
+		}
+	})
+);
+
+app.listen(port, () => {
+	console.log(`\n  ➜  Preview server with gzip: http://localhost:${port}/`);
+	console.log(`  ➜  Press Ctrl+C to stop\n`);
+});
+