빠른 참조
| 필요 상황 | 참고 문서 |
|---|---|
| HTML/CSS 문제 | html-css.md |
| JavaScript 패턴 | javascript.md |
| React/Next.js/프레임워크 | frameworks.md |
| 프로덕션 배포 | deploy.md |
| 성능/SEO/접근성 | performance.md |
중요한 규칙
- DOCTYPE 중요 —
<!DOCTYPE html>이 없으면 쿼크 모드가 활성화되어 레이아웃이 예측 불가능하게 깨집니다. - CSS 특수성은 계단식보다 우선 —
.class는 순서에 관계없이 요소 선택자를 재정의합니다. ===를 사용하고==는 사용하지 마세요 — 형 변환으로 인해"0" == false가true가 됩니다.- 루프에서의 Async/await —
forEach는await를 기다리지 않습니다.for...of나Promise.all을 사용하세요. - CORS는 서버 측 문제 — 클라이언트 측 해결책은 없습니다. 서버에서
Access-Control-Allow-Origin을 설정하세요. - 반응형 = 뷰포트 메타 —
<meta name="viewport">가 없으면 모바일에서 데스크탑 너비로 렌더링됩니다. preventDefault없는 폼 — 페이지가 새로고침됩니다. 제출 핸들러에서e.preventDefault()를 호출하세요.- 이미지에 크기 지정 필요 —
width/height가 없으면 레이아웃 시프트(CLS 페널티)가 발생합니다. - HTTPS 또는 차단됨 — 혼합 콘텐츠(HTTPS 페이지의 HTTP 리소스)는 브라우저에 의해 차단됩니다.
- 환경 변수 누출 —
NEXT_PUBLIC_*는 클라이언트에 노출됩니다. 비밀 값에는 절대 접두사를 사용하지 마세요.
일반적인 요청
"반응형으로 만들어 주세요" → 모바일 우선 CSS와 미디어 쿼리 사용; 320px, 768px, 1024px에서 테스트
"프로덕션에 배포" → Vercel/Netlify/VPS 패턴은 deploy.md 참조
"CORS 오류 수정" → 서버가 헤더를 보내야 함; 서버를 제어할 수 없으면 동일 출처 프록시 사용
"성능 개선" → Lighthouse 감사; LCP, CLS, FID에 집중; 폴드 아래 이미지는 지연 로딩
"SEO 추가" → 페이지별 제목/설명, 시맨틱 HTML, OG 태그, sitemap.xml
프레임워크 결정 트리
- 정적 콘텐츠, 빠른 빌드 → Astro 또는 일반 HTML
- MDX를 사용한 블로그/문서 → Astro 또는 Next.js App Router
- 인증이 필요한 대화형 앱 → Next.js 또는 Remix
- 완전한 SSR/ISR 제어 → Next.js
- 간단한 SPA, SEO 불필요 → Vite + React/Vue