🎨
Frontend — 175개 용어
React·Next.js·CSS·성능 지표·빌드 도구
CSS Nesting👁 2
네이티브 CSS 중첩 문법. Sass 없이도 중첩 가능. 2023년 주요 브라우저 지원.
CSS Variable👁 2
CSS custom properties. --name으로 선언, var()로 참조. 동적 테마의 핵심.
Cypress👁 2
개발자 친화 E2E 테스트. 브라우저 내부에서 실행. Playwright에 점유율 내주는 중.
Design Token👁 2
디자인 값(색·간격·폰트)을 추상화·공유하는 단위. Figma·코드·문서 간 동기화.
E2E Test👁 2
End-to-End
실제 사용자 흐름을 브라우저에서 자동화해 검증하는 테스트. 가장 현실적, 가장 느림.
Error Boundary👁 2
React의 에러 경계 컴포넌트. 하위 트리 에러를 잡아 fallback UI.
esbuild👁 2
Go로 작성된 극고속 JS 번들러. Vite dev pre-bundling·TS 컴파일에 쓰임. 100배 빠른 속도로 유명.
ESLint👁 2
JavaScript·TypeScript 정적 분석·린터. 코드 품질·버그 예방.
ESM👁 2
ECMAScript Modules
표준 JavaScript 모듈 시스템. import/export. 브라우저·Node 모두 지원.
FCP👁 2
First Contentful Paint
사용자가 페이지에서 첫 콘텐츠를 본 시점. LCP의 보조 지표.
fetch API👁 2
브라우저 네이티브 HTTP 클라이언트. XMLHttpRequest의 현대 대체.
Flexbox👁 2
1차원 CSS 레이아웃 시스템. 행 또는 열 단일 방향 유연 배치.
Framer Motion👁 2
React의 선언적 애니메이션 라이브러리. 사실상 표준.
Grid 고급👁 2
grid-template-areas·minmax·auto-fit·auto-fill·subgrid.
GSAP👁 2
GreenSock Animation Platform
타임라인 기반 고성능 JS 애니메이션 라이브러리. 15년 이상 표준.
Headless UI👁 2
Tailwind 팀의 headless 컴포넌트 라이브러리. React·Vue 지원.
IndexedDB👁 2
브라우저의 구조화 저장소. localStorage보다 강력. 대용량·트랜잭션.
IntersectionObserver👁 2
요소의 뷰포트 진입 여부를 효율적으로 감지하는 브라우저 API. 지연 로딩·무한 스크롤.
Islands Architecture👁 2
정적 HTML 바다에 필요한 인터랙티브 컴포넌트("섬")만 부분 hydration하는 렌더 모델. Astro가 대표.
Jest👁 2
Facebook의 JavaScript 테스트 프레임워크. 한때 사실상 표준. 현재는 Vitest에 밀림.
Jotai👁 2
Atom 기반 React 상태 관리. 작은 원자 상태들을 조합. Recoil의 단순화 버전.
JSX👁 2
JavaScript 안에 HTML 같은 문법. React의 핵심. Babel·SWC가 트랜스파일.
ky👁 2
fetch 기반 미니 HTTP 클라이언트. axios보다 훨씬 작고 현대적.
@layer (CSS Cascade Layers)👁 2
CSS 우선순위를 명시적 레이어로 관리하는 기능. !important 남발 예방.
Lighthouse👁 2
Google의 웹 성능·접근성·SEO·PWA 감사 도구. Chrome 내장.
localStorage vs sessionStorage👁 2
브라우저 키-값 저장소. 영속 vs 탭 한정.
Lockfile👁 2
의존성의 정확한 버전을 고정하는 파일. package-lock.json·pnpm-lock.yaml.
Logical Properties👁 2
margin-block·padding-inline 등 방향 독립 CSS 속성. RTL·세로쓰기 지원.
Long Task👁 2
메인 스레드를 50ms 이상 점유한 작업. 반응성 저해의 원인.
Lottie👁 2
Airbnb의 After Effects 애니메이션을 웹·모바일에 JSON으로 렌더링.
Microfrontend👁 2
백엔드 마이크로서비스의 프런트엔드 버전. 독립 배포·기술 자유.
MobX👁 2
반응형 프록시 기반 상태 관리. 자동 의존성 추적. 객체 지향 스타일.
MSW👁 2
Mock Service Worker
네트워크 레벨 API 모킹. Service Worker로 브라우저·Node 양쪽에서 동일 모의.
MutationObserver👁 2
DOM 변경을 비동기로 관찰하는 API. 서드파티 스크립트·동적 UI 감시.
Next.js👁 2
Vercel의 React 풀스택 프레임워크. SSR·SSG·App Router·PPR.
NPM Package👁 2
npm 레지스트리에 배포되는 자바스크립트 패키지. package.json·main·exports.
nuqs👁 2
Next.js 검색 파라미터를 타입 안전 상태로 관리하는 훅.
Nuxt👁 2
Vue 기반 풀스택 프레임워크. SSR·SSG·라우팅·모듈 생태계. Vue의 Next.js.
Open Props👁 2
디자인 토큰을 CSS 커스텀 속성으로 제공하는 라이브러리.
Paint / Composite👁 2
브라우저 렌더링의 마지막 단계. Paint는 픽셀 그리기, Composite는 레이어 합성.
Panda CSS👁 2
Zero-runtime CSS-in-JS. 디자인 토큰·타입 안전. Chakra UI 팀.
Pinia👁 2
Vue 3의 공식 상태 관리 라이브러리. Vuex의 후속. TypeScript 친화.
Playwright👁 2
Microsoft의 브라우저 자동화·E2E 테스트. Chromium·Firefox·WebKit 모두 지원.
Polyfill👁 2
구버전 브라우저에 최신 API를 구현해 채워 넣는 코드.
PostCSS👁 2
CSS를 AST로 변환하는 플러그인 기반 도구. Autoprefixer가 대표.
PPR👁 2
Partial Prerendering
Next.js가 도입한 렌더링 전략. 정적 shell을 먼저 보내고 동적 부분을 스트리밍으로 채움. SSG와 SSR의 장점 결합.
Prettier👁 2
고집 있는 코드 포매터. 논쟁을 제거. JS·TS·CSS·Markdown.
Progressive Enhancement👁 2
기본 기능은 HTML·CSS만으로 동작하고, JS는 향상만 제공하는 원칙.
Qwik👁 2
Resumability 기반 프레임워크. Hydration 대신 서버 상태를 그대로 이어받음.
Radix UI👁 2
접근성 완벽 headless 컴포넌트. 스타일 자유, 동작만 제공.