본문 바로가기
🎨

Frontend 335개 용어

React·Next.js·CSS·성능 지표·빌드 도구

Canvas API👁 140
픽셀 단위 그리기 브라우저 API. 2D 그래픽·게임·차트에 사용.
CSP (Frontend)👁 140
script-src·style-src·img-src 등으로 리소스 로드 출처 제한. XSS 방어.
DaisyUI v5👁 140
Tailwind 기반 컴포넌트 라이브러리. 클래스 이름만으로.
mdsvex👁 140
Svelte용 MDX. Svelte 컴포넌트를 Markdown에서.
not-found.tsx👁 140
404 페이지. notFound() 함수와 조합.
Prefetch / Preload👁 140
rel=preload (즉시·중요), rel=prefetch (다음 페이지용).
Remix Loader👁 140
Remix의 라우트별 데이터 페칭 함수. 서버에서 실행.
Astro Islands👁 139
Astro의 Island Architecture. client:load·client:visible directive.
inert Attribute👁 139
하위 트리 전체를 상호작용·접근성에서 제외. 모달 외부 비활성.
Next.js Turbopack👁 139
Next.js 16 기본 번들러. Webpack 대체. Rust 기반 초고속.
PostCSS👁 139
CSS를 AST로 변환하는 플러그인 기반 도구. Autoprefixer가 대표.
Qwik Resumability👁 139
하이드레이션 제거. 서버가 멈춘 지점부터 이어받기.
React Compiler 자동 메모👁 139
useMemo·useCallback·memo 자동 삽입. 수동 최적화 제거.
rem vs em👁 139
rem은 루트(html) 기준, em은 부모 기준의 상대 단위. rem이 예측 가능해 주로 사용.
Rspack / Rsbuild👁 139
ByteDance의 Rust Webpack 호환 번들러·상위 도구.
taintObjectReference / taintUniqueValue👁 139
React 19 taint API. 서버 전용 객체가 클라이언트로 새는 것을 차단.
CLS 최적화👁 138
width/height 속성·aspect-ratio·font-display·skeleton.
MutationObserver👁 138
DOM 변경을 비동기로 관찰하는 API. 서드파티 스크립트·동적 UI 감시.
Next.js Middleware👁 138
모든 요청 전에 실행되는 Edge 런타임 함수. 인증·리다이렉트.
Open Props👁 138
디자인 토큰을 CSS 커스텀 속성으로 제공하는 라이브러리.
Parallel Routes👁 138
Next.js의 동시 여러 페이지 렌더. Slot 패턴.
React 19 Form Actions👁 138
form 태그에 action 함수 직접 연결. 서버·클라이언트 공용.
React 19 `use` Hook👁 138
Promise·Context를 조건부로 읽는 훅. Suspense와 조합.
React Portal👁 138
컴포넌트를 DOM 트리의 다른 곳에 렌더. 모달·툴팁 구현.
React Router v7 (Remix 통합)👁 138
Remix v3 = React Router v7. 브랜드 통합.
Remix SPA Mode👁 138
Remix를 서버 없이 SPA로 배포. 정적 호스팅.
Astro DB👁 137
Astro 통합 DB 레이어. Drizzle + libSQL.
clamp()👁 137
값을 최소·선호·최대로 조합하는 CSS 함수. 반응형 타이포에 필수.
Docusaurus 3👁 137
Meta의 정적 문서 사이트. v3는 MDX 3·React 18.
NPM Package👁 137
npm 레지스트리에 배포되는 자바스크립트 패키지. package.json·main·exports.
React Compiler Auto-Memo👁 137
useMemo·useCallback·React.memo를 컴파일러가 자동 삽입.
BEM👁 136
Block Element Modifier
CSS 네이밍 컨벤션. block__element--modifier 형식으로 격리.
Browser DevTools👁 136
브라우저 내장 개발 도구. Element·Console·Network·Performance.
CSS 현대 색상👁 136
color-mix()·oklch()·color-contrast(). 2024 모던 CSS.
Declarative Shadow DOM👁 136
SSR에서 Shadow DOM을 HTML 속성으로 선언. 하이드레이션 불필요.
File System Access API👁 136
브라우저가 로컬 파일을 읽고 쓰는 API. VS Code Web·Figma.
Import Maps👁 136
브라우저 네이티브 모듈 별칭·버전 관리. 번들러 없이도 동작.
Intercepting Routes👁 136
Next.js 라우트 인터셉트. Instagram 스타일 모달 라우팅.
Lockfile👁 136
의존성의 정확한 버전을 고정하는 파일. package-lock.json·pnpm-lock.yaml.
OKLCH Color👁 136
지각 균일 색공간. 밝기·채도 직관적, 디자인 토큰에 최적.
Priority Hints👁 136
fetchpriority 속성으로 리소스 우선순위 지정.
React Compiler👁 136
자동 메모화 컴파일러. useMemo·useCallback 불필요.
Zustand Slices 패턴👁 136
큰 store를 여러 slice로 분할해 관리하는 Zustand 조직화 패턴.
Biome👁 135
Rome 후속 Rust 기반 JS 툴체인. ESLint + Prettier 통합.
Headless CMS 옵션👁 135
Sanity·Contentful·Strapi·Payload·Directus·TinaCMS 비교.
<dialog> Element👁 135
네이티브 모달. showModal()·::backdrop·포커스 트랩.
Nuxt 4 기본값👁 135
app 디렉터리·TypeScript 강화·빌드 속도.
Qwik Resumability👁 135
Qwik의 핵심. 서버 상태를 이어받아 Hydration 없이 즉시 상호작용.
React.memo👁 135
컴포넌트 리렌더 최적화. props 변경 시에만 재렌더.
CSS contain👁 134
브라우저 렌더 최적화 힌트. 레이아웃·페인트 범위 제한.