🎨
Frontend — 335개 용어
React·Next.js·CSS·성능 지표·빌드 도구
Hydration👁 53
하이드레이션
서버가 보낸 정적 HTML에 JS를 부착해 인터랙티브하게 만드는 과정.
쿠키 속성👁 52
HttpOnly·Secure·SameSite·Domain·Path·Max-Age. 보안·동작 제어.
ResizeObserver👁 50
요소 크기 변경을 감지하는 API. window resize가 아닌 개별 요소 단위.
Angular👁 49
Google의 엔터프라이즈 프런트엔드 프레임워크. TypeScript 1급. RxJS·DI 기반.
ARIA👁 49
Accessible Rich Internet Applications
HTML 네이티브로 표현 어려운 의미를 속성으로 보강하는 W3C 표준.
Core Web Vitals👁 49
CWV
Google이 정의한 웹 성능 핵심 지표 3가지. LCP·CLS·INP. SEO 순위에 직접 영향.
LCP👁 49
Largest Contentful Paint
페이지 로드 후 가장 큰 콘텐츠 요소가 보이기까지의 시간. Core Web Vitals 핵심, 2.5초 이하 권장.
Biome👁 48
Rust로 작성된 올인원 JS/TS 툴체인. ESLint·Prettier를 100배 빠르게 대체.
Framer Motion👁 48
React의 선언적 애니메이션 라이브러리. 사실상 표준.
RSC👁 48
React Server Components
서버에서만 실행되어 번들에 포함되지 않는 React 컴포넌트. Next.js App Router의 기본.
SSG👁 48
Static Site Generation
빌드 타임에 HTML을 미리 생성하는 방식. CDN에서 즉시 서빙되어 가장 빠르다.
a11y👁 47
Accessibility
웹 접근성. 장애인·모든 사용자가 쓸 수 있게 하는 실천. WCAG 표준.
INP👁 47
Interaction to Next Paint
사용자 입력(클릭·탭)에서 다음 페인트까지 걸리는 시간. 2024년 FID를 대체. 200ms 이하 권장.
Module Federation👁 47
Webpack 5 기능으로, 서로 다른 빌드의 모듈을 런타임에 공유하는 방식. 마이크로프런트엔드의 기반.
useState👁 47
React에서 함수 컴포넌트의 상태를 선언하는 가장 기본 훅.
aspect-ratio👁 46
요소의 가로/세로 비율을 CSS로 직접 지정하는 속성. 이미지·영상 로드 전 공간 예약.
CommonJS👁 46
CJS
Node.js의 전통 모듈 시스템. require/module.exports. 동적.
CSS :has()👁 46
자식 요소 조건에 따라 부모를 선택하는 CSS 셀렉터. 오랫동안 불가능했던 "부모 선택"이 드디어 가능.
FCP👁 46
First Contentful Paint
사용자가 페이지에서 첫 콘텐츠를 본 시점. LCP의 보조 지표.
GSAP👁 46
GreenSock Animation Platform
타임라인 기반 고성능 JS 애니메이션 라이브러리. 15년 이상 표준.
IndexedDB👁 46
브라우저의 구조화 저장소. localStorage보다 강력. 대용량·트랜잭션.
Jest👁 46
Facebook의 JavaScript 테스트 프레임워크. 한때 사실상 표준. 현재는 Vitest에 밀림.
SEO👁 46
Search Engine Optimization
검색엔진에서 상위 노출되도록 사이트를 최적화하는 기술·전략.
SSR👁 46
Server-Side Rendering
서버에서 HTML을 완성해 클라이언트에 보내는 렌더링. SEO·초기 로딩 속도에 유리.
Suspense👁 46
React Suspense
비동기 렌더링(데이터 로딩, 코드 스플릿)을 선언적으로 처리하는 React 기능. fallback으로 로딩 UI 지정.
Vue.js👁 46
Evan You가 만든 프로그레시브 JS 프레임워크. 한국·중국에서 특히 인기.
auto-fit vs auto-fill👁 45
Grid의 반응형 컬럼 생성. auto-fit은 빈 영역 수축, auto-fill은 유지.
Code Splitting👁 45
하나의 거대 번들을 여러 청크로 쪼개 필요할 때만 로드하는 기법. 초기 로딩 속도 크게 개선.
ESM👁 45
ECMAScript Modules
표준 JavaScript 모듈 시스템. import/export. 브라우저·Node 모두 지원.
Flexbox👁 45
1차원 CSS 레이아웃 시스템. 행 또는 열 단일 방향 유연 배치.
Islands Architecture👁 45
정적 HTML 바다에 필요한 인터랙티브 컴포넌트("섬")만 부분 hydration하는 렌더 모델. Astro가 대표.
Monorepo👁 45
여러 프로젝트·패키지를 하나의 저장소에서 관리하는 방식. Turborepo·Nx·pnpm workspace가 대표 도구.
PWA👁 45
Progressive Web App
웹 기술로 만든 앱을 네이티브 앱처럼 설치·오프라인 동작하게 하는 표준.
React Router v7👁 45
Remix와 통합된 React 라우터. 라이브러리·프레임워크 모드 둘 다 지원.
Astro👁 44
콘텐츠 중심 사이트에 최적화된 프레임워크. "Islands Architecture"로 기본 0 JS, 필요한 곳만 hydration.
Container Queries👁 44
뷰포트가 아닌 부모 컨테이너 크기에 따라 스타일을 바꾸는 CSS 기능. 진정한 컴포넌트 단위 반응형.
CSS-in-JS👁 44
JavaScript 안에 CSS를 작성하는 접근법. styled-components, Emotion, Linaria 등이 대표적.
ISR👁 44
Incremental Static Regeneration
정적 페이지를 백그라운드에서 주기적 재생성. Next.js 대표 기능.
Recoil👁 44
Meta가 만든 React 상태 관리. Atom·Selector 모델. 2024년 이후 업데이트 둔화.
이미지 최적화👁 43
Next.js Image·WebP·AVIF·srcset·lazy·blur placeholder.
Analog (Angular)👁 43
Angular용 메타프레임워크. Vite·파일 라우팅·SSR.
Angular Signals👁 43
Angular 17+의 반응성 API. Zone.js 의존 탈피.
Container Style Queries👁 43
부모 컨테이너의 속성 값에 따라 자식 스타일 분기.
fetch API👁 43
브라우저 네이티브 HTTP 클라이언트. XMLHttpRequest의 현대 대체.
requestAnimationFrame👁 43
브라우저 리페인트 직전에 콜백을 실행하는 API. setTimeout보다 부드러운 애니메이션.
SPA👁 43
Single Page Application
페이지 전체 새로고침 없이 JS로 화면을 갱신하는 웹앱 구조. React·Vue·Angular의 기본 형태.
Headless UI👁 42
Tailwind 팀의 headless 컴포넌트 라이브러리. React·Vue 지원.
IntersectionObserver👁 42
요소의 뷰포트 진입 여부를 효율적으로 감지하는 브라우저 API. 지연 로딩·무한 스크롤.
Microfrontend👁 42
백엔드 마이크로서비스의 프런트엔드 버전. 독립 배포·기술 자유.
Reconciliation👁 42
React가 두 Virtual DOM 트리를 비교해 변경점을 찾아내는 알고리즘. key prop이 이 과정의 힌트.
1 / 7다음 →