🎨
Frontend — 175개 용어
React·Next.js·CSS·성능 지표·빌드 도구
React👁 2
Meta가 만든 UI 라이브러리. 선언적 컴포넌트·단방향 데이터. 프런트엔드 1위.
React Aria👁 2
Adobe의 접근성 훅 모음. 자체 UI 만들 때 접근성 보장.
React Compiler👁 2
수동 memoization 없이도 React 컴포넌트를 자동 최적화하는 컴파일러. useMemo·useCallback·memo가 필요 없어진다.
React DevTools👁 2
React 컴포넌트 트리·props·state·profiler 브라우저 확장.
React Fragment👁 2
여러 요소를 추가 DOM 노드 없이 묶는 React 기능. <>...</>.
React Hook Form👁 2
비제어(uncontrolled) 기반 고성능 React 폼 라이브러리. Zod·Yup 연동.
reactive (Vue)👁 2
Vue 3 반응형 객체 생성. Proxy 기반.
React Portal👁 2
컴포넌트를 DOM 트리의 다른 곳에 렌더. 모달·툴팁 구현.
React Router v7👁 2
Remix와 통합된 React 라우터. 라이브러리·프레임워크 모드 둘 다 지원.
Recoil👁 2
Meta가 만든 React 상태 관리. Atom·Selector 모델. 2024년 이후 업데이트 둔화.
Redux👁 2
예측 가능한 상태 관리 라이브러리. Flux 패턴. 대규모 React 앱의 고전.
Redux Toolkit👁 2
RTK
Redux 공식 유틸. createSlice·createAsyncThunk·RTK Query로 보일러플레이트 제거.
ref (Vue)👁 2
Vue 3 반응형 원시값 래퍼. .value로 접근.
Remix / React Router v7👁 2
웹 표준 중심 React 프레임워크. 2024년 React Router와 통합.
rem vs em👁 2
rem은 루트(html) 기준, em은 부모 기준의 상대 단위. rem이 예측 가능해 주로 사용.
Render Tree👁 2
브라우저가 DOM과 CSSOM을 결합해 만드는 실제 렌더링용 트리.
requestAnimationFrame👁 2
브라우저 리페인트 직전에 콜백을 실행하는 API. setTimeout보다 부드러운 애니메이션.
ResizeObserver👁 2
요소 크기 변경을 감지하는 API. window resize가 아닌 개별 요소 단위.
Rspack👁 2
ByteDance가 만든 Rust 기반 Webpack 호환 번들러. Webpack 설정 그대로 쓰며 10배+ 빠른 빌드.
SameSite 쿠키👁 2
Cross-site 요청 시 쿠키 전송 제어. CSRF 방어 핵심.
Sass / SCSS👁 2
CSS 전처리기. 변수·중첩·믹스인·함수 제공. 대형 스타일시트 유지보수 향상.
Semantic HTML👁 2
의미를 가진 태그를 사용하는 HTML 작성. header·nav·main·article·section·footer.
SEO👁 2
Search Engine Optimization
검색엔진에서 상위 노출되도록 사이트를 최적화하는 기술·전략.
shadcn/ui👁 2
Radix UI + Tailwind로 만든 copy-paste 컴포넌트 모음. 라이브러리 아님.
Shadow DOM👁 2
DOM을 캡슐화하는 브라우저 표준. Web Components의 스타일·마크업 격리.
Shadow DOM 스타일링👁 2
:host·::part·::slotted·CSS 변수로 Shadow DOM 경계 관통 스타일링.
Solid.js👁 2
Fine-grained 반응성 JSX 프레임워크. React와 문법 유사하되 VDOM 없이 극단적 성능.
Sonner👁 2
세련된 React 토스트 라이브러리. shadcn/ui 기본 채택.
Source Map👁 2
컴파일·번들된 코드와 원본 간 매핑. 브라우저 DevTools 디버깅에 필수.
Stitches👁 2
디자인 토큰 중심 CSS-in-JS. Radix와 함께 인기였으나 2023년 중단.
Storybook👁 2
UI 컴포넌트 개발·문서화·시각 테스트 도구. 디자인시스템 구축 필수.
subgrid👁 2
자식 그리드가 부모 그리드의 트랙을 상속하는 Grid 고급 기능.
Svelte👁 2
Rich Harris가 만든 컴파일러 프레임워크. 런타임 VDOM 없이 순수 JS로 컴파일.
SvelteKit👁 2
Svelte 공식 풀스택 프레임워크. Next.js의 Svelte 버전.
SWC👁 2
Speedy Web Compiler
Rust로 작성된 JavaScript/TypeScript 컴파일러. Babel 대체, Next.js 12부터 기본 채택.
SWR👁 2
Stale-While-Revalidate
Vercel의 가벼운 React 데이터 페칭 훅. 캐시 반환 후 백그라운드 갱신.
SWR vs React Query👁 2
서버 상태 라이브러리 비교. 기능 vs 간결함.
Tailwind vs CSS Modules👁 2
utility-first vs component-scoped CSS. 트레이드오프.
TanStack Query👁 2
서버 상태 관리의 표준 라이브러리. 캐싱·동기화·리페칭을 자동화.
TanStack Query Devtools👁 2
서버 상태 캐시·쿼리를 시각화하는 브라우저 확장·컴포넌트.
TanStack Router👁 2
타입 안전 React 라우터. Search param·loader 타입 추론 강력.
TanStack Table👁 2
Headless 테이블 라이브러리. 정렬·필터·페이지네이션·가상화.
TanStack Virtual👁 2
수만 행도 부드럽게 렌더링하는 가상 스크롤 라이브러리.
TBT👁 2
Total Blocking Time
Long Task로 메인 스레드가 블록된 총 시간. 실험실 지표.
Testing Library👁 2
사용자 관점 중심의 테스트 라이브러리. React·Vue·Angular 모두 버전 제공.
Transferable Objects👁 2
Web Worker 간 데이터를 복사 없이 소유권 이전. ArrayBuffer·MessagePort 등.
Transpile👁 2
한 언어·버전을 다른 언어·버전으로 변환. TS→JS, ES2022→ES5 등.
TSX👁 2
TypeScript + JSX. 타입 안전한 React 컴포넌트의 표준.
TTI👁 2
Time to Interactive
페이지가 완전히 상호작용 가능해진 시점. 긴 작업이 사라진 후.
TypeScript👁 2
Microsoft가 만든 JavaScript의 타입 있는 상위 집합. 업계 사실상 표준.