Frontend — 175개 용어

서버가 보낸 정적 HTML에 JS를 부착해 인터랙티브하게 만드는 과정.

콘텐츠 중심 사이트에 최적화된 프레임워크. "Islands Architecture"로 기본 0 JS, 필요한 곳만 hydration.

HttpOnly·Secure·SameSite·Domain·Path·Max-Age. 보안·동작 제어.

웹 접근성. 장애인·모든 사용자가 쓸 수 있게 하는 실천. WCAG 표준.

Google의 엔터프라이즈 프런트엔드 프레임워크. TypeScript 1급. RxJS·DI 기반.

HTML 네이티브로 표현 어려운 의미를 속성으로 보강하는 W3C 표준.

요소의 가로/세로 비율을 CSS로 직접 지정하는 속성. 이미지·영상 로드 전 공간 예약.

정적 페이지를 백그라운드에서 주기적 재생성. Next.js 대표 기능.

웹 기술로 만든 앱을 네이티브 앱처럼 설치·오프라인 동작하게 하는 표준.

서버에서만 실행되어 번들에 포함되지 않는 React 컴포넌트. Next.js App Router의 기본.

페이지 전체 새로고침 없이 JS로 화면을 갱신하는 웹앱 구조. React·Vue·Angular의 기본 형태.

빌드 타임에 HTML을 미리 생성하는 방식. CDN에서 즉시 서빙되어 가장 빠르다.

서버에서 HTML을 완성해 클라이언트에 보내는 렌더링. SEO·초기 로딩 속도에 유리.

React에서 함수 컴포넌트의 상태를 선언하는 가장 기본 훅.

Evan You가 만든 프로그레시브 JS 프레임워크. 한국·중국에서 특히 인기.

Rust로 작성된 올인원 JS/TS 툴체인. ESLint·Prettier를 100배 빠르게 대체.

페이지 로드 중 예기치 않게 레이아웃이 밀리는 정도. 사용자 경험을 크게 해침. 0.1 이하 권장.

하나의 거대 번들을 여러 청크로 쪼개 필요할 때만 로드하는 기법. 초기 로딩 속도 크게 개선.

뷰포트가 아닌 부모 컨테이너 크기에 따라 스타일을 바꾸는 CSS 기능. 진정한 컴포넌트 단위 반응형.

Google이 정의한 웹 성능 핵심 지표 3가지. LCP·CLS·INP. SEO 순위에 직접 영향.

자식 요소 조건에 따라 부모를 선택하는 CSS 셀렉터. 오랫동안 불가능했던 "부모 선택"이 드디어 가능.

JavaScript 안에 CSS를 작성하는 접근법. styled-components, Emotion, Linaria 등이 대표적.

사용자 입력(클릭·탭)에서 다음 페인트까지 걸리는 시간. 2024년 FID를 대체. 200ms 이하 권장.

필요한 시점까지 리소스 로딩을 미루는 기법. 이미지·컴포넌트·라우트에 모두 적용.

페이지 로드 후 가장 큰 콘텐츠 요소가 보이기까지의 시간. Core Web Vitals 핵심, 2.5초 이하 권장.

Webpack 5 기능으로, 서로 다른 빌드의 모듈을 런타임에 공유하는 방식. 마이크로프런트엔드의 기반.

여러 프로젝트·패키지를 하나의 저장소에서 관리하는 방식. Turborepo·Nx·pnpm workspace가 대표 도구.

React가 두 Virtual DOM 트리를 비교해 변경점을 찾아내는 알고리즘. key prop이 이 과정의 힌트.

브라우저 백그라운드에서 실행되는 JS. 네트워크 요청 가로채기, 오프라인 캐싱, 푸시 알림을 처리.

비동기 렌더링(데이터 로딩, 코드 스플릿)을 선언적으로 처리하는 React 기능. fallback으로 로딩 UI 지정.

유틸리티 클래스 기반 CSS 프레임워크. <code>flex p-4 text-lg</code>처럼 클래스 조합만으로 스타일링.

사용되지 않는 코드를 번들에서 자동 제거하는 최적화. ES Module의 static 분석 덕에 가능.

Vercel이 만든 Rust 기반 차세대 번들러. Next.js 16에서 기본 활성화. Webpack 대비 수십 배 빠름.

실제 DOM의 JS 객체 복제본. 변경을 복제본에서 계산한 뒤 차이(diff)만 실제 DOM에 반영해 성능을 끌어올린다.

Evan You(Vue 창시자)가 만든 차세대 프런트엔드 빌드 도구. Dev 서버는 esbuild + 브라우저 ESM으로 즉시 시작.

Grid의 반응형 컬럼 생성. auto-fit은 빈 영역 수축, auto-fill은 유지.

Node·브라우저용 HTTP 클라이언트. fetch 이전 표준. 인터셉터·변환 기능 풍부.

CSS 네이밍 컨벤션. block__element--modifier 형식으로 격리.

브라우저 내장 개발 도구. Element·Console·Network·Performance.

픽셀 단위 그리기 브라우저 API. 2D 그래픽·게임·차트에 사용.

값을 최소·선호·최대로 조합하는 CSS 함수. 반응형 타이포에 필수.

Node.js의 전통 모듈 시스템. require/module.exports. 동적.

Vue 3의 로직 조합 API. setup() + ref/reactive로 React Hooks 스타일.

React 폼 라이브러리. progressive enhancement·Remix 친화·Zod 통합.

script-src·style-src·img-src 등으로 리소스 로드 출처 제한. XSS 방어.

px·%·rem·em·vw·vh·vmin·vmax·ch·ex 등. 상황별 선택 기준.

color-mix()·oklch()·color-contrast(). 2024 모던 CSS.

dvh·svh·lvh·dvw — 동적 뷰포트 단위. 모바일 주소창 변화 대응.

2차원 CSS 레이아웃 시스템. 행·열 동시 제어로 복잡한 레이아웃 표현.

컴포넌트별로 클래스명을 격리하는 CSS 시스템. 빌드 타임에 해시 접미.