caadiq
6e2159cf67
개발자도구 Performance 분석 결과 CLS 0.17로 레이아웃 이동이 큼. JSDelivr Maplestory.css의 font-display: swap이 폰트 도착 시 텍스트 너비를 swap 시켜서 카드 애니메이션 중에 레이아웃 튀어 버벅임 발생. - JSDelivr CSS 링크 제거하고 @font-face를 index.html에 직접 선언하며 font-display: optional 로 변경 - woff2만 참조 (fallback 포맷 제거) - cdn.jsdelivr.net preconnect 추가해 첫 방문 시에도 빠르게 시도 첫 방문 시: fallback(Noto Sans KR)으로 즉시 렌더, Maplestory가 100ms 내 도착하지 못하면 그대로 유지. 이후 캐시된 재방문부터는 정상 적용. 레이아웃 이동 0, 애니메이션 부드럽게 진행. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| public | ||
| src | ||
| .dockerignore | ||
| .gitignore | ||
| Dockerfile | ||
| eslint.config.js | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| vite.config.js | ||
React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Oxc
- @vitejs/plugin-react-swc uses SWC
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the ESLint configuration
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.