フロントエンド IT用語 韓国語一覧

実際のDOMを直接操作せず、メモリ上に仮想のDOMツリーを保持し差分のみを効率的に更新する仕組み。ReactやVue.jsで採用されパフォーマンス向上に貢献する。

실제 DOM을 직접 조작하지 않고 메모리 상에 가상 DOM 트리를 유지하여 변경된 부분만 효율적으로 업데이트하는 방식. React와 Vue.js에서 채택하여 성능 향상에 기여한다.

CSS @propertyルールでカスタムプロパティの型を定義し、CSS変数自体をアニメーション対象にする手法。従来アニメーションできなかったグラデーションや色の変化をCSSだけで滑らかに表現できる。

CSS @property 규칙으로 커스텀 프로퍼티의 타입을 정의하여 CSS 변수 자체를 애니메이션 대상으로 하는 기법. 기존에 애니메이션할 수 없었던 그라데이션이나 색 변화를 CSS만으로 부드럽게 표현할 수 있다.

navigator.clipboard APIでシステムクリップボードへの読み書きを非同期に行うブラウザAPIである。テキストだけでなく画像やリッチテキストの貼り付けにも対応し、セキュアなコンテキストでのみ動作する。

navigator.clipboard API로 시스템 클립보드 읽기/쓰기를 비동기적으로 수행하는 브라우저 API이다. 텍스트뿐 아니라 이미지와 리치 텍스트 붙여넣기에도 대응하며 보안 컨텍스트에서만 동작한다.

アプリ全体にテーマ設定（色、フォント、スペーシング）を提供するContextパターン。デザインシステムの一貫性をコードレベルで保証する。

앱 전체에 테마 설정(색상, 폰트, 스페이싱)을 제공하는 Context 패턴. 디자인 시스템의 일관성을 코드 레벨에서 보장한다.

Reactアプリ向けの軽量な状態管理ライブラリ。ReduxやContextに比べてボイラープレートが少なく、シンプルなAPIでグローバル状態を管理できる。

React 앱을 위한 경량 상태 관리 라이브러리. Redux나 Context에 비해 보일러플레이트가 적고, 간단한 API로 전역 상태를 관리할 수 있다.

メインスレッドとは別のバックグラウンドスレッドでJavaScriptを実行できるAPI。重い計算処理をオフロードしてUIのフリーズを防止するために使用される。

메인 스레드와는 별도의 백그라운드 스레드에서 JavaScript를 실행할 수 있는 API이다. 무거운 계산 처리를 오프로드하여 UI 프리즈를 방지하는 데 사용된다.

Service Workerと連携してHTTPリクエスト・レスポンスのペアをプログラム的にキャッシュするAPI。オフライン対応やネットワークリクエストの高速化に活用される。

Service Worker와 연계하여 HTTP 리퀘스트·리스폰스 쌍을 프로그래밍적으로 캐시하는 API이다. 오프라인 대응이나 네트워크 리퀘스트의 고속화에 활용된다.

WAI-ARIA Practices Guideに基づくインタラクティブウィジェットのアクセシブルな実装パターン。タブパネル、ツリービュー、コンボボックスなどの標準的なARIA実装を体系的に適用する。

WAI-ARIA Practices Guide에 기반한 인터랙티브 위젯의 접근 가능한 구현 패턴이다. 탭 패널, 트리 뷰, 콤보 박스 등의 표준적인 ARIA 구현을 체계적으로 적용한다.

ReactライクなAPIを持つ高パフォーマンスなUIライブラリ。仮想DOMを使わず、細粒度のリアクティビティでDOMを直接更新するため、レンダリング速度が非常に速い。

React와 유사한 API를 가진 고성능 UI 라이브러리. 가상 DOM을 사용하지 않고 세밀한 반응성으로 DOM을 직접 업데이트하기 때문에 렌더링 속도가 매우 빠르다.

Next.jsのApp Routerで同一レイアウト内に複数のページを同時に表示できるルーティング機能であり、ダッシュボードのような複数のパネルを独立にナビゲーションして条件付き表示を実現する。

Next.js의 App Router에서 동일 레이아웃 내에 복수의 페이지를 동시에 표시할 수 있는 라우팅 기능이며, 대시보드와 같은 복수의 패널을 독립으로 내비게이션하여 조건부 표시를 실현한다.

デフォルトでJavaScriptを一切クライアントに送信しないフレームワーク。AstroやQwikなどが代表例で、静的HTMLを優先しパフォーマンスを最大化する設計思想。

기본적으로 JavaScript를 클라이언트에 전혀 전송하지 않는 프레임워크. Astro, Qwik 등이 대표적이며, 정적 HTML을 우선시해 성능을 극대화하는 설계 철학.

バンドルされたJavaScriptのファイルサイズを分析し、肥大化の原因を特定するプロセス。webpack-bundle-analyzerなどのツールで可視化する。

번들된 JavaScript 파일 사이즈를 분석하여 비대화 원인을 특정하는 프로세스. webpack-bundle-analyzer 등의 도구로 시각화한다.

Webサーバーからフォントファイルを配信し、ユーザーのローカル環境に依存せず任意のフォントをブラウザで表示する仕組み。Google FontsやAdobe Fontsが代表的なサービス。

웹 서버에서 폰트 파일을 제공하여 사용자의 로컬 환경에 의존하지 않고 임의의 폰트를 브라우저에서 표시하는 방식. Google Fonts, Adobe Fonts가 대표적인 서비스이다.

Go言語で実装された超高速JavaScriptバンドラー・トランスパイラ。従来のwebpackやBabelと比べ10〜100倍高速で、ビルド時間の大幅短縮が可能。

Go 언어로 구현된 초고속 JavaScript 번들러·트랜스파일러. 기존 webpack이나 Babel에 비해 10〜100배 빠르며, 빌드 시간을 대폭 단축할 수 있다.

コンポーネントを引数に取り追加機能を付与した新しいコンポーネントを返すReactのパターンであり、認証チェックやログ出力などの横断的関心事を再利用可能な形で実装する手法である。

컴포넌트를 인수로 받아 추가 기능을 부여한 새로운 컴포넌트를 반환하는 React의 패턴이며, 인증 체크나 로그 출력 등의 횡단적 관심사를 재사용 가능한 형태로 구현하는 기법이다.

入力バリデーションのタイミング・表示方法・エラーメッセージをUX観点から設計する手法。リアルタイム検証と送信時検証を適切に使い分け、ユーザーのストレスを最小化する。

입력 밸리데이션의 타이밍·표시 방법·에러 메시지를 UX 관점에서 설계하는 기법이다. 실시간 검증과 송신 시 검증을 적절히 사용 구분하여 사용자의 스트레스를 최소화한다.

ユーザーが次に必要とするリソースを事前にバックグラウンドで取得する技術。リンク先のページやデータを予測的に読み込み、遷移時の表示速度を向上させる。

사용자가 다음에 필요로 하는 리소스를 사전에 백그라운드에서 취득하는 기술이다. 링크 대상 페이지나 데이터를 예측적으로 로딩하여 전환 시 표시 속도를 향상시킨다.

静的リソースのキャッシュ期間やバリデーション方法を体系的に設計する方針。Cache-ControlヘッダーやETagを適切に設定し、リロード速度の向上と最新性の両立を図る。

정적 리소스의 캐시 기간이나 검증 방법을 체계적으로 설계하는 방침이다. Cache-Control 헤더나 ETag를 적절히 설정하여 리로드 속도 향상과 최신성의 양립을 도모한다.

スマートフォンアプリで画面を下に引っ張ることでコンテンツを再読み込みするUXパターン。iOSのTwitterアプリが普及させたジェスチャー操作。

스마트폰 앱에서 화면을 아래로 당겨 콘텐츠를 새로고침하는 UX 패턴. iOS의 트위터 앱이 대중화시킨 제스처 조작 방식.

Node.jsのデフォルトパッケージマネージャー。JavaScriptライブラリの管理・インストール・バージョン管理を行うCLIツールで、package.jsonで依存関係を管理する。

Node.js의 기본 패키지 매니저. JavaScript 라이브러리의 관리·설치·버전 관리를 수행하는 CLI 도구로, package.json으로 의존성을 관리한다.

ユーザーが次にアクセスすると予測されるリソースをあらかじめ取得しておく手法。Webパフォーマンス向上のためにキャッシュやCDNと組み合わせて活用される。

사용자가 다음에 접근할 것으로 예측되는 리소스를 미리 가져오는 기법. 웹 성능 향상을 위해 캐시나 CDN과 함께 활용된다.

ユーティリティファーストなCSSフレームワーク。クラス名を直接HTMLに付与してスタイリングするアプローチで、カスタムCSSを書かずに素早くUIを構築できる。

유틸리티 퍼스트 방식의 CSS 프레임워크. 클래스명을 HTML에 직접 부여하여 스타일링하는 방식으로, 커스텀 CSS 없이 빠르게 UI를 구축할 수 있다.

CSSのカスタムプロパティ（--変数名）を使ってスタイル値を一元管理する手法。テーマ切り替えやデザイントークンの実装に活用される。

CSS 커스텀 프로퍼티(--변수명)를 사용해 스타일 값을 일괄 관리하는 기법으로, 테마 전환이나 디자인 토큰 구현에 활용된다.

ユーザーがサイトやアプリの特定ページや操作ステップで離脱する割合を分析する手法。CVR改善やUX最適化に活用される。

사용자가 사이트나 앱의 특정 페이지 또는 조작 단계에서 이탈하는 비율을 분석하는 기법으로, CVR 개선 및 UX 최적화에 활용된다.

親コンポーネントから子コンポーネントにデータを渡すためのReactの仕組みであり、読み取り専用の値として子に受け渡されコンポーネント間の単方向データフローを実現する。

부모 컴포넌트에서 자식 컴포넌트에 데이터를 전달하기 위한 React의 구조이며, 읽기 전용의 값으로 자식에 전달되어 컴포넌트 간의 단방향 데이터 플로를 실현한다.

テキスト入力とドロップダウン選択を組み合わせた複合フォーム要素。ARIA comboboxロールで実装し、キーボードナビゲーションとスクリーンリーダー対応が必須のアクセシブルなパターンである。

텍스트 입력과 드롭다운 선택을 결합한 복합 폼 요소이다. ARIA combobox 역할로 구현하며 키보드 내비게이션과 스크린 리더 대응이 필수인 접근 가능한 패턴이다.

HTMLをサーバー側で生成してクライアントに送信するレンダリング手法。初回表示速度とSEOを向上させるが、サーバー負荷が増加するトレードオフがある。

HTML을 서버 측에서 생성하여 클라이언트에 전송하는 렌더링 기법이다. 초회 표시 속도와 SEO를 향상시키지만 서버 부하가 증가하는 트레이드오프가 있다.

CSS Subgridで子要素のグリッドラインを親グリッドに揃える実践的手法。カードリスト内のタイトル・本文・ボタンの位置を統一し、高さが異なるコンテンツでも整列を保つ。

CSS Subgrid로 자식 요소의 그리드 라인을 부모 그리드에 맞추는 실전적 기법이다. 카드 리스트 내 타이틀·본문·버튼의 위치를 통일하여 높이가 다른 콘텐츠에서도 정렬을 유지한다.

aspect-ratioプロパティで画像や動画のアスペクト比を維持し、レスポンシブ環境でのレイアウトシフトを防止する手法。従来のpadding-topハックを置き換え、コードの可読性も向上する。

aspect-ratio 프로퍼티로 이미지나 동영상의 종횡비를 유지하여 반응형 환경에서의 레이아웃 시프트를 방지하는 기법이다. 기존 padding-top 핵을 대체하며 코드 가독성도 향상된다.

子コンポーネントで発生したJavaScriptエラーをキャッチしてアプリ全体のクラッシュを防止するReactのエラーハンドリング機構であり、フォールバックUIを表示してユーザー体験を維持する。

자식 컴포넌트에서 발생한 JavaScript 에러를 캐치하여 앱 전체의 크래시를 방지하는 React의 에러 핸들링 기구이며, 폴백 UI를 표시하여 사용자 경험을 유지한다.

色、タイポグラフィ、スペーシングなどのデザイン値をトークンとして定義し、FigmaからCSS/JSへ自動変換する運用基盤の構築。Style DictionaryやTokensStudioを活用する。

색상, 타이포그래피, 스페이싱 등의 디자인 값을 토큰으로 정의하고 Figma에서 CSS/JS로 자동 변환하는 운용 기반의 구축이다. Style Dictionary나 Tokens Studio를 활용한다.

CSS Houdiniの一部で、CSSのbackground-imageなどにカスタム描画ロジックを登録できる仕組みである。メインスレッドとは別のワークレットスレッドで実行されるため、描画性能に優れる。

CSS Houdini의 일부로 CSS의 background-image 등에 커스텀 그리기 로직을 등록할 수 있는 구조이다. 메인 스레드와 별도의 워크릿 스레드에서 실행되므로 그리기 성능이 뛰어나다.

多言語対応のためのi18nフレームワークの導入と翻訳リソースの管理。next-intlやreact-i18nextなどを使って実装する。

다국어 대응을 위한 i18n 프레임워크 도입과 번역 리소스 관리. next-intl이나 react-i18next 등을 사용하여 구현한다.

React向けの型安全なクライアントサイドルーティングライブラリ。URLの状態管理やネストされたルート、ファイルベースルーティングをサポートし、TypeScriptとの親和性が高い。

React용 타입 안전 클라이언트 사이드 라우팅 라이브러리. URL 상태 관리, 중첩 라우트, 파일 기반 라우팅을 지원하며 TypeScript와의 호환성이 뛰어나다.

複数のsource要素を使って条件に応じた画像を提供するHTML要素。メディアクエリやフォーマット対応状況に基づいて最適な画像を選択的に表示できる。

복수의 source 요소를 사용하여 조건에 따른 이미지를 제공하는 HTML 요소이다. 미디어 쿼리나 포맷 대응 상황에 기반하여 최적의 이미지를 선택적으로 표시할 수 있다.

実際のDOMの軽量なコピーをメモリ上に保持し、差分のみを実際のDOMに反映する手法。DOM操作のコストを最小化し、効率的なUI更新を実現するために使用される。

실제 DOM의 경량 사본을 메모리 상에 유지하고 차분만 실제 DOM에 반영하는 기법이다. DOM 조작 비용을 최소화하고 효율적인 UI 갱신을 실현하는 데 사용된다.

Next.js App Routerで、特定のルートへのナビゲーションを別のルートでインターセプトして表示する機能。モーダルで写真を表示しつつ、直接URLアクセス時は専用ページを表示するパターンに利用する。

Next.js App Router에서 특정 라우트로의 내비게이션을 다른 라우트에서 인터셉트하여 표시하는 기능. 모달로 사진을 표시하면서 직접 URL 접근 시에는 전용 페이지를 표시하는 패턴에 활용한다.

WebpackからTurbopackへのバンドラー移行を計画的に実施するための手法であり、互換性の検証やカスタムプラグインの代替策の策定、段階的な移行手順を体系化する。

Webpack에서 Turbopack으로의 번들러 이행을 계획적으로 실시하기 위한 기법이며, 호환성의 검증이나 커스텀 플러그인의 대체책의 수립, 단계적 이행 절차를 체계화한다.

ReactのuseEffectを用いて副作用処理を管理するフックであり、API呼び出しやDOM操作、イベントリスナーの登録・解除などのライフサイクル処理を関数コンポーネントで実現する。

React의 useEffect를 이용하여 부수 효과 처리를 관리하는 훅이며, API 호출이나 DOM 조작, 이벤트 리스너의 등록·해제 등의 라이프사이클 처리를 함수 컴포넌트에서 실현한다.

ブラウザがWebページの画像・CSS・JSなどのリソースをローカルに保存する仕組み。再訪問時の読み込み速度向上とサーバー負荷軽減に役立つが、更新反映の遅延原因にもなる。

브라우저가 웹 페이지의 이미지·CSS·JS 등의 리소스를 로컬에 저장하는 메커니즘. 재방문 시 로딩 속도 향상과 서버 부하 감소에 유용하지만, 업데이트 반영이 늦어지는 원인이 되기도 한다.

ブラウザのタブ単位でデータを一時保存するWeb Storage API。タブを閉じると自動削除され、同一オリジン内のみアクセス可能。LocalStorageと異なりセッション限定の保存に適している。

브라우저 탭 단위로 데이터를 임시 저장하는 Web Storage API. 탭을 닫으면 자동 삭제되며 동일 오리진 내에서만 접근 가능. LocalStorage와 달리 세션 한정 저장에 적합하다.

子要素や後続要素の存在に基づいて親要素を選択できるCSS擬似クラス。従来JavaScriptが必要だった条件付きスタイリングをCSSだけで実現する強力なセレクタである。

자식 요소나 후속 요소의 존재에 기반하여 부모 요소를 선택할 수 있는 CSS 의사 클래스이다. 기존 JavaScript가 필요했던 조건부 스타일링을 CSS만으로 실현하는 강력한 셀렉터이다.

GoogleのFirebaseが提供する静的サイト・SPAのホスティングサービス。CDN配信・SSL証明書自動発行・カスタムドメイン対応など、フロントエンドのデプロイを簡単に行える。

Google Firebase에서 제공하는 정적 사이트 및 SPA 호스팅 서비스. CDN 배포, SSL 인증서 자동 발급, 커스텀 도메인 지원 등 프론트엔드 배포를 간편하게 처리할 수 있다.

TypeScriptの型定義を活用してAPI呼び出し時のリクエスト・レスポンスの型を保証する手法。tRPCやZodスキーマで型安全性を確保する。

TypeScript의 타입 정의를 활용하여 API 호출 시 요청·응답 타입을 보장하는 기법. tRPC나 Zod 스키마로 타입 안전성을 확보한다.

ブラウザ標準のHTTP通信API。XHRに代わりPromiseベースで非同期リクエストを行う。REST APIやJSONデータの取得に広く使われる。

브라우저 표준 HTTP 통신 API. XHR을 대체하며 Promise 기반으로 비동기 요청을 처리한다. REST API나 JSON 데이터 취득에 널리 사용된다.

コンポーネントの描画ロジックをプロパティとして関数で渡すReactの設計パターン。共通のロジックを持ちながら異なるUIを描画するコンポーネントの再利用性を高める手法である。

컴포넌트의 그리기 로직을 프로퍼티로 함수를 전달하는 React의 설계 패턴. 공통 로직을 가지면서 다른 UI를 그리는 컴포넌트의 재사용성을 높이는 기법이다.

FacebookとGoogleが共同開発したJavaScriptパッケージマネージャー。npmの代替として登場し、高速なインストールや確定的な依存関係管理を特徴とする。

Facebook과 Google이 공동 개발한 JavaScript 패키지 매니저. npm의 대안으로 등장했으며, 빠른 설치 속도와 결정론적 의존성 관리를 특징으로 한다.

HTMLの<head>内に記述する要素で、ページのタイトル・説明・キーワードなどをブラウザや検索エンジンに伝える。SEO対策やOGP設定にも活用される。

HTML의 <head> 내에 작성하는 요소로, 페이지의 제목·설명·키워드 등을 브라우저와 검색 엔진에 전달한다. SEO 최적화 및 OGP 설정에도 활용된다.

HTMLフォームのaction属性をサーバーアクションと連携させ、クライアント側のJavaScriptなしでフォーム送信とサーバー処理を統合する設計パターン。プログレッシブエンハンスメントの実現に有効である。

HTML 폼의 action 속성을 서버 액션과 연계하여 클라이언트 측 JavaScript 없이 폼 전송과 서버 처리를 통합하는 설계 패턴. 프로그레시브 인핸스먼트 구현에 유효하다.

mix-blend-modeやbackground-blend-modeプロパティで要素や背景画像の色の合成方法を指定するCSS機能である。乗算やスクリーンなどのブレンドモードを使い、Photoshopのようなレイヤー合成を実現する。

mix-blend-mode나 background-blend-mode 프로퍼티로 요소나 배경 이미지의 색상 합성 방법을 지정하는 CSS 기능이다. 곱하기나 스크린 등의 블렌드 모드를 사용하여 Photoshop과 같은 레이어 합성을 구현한다.

サーバーの応答を待たずにUIを先行更新し、成功を前提として即座にフィードバックを表示する手法。失敗時はロールバックする。いいねボタンやコメント投稿など即時反応が求められるUIで有効である。

서버 응답을 기다리지 않고 UI를 선행 업데이트하여 성공을 전제로 즉시 피드백을 표시하는 기법. 실패 시에는 롤백한다. 좋아요 버튼이나 댓글 게시 등 즉시 반응이 요구되는 UI에서 유효하다.

バンドラーの未使用コード除去機能を最大限に活用するためのモジュール設計であり、ESModulesの静的解析を妨げるサイドエフェクトの排除やバレルファイルの最適化を行う手法である。

번들러의 미사용 코드 제거 기능을 최대한 활용하기 위한 모듈 설계이며, ESModules의 정적 분석을 방해하는 사이드 이펙트의 배제나 배럴 파일의 최적화를 수행하는 기법이다.

ReactのuseOptimisticフックを使ってサーバー応答前にUIを即座に更新する実装手法であり、Server Actionsと組み合わせることでフォーム送信の体感速度を大幅に改善する。

React의 useOptimistic 훅을 사용하여 서버 응답 전에 UI를 즉시 갱신하는 구현 기법이며, Server Actions와 조합함으로써 폼 전송의 체감 속도를 대폭 개선한다.

font-displayプロパティでWebフォントの読み込み中の挙動を制御する手法。swap・optional・fallbackなどを適切に選択し、FOIT（テキスト非表示）やFOUT（フォント切り替わり）を管理する。

font-display 프로퍼티로 웹 폰트 로딩 중의 동작을 제어하는 기법. swap·optional·fallback 등을 적절히 선택하여 FOIT(텍스트 비표시)나 FOUT(폰트 전환)을 관리한다.

web-vitalsライブラリでLCP、CLS等のCore Web Vitalsを計測し、分析ツールへ自動送信する仕組み。RUMとしてフィールドデータを継続的に収集しパフォーマンス劣化を検知する。

web-vitals 라이브러리로 LCP, FID, CLS 등의 Core Web Vitals를 계측하여 분석 도구에 자동 전송하는 구조이다. RUM(Real User Monitoring)으로 필드 데이터를 지속적으로 수집하여 성능 저하를 감지한다.

ReactのレンダリングをUIの応答性を維持しながら中断・再開できる仕組み。重い処理中もユーザー操作をブロックせず、優先度に基づいて描画を制御する。

React의 렌더링을 UI 응답성을 유지하면서 중단·재개할 수 있는 기능. 무거운 처리 중에도 사용자 조작을 블로킹하지 않고 우선순위에 따라 렌더링을 제어한다.

主要ブラウザ（Chrome/Safari/Firefox/Edge）での表示・動作の一貫性を検証するプロセス。CSSの差異やJavaScript APIの対応状況を確認する。

주요 브라우저(Chrome/Safari/Firefox/Edge)에서의 표시·동작 일관성을 검증하는 프로세스. CSS 차이나 JavaScript API 지원 상황을 확인한다.

container-typeプロパティで指定した要素の幅・高さに基づいてスタイルを切り替えるCSS機能。ビューポートではなく親コンテナのサイズに応じた真のコンポーネント単位のレスポンシブを実現する。

container-type 프로퍼티로 지정한 요소의 너비·높이를 기반으로 스타일을 전환하는 CSS 기능이다. 뷰포트가 아닌 부모 컨테이너 크기에 따른 진정한 컴포넌트 단위의 반응형을 실현한다.

margin-leftやpadding-rightなどの物理方向プロパティをmargin-inline-startなどの論理プロパティに全面的に書き換える手法であり、RTL言語を含む多方向レイアウトへの対応を追加コードなしで実現する。

margin-left나 padding-right 등의 물리 방향 프로퍼티를 margin-inline-start 등의 논리 프로퍼티로 전면적으로 재작성하는 기법이며, RTL 언어를 포함한 다방향 레이아웃에 대한 대응을 추가 코드 없이 실현한다.

複数のビューポートサイズでレイアウトが正しく表示されることを自動的に検証するテスト手法であり、Playwrightのビューポート設定やChromaticのレスポンシブスナップショットを活用して視覚的な回帰を防止する。

복수의 뷰포트 크기에서 레이아웃이 올바르게 표시되는 것을 자동으로 검증하는 테스트 기법이며, Playwright의 뷰포트 설정이나 Chromatic의 반응형 스냅샷을 활용하여 시각적 회귀를 방지한다.

初期表示に必要な最小限のCSSをHTMLにインライン展開し、残りを非同期で読み込む手法。FCP/LCPの改善に直結し、critticalやpenthouseなどのツールで自動抽出する。

초기 표시에 필요한 최소한의 CSS를 HTML에 인라인 전개하고 나머지를 비동기로 읽어오는 기법이다. FCP/LCP의 개선에 직결되며 critters나 penthouse 등의 도구로 자동 추출한다.

タブレット端末の画面サイズ（主に768px〜1024px）に最適化されたUIレイアウト設計。レスポンシブデザインの一部として実装されることが多い。

태블릿 단말기의 화면 크기(주로 768px~1024px)에 최적화된 UI 레이아웃 설계. 반응형 디자인의 일부로 구현되는 경우가 많다.

PlaywrightフレームワークのPage Object Modelやフィクスチャを活用してE2Eテストを設計する手法であり、クロスブラウザテストの安定性と保守性を体系的に向上させる。

Playwright 프레임워크의 Page Object Model이나 픽스처를 활용하여 E2E 테스트를 설계하는 기법이며, 크로스 브라우저 테스트의 안정성과 유지보수성이 체계적으로 향상된다.

Web Worker間でデータをコピーではなく所有権の移転で受け渡す仕組みである。ArrayBufferなどの大きなデータをゼロコピーで転送でき、Worker間通信のオーバーヘッドを大幅に削減する。

Web Worker 간에 데이터를 복사가 아닌 소유권 이전으로 전달하는 구조이다. ArrayBuffer 등의 큰 데이터를 제로 카피로 전송하여 Worker 간 통신 오버헤드를 대폭 줄인다.

SVG要素をCSSアニメーションやJavaScriptで動的に操作するアニメーション手法。アイコンやイラストの動的表現に適している。

SVG 요소를 CSS 애니메이션이나 JavaScript로 동적으로 조작하는 애니메이션 기법. 아이콘이나 일러스트의 동적 표현에 적합하다.

Next.jsのApp Routerでフォーム送信やデータ変更をサーバー側で直接実行できる関数であり、APIルートを別途作成せずにサーバーサイドのロジックをコンポーネントから直接呼び出す。

Next.js의 App Router에서 폼 송신이나 데이터 변경을 서버 측에서 직접 실행할 수 있는 함수이며, API 라우트를 별도로 생성하지 않고 서버 사이드의 로직을 컴포넌트에서 직접 호출한다.

テキスト入力中に候補リストを動的に表示し、選択補助を行うUI機能。デバウンスやキャッシュを活用してAPI呼び出しを最適化し、キーボード操作にも対応させる必要がある。

텍스트 입력 중에 후보 리스트를 동적으로 표시하여 선택 보조를 하는 UI 기능이다. 디바운스나 캐시를 활용하여 API 호출을 최적화하고 키보드 조작에도 대응시킬 필요가 있다.

React Compilerによる自動メモ化を活用してuseMemoやuseCallbackの手動管理を不要にする最適化であり、コンパイル時の静的解析によりパフォーマンスと開発者体験を同時に向上させる。

React Compiler에 의한 자동 메모화를 활용하여 useMemo나 useCallback의 수동 관리를 불필요하게 하는 최적화이며, 컴파일 시의 정적 분석에 의해 성능과 개발자 경험이 동시에 향상된다.

画面外の要素のレンダリングをスキップするCSS機能。content-visibility: autoを指定すると、ビューポート外の要素の描画を省略して初期レンダリング性能を大幅に向上させる。

화면 밖 요소의 렌더링을 스킵하는 CSS 기능이다. content-visibility: auto를 지정하면 뷰포트 밖 요소의 렌더링을 생략하여 초기 렌더링 성능을 대폭 향상시킨다.

Largest Contentful Paintを改善するための包括的な最適化戦略。ヒーロー画像のプリロード、サーバーレスポンス高速化、レンダリングブロック排除を組み合わせてスコアを向上させる。

Largest Contentful Paint를 개선하기 위한 포괄적 최적화 전략이다. 히어로 이미지의 프리로드, 서버 응답 고속화, 렌더링 블록 배제를 조합하여 점수를 향상시킨다.

Next.jsが提供する仕組みで、静的ページをビルド後も一定間隔で自動再生成できる機能。ISRとも呼ばれ、全体リビルド不要でコンテンツを最新に保てる。

Next.js에서 제공하는 기능으로, 정적 페이지를 빌드 후에도 일정 간격으로 자동 재생성할 수 있다. ISR이라고도 불리며, 전체 리빌드 없이 콘텐츠를 최신 상태로 유지할 수 있다.

WebPやAVIFなどの次世代画像フォーマットへの変換をビルド時またはCDN経由で自動的に行う手法であり、ブラウザのサポート状況に応じた最適なフォーマットを配信してファイルサイズを削減する。

WebP나 AVIF 등의 차세대 이미지 포맷으로의 변환을 빌드 시 또는 CDN 경유로 자동으로 수행하는 기법이며, 브라우저의 지원 상황에 따른 최적의 포맷을 전달하여 파일 크기를 삭감한다.

Service Workerのインストール・待機・有効化・更新のライフサイクルを適切に管理する手法であり、新バージョンの通知やスキップウェイティングの制御でユーザーへの影響を最小化する。

Service Worker의 인스톨, 대기, 유효화, 갱신의 라이프사이클을 적절히 관리하는 기법이며, 신규 버전의 통지나 스킵 웨이팅의 제어로 사용자에 대한 영향을 최소화한다.

CSSカスタムプロパティとも呼ばれ、`--変数名`の形式で定義し`var()`関数で参照できるCSS固有の変数機能。テーマ切替やデザイントークン管理に広く活用される。

CSS 커스텀 프로퍼티라고도 불리며, `--변수명` 형식으로 정의하고 `var()` 함수로 참조할 수 있는 CSS 고유의 변수 기능. 테마 전환이나 디자인 토큰 관리에 널리 활용된다.

スタイルを持たずにロジックとアクセシビリティのみを提供するヘッドレスUIライブラリを活用する手法であり、独自のデザインシステムと組み合わせて完全にカスタマイズされたUIを構築する。

스타일을 갖지 않고 로직과 접근성만을 제공하는 헤드리스 UI 라이브러리를 활용하는 기법이며, 독자적인 디자인 시스템과 조합하여 완전히 커스터마이즈된 UI를 구축한다.

ブラウザの合成レイヤーの仕組みを理解し、will-changeやtransformプロパティを使ってGPUアクセラレーションを活用したスムーズなアニメーションを実現する描画最適化手法。

브라우저의 합성 레이어 구조를 이해하고 will-change나 transform 프로퍼티를 사용하여 GPU 가속을 활용한 매끄러운 애니메이션을 구현하는 그리기 최적화 기법이다.

ESモジュールのimportチェーンを分析し、modulepreloadリンクで重要なモジュールを事前取得する設計。ウォーターフォール型の読み込みを回避し、モジュール取得の並列化で速度を向上させる。

ES 모듈의 import 체인을 분석하고 modulepreload 링크로 중요한 모듈을 사전 취득하는 설계이다. 워터폴형 로딩을 회피하고 모듈 취득의 병렬화로 속도를 향상시킨다.

Reactアプリでサーバーデータのフェッチ・キャッシュ・同期を効率化するライブラリ。非同期状態管理をシンプルにし、ローディングやエラー処理も標準化できる。

React 앱에서 서버 데이터의 페칭·캐싱·동기화를 효율적으로 처리하는 라이브러리. 비동기 상태 관리를 단순화하고 로딩 및 에러 처리도 표준화할 수 있다.

ユーザーがフォームに入力したデータが正しい形式・条件を満たしているかチェックする処理。クライアント側とサーバー側の両方で実施するのが基本。

사용자가 폼에 입력한 데이터가 올바른 형식과 조건을 충족하는지 확인하는 처리. 클라이언트 측과 서버 측 모두에서 실시하는 것이 기본이다.

DOM要素のサイズ変化を監視するブラウザAPIで、要素のwidthやheightが変わった際にコールバックを発火する。ウィンドウリサイズと独立して要素単位で監視できる点が特徴。

DOM 요소의 크기 변화를 감지하는 브라우저 API로, 요소의 width나 height가 변경될 때 콜백을 실행한다. 윈도우 리사이즈와 독립적으로 요소 단위로 감시할 수 있는 것이 특징이다.

画面の表示領域外にあるリソースを、必要なタイミングまで読み込みを遅延させる技術。初期表示に不要な画像やコンポーネントの読み込みを後回しにして初期ロード時間を短縮する。

화면의 표시 영역 밖에 있는 리소스를 필요한 타이밍까지 로딩을 지연시키는 기술이다. 초기 표시에 불필요한 이미지나 컴포넌트의 로딩을 후순위로 돌려 초기 로드 시간을 단축한다.

コンテンツ読み込み中にワイヤーフレーム状のプレースホルダーを表示するUI手法の設計。スピナーより知覚速度が向上し、実際のレイアウトに近い形状でCLSの発生も防止する。

콘텐츠 로딩 중에 와이어프레임 형태의 플레이스홀더를 표시하는 UI 기법의 설계이다. 스피너보다 지각 속도가 향상되고 실제 레이아웃에 가까운 형상으로 CLS 발생도 방지한다.

デバイスの画面サイズや解像度に応じて最適な画像を配信する手法。srcset属性やpicture要素を使い、不要に大きな画像の転送を防いでパフォーマンスを向上させる。

디바이스의 화면 크기나 해상도에 따라 최적의 이미지를 배포하는 기법이다. srcset 속성이나 picture 요소를 사용하여 불필요하게 큰 이미지의 전송을 방지하고 퍼포먼스를 향상시킨다.

画像の特定領域にクリッカブルなリンクを設定するHTML技法。レスポンシブ環境ではビューポートに応じた座標の動的再計算が必要となり、SVGベースの代替実装も検討される。

이미지의 특정 영역에 클릭 가능한 링크를 설정하는 HTML 기법이다. 반응형 대응에는 좌표의 동적 재계산이 필요하며 SVG 기반 대체 구현도 검토된다.

ブラウザを通じてWebサービスからユーザーへリアルタイムに通知を送る仕組み。Service WorkerとPush APIを利用し、ブラウザが閉じていても通知が届く。

브라우저를 통해 웹 서비스에서 사용자에게 실시간으로 알림을 보내는 방식. Service Worker와 Push API를 활용하며, 브라우저가 닫혀 있어도 알림 수신이 가능하다.

アプリケーションのJavaScriptバンドルを複数の小さなチャンクに分割し、必要なときだけ読み込むことでパフォーマンスを向上させる技術。WebpackやViteなどで実装される。

애플리케이션의 JavaScript 번들을 여러 개의 작은 청크로 분할하여 필요할 때만 로드함으로써 성능을 향상시키는 기술. Webpack이나 Vite 등으로 구현된다.

ブラウザやデバイス上でWebページの表示領域を指す概念。レスポンシブデザインでは、metaタグのviewport設定によりモバイル端末での表示を最適化する。

브라우저나 기기에서 웹 페이지가 표시되는 영역을 가리키는 개념. 반응형 디자인에서는 meta 태그의 viewport 설정을 통해 모바일 기기의 표시를 최적화한다.

デバイスの画面幅に応じてレイアウトを切り替える基準点の設計。モバイル・タブレット・デスクトップの主要な画面サイズをカバーする。

디바이스 화면 너비에 따라 레이아웃을 전환하는 기준점 설계. 모바일·태블릿·데스크톱의 주요 화면 사이즈를 커버한다.

Reactなどで使えるProxyベースの軽量状態管理ライブラリ。状態をmutableに扱え、直感的なAPIでシンプルなコードを実現できる。

React 등에서 사용할 수 있는 Proxy 기반의 경량 상태 관리 라이브러리. 상태를 mutable하게 다룰 수 있으며 직관적인 API로 간결한 코드를 작성할 수 있다.

HTML5のDrag and Drop APIで、要素やファイルのドラッグ操作をブラウザネイティブで実装する仕組みである。draggable属性とdragstart/dropイベントで制御し、データ転送にdataTransferオブジェクトを使用する。

HTML5의 Drag and Drop API로 요소나 파일의 드래그 조작을 브라우저 네이티브로 구현하는 구조이다. draggable 속성과 dragstart/drop 이벤트로 제어하며 데이터 전송에 dataTransfer 객체를 사용한다.

HTMLやXML文書をツリー構造で表現したプログラミングインターフェース。JavaScriptからノードを操作することでページの動的な更新が可能になる。

HTML 또는 XML 문서를 트리 구조로 표현한 프로그래밍 인터페이스. JavaScript로 노드를 조작하여 페이지를 동적으로 업데이트할 수 있다.

多言語対応アプリケーションにおける翻訳キーの命名規則、名前空間の分割、未翻訳キーの検出を体系化する戦略であり、i18nextなどと連携してコードと翻訳リソースの整合性を維持する。

다국어 대응 애플리케이션에서의 번역 키의 명명 규칙, 네임스페이스의 분할, 미번역 키의 검출을 체계화하는 전략이며, i18next 등과 연계하여 코드와 번역 리소스의 정합성을 유지한다.

Scroll-driven AnimationsやScrollTimelineを使い、スクロール位置に応じたアニメーションをCSS/JSで実装する設計。パララックスやプログレスバーなどを高パフォーマンスで実現する。

Scroll-driven Animations나 ScrollTimeline을 사용하여 스크롤 위치에 따른 애니메이션을 CSS/JS로 구현하는 설계이다. 패럴랙스나 프로그레스 바 등을 고성능으로 실현한다.

ユニットテストやインテグレーションテストが書きやすいようにコンポーネントを設計する手法。依存性の注入やPropsの明確化が重要。

유닛 테스트나 인테그레이션 테스트를 작성하기 쉽도록 컴포넌트를 설계하는 기법. 의존성 주입이나 Props 명확화가 중요하다.

親要素のサイズに基づいてスタイルを変更するCSS機能。従来のメディアクエリがビューポート基準なのに対し、コンポーネント単位でレスポンシブ対応が可能になる。

부모 요소의 크기를 기준으로 스타일을 변경하는 CSS 기능. 기존 미디어 쿼리가 뷰포트 기준인 것과 달리, 컴포넌트 단위로 반응형 대응이 가능해진다.

アプリケーション内のデータの状態を一元的に管理する手法。ReactのReduxやVuexなど、フレームワーク固有のライブラリを用いて実装されることが多い。

애플리케이션 내 데이터 상태를 중앙에서 관리하는 기법. React의 Redux나 Vuex 등 프레임워크 전용 라이브러리를 활용해 구현하는 경우가 많다.

古いブラウザが対応していない最新のWeb標準機能を、JavaScriptで擬似的に実装して補完するコード。クロスブラウザ対応の際に使用される。

구형 브라우저가 지원하지 않는 최신 웹 표준 기능을 JavaScript로 유사하게 구현하여 보완하는 코드. 크로스 브라우저 대응 시 사용된다.

ユーザーのデバイス性能やネットワーク速度に応じて配信コンテンツの品質を動的に調整する実装。Navigator APIで接続状況を判定し、低帯域環境では軽量版コンテンツを提供する。

사용자의 디바이스 성능이나 네트워크 속도에 따라 배신 콘텐츠의 품질을 동적으로 조정하는 구현이다. Navigator API로 접속 상황을 판정하고 저대역 환경에서는 경량판 콘텐츠를 제공한다.

ブラウザやCDNがHTTPレスポンスをキャッシュする方法を制御する戦略。Cache-ControlやETagヘッダーを活用し、通信コスト削減とパフォーマンス向上を図る。

브라우저나 CDN이 HTTP 응답을 캐시하는 방법을 제어하는 전략. Cache-Control 및 ETag 헤더를 활용하여 통신 비용 절감과 성능 향상을 도모한다.

ビルド時またはリクエスト前にHTMLを事前生成しておく手法。クローラー向けのSEO対策や初期表示速度の高速化に有効で、SPAでも静的なHTMLを返すことが可能になる。

빌드 시 또는 요청 전에 HTML을 사전 생성해 두는 기법. 크롤러를 위한 SEO 대책이나 초기 표시 속도 고속화에 유효하며, SPA에서도 정적인 HTML을 반환할 수 있게 된다.

WebP/AVIFなどの次世代画像フォーマットをpicture要素やCDNの自動変換で配信する対応。従来のJPEG/PNGと比較してファイルサイズを30-70%削減し、表示速度を向上させる。

WebP/AVIF 등의 차세대 이미지 포맷을 picture 요소나 CDN의 자동 변환으로 배신하는 대응이다. 기존 JPEG/PNG와 비교하여 파일 사이즈를 30-70% 삭감하고 표시 속도를 향상시킨다.

axe-core、jest-axe、pa11yなどを組み合わせてアクセシビリティテストをCI/CDに統合する基盤の構築。自動検出可能な違反を漏れなくキャッチし、手動テストとの役割分担を明確にする。

axe-core, jest-axe, pa11y 등을 조합하여 접근성 테스트를 CI/CD에 통합하는 기반의 구축이다. 자동 검출 가능한 위반을 빠짐없이 캐치하고 수동 테스트와의 역할 분담을 명확히 한다.

CSSコンテナクエリの拡張で、親要素のCSSカスタムプロパティの値に基づいて子要素のスタイルを条件分岐させる機能。テーマやコンテキストに応じた柔軟なスタイル適用が可能になる。

CSS 컨테이너 쿼리의 확장으로, 부모 요소의 CSS 커스텀 프로퍼티 값에 기반하여 자식 요소의 스타일을 조건 분기시키는 기능. 테마나 컨텍스트에 따른 유연한 스타일 적용이 가능해진다.

WebpackやViteのModule Federationを使って独立したアプリケーション間でモジュールをランタイムに共有する設計であり、共有ライブラリのバージョン管理やフォールバック戦略を策定する。

Webpack이나 Vite의 Module Federation을 사용하여 독립된 애플리케이션 간에 모듈을 런타임에 공유하는 설계이며, 공유 라이브러리의 버전 관리나 폴백 전략을 수립한다.

HTMLをチャンク単位で段階的にクライアントへ送信するレンダリング手法。全体の生成完了を待たずに部分的な表示を開始でき、Time to First Byteの短縮に効果的である。

HTML을 청크 단위로 단계적으로 클라이언트에 전송하는 렌더링 기법이다. 전체 생성 완료를 기다리지 않고 부분적인 표시를 시작할 수 있어 Time to First Byte 단축에 효과적이다.

要素のサイズ変更を非同期で検知するResize Observerの活用手法。ウィンドウリサイズではなく個別要素のサイズ変化に反応し、レスポンシブなコンポーネント設計を実現する。

요소의 사이즈 변경을 비동기로 검지하는 Resize Observer의 활용 기법이다. 윈도우 리사이즈가 아닌 개별 요소의 사이즈 변화에 반응하여 반응형 컴포넌트 설계를 실현한다.

HTMLをサーバー側で生成してクライアントに返す描画方式。初期表示の高速化やSEO対策に有効で、Next.jsやNuxt.jsで広く採用されている。

HTML을 서버 측에서 생성하여 클라이언트에 반환하는 렌더링 방식. 초기 표시 속도 향상과 SEO 대응에 효과적이며, Next.js와 Nuxt.js에서 널리 채택되고 있다.

階層的なデータ構造をツリー形式で表示するUIコンポーネント。ファイルエクスプローラーや組織図に使われ、ノードの展開・折りたたみやドラッグ&ドロップによる並び替えを実装する。

계층적 데이터 구조를 트리 형식으로 표시하는 UI 컴포넌트이다. 파일 탐색기나 조직도에 사용되며 노드의 펼침·접기나 드래그 앤 드롭에 의한 정렬을 구현한다.

ビューポートに入ったタイミングでコンテンツを読み込み描画する技法。content-visibility CSSプロパティやIntersection Observerを活用し、初期レンダリングコストを大幅に削減する。

뷰포트에 들어온 타이밍에 콘텐츠를 로드하여 렌더링하는 기법이다. content-visibility CSS 프로퍼티나 Intersection Observer를 활용하여 초기 렌더링 비용을 대폭 삭감한다.

filter プロパティで要素にぼかし・明度・コントラストなどの視覚効果を適用するCSS機能である。blur()やbrightness()などの関数を組み合わせ、画像加工ソフトのような効果をCSSだけで実現する。

filter 프로퍼티로 요소에 블러·명도·콘트라스트 등의 시각 효과를 적용하는 CSS 기능이다. blur()나 brightness() 등의 함수를 조합하여 이미지 편집 소프트웨어와 같은 효과를 CSS만으로 구현한다.

現在のページで確実に必要なリソースを高優先度で事前に読み込むブラウザ機能。フォントやCSSなどのクリティカルリソースの取得を早め、レンダリングブロックを軽減する。

현재 페이지에서 확실히 필요한 리소스를 고우선도로 사전에 로딩하는 브라우저 기능이다. 폰트나 CSS 등의 크리티컬 리소스 취득을 앞당겨 렌더링 블록을 경감한다.

フロントエンドアプリをマイクロサービス的に独立したモジュールへ分割するアーキテクチャ。チームごとに独立したデプロイ・技術選択が可能になる。

프론트엔드 앱을 마이크로서비스처럼 독립된 모듈로 분할하는 아키텍처. 팀별로 독립적인 배포 및 기술 선택이 가능해진다.

物理的な方向（上下左右）ではなく、テキストの流れに基づいた論理的な方向でレイアウトを指定するCSSプロパティである。RTL言語への対応が容易になり、国際化されたUIを効率的に構築できる。

물리적 방향(상하좌우)이 아닌 텍스트 흐름에 기반한 논리적 방향으로 레이아웃을 지정하는 CSS 프로퍼티이다. RTL 언어 대응이 용이해지며 국제화된 UI를 효율적으로 구축할 수 있다.

UIコンポーネントを化学の原子（Atoms）になぞらえ、Atoms→Molecules→Organisms→Templates→Pagesの5階層に分けて設計・構築していくフロントエンドのコンポーネント設計手法。

UI 컴포넌트를 화학의 원자(Atoms)에 비유하여, Atoms→Molecules→Organisms→Templates→Pages의 5계층으로 나누어 설계하고 구축해 나가는 프론트엔드 컴포넌트 설계 기법.

React・Vue・SolidJS向けのサーバー状態管理ライブラリ（旧React Query）。APIのフェッチ・キャッシュ・同期・更新を宣言的に扱え、ボイラープレートを大幅に削減できる。

React·Vue·SolidJS용 서버 상태 관리 라이브러리(구 React Query). API의 페치·캐시·동기화·업데이트를 선언적으로 다룰 수 있어 보일러플레이트를 대폭 줄일 수 있다.

Facebookが提唱したフロントエンドのアーキテクチャパターン。データの流れを一方向に制限し、Action・Dispatcher・Store・Viewの4要素でアプリケーションの状態を管理する。

Facebook이 제안한 프론트엔드 아키텍처 패턴. 데이터 흐름을 단방향으로 제한하고, Action·Dispatcher·Store·View의 4가지 요소로 애플리케이션 상태를 관리한다.

ブラウザのメインスレッドとは別にバックグラウンドでJavaScriptを実行する仕組み。重い処理をUIスレッドから切り離し、画面のフリーズを防ぐために使用される。

브라우저의 메인 스레드와 별개로 백그라운드에서 JavaScript를 실행하는 메커니즘. 무거운 처리를 UI 스레드에서 분리해 화면 멈춤 현상을 방지하는 데 사용된다.

長時間実行されるJavaScript処理をWeb WorkerやrequestIdleCallbackで分散してメインスレッドの応答性を維持する手法であり、UIのフリーズやジャンクを防止してユーザー体験を改善する。

장시간 실행되는 JavaScript 처리를 Web Worker나 requestIdleCallback으로 분산하여 메인 스레드의 응답성을 유지하는 기법이며, UI의 프리즈나 쟁크를 방지하여 사용자 경험을 개선한다.

複数のAPIリクエストを直列ではなく並列に実行し、データ取得のウォーターフォールを防ぐ手法。Promise.allやuseQueriesを使い、ページの読み込み時間を短縮する効果がある。

여러 API 요청을 직렬이 아닌 병렬로 실행하여 데이터 취득의 워터폴을 방지하는 기법. Promise.all이나 useQueries를 사용하여 페이지 로딩 시간을 단축하는 효과가 있다.

StorybookでUIコンポーネントのカタログを作成・維持する運用プロセス。ビジュアルテストやデザイナーとのコミュニケーションに活用する。

Storybook으로 UI 컴포넌트 카탈로그를 작성·유지하는 운용 프로세스. 비주얼 테스트나 디자이너와의 커뮤니케이션에 활용한다.

ブラウザにキーバリュー形式でデータを保存するAPIで、localStorageとsessionStorageの2種類がある。Cookieより大容量で、クライアントサイドのデータ永続化に使用される。

브라우저에 키-밸류 형식으로 데이터를 저장하는 API로 localStorage와 sessionStorage의 2종류가 있다. Cookie보다 대용량이며 클라이언트 사이드의 데이터 영속화에 사용된다.

ブラウザのポップアップブロッカーを回避するための実装手法。ユーザーアクションに起因するwindow.openの呼び出しや、同一タブ内での代替UI表示によりブロックを防止する。

브라우저의 팝업 블로커를 회피하기 위한 구현 기법이다. 사용자 액션에 기인하는 window.open 호출이나 동일 탭 내 대체 UI 표시로 차단을 방지한다.

親要素のサイズに基づいてスタイルを切り替えるCSS Container Queriesの実装手法。メディアクエリと異なりコンポーネント単位でレスポンシブ対応でき、再利用性を大幅に向上させる。

부모 요소의 사이즈에 기반하여 스타일을 전환하는 CSS Container Queries의 구현 기법이다. 미디어 쿼리와 달리 컴포넌트 단위로 반응형 대응이 가능하여 재사용성을 대폭 향상시킨다.

現在の画面上に重ねて表示されるダイアログやポップアップのこと。ユーザーが操作を完了するまで背面のコンテンツを操作できなくするUI要素。

현재 화면 위에 겹쳐서 표시되는 다이얼로그나 팝업을 말한다. 사용자가 작업을 완료할 때까지 뒤쪽 콘텐츠를 조작할 수 없게 하는 UI 요소이다.

画面外からスライドして表示されるモバイル向けナビゲーション。ハンバーガーメニューと連動し、フォーカストラップやESCキーでの閉じる操作などアクセシビリティ対応が重要になる。

화면 밖에서 슬라이드하여 표시되는 모바일용 내비게이션이다. 햄버거 메뉴와 연동하며 포커스 트랩이나 ESC 키로 닫기 조작 등 접근성 대응이 중요하다.

Reactコンポーネントツリーの一部でエラーが発生しても、アプリ全体がクラッシュしないようにエラーをキャッチする仕組み。UXの向上に重要。

React 컴포넌트 트리의 일부에서 에러가 발생해도 앱 전체가 크래시하지 않도록 에러를 캐치하는 구조. UX 향상에 중요하다.

フォーム要素の値を初期状態に戻す処理のことである。HTMLのreset型ボタンやJavaScriptのform.reset()メソッドで実行し、バリデーション状態やカスタム状態も適切にクリアする必要がある。

폼 요소의 값을 초기 상태로 되돌리는 처리를 말한다. HTML의 reset 타입 버튼이나 JavaScript의 form.reset() 메서드로 실행하며 밸리데이션 상태나 커스텀 상태도 적절히 클리어해야 한다.

ビルド時にCSSを生成（ゼロランタイム）する、型安全なCSS-in-JSライブラリ。Chakra UIチームが開発し、Next.jsのServer Components環境などでも安全に動作する。

빌드 시 CSS를 생성(제로 런타임)하는 타입 안전 CSS-in-JS 라이브러리. Chakra UI 팀이 개발했으며, Next.js의 Server Components 환경 등에서도 안전하게 동작한다.

JSON-LDやMicrodataなどの形式でWebページの内容を検索エンジンが理解しやすい構造化データとして記述する手法。リッチスニペットやナレッジパネルの表示に活用される。

JSON-LD나 Microdata 등의 형식으로 웹 페이지 내용을 검색 엔진이 이해하기 쉬운 구조화 데이터로 기술하는 기법. 리치 스니펫이나 지식 패널 표시에 활용된다.

CSSアニメーションの実装でGPU合成を活用し60fpsを維持する手法。transform/opacityの使用やwill-changeプロパティで最適化する。

CSS 애니메이션 구현에서 GPU 합성을 활용하여 60fps를 유지하는 기법. transform/opacity 사용이나 will-change 프로퍼티로 최적화한다.

長いフォームを複数のステップに分割し、段階的に入力を進めるUXパターン。各ステップ間でフォーム状態を保持しつつ、戻る・進むの操作とバリデーションをステップ単位で管理する。

긴 폼을 여러 단계로 분할하여 단계적으로 입력을 진행하는 UX 패턴이다. 각 단계 간 상태를 유지하면서 뒤로·앞으로 조작과 바리데이션을 개별적으로 관리한다.

Reactのための軽量な状態管理ライブラリ。アトム（atom）という最小単位で状態を定義し、必要なコンポーネントのみ再レンダリングされる効率的な設計が特徴。

React를 위한 경량 상태 관리 라이브러리. atom이라는 최소 단위로 상태를 정의하며, 필요한 컴포넌트만 리렌더링되는 효율적인 설계가 특징이다.

ページ下部まで閲覧した際にワンクリックで画面上部へスムーズに戻るボタン。スクロール位置に応じた表示・非表示の切り替えとスクロールアニメーションを組み合わせて実装する。

페이지 하단까지 열람한 후 원클릭으로 화면 상단으로 돌아가는 버튼이다. 스크롤 위치에 따른 표시·비표시 전환과 스무스 스크롤 애니메이션을 구현한다.

CSSのcolor-mix()関数で2つの色を指定比率で混合し、新しい色を生成する機能。テーマカラーのバリエーションをCSS変数と組み合わせて動的に生成でき、デザインシステムの柔軟性が高まる。

CSS의 color-mix() 함수로 2개의 색을 지정 비율로 혼합하여 새로운 색을 생성하는 기능. 테마 컬러의 바리에이션을 CSS 변수와 결합하여 동적으로 생성할 수 있어 디자인 시스템의 유연성이 높아진다.

Webサイトのロード時間やファイルサイズなどに上限値を設けた指標。Performance Budgetとも呼ばれ、パフォーマンス劣化を防ぐためにCI/CDに組み込むことが多い。

웹사이트의 로딩 시간이나 파일 크기 등에 상한선을 설정한 지표로, 성능 저하를 방지하기 위해 CI/CD 파이프라인에 통합하여 관리하는 경우가 많다.

デバイスの画面サイズや解像度に応じて最適な画像を配信する技術。HTMLの`srcset`属性や`<picture>`タグを用いて実装し、表示品質とパフォーマンスを両立させる。

디바이스의 화면 크기나 해상도에 따라 최적의 이미지를 제공하는 기술. HTML의 `srcset` 속성이나 `<picture>` 태그를 사용해 구현하며, 표시 품질과 성능을 동시에 확보한다.

inputmode属性でモバイルデバイスに表示する仮想キーボードの種類を指定するHTML機能である。numeric、tel、emailなどを指定し、入力内容に最適なキーボードを表示させてUXを向上させる。

inputmode 속성으로 모바일 디바이스에 표시하는 가상 키보드 종류를 지정하는 HTML 기능이다. numeric, tel, email 등을 지정하여 입력 내용에 최적의 키보드를 표시시켜 UX를 향상시킨다.

サーバーサイドレンダリングされたHTMLに対して、ページ全体を一度にハイドレーションするのではなく、ユーザーが操作しようとしている部分を優先的にインタラクティブにする手法。

서버 사이드 렌더링된 HTML에 대해 페이지 전체를 한 번에 하이드레이션하는 것이 아니라 사용자가 조작하려는 부분을 우선적으로 인터랙티브하게 만드는 기법이다.

JavaScriptからブラウザのアニメーションエンジンに直接アクセスするAPI。CSSアニメーションと同等の性能でプログラム的にアニメーションを制御できる。

JavaScript에서 브라우저의 애니메이션 엔진에 직접 접근하는 API이다. CSS 애니메이션과 동등한 성능으로 프로그래밍적으로 애니메이션을 제어할 수 있다.

ダークモード時の色反転、コントラスト調整、画像/影/ボーダーの最適化を包括的に設計する手法。単純な色反転ではなく、ダークモード特有のUI課題に対応した設計を行う。

다크 모드 시의 색 반전, 콘트라스트 조정, 이미지/그림자/보더의 최적화를 포괄적으로 설계하는 기법이다. 단순한 색 반전이 아닌 다크 모드 특유의 UI 과제에 대응한 설계를 수행한다.

@layerルールを使いCSSの詳細度管理を階層的に制御する手法。サードパーティCSSやリセットCSSの優先順位を明示的に定義し、スタイルの衝突を根本的に解決する。

@layer 규칙을 사용하여 CSS의 상세도 관리를 계층적으로 제어하는 기법이다. 서드파티 CSS나 리셋 CSS의 우선순위를 명시적으로 정의하고 스타일의 충돌을 근본적으로 해결한다.

モジュールを実行時に非同期で読み込む仕組み。import()構文を使い、必要なタイミングでのみリソースを取得することでバンドルサイズ削減やパフォーマンス改善を実現する。

모듈을 실행 시점에 비동기로 불러오는 방식. import() 구문을 사용하여 필요한 시점에만 리소스를 가져옴으로써 번들 크기 절감과 성능 향상을 실현한다.

TypeScript向けの軽量スキーマバリデーションライブラリ。ZodよりもバンドルサイズがはるかにSmallで、ツリーシェイキングに最適化されている。

TypeScript용 경량 스키마 유효성 검사 라이브러리. Zod보다 번들 크기가 훨씬 작고, 트리 쉐이킹에 최적화되어 있다.

CSS変数をJavaScriptフレームワークのフックと連携させ、動的にスタイルを制御する設計パターン。テーマ切替やレスポンシブ対応をReactのuseStateと組み合わせて実装する。

CSS 변수를 JavaScript 프레임워크의 훅과 연계하여 동적으로 스타일을 제어하는 설계 패턴이다. 테마 전환이나 반응형 대응을 React의 useState와 조합하여 구현한다.

Web Components仕様の一部で、独自のHTML要素を定義できるブラウザAPIのこと。フレームワーク非依存の再利用可能なUIコンポーネントを作成するために使用される。

Web Components 사양의 일부로 독자적인 HTML 요소를 정의할 수 있는 브라우저 API이다. 프레임워크 비의존의 재사용 가능한 UI 컴포넌트를 작성하는 데 사용된다.

ESLintやBiomeなどの静的解析ツールにプロジェクト固有のルールを設定し、コードの一貫性や品質を自動的にチェックする仕組み。チーム全体のコーディング規約の遵守を支援する。

ESLint나 Biome 등의 정적 분석 도구에 프로젝트 고유의 규칙을 설정하여 코드의 일관성과 품질을 자동으로 체크하는 구조. 팀 전체의 코딩 규약 준수를 지원한다.

アップロード画像をブラウザ上でトリミング・リサイズするUIコンポーネント。アスペクト比固定、回転、ズーム機能を持ち、Canvas APIで加工後の画像をBlobとして生成する。

업로드 이미지를 브라우저상에서 트리밍·리사이즈하는 UI 컴포넌트이다. 종횡비 고정, 회전, 줌 기능을 가지며 Canvas API로 가공 후 이미지를 Blob으로 생성한다.

link rel=preconnectを使って、外部ドメインへのDNS解決・TCP接続・TLSネゴシエーションを事前に完了させるリソースヒント。フォントやAPIなど外部リソースの取得開始を高速化する。

link rel=preconnect를 사용하여 외부 도메인에 대한 DNS 해석·TCP 접속·TLS 협상을 사전에 완료시키는 리소스 힌트. 폰트나 API 등 외부 리소스의 취득 시작을 고속화한다.

長いフォームを複数ステップに分割し、進捗表示と段階的な入力誘導で完了率を向上させる設計。各ステップの状態管理、バリデーション、戻る操作時のデータ保持を考慮する。

긴 폼을 여러 스텝으로 분할하고 진행 표시와 단계적 입력 유도로 완료율을 향상시키는 설계이다. 각 스텝의 상태 관리, 밸리데이션, 되돌아가기 조작 시 데이터 보존을 고려한다.

Vercel製のReact向けデータフェッチングライブラリ。stale-while-revalidate戦略を採用し、キャッシュを即時表示しながらバックグラウンドでデータを再検証することで、高速なUXを実現する。

Vercel이 만든 React용 데이터 패칭 라이브러리. stale-while-revalidate 전략을 채택하여 캐시를 즉시 표시하면서 백그라운드에서 데이터를 재검증함으로써 빠른 UX를 실현한다.

Tailwind CSSはユーティリティファーストのCSSフレームワークで、クラスを組み合わせてスタイリングする設計手法。コンポーネントの再利用性と保守性を高める。

Tailwind CSS는 유틸리티 퍼스트 CSS 프레임워크로, 클래스를 조합하여 스타일링하는 설계 방식이다. 컴포넌트의 재사용성과 유지보수성을 높일 수 있다.

ページの読み込み中に予期しないレイアウトのずれが発生する度合いを測定する指標。画像やフォントの読み込みによる要素の移動を防ぎ、0.1以下が良好とされる。

페이지 로딩 중 예기치 않은 레이아웃 어긋남이 발생하는 정도를 측정하는 지표이다. 이미지나 폰트 로딩에 의한 요소 이동을 방지하며 0.1 이하가 양호하다고 된다.

ビューポート外の画像の読み込みを遅延させ、初期ロード時間を短縮する手法。loading=lazy属性やIntersection Observerで実装する。

뷰포트 밖의 이미지 로딩을 지연시켜 초기 로드 시간을 단축하는 기법. loading=lazy 속성이나 Intersection Observer로 구현한다.

画面サイズやデバイスに応じてレイアウトが自動的に最適化されるUI設計手法。PC・タブレット・スマホなど異なる端末で最適な表示を実現する。

화면 크기나 디바이스에 따라 레이아웃이 자동으로 최적화되는 UI 설계 방식. PC·태블릿·스마트폰 등 다양한 기기에서 최적의 화면을 제공한다.

@layerルールでCSSの優先順位を明示的に制御する設計手法。リセット、ベース、コンポーネント、ユーティリティの順にレイヤーを定義し、詳細度の競合を根本的に解決する。

@layer 규칙으로 CSS 우선순위를 명시적으로 제어하는 설계 기법이다. 리셋, 베이스, 컴포넌트, 유틸리티 순으로 레이어를 정의하여 상세도 경합을 근본적으로 해결한다.

CSSクラス名やスタイルプロパティを型チェックで保護する手法。Vanilla Extract、StyleX、typed-cssなどのツールでビルド時に型エラーを検出し、スタイルの不整合を防止する。

CSS 클래스명이나 스타일 프로퍼티를 타입 체크로 보호하는 기법이다. Vanilla Extract, StyleX, typed-css 등의 도구로 빌드 시 타입 에러를 검출하여 스타일 불일치를 방지한다.

フロントエンドの巨大なモノリスを、機能やチームごとに独立した小さなコンポーネントに分割し、統合して一つのアプリとして見せるアーキテクチャ。マイクロサービスのフロント版。

프론트엔드의 거대한 모놀리스를 기능이나 팀 단위로 독립된 작은 컴포넌트로 분할하고 통합하여 하나의 앱으로 보여주는 아키텍처. 마이크로서비스의 프론트엔드 버전이다.

ドラッグ&ドロップやファイル選択ダイアログでファイルをアップロードするUIコンポーネント。プログレスバー表示、ファイルサイズ・形式のバリデーション、チャンクアップロードに対応する。

드래그 앤 드롭이나 파일 선택 다이얼로그로 파일을 업로드하는 UI 컴포넌트이다. 프로그레스 바 표시, 파일 크기·형식 바리데이션, 청크 업로드에 대응한다.

スクロールしても画面上部に固定表示されるヘッダー。position: stickyで実装し、スクロール方向に応じた表示・非表示切り替えやサイズ縮小アニメーションを付与する。

스크롤해도 화면 상단에 고정 표시되는 헤더이다. position: sticky로 구현하며 스크롤 방향에 따른 표시·비표시 전환이나 크기 축소 애니메이션을 부여한다.

複数のJavaScriptファイルやモジュールを1つまたは少数のファイルにまとめるツール。WebpackやVite、Rollupなどが代表例で、依存関係の解決や最適化も行う。

여러 JavaScript 파일이나 모듈을 하나 또는 소수의 파일로 묶어주는 도구. Webpack, Vite, Rollup 등이 대표적이며, 의존성 해결 및 최적화도 수행한다.

検索エンジンに適切にインデックスされるための技術的なSEO施策の実装。構造化データ、サイトマップ生成、canonicalタグなどを設定する。

검색 엔진에 적절히 인덱싱되기 위한 기술적 SEO 시책의 구현. 구조화 데이터, 사이트맵 생성, canonical 태그 등을 설정한다.

Cloudinary・imgix・Vercel Image OptimizationなどのCDNサービスを使い、画像のリサイズ・フォーマット変換・品質調整をURL パラメータで動的に行う最適化手法。

Cloudinary·imgix·Vercel Image Optimization 등의 CDN 서비스를 사용하여 이미지의 리사이즈·포맷 변환·품질 조정을 URL 파라미터로 동적으로 수행하는 최적화 기법이다.

HTML5で提供されるグラフィック描画用の要素。JavaScriptを使って図形・画像・アニメーションをピクセル単位で動的に描画できるAPIを提供する。

HTML5에서 제공하는 그래픽 렌더링용 요소. JavaScript를 사용해 도형·이미지·애니메이션을 픽셀 단위로 동적으로 그릴 수 있는 API를 제공한다.

新規ユーザーに対して画面上の要素を順番にハイライトしながら機能説明を表示するオンボーディングUI。ステップバイステップで操作方法を案内し、学習コストを低減する。

신규 사용자에게 화면상의 요소를 순서대로 하이라이트하면서 기능 설명을 표시하는 온보딩 UI이다. 단계별로 조작 방법을 안내하여 학습 비용을 저감한다.

color-mix()関数で2つの色を任意の割合で混合するCSS機能である。テーマカラーからバリエーションを動的に生成でき、デザインシステムのカラーパレット管理を簡素化する。

color-mix() 함수로 두 가지 색을 임의의 비율로 혼합하는 CSS 기능이다. 테마 색상에서 변형을 동적으로 생성할 수 있어 디자인 시스템의 컬러 팔레트 관리를 간소화한다.

ページ上部に非表示で配置し、キーボード操作時にフォーカスするとメインコンテンツへ直接移動できるリンクである。ナビゲーション部分の繰り返しタブ操作を省略でき、アクセシビリティを向上させる。

페이지 상단에 비표시로 배치하고 키보드 조작 시 포커스하면 메인 콘텐츠로 직접 이동할 수 있는 링크이다. 내비게이션 부분의 반복 탭 조작을 생략하여 접근성을 향상시킨다.

アプリ内の通知を一元管理するUI領域。既読・未読の管理、通知の種類別フィルタリング、リアルタイム更新機能を備え、WebSocket やServer-Sent Eventsと連携して実装する。

앱 내 알림을 일원 관리하는 UI 영역이다. 읽음·안 읽음 관리, 알림 종류별 필터링, 실시간 갱신 기능을 갖추며 WebSocket이나 Server-Sent Events와 연계하여 구현한다.

Rustベースの軽量・高速・セキュアなクロスプラットフォームのデスクトップアプリ構築フレームワーク。OSネイティブのWebViewを使うため、Electronに比べてバイナリサイズが非常に小さい。

Rust 기반의 가볍고 빠르며 안전한 크로스 플랫폼 데스크톱 앱 구축 프레임워크. OS 네이티브 WebView를 사용하기 때문에 Electron에 비해 바이너리 크기가 매우 작다.

画像やグラデーションを使って要素の表示領域を制御するCSSプロパティである。mask-imageプロパティでマスク形状を指定し、複雑な切り抜き効果や透過表現を実現する。

이미지나 그라데이션을 사용하여 요소의 표시 영역을 제어하는 CSS 프로퍼티이다. mask-image 프로퍼티로 마스크 형상을 지정하여 복잡한 클리핑 효과나 투과 표현을 구현한다.

Time to First Byteを短縮するためのサーバー・ネットワーク・キャッシュの最適化戦略。CDNエッジキャッシュ、サーバーサイドレンダリング最適化、データベースクエリの効率化を含む。

Time to First Byte를 단축하기 위한 서버·네트워크·캐시의 최적화 전략이다. CDN 에지 캐시, 서버 사이드 렌더링 최적화, 데이터베이스 쿼리의 효율화를 포함한다.

画面サイズやユーザー設定に応じてフォントサイズを動的に変化させる手法。CSSのclamp()やvw単位、rem単位などを活用してレスポンシブなタイポグラフィを実現する。

화면 크기나 사용자 설정에 따라 폰트 크기를 동적으로 변경하는 기법. CSS의 clamp()나 vw 단위, rem 단위 등을 활용해 반응형 타이포그래피를 구현한다.

Next.jsが提供するレンダリング方式で、ページの静的部分を事前レンダリングしつつ動的部分をストリーミングで後から埋め込む手法。静的サイトの速度と動的コンテンツの柔軟性を両立する。

Next.js가 제공하는 렌더링 방식으로, 페이지의 정적 부분을 사전 렌더링하면서 동적 부분을 스트리밍으로 나중에 삽입하는 기법. 정적 사이트의 속도와 동적 콘텐츠의 유연성을 양립한다.

JavaScriptモジュールバンドラーであるRollupのビルド設定。入力ファイル・出力形式・プラグイン等をrollup.config.jsに記述し、ライブラリやアプリのバンドルを制御する。

JavaScript 모듈 번들러인 Rollup의 빌드 설정. 입력 파일, 출력 형식, 플러그인 등을 rollup.config.js에 작성하여 라이브러리나 앱의 번들링을 제어한다.

HTMLのpopover属性を使い、JavaScriptなしでポップオーバー要素を制御できるブラウザネイティブAPIである。トップレイヤーに自動配置されるため、z-indexの管理が不要になる。

HTML의 popover 속성을 사용하여 JavaScript 없이 팝오버 요소를 제어할 수 있는 브라우저 네이티브 API이다. 톱 레이어에 자동 배치되므로 z-index 관리가 불필요해진다.

イベントが実行されること。Trigger/Fire。「이벤트가 발생하다(イベントが発生する)」と言う。

이벤트가 실행되는 것. Trigger/Fire.

ブラウザ上でネイティブに近い速度でコードを実行できるバイナリ形式の命令セット。C/C++やRustなどからコンパイル可能で、Wasmとも呼ばれる。

브라우저에서 네이티브에 가까운 속도로 코드를 실행할 수 있는 바이너리 형식의 명령어 집합으로, C/C++, Rust 등에서 컴파일 가능하며 Wasm이라고도 불린다.

WCAG 2.1のコントラスト比基準を自動的にテストし、アクセシビリティ違反を検出する仕組み。axe-coreやLighthouseをCIに組み込み、コントラスト不足を早期に発見する。

WCAG 2.1의 콘트라스트 비율 기준을 자동으로 테스트하고 접근성 위반을 검출하는 구조이다. axe-core나 Lighthouse를 CI에 포함시켜 콘트라스트 부족을 조기에 발견한다.

CSSカスタムプロパティを特定のコンポーネントやセクションにスコープを限定して定義する手法。グローバル汚染を防ぎ、コンポーネント単位でテーマやスタイルのオーバーライドを可能にする。

CSS 커스텀 프로퍼티를 특정 컴포넌트나 섹션에 스코프를 한정하여 정의하는 기법이다. 글로벌 오염을 방지하고 컴포넌트 단위로 테마나 스타일의 오버라이드를 가능하게 한다.

DOM変更を非同期で監視するMutationObserverの実用的な活用パターン。サードパーティスクリプトのDOM操作検知、動的コンテンツの追跡、カスタム要素の初期化タイミング制御に活用する。

DOM 변경을 비동기로 감시하는 MutationObserver의 실용적 활용 패턴이다. 서드파티 스크립트의 DOM 조작 검지, 동적 콘텐츠의 추적, 커스텀 요소의 초기화 타이밍 제어에 활용한다.

Playwrightなどを使ってユーザーの操作フローを自動テストする設計。重要な業務フローに絞りメンテナンスコストを抑えることが重要。

Playwright 등을 사용하여 사용자의 조작 플로우를 자동 테스트하는 설계. 중요한 업무 플로우에 한정하여 유지보수 비용을 줄이는 것이 중요하다.

Reactの機能で、非同期データ取得やコード分割時にローディング状態を宣言的に制御するコンポーネント。fallbackにローディングUIを指定できる。

React의 기능으로, 비동기 데이터 패칭이나 코드 분할 시 로딩 상태를 선언적으로 제어하는 컴포넌트. fallback에 로딩 UI를 지정할 수 있다.

キーボード操作時にフォーカスされた要素を視覚的に示す輪郭線。:focus-visibleセレクタを使い、マウス操作時は非表示にしつつキーボード操作時のみ表示することが推奨される。

키보드 조작 시 포커스된 요소를 시각적으로 나타내는 윤곽선이다. :focus-visible 셀렉터를 사용하여 마우스 조작 시에는 비표시로 하면서 키보드 조작 시에만 표시하는 것이 권장된다.

Webpack 5で導入された機能で、複数の独立したビルドが実行時に互いのモジュールを動的に共有・読み込みできる仕組み。マイクロフロントエンド構成に多用される。

Webpack 5에서 도입된 기능으로, 독립적으로 빌드된 여러 애플리케이션이 런타임에 서로의 모듈을 동적으로 공유하고 로드할 수 있는 구조. 마이크로 프론트엔드 구성에 널리 활용된다.

StorybookとChromaticを連携させてUIコンポーネントの視覚的なレビューと回帰テストを自動化する運用であり、PRごとにUIの差分を自動検出してデザインレビューのワークフローを効率化する。

Storybook과 Chromatic을 연동시켜 UI 컴포넌트의 시각적 리뷰와 회귀 테스트를 자동화하는 운용이며, PR마다 UI의 차분을 자동 검출하여 디자인 리뷰의 워크플로를 효율화한다.

大量のデータをテーブル形式で表示し、ソート、フィルター、ページネーション機能を備えたUIコンポーネント。仮想スクロールと組み合わせて数万行のデータも高速に描画する。

대량의 데이터를 테이블 형식으로 표시하며 정렬, 필터, 페이지네이션 기능을 갖춘 UI 컴포넌트이다. 가상 스크롤과 조합하여 수만 행의 데이터도 고속으로 렌더링한다.

React向けのアニメーションライブラリ。宣言的なAPIでフェード・スライド・ドラッグ・ジェスチャーなどを簡単に実装でき、複雑なUIアニメーションも直感的に作れる。

React용 애니메이션 라이브러리. 선언적 API로 페이드·슬라이드·드래그·제스처 등을 쉽게 구현할 수 있으며, 복잡한 UI 애니메이션도 직관적으로 제작할 수 있다.

サーバーでレンダリングしたHTMLとクライアントのReactツリーが不一致になるエラー。日時表示やランダム値などが原因になることが多い。

서버에서 렌더링한 HTML과 클라이언트의 React 트리가 불일치하는 에러. 날짜 표시나 랜덤 값 등이 원인이 되는 경우가 많다.

画面の端に一時的に表示される小さな通知UIコンポーネント。数秒後に自動的に消え、ユーザー操作を妨げない非侵入型の通知手法として広く使われる。

화면 가장자리에 일시적으로 표시되는 작은 알림 UI 컴포넌트. 몇 초 후 자동으로 사라지며, 사용자 조작을 방해하지 않는 비침습적 알림 방식으로 널리 사용된다.

JavaScriptをほとんど書かずに、HTMLのカスタム属性だけでAJAXリクエストやCSSトランジション、WebSocketなどの動的機能を実現できる軽量ライブラリ。

JavaScript를 거의 작성하지 않고 HTML 커스텀 속성만으로 AJAX 요청, CSS 트랜지션, WebSocket 등 동적 기능을 구현할 수 있는 경량 라이브러리.

静的生成されたページをリクエスト時にバックグラウンドで再生成する手法。ビルド時間の増大を避けつつ、コンテンツの鮮度とパフォーマンスの両立を実現する。

정적 생성된 페이지를 리퀘스트 시 백그라운드에서 재생성하는 기법이다. 빌드 시간의 증대를 피하면서 콘텐츠의 신선도와 퍼포먼스의 양립을 실현한다.

CDNエッジノード上でコードを実行する軽量ランタイム環境。Node.js APIの一部のみ使用可能で、低レイテンシなレスポンスが実現できる。Next.jsなどで採用。

CDN 엣지 노드에서 코드를 실행하는 경량 런타임 환경. Node.js API의 일부만 사용 가능하며, 낮은 지연 시간의 응답을 실현할 수 있다. Next.js 등에서 채택.

複数のブラウザタブやiframe間で共有できるWeb Workerの一種。共通のWebSocket接続やキャッシュをタブ間で共有し、リソースの効率的な利用を実現する。

복수의 브라우저 탭이나 iframe 간에 공유할 수 있는 Web Worker의 일종이다. 공통의 WebSocket 접속이나 캐시를 탭 간에 공유하여 리소스의 효율적인 이용을 실현한다.

アラビア語やヘブライ語などの右から左に読む言語に対応するため、UIレイアウトを右起点に反転させる実装対応。CSS論理プロパティやdir属性を活用する。

아랍어나 히브리어 등 오른쪽에서 왼쪽으로 읽는 언어를 지원하기 위해 UI 레이아웃을 우측 기준으로 반전시키는 구현 대응. CSS 논리 속성이나 dir 속성을 활용한다.

ブラウザ標準の決済UIを提供するWeb APIで、クレジットカード情報や配送先をブラウザが管理し、チェックアウトフローを大幅に簡略化できる。

브라우저 표준 결제 UI를 제공하는 Web API로, 신용카드 정보와 배송지를 브라우저가 관리하며 결제 플로우를 대폭 간소화할 수 있다.

JavaScriptエラー、APIエラー、パフォーマンス劣化をリアルタイムで検知する監視システムの設計。Sentryなどのエラー監視ツールを活用する。

JavaScript 에러, API 에러, 성능 저하를 실시간으로 감지하는 감시 시스템 설계. Sentry 등의 에러 감시 도구를 활용한다.

HTMLの<dialog>要素を使い、モーダルダイアログやノンモーダルダイアログをネイティブに実装する方法。showModal()メソッドでフォーカストラップや背景のスクロール制御が標準で提供される。

HTML의 <dialog> 요소를 사용하여 모달 다이얼로그나 논모달 다이얼로그를 네이티브로 구현하는 방법. showModal() 메서드로 포커스 트랩이나 배경 스크롤 제어가 표준으로 제공된다.

Webフォントから実際に使用する文字のみを抽出してファイルサイズを削減する手法である。日本語や韓国語のような大きな文字セットを持つ言語で特に効果が大きい。

웹 폰트에서 실제로 사용하는 문자만 추출하여 파일 크기를 줄이는 기법이다. 일본어나 한국어와 같이 큰 문자 세트를 가진 언어에서 특히 효과가 크다.

JavaScriptファイルのasync/defer属性、動的import、パーティション分割を組み合わせた読み込み最適化戦略。初期レンダリングに必要なスクリプトのみを優先し、TTIを短縮する。

JavaScript 파일의 async/defer 속성, 동적 import, 파티션 분할을 조합한 로딩 최적화 전략이다. 초기 렌더링에 필요한 스크립트만을 우선하여 TTI를 단축한다.

Web VitalsやLighthouseスコアを継続的に測定・監視する仕組みの導入。実ユーザーのパフォーマンスデータを収集し改善に活用する。

Web Vitals나 Lighthouse 스코어를 지속적으로 측정·감시하는 구조 도입. 실 사용자의 퍼포먼스 데이터를 수집하여 개선에 활용한다.

Webpack 5で導入された機能で、複数の独立したビルドが実行時に別アプリのモジュールを動的に共有・読み込みできる仕組み。マイクロフロントエンド構成の実現に活用される。

Webpack 5에서 도입된 기능으로, 독립적으로 빌드된 여러 애플리케이션이 런타임에 서로의 모듈을 동적으로 공유하고 로드할 수 있는 구조. 마이크로 프론트엔드 구현에 활용된다.

Vibration APIを利用してタッチ操作時にデバイスを振動させる触覚フィードバック。ボタンタップや入力エラー時に短い振動を発生させ、視覚・聴覚以外のフィードバックチャネルを提供する。

Vibration API를 이용하여 터치 조작 시 디바이스를 진동시키는 촉각 피드백이다. 버튼 탭이나 입력 에러 시 짧은 진동을 발생시켜 시각·청각 이외의 피드백 채널을 제공한다.

CJK文字を含む多言語サイトでのWebフォント配信を最適化する手法。unicode-rangeによるサブセット分割、言語別フォントスタック設計、動的サブセット化でパフォーマンスを確保する。

CJK 문자를 포함하는 다국어 사이트에서의 웹 폰트 배신을 최적화하는 기법이다. unicode-range에 의한 서브셋 분할, 언어별 폰트 스택 설계, 동적 서브셋화로 퍼포먼스를 확보한다.

Web Componentsのカスタム要素に独自の状態を定義し、CSSの擬似クラスで参照できる機能である。:state()セレクターを使い、要素の内部状態に応じたスタイリングが可能になる。

Web Components의 커스텀 요소에 독자적인 상태를 정의하고 CSS의 의사 클래스로 참조할 수 있는 기능이다. :state() 셀렉터를 사용하여 요소의 내부 상태에 따른 스타일링이 가능해진다.

スクロール位置を指定したポイントに自動的に吸着させるCSS機能。カルーセルや画像ギャラリーのスクロール体験を、JavaScriptなしでネイティブに実装できる。

스크롤 위치를 지정한 포인트에 자동으로 흡착시키는 CSS 기능이다. 캐러셀이나 이미지 갤러리의 스크롤 경험을 JavaScript 없이 네이티브로 구현할 수 있다.

dialog要素のshowModal()メソッドで表示される、背景を操作不可にするオーバーレイダイアログである。::backdrop擬似要素で背景を制御し、フォーカストラップやESCキーの閉じ処理がブラウザにより自動提供される。

dialog 요소의 showModal() 메서드로 표시되는 배경 조작을 불가능하게 하는 오버레이 다이얼로그이다. ::backdrop 의사 요소로 배경을 제어하며 포커스 트랩이나 ESC 키 닫기 처리가 브라우저에 의해 자동 제공된다.

StorybookやHistoireを使いUIコンポーネントをカタログ形式で管理・ドキュメント化する運用。各コンポーネントの状態バリエーション、使用方法、アクセシビリティ情報を一元管理する。

Storybook이나 Histoire를 사용하여 UI 컴포넌트를 카탈로그 형식으로 관리·문서화하는 운용이다. 각 컴포넌트의 상태 배리에이션, 사용 방법, 접근성 정보를 일원 관리한다.

WAI-ARIAで定義されたHTML属性で、スクリーンリーダー等の支援技術にUI要素の役割・状態・プロパティを伝えるためのアクセシビリティ仕様。

WAI-ARIA에서 정의한 HTML 속성으로, 스크린 리더 등 보조 기술에 UI 요소의 역할·상태·속성을 전달하기 위한 접근성 사양입니다.

PerformanceObserver APIでブラウザのパフォーマンスエントリを非同期に収集するAPIである。LCP、FID、CLSなどのCore Web Vitals指標をリアルタイムに計測し、パフォーマンス監視に活用する。

PerformanceObserver API로 브라우저의 퍼포먼스 엔트리를 비동기적으로 수집하는 API이다. LCP, FID, CLS 등의 Core Web Vitals 지표를 실시간으로 계측하여 퍼포먼스 모니터링에 활용한다.

ReactベースのフルスタックWebフレームワーク。サーバーサイドレンダリングとネストされたルーティングを標準サポートし、Web標準APIを重視した設計が特徴。

React 기반의 풀스택 웹 프레임워크. 서버 사이드 렌더링과 중첩 라우팅을 기본 지원하며, 웹 표준 API를 중시한 설계가 특징이다.

ブラウザが検出した非推奨API使用、CSP違反、クラッシュなどのエラーを自動的に指定エンドポイントに送信するAPIである。Reporting-Endpointsヘッダーで設定し、本番環境のフロントエンドエラーを網羅的に収集する。

브라우저가 감지한 비권장 API 사용, CSP 위반, 크래시 등의 에러를 자동으로 지정 엔드포인트에 전송하는 API이다. Reporting-Endpoints 헤더로 설정하여 프로덕션 환경의 프런트엔드 에러를 망라적으로 수집한다.

ページ遷移なしでデータを取得する通信。Ajax。

페이지 이동 없이 데이터를 가져오는 통신. Ajax.

アクセシビリティ対応のReactプリミティブコンポーネントライブラリ。Dialog・Dropdown・Tooltip等のUIプリミティブをスタイルなしで提供し、shadcn/ui等のベースにもなっている。

접근성을 고려한 React 프리미티브 컴포넌트 라이브러리. Dialog·Dropdown·Tooltip 등의 UI 프리미티브를 스타일 없이 제공하며, shadcn/ui 등의 기반으로도 사용된다.

Static Site Generationの略。ビルド時にHTMLを事前生成する手法。Next.jsやGatsbyで採用され、CDNキャッシュにより高速配信と高いSEO効果が得られる。

Static Site Generation의 약자. 빌드 시점에 HTML을 사전 생성하는 방식. Next.js나 Gatsby에서 채택하며, CDN 캐싱을 통해 빠른 배포와 높은 SEO 효과를 얻을 수 있다.

ブラウザのパフォーマンスイベントを非同期で監視するWeb APIで、ナビゲーションやリソース読み込みなどのタイミングデータをリアルタイムに取得できる。

브라우저의 성능 이벤트를 비동기로 모니터링하는 Web API로, 내비게이션 및 리소스 로딩 등의 타이밍 데이터를 실시간으로 수집할 수 있다.

CSSの@layerルールを使い、スタイルの優先順位をカスケード順で明示的に管理する仕組み。特定性（詳細度）に依存せず、レイヤー定義順でスタイルの上書き制御が可能になる。

CSS의 @layer 규칙을 사용해 스타일 우선순위를 캐스케이드 순서로 명시적으로 관리하는 기능. 명시도에 의존하지 않고 레이어 정의 순서로 스타일 덮어쓰기를 제어할 수 있다.

CSSのスタイルを特定のコンポーネントや要素のスコープ内に限定する手法。VueのScoped CSSなど、他コンポーネントへのスタイル漏れを防ぐために使われる。

CSS 스타일을 특정 컴포넌트나 요소의 스코프 내로 한정하는 기법. Vue의 Scoped CSS 등, 다른 컴포넌트로의 스타일 누출을 방지하기 위해 사용된다.

テキストと背景色の明暗差を示す指標。WCAGでは通常テキストに4.5:1以上の比率を推奨し、アクセシビリティ対応の際に必須確認項目となる。

텍스트와 배경색의 명암 차이를 나타내는 지표. WCAG에서는 일반 텍스트에 4.5:1 이상의 비율을 권장하며, 접근성 대응 시 필수 확인 항목이다.

Promiseオブジェクトの`.then()`を連続的につなげることで、非同期処理を順番に実行する手法。コールバック地獄を避け、可読性の高いコードを実現する。

Promise 객체의 `.then()`을 연속으로 연결하여 비동기 처리를 순차적으로 실행하는 기법으로, 콜백 지옥을 피하고 가독성 높은 코드를 구현할 수 있다.

画面サイズに応じてレイアウトが変わるデザイン。

화면 크기에 따라 레이아웃이 바뀌는 디자인.

CSSのclamp()関数やfluid typeの手法を用いてビューポートサイズに応じてフォントサイズを流動的に変化させる設計であり、ブレイクポイントに依存しない滑らかなタイポグラフィスケーリングを実現する。

CSS의 clamp() 함수나 fluid type의 기법을 사용하여 뷰포트 크기에 따라 폰트 크기를 유동적으로 변화시키는 설계이며, 브레이크포인트에 의존하지 않는 부드러운 타이포그래피 스케일링을 실현한다.

画面サイズやデバイスに応じてレイアウトが自動調整されるWebデザイン手法。メディアクエリやフレキシブルグリッドを活用し、PC・タブレット・スマホで最適な表示を実現する。

화면 크기나 디바이스에 따라 레이아웃이 자동으로 조정되는 웹 디자인 기법. 미디어 쿼리와 플렉시블 그리드를 활용하여 PC·태블릿·스마트폰에서 최적의 화면을 구현한다.

SPAにおけるルート遷移時やモーダル表示時のキーボードフォーカスを適切に制御する設計パターンであり、フォーカストラップやフォーカスリストアを実装してアクセシビリティを確保する。

SPA에서의 라우트 천이 시나 모달 표시 시의 키보드 포커스를 적절히 제어하는 설계 패턴이며, 포커스 트랩이나 포커스 리스토어를 구현하여 접근성을 확보한다.

ブラウザ上でGPUを直接活用できる新しいWeb APIで、3Dグラフィックス描画や機械学習処理を高速化する。WebGLの後継として策定された次世代グラフィクス標準。

브라우저에서 GPU를 직접 활용할 수 있는 새로운 Web API로, 3D 그래픽 렌더링 및 머신러닝 처리를 고속화한다. WebGL의 후계로 책정된 차세대 그래픽 표준이다.

JavaScriptの状態管理ライブラリで、有限状態機械（FSM）とステートチャートの概念に基づき、複雑なUIの状態遷移を宣言的・可視的に管理できる。

JavaScript 상태 관리 라이브러리로, 유한 상태 기계(FSM)와 상태 차트 개념을 기반으로 복잡한 UI의 상태 전환을 선언적이고 시각적으로 관리할 수 있다.

JavaScriptバンドルを複数の小さなチャンクに分割し、必要なコードだけを遅延ロードすることで初期表示速度を改善する手法。WebpackやViteなどのバンドラーで実装される。

JavaScript 번들을 여러 개의 작은 청크로 분할하여 필요한 코드만 지연 로드함으로써 초기 렌더링 속도를 개선하는 기법으로, Webpack이나 Vite 같은 번들러로 구현된다.

Webサイトのページ構成や階層構造を視覚的に整理した図、またはSEO向けにクローラーへページ一覧を提供するXMLファイルのこと。

웹사이트의 페이지 구성과 계층 구조를 시각적으로 정리한 도식, 또는 SEO를 위해 크롤러에 페이지 목록을 제공하는 XML 파일을 말한다.

大量データを分割して表示するUI/API設計。オフセット方式とカーソル方式があり、パフォーマンスやUXを考慮して選択する。REST APIやGraphQLで頻出の設計課題。

대량 데이터를 분할하여 표시하는 UI/API 설계. 오프셋 방식과 커서 방식이 있으며, 성능과 UX를 고려해 선택한다. REST API나 GraphQL에서 자주 등장하는 설계 과제.

Webサイトやアプリが障害者を含むすべてのユーザーに利用可能かを検証するプロセス。WCAG基準に基づきツールや手動テストで問題点を洗い出す。

웹사이트나 앱이 장애인을 포함한 모든 사용자가 이용 가능한지 검증하는 프로세스. WCAG 기준에 따라 도구 및 수동 테스트로 문제점을 파악한다.

WebpackやViteなどのバンドラーが出力するバンドルの構成をツリーマップで可視化するツール。不要な依存や巨大なモジュールを特定し、バンドルサイズの削減に活用する。

Webpack이나 Vite 등의 번들러가 출력하는 번들 구성을 트리맵으로 가시화하는 도구. 불필요한 의존이나 거대한 모듈을 특정하여 번들 사이즈 삭감에 활용한다.

WCAG 2.1/2.2に基づくWebアクセシビリティの実装ガイドライン。知覚可能・操作可能・理解可能・堅牢の4原則に従って対応する。

WCAG 2.1/2.2에 기반한 웹 접근성 구현 가이드라인. 인식 가능·조작 가능·이해 가능·견고함의 4원칙에 따라 대응한다.

障害のあるユーザーも含め、誰もが使えるようにUI/UXを設計・実装すること。WAI-ARIAやスクリーンリーダー対応、キーボード操作対応などが主な対応内容。

장애가 있는 사용자를 포함해 누구나 사용할 수 있도록 UI/UX를 설계하고 구현하는 것. WAI-ARIA, 스크린 리더 대응, 키보드 조작 지원 등이 주요 구현 내용이다.

画像をWebPフォーマットに変換してファイルサイズを削減する最適化手法。JPEG比で25〜35%のサイズ削減が可能で、主要なブラウザすべてでサポートされている。

이미지를 WebP 포맷으로 변환하여 파일 사이즈를 줄이는 최적화 기법이다. JPEG 대비 25~35% 사이즈 절감이 가능하며 주요 브라우저 모두에서 지원된다.

本番環境のエラー報告にソースマップを統合してミニファイされたスタックトレースを元のソースコードにマッピングする手法であり、エラーの原因箇所を正確に特定してデバッグを効率化する。

프로덕션 환경의 에러 보고에 소스맵을 통합하여 미니파이된 스택 트레이스를 원래의 소스 코드에 매핑하는 기법이며, 에러의 원인 개소를 정확히 특정하여 디버그를 효율화한다.

HTTPレスポンスヘッダーのETagを使ってリソースの変更有無を検証するキャッシュ制御手法。条件付きリクエストで変更がなければ304を返し、転送量を最小化する。

HTTP 리스폰스 헤더의 ETag를 사용하여 리소스의 변경 유무를 검증하는 캐시 제어 기법이다. 조건부 리퀘스트로 변경이 없으면 304를 반환하여 전송량을 최소화한다.

CSSの2次元レイアウトシステム。行と列を組み合わせた格子状の構造でWebページのレイアウトを効率的に設計できる。Flexboxと併用されることが多い。

CSS의 2차원 레이아웃 시스템. 행과 열을 조합한 격자 구조로 웹 페이지 레이아웃을 효율적으로 설계할 수 있으며, Flexbox와 함께 자주 사용된다.

Interaction to Next Paintを改善するための最適化手法。長時間タスクの分割、イベントハンドラの軽量化、メインスレッドのブロッキング回避でユーザー操作への応答性を向上させる。

Interaction to Next Paint를 개선하기 위한 최적화 기법이다. 장시간 태스크의 분할, 이벤트 핸들러의 경량화, 메인 스레드의 블로킹 회피로 사용자 조작에 대한 응답성을 향상시킨다.

Webアプリケーションにキーボードショートカットを実装し、パワーユーザーの操作効率を向上させる手法。キーバインドの競合回避やアクセシビリティとの両立が設計上のポイントになる。

웹 애플리케이션에 키보드 단축키를 구현하여 파워 유저의 조작 효율을 향상시키는 기법. 키 바인드의 충돌 회피나 접근성과의 양립이 설계상 포인트가 된다.

HTMLのpopover属性を使い、JavaScriptを最小限に抑えてポップオーバー要素を表示・非表示する標準API。ツールチップやドロップダウンなどの実装がシンプルになる。

HTML의 popover 속성을 사용하여 JavaScript를 최소한으로 줄이고 팝오버 요소를 표시·비표시하는 표준 API. 툴팁이나 드롭다운 등의 구현이 심플해진다.

情報をカード状のボックスUIにまとめた再利用可能なUIパーツ。画像・タイトル・テキスト・ボタンなどを1単位として表示し、一覧画面などで多用される。

정보를 카드 형태의 박스 UI로 묶은 재사용 가능한 UI 파트. 이미지·제목·텍스트·버튼 등을 하나의 단위로 표시하며, 목록 화면 등에서 자주 활용된다.

template要素を使い、DOMに描画されない再利用可能なHTMLフラグメントを定義する仕組みである。JavaScriptでcloneNodeしてDOMに挿入することで、効率的に要素を生成できる。

template 요소를 사용하여 DOM에 렌더링되지 않는 재사용 가능한 HTML 프래그먼트를 정의하는 구조이다. JavaScript에서 cloneNode하여 DOM에 삽입함으로써 효율적으로 요소를 생성할 수 있다.

マウスホバー時に要素の外観を変化させるインタラクション効果。CSSトランジションで滑らかに適用し、@media(hover:hover)でタッチデバイスとの条件分岐を行う。

마우스 호버 시 요소의 외관을 변화시키는 인터랙션 효과이다. CSS 트랜지션으로 부드럽게 적용하며 @media(hover:hover)로 터치 디바이스와의 조건 분기를 수행한다.

サイト内の現在位置を階層構造で表示するナビゲーション要素。ユーザーが上位階層へ素早く遷移でき、SEOにおいてもJSON-LD構造化データとして検索エンジンに認識される。

사이트 내 현재 위치를 계층 구조로 표시하는 내비게이션 요소이다. 사용자가 상위 계층으로 빠르게 이동할 수 있으며 SEO에서도 구조화 데이터로 검색 엔진에 인식된다.

ブラウザ上で動作するクライアントサイドの非リレーショナルデータベース。大量の構造化データをオフラインでも保存・検索でき、PWAやオフライン対応アプリの開発で活用される。

브라우저에서 동작하는 클라이언트 사이드 비관계형 데이터베이스. 대량의 구조화된 데이터를 오프라인 상태에서도 저장·검색할 수 있으며, PWA 및 오프라인 지원 앱 개발에 활용된다.

ページネーションの代わりに、スクロールが画面下部に達すると自動的に次のコンテンツを読み込む UI パターン。SNS やニュースフィードで多く採用される。

페이지네이션 대신 스크롤이 화면 하단에 도달하면 자동으로 다음 콘텐츠를 불러오는 UI 패턴. SNS나 뉴스 피드에서 많이 사용된다.

CSS Anchor Positioningにより、ある要素を別の要素に対して相対的に配置する機能。ツールチップやポップオーバーの位置決めをCSSだけで実現でき、JS依存を削減できる。

CSS Anchor Positioning으로 특정 요소를 다른 요소에 대해 상대적으로 배치하는 기능. 툴팁이나 팝오버의 위치 결정을 CSS만으로 구현할 수 있어 JS 의존을 줄일 수 있다.

Facebookが開発したJavaScript向けテストフレームワーク。React環境に最適化されており、スナップショットテストやモック機能を標準搭載し、設定不要ですぐに使える点が特徴。

Facebook이 개발한 JavaScript용 테스트 프레임워크. React 환경에 최적화되어 있으며, 스냅샷 테스트와 목(mock) 기능을 기본 탑재하여 별도 설정 없이 바로 사용할 수 있다는 점이 특징이다.

ルーターのパスやパラメータをTypeScriptの型で定義し、存在しないルートやパラメータの型不一致をコンパイル時に検出する手法。TanStack RouterやNext.jsの型付きルートなどで実現する。

라우터의 경로나 파라미터를 TypeScript의 타입으로 정의하여 존재하지 않는 라우트나 파라미터의 타입 불일치를 컴파일 시에 검출하는 기법. TanStack Router나 Next.js의 타입 라우트 등으로 구현한다.

データ取得や処理の待機中にユーザーへ視覚的フィードバックを与えるアニメーション表示。スピナーやスケルトンスクリーンなどが代表的な実装例。

데이터 로드나 처리 대기 중 사용자에게 시각적 피드백을 제공하는 애니메이션 표시. 스피너나 스켈레톤 스크린 등이 대표적인 구현 예시.

コンテンツ読み込み中にレイアウトの骨格をグレーのブロックで表示するUI手法。ローディングスピナーより体感速度が向上し、ユーザー離脱を防ぐ効果がある。

콘텐츠 로딩 중 레이아웃의 골격을 회색 블록으로 표시하는 UI 기법. 로딩 스피너보다 체감 속도가 향상되며, 사용자 이탈을 방지하는 효과가 있다.

UIコンポーネントを独立した環境で開発・テスト・ドキュメント化するためのオープンソースツール。React・Vue・Angularなど主要フレームワークに対応し、デザインシステム構築に活用される。

UI 컴포넌트를 독립된 환경에서 개발·테스트·문서화하기 위한 오픈소스 툴. React·Vue·Angular 등 주요 프레임워크를 지원하며, 디자인 시스템 구축에 활용된다.

CSS Gridの子要素が親グリッドのトラック定義を継承できる機能。`grid-template-columns: subgrid`を指定することで、入れ子構造でも整合性のあるレイアウトが実現できる。

CSS Grid의 자식 요소가 부모 그리드의 트랙 정의를 상속받을 수 있는 기능. `grid-template-columns: subgrid`를 지정하면 중첩 구조에서도 일관성 있는 레이아웃을 구현할 수 있다.

要素のドラッグ&ドロップ操作でリスト並び替えやファイルアップロードを実現するUIの構築。dnd-kit等のライブラリを活用し、タッチ対応とキーボード操作も考慮したアクセシブルな実装とする。

요소의 드래그 앤 드롭 조작으로 리스트 정렬이나 파일 업로드를 실현하는 UI의 구축이다. dnd-kit 등의 라이브러리를 활용하고 터치 대응과 키보드 조작도 고려한 접근 가능한 구현으로 한다.

ブラウザ上で大量データをローカル保存できるNoSQL型クライアントサイドDBの活用。オフライン対応やキャッシュ戦略に利用される。

브라우저에서 대량 데이터를 로컬로 저장할 수 있는 NoSQL 형태의 클라이언트 사이드 DB 활용. 오프라인 지원 및 캐싱 전략에 사용된다.

サーバーの応答を待たずにUIを先に更新し、ユーザーに即座のフィードバックを提供する手法。いいねボタンやメッセージ送信などで活用される。

서버 응답을 기다리지 않고 UI를 먼저 업데이트하여 사용자에게 즉각적인 피드백을 제공하는 기법. 좋아요 버튼이나 메시지 전송 등에서 활용된다.

structuredClone()関数で、オブジェクトの深いコピーをブラウザネイティブで実行できるAPIである。JSON.parse/stringifyと異なり、Date、Map、Set、ArrayBufferなどの組み込みオブジェクトも正しくコピーする。

structuredClone() 함수로 객체의 딥 카피를 브라우저 네이티브로 실행할 수 있는 API이다. JSON.parse/stringify와 달리 Date, Map, Set, ArrayBuffer 등의 내장 객체도 정확하게 복사한다.

ブラウザ間でプラグイン不要にリアルタイム音声・映像・データ通信を実現するオープン標準API。ビデオ会議やP2P通信の実装に広く使われる。

플러그인 없이 브라우저 간 실시간 음성·영상·데이터 통신을 가능하게 하는 오픈 표준 API. 화상 회의나 P2P 통신 구현에 널리 활용된다.

サーバーサイドレンダリングで生成された静的HTMLに対し、クライアント側でJavaScriptを紐付けてインタラクティブな状態に変換するプロセス。Next.jsやNuxt.jsで重要な概念。

서버 사이드 렌더링으로 생성된 정적 HTML에 클라이언트 측에서 JavaScript를 연결하여 인터랙티브한 상태로 변환하는 프로세스. Next.js나 Nuxt.js에서 중요한 개념.

ホバー/フォーカスで表示されるツールチップのアクセシブルな実装設計。aria-describedby、ESCキーで閉じる、タッチデバイス対応、十分な表示時間の確保を考慮する。

호버/포커스로 표시되는 툴팁의 접근 가능한 구현 설계이다. aria-describedby, ESC 키로 닫기, 터치 디바이스 대응, 충분한 표시 시간 확보를 고려한다.

LCP・INP・CLSのCore Web Vitals指標をリアルユーザーモニタリングで継続的に計測して分析する手法であり、フィールドデータとラボデータの両方からパフォーマンス改善の優先度を判断する。

LCP, INP, CLS의 Core Web Vitals 지표를 리얼 유저 모니터링으로 지속적으로 계측하여 분석하는 기법이며, 필드 데이터와 랩 데이터 양쪽에서 성능 개선의 우선도를 판단한다.

TypeScript向けのスキーマ宣言・バリデーションライブラリ。型定義とバリデーションを一元管理でき、フォームやAPIレスポンスの検証に広く活用される。

TypeScript용 스키마 선언 및 유효성 검사 라이브러리. 타입 정의와 유효성 검사를 일원화하여 관리할 수 있으며, 폼이나 API 응답 검증에 널리 활용된다.

SSR、SSG、ISR、CSRなどのレンダリング方式をページ特性に応じて最適に選択する設計判断。Next.jsのApp Routerでは柔軟な組み合わせが可能。

SSR, SSG, ISR, CSR 등의 렌더링 방식을 페이지 특성에 따라 최적으로 선택하는 설계 판단. Next.js App Router에서는 유연한 조합이 가능하다.

DOM要素の変更（属性・テキスト・子ノードの追加削除など）を非同期で監視するブラウザAPIで、旧来のMutationEventsを置き換えるために設計された。

DOM 요소의 변경(속성, 텍스트, 자식 노드 추가·삭제 등)을 비동기로 감시하는 브라우저 API로, 기존의 MutationEvents를 대체하기 위해 설계되었다.

大規模フロントエンドアプリを独立して開発・デプロイ可能な小さな単位に分割する設計手法。Module Federationで実現することが多い。

대규모 프론트엔드 앱을 독립적으로 개발·배포 가능한 작은 단위로 분할하는 설계 기법. Module Federation으로 실현하는 경우가 많다.

ウェブサイトやアプリで、購入・登録・問い合わせなど目標アクションの完了率（CVR）を高めるための施策全般。A/Bテストやヒートマップ分析などが代表的な手法。

웹사이트나 앱에서 구매·가입·문의 등 목표 액션의 완료율(CVR)을 높이기 위한 전반적인 시책. A/B 테스트나 히트맵 분석 등이 대표적인 방법론이다.

フロントエンドのコード構成・レイヤー分離・データフローの全体設計。Feature-Slicedやクリーンアーキテクチャなどのパターンを適用する。

프론트엔드의 코드 구성·레이어 분리·데이터 플로우의 전체 설계. Feature-Sliced나 클린 아키텍처 등의 패턴을 적용한다.

スクロール末端でデータを自動追加する無限スクロールのUX設計。ローディング表示、エラーハンドリング、フッターへのアクセス確保、前後ページへの復帰機能を考慮する。

스크롤 말단에서 데이터를 자동 추가하는 무한 스크롤의 UX 설계이다. 로딩 표시, 에러 핸들링, 푸터로의 접근 확보, 전후 페이지로의 복귀 기능을 고려한다.

AstroフレームワークのSSGとSSRを同一プロジェクト内でページごとに使い分けるハイブリッドレンダリング手法であり、静的コンテンツは事前生成し動的ページはサーバーレンダリングで処理する。

Astro 프레임워크의 SSG와 SSR을 동일 프로젝트 내에서 페이지별로 구분하여 사용하는 하이브리드 렌더링 기법이며, 정적 콘텐츠는 사전 생성하고 동적 페이지는 서버 렌더링으로 처리한다.

親グリッドのトラック定義を子要素に継承させるCSS Subgridの設計パターン。ネストされたグリッドレイアウトで行や列の位置を親と揃え、複雑なレイアウトの整合性を保つ。

부모 그리드의 트랙 정의를 자식 요소에 상속시키는 CSS Subgrid의 설계 패턴이다. 중첩된 그리드 레이아웃에서 행이나 열의 위치를 부모와 맞추어 복잡한 레이아웃의 정합성을 유지한다.

要素がビューポートに出入りする進行度をアニメーションの基準にするCSS機能である。view-timelineプロパティで設定し、要素の可視状態に連動したアニメーションを実現する。

요소가 뷰포트에 들어오고 나가는 진행도를 애니메이션 기준으로 삼는 CSS 기능이다. view-timeline 프로퍼티로 설정하여 요소의 가시 상태에 연동된 애니메이션을 구현한다.

複数ユーザーが同時に同じ画面を編集するリアルタイムUIの設計・実装。カーソル位置の共有、競合解決、プレゼンス表示をWebSocket/CRDTで実現する。

여러 사용자가 동시에 같은 화면을 편집하는 실시간 UI의 설계·구현이다. 커서 위치의 공유, 충돌 해결, 프레즌스 표시를 WebSocket/CRDT로 실현한다.

WebSocketを使ってサーバーとの双方向リアルタイム通信を実装する手法。チャットや通知、ライブ更新などの機能に活用される。

WebSocket을 사용하여 서버와의 양방향 실시간 통신을 구현하는 기법. 채팅이나 알림, 라이브 업데이트 등의 기능에 활용된다.

counter-resetとcounter-incrementプロパティで自動番号付けを行うCSS機能である。contentプロパティのcounter()関数と組み合わせ、リストや見出しの連番をHTMLを変更せずに制御する。

counter-reset과 counter-increment 프로퍼티로 자동 번호 매기기를 수행하는 CSS 기능이다. content 프로퍼티의 counter() 함수와 결합하여 리스트나 제목의 연번을 HTML 변경 없이 제어한다.

ブラウザのIndexedDBを活用して大容量のクライアントサイドデータを構造化して永続化するパターンであり、Dexie.jsなどのラッパーライブラリを用いてトランザクション管理とクエリを効率化する。

브라우저의 IndexedDB를 활용하여 대용량의 클라이언트 사이드 데이터를 구조화하여 영속화하는 패턴이며, Dexie.js 등의 래퍼 라이브러리를 사용하여 트랜잭션 관리와 쿼리를 효율화한다.

Viteのvite.config.tsを調整し、ビルド速度・バンドルサイズ・HMR性能を最大化する作業。rollupOptionsやplugins設定が主な対象となる。

Vite의 vite.config.ts를 조정하여 빌드 속도, 번들 크기, HMR 성능을 극대화하는 작업으로, rollupOptions 및 plugins 설정이 주요 대상이다.

Reactでフォーム管理を効率化するライブラリ。再レンダリングを最小限に抑えつつ、バリデーションや入力値の管理をシンプルに実装できる。

React에서 폼 관리를 효율화하는 라이브러리. 리렌더링을 최소화하면서 유효성 검사와 입력값 관리를 간단하게 구현할 수 있다.

ユーザーの好みやOS設定に応じてライト/ダークテーマを動的に切り替える機能の実装。CSS変数とprefers-color-schemeで対応する。

사용자 취향이나 OS 설정에 따라 라이트/다크 테마를 동적으로 전환하는 기능 구현. CSS 변수와 prefers-color-scheme으로 대응한다.

Block, Element, Modifierの略。CSSのクラス命名規則の一つで、UIの構成要素を論理的に分割し、クラス名（例：`block__element--modifier`）だけで構造を予測可能にする手法。

Block, Element, Modifier의 약자. CSS 클래스 명명 규칙 중 하나로, UI 구성 요소를 논리적으로 분할하고, 클래스명(예: `block__element--modifier`)만으로 구조를 예측 가능하게 만드는 기법.

VoiceOver/NVDA/JAWSなどのスクリーンリーダーでWebコンテンツが正しく読み上げられるよう最適化する取り組み。セマンティックHTML、ARIAランドマーク、ライブリージョンを適切に設定する。

VoiceOver/NVDA/JAWS 등의 스크린 리더에서 웹 콘텐츠가 올바르게 읽어지도록 최적화하는 노력이다. 시맨틱 HTML, ARIA 랜드마크, 라이브 리전을 적절히 설정한다.

Webサイトで使用する画像のフォーマット・サイズ・圧縮率を体系的に最適化する方針。適切な画像戦略でページの読み込み速度とデータ転送量を大幅に改善する。

웹사이트에서 사용하는 이미지의 포맷·사이즈·압축률을 체계적으로 최적화하는 방침이다. 적절한 이미지 전략으로 페이지 로딩 속도와 데이터 전송량을 대폭 개선한다.

backdrop-filterプロパティで要素の背後にある領域にフィルター効果を適用するCSS機能である。ガラスモーフィズムのような半透明のすりガラス効果を、背景要素を変更せずに実現できる。

backdrop-filter 프로퍼티로 요소 뒤에 있는 영역에 필터 효과를 적용하는 CSS 기능이다. 글래스모피즘과 같은 반투명 불투명 유리 효과를 배경 요소를 변경하지 않고 구현할 수 있다.

Resumabilityという概念を採用したJavaScriptフレームワーク。ハイドレーションを不要にし、初期表示速度を極限まで最適化することでCore Web Vitalsの改善に特化している。

Resumability 개념을 채택한 JavaScript 프레임워크. 하이드레이션을 불필요하게 만들어 초기 표시 속도를 극한까지 최적화함으로써 Core Web Vitals 개선에 특화되어 있다.

CSS Container Queriesと連携し、コンテナのサイズに基づいた相対的な単位（cqw, cqh, cqi, cqb）を提供する機能である。コンポーネント内の要素をコンテナの幅に応じてスケーリングできる。

CSS Container Queries와 연동하여 컨테이너 크기에 기반한 상대적 단위(cqw, cqh, cqi, cqb)를 제공하는 기능이다. 컴포넌트 내 요소를 컨테이너 너비에 따라 스케일링할 수 있다.

ユーザー操作から次の画面描画までの応答性を測定する指標で、FIDの後継指標。クリック・タップ・キー入力すべての遅延を対象とし、200ミリ秒以内が良好とされる。

사용자 조작에서 다음 화면 렌더링까지의 응답성을 측정하는 지표로 FID의 후속 지표이다. 클릭·탭·키 입력 모든 지연을 대상으로 하며 200밀리초 이내가 양호하다고 된다.

UIの変更前後のスクリーンショットをピクセル単位で比較し、意図しない見た目の変化を自動検出するテスト手法。Chromatic やreg-suitなどのツールで実現する。

UI 변경 전후의 스크린샷을 픽셀 단위로 비교하여 의도하지 않은 외관 변화를 자동 검출하는 테스트 기법. Chromatic이나 reg-suit 등의 도구로 구현한다.

HTML dialog要素のshowModal()を使ったモーダルダイアログのアクセシビリティ実装。フォーカストラップ、ESCキー閉じ、背景スクロール防止、スクリーンリーダー対応を標準的に実現する。

HTML dialog 요소의 showModal()을 사용한 모달 다이얼로그의 접근성 구현이다. 포커스 트랩, ESC 키 닫기, 배경 스크롤 방지, 스크린 리더 대응을 표준적으로 실현한다.

ブラウザがDOMツリーから生成する補助技術向けの構造で、スクリーンリーダーなどがこの情報をもとにコンテンツを読み上げる。適切なHTML要素やARIA属性の使用が正しいツリー構築につながる。

브라우저가 DOM 트리에서 생성하는 보조 기술용 구조로, 스크린 리더 등이 이 정보를 기반으로 콘텐츠를 읽어준다. 적절한 HTML 요소나 ARIA 속성의 사용이 올바른 트리 구축으로 이어진다.

History APIに代わる新しいNavigation APIを使ったクライアントサイドルーティングの実装。navigateイベントのインターセプトやトランザクション的なナビゲーション管理を実現する。

History API를 대체하는 새로운 Navigation API를 사용한 클라이언트 사이드 라우팅의 구현이다. navigate 이벤트의 인터셉트나 트랜잭션적인 내비게이션 관리를 실현한다.

UIコンポーネントに対するテストの範囲と手法を定める戦略。ユニットテスト、ビジュアルテスト、インタラクションテストを組み合わせる。

UI 컴포넌트에 대한 테스트의 범위와 기법을 정하는 전략. 유닛 테스트, 비주얼 테스트, 인터랙션 테스트를 조합한다.

ブラウザのバックグラウンドで動作するスクリプトを活用し、オフラインキャッシュ・プッシュ通知・バックグラウンド同期などPWAの中核機能を実現する技術。

브라우저 백그라운드에서 동작하는 스크립트를 활용하여 오프라인 캐시, 푸시 알림, 백그라운드 동기화 등 PWA의 핵심 기능을 구현하는 기술.

Search Engine Optimizationの略。検索エンジンの検索結果で上位表示されるようにWebサイトの構造やコンテンツを最適化する施策・技術のこと。

Search Engine Optimization의 약자. 검색 엔진 검색 결과에서 상위에 노출되도록 웹사이트의 구조와 콘텐츠를 최적화하는 기법 및 기술을 말한다.

HTMLテンプレートタグのshadowrootmode属性を使い、JavaScriptなしでShadow DOMを宣言的に生成する仕組みである。SSR時にShadow DOMを含むHTMLをサーバー側で生成できる。

HTML 템플릿 태그의 shadowrootmode 속성을 사용하여 JavaScript 없이 Shadow DOM을 선언적으로 생성하는 구조이다. SSR 시 Shadow DOM을 포함한 HTML을 서버 측에서 생성할 수 있다.

Next.jsのApp Routerにおけるレイアウトやローディング、エラーのファイル規約とServer/Client Componentsの使い分けを設計する手法であり、ネストされたレイアウトでUI構造化を実現する。

Next.js의 App Router에서의 레이아웃이나 로딩, 에러의 파일 규약과 Server/Client Components의 구분 사용을 설계하는 기법이며, 중첩된 레이아웃으로 UI 구조화를 실현한다.

コピーペーストで使えるRadix UIベースのReactコンポーネント集。npmパッケージではなくソースコードを直接プロジェクトに配置するため、フルカスタマイズが可能。

복사 붙여넣기로 사용할 수 있는 Radix UI 기반의 React 컴포넌트 모음. npm 패키지가 아닌 소스 코드를 직접 프로젝트에 배치하므로 완전한 커스터마이징이 가능하다.

React環境で、クライアント（ブラウザ）から直接サーバー側の非同期関数を呼び出せる機能。APIルートを別途作成せずにフォームの送信やデータミューテーションを実装できる。

React 환경에서 클라이언트(브라우저)로부터 직접 서버 측의 비동기 함수를 호출할 수 있는 기능. 별도의 API 라우트를 만들지 않고 폼 제출이나 데이터 뮤테이션을 구현할 수 있다.

CSSの:has()疑似クラスを使い、子要素や隣接要素の状態に応じて親要素のスタイルを変更する機能。従来JSが必要だった条件付きスタイリングをCSSだけで実現できる。

CSS의 :has() 의사 클래스를 사용하여 자식 요소나 인접 요소의 상태에 따라 부모 요소의 스타일을 변경하는 기능. 기존에 JS가 필요했던 조건부 스타일링을 CSS만으로 구현할 수 있다.

親コンテナのサイズに応じてスタイルを変えるCSS機能。メディアクエリがビューポート基準なのに対し、コンポーネント単位のレスポンシブ対応が可能になる。

부모 컨테이너의 크기에 따라 스타일을 변경하는 CSS 기능. 미디어 쿼리가 뷰포트 기준인 것과 달리, 컴포넌트 단위의 반응형 대응이 가능하다.

Compound Component・Render Props・Higher-Order Componentなど、複数のコンポーネントを組み合わせて柔軟で再利用可能なUIを構築する設計パターンの総称。

Compound Component·Render Props·Higher-Order Component 등 여러 컴포넌트를 조합하여 유연하고 재사용 가능한 UI를 구축하는 설계 패턴의 총칭이다.

WebアプリのJSやCSSなどのリソースをまとめて圧縮・分割し、ロード時間を短縮する手法。Tree ShakingやCode Splittingが代表的な最適化技術。

웹 앱의 JS, CSS 등 리소스를 묶어 압축·분할하여 로딩 시간을 단축하는 기법. Tree Shaking과 Code Splitting이 대표적인 최적화 기술이다.

太字、斜体、リスト、画像挿入などの書式設定機能を備えたWYSIWYGエディタコンポーネント。TipTap、Slate、ProseMirror等のライブラリで実装され、CMS管理画面で広く利用される。

굵은 글꼴, 기울임꼴, 리스트, 이미지 삽입 등의 서식 설정 기능을 갖춘 WYSIWYG 에디터 컴포넌트이다. TipTap, Slate, ProseMirror 등의 라이브러리로 구현되며 CMS 관리 화면에서 널리 사용된다.

カスタムフォントの読み込みによるCLS発生やレンダリングブロックを防ぐための最適化。font-display設定やプリロードで改善する。

커스텀 폰트 로딩으로 인한 CLS 발생이나 렌더링 블로킹을 방지하기 위한 최적화. font-display 설정이나 프리로드로 개선한다.

JavaScriptからCSSアニメーションと同等のアニメーションをプログラム的に制御できるブラウザAPIである。element.animate()で再生・停止・逆再生などを動的に操作できる。

JavaScript에서 CSS 애니메이션과 동등한 애니메이션을 프로그래밍적으로 제어할 수 있는 브라우저 API이다. element.animate()로 재생·정지·역재생 등을 동적으로 조작할 수 있다.

CSSのscroll-timelineやanimation-timelineを使い、スクロール位置に連動してアニメーションを制御する機能。JSでのスクロールイベント監視が不要になりパフォーマンスが向上する。

CSS의 scroll-timeline이나 animation-timeline을 사용하여 스크롤 위치에 연동해 애니메이션을 제어하는 기능. JS에서의 스크롤 이벤트 감시가 불필요해져 성능이 향상된다.

HTML要素にpopover属性を付与し、ブラウザネイティブのポップオーバー動作を実現する仕組みである。autoモードでは外部クリックやESCキーで自動的に閉じ、manualモードではプログラム的に制御する。

HTML 요소에 popover 속성을 부여하여 브라우저 네이티브 팝오버 동작을 구현하는 구조이다. auto 모드에서는 외부 클릭이나 ESC 키로 자동 닫히며 manual 모드에서는 프로그래밍적으로 제어한다.

Denoが提供するエッジコンピューティング向けサーバーレスホスティングサービス。TypeScriptをそのままデプロイでき、世界中のエッジノードで低レイテンシな実行環境を提供する。

Deno가 제공하는 엣지 컴퓨팅용 서버리스 호스팅 서비스. TypeScript를 그대로 배포할 수 있으며, 전 세계 엣지 노드에서 낮은 레이턴시의 실행 환경을 제공한다.

JavaScriptのバンドル最適化手法で、実際に使用されていないコード（デッドコード）をビルド時に自動的に除去し、最終的なバンドルサイズを削減する技術。WebpackやRollupで活用される。

JavaScript 번들 최적화 기법으로, 실제로 사용되지 않는 코드(데드 코드)를 빌드 시 자동으로 제거하여 최종 번들 크기를 줄이는 기술. Webpack이나 Rollup에서 활용된다.

ByteDanceが開発する、Rustで書かれた超高速なWebビルドツール。Webpackと高い互換性を持ちながら、ビルド時間を劇的に短縮する次世代バンドラー。

ByteDance가 개발한 Rust 기반의 초고속 웹 빌드 도구. Webpack과 높은 호환성을 가지면서 빌드 시간을 극적으로 단축하는 차세대 번들러.

JavaScriptが無効な環境でもHTMLフォームとして機能させつつ、JSが有効な場合は非同期送信やバリデーションを追加する設計手法。堅牢なフォーム実装の基本的なアプローチである。

JavaScript가 비활성인 환경에서도 HTML 폼으로 기능하게 하면서 JS가 활성인 경우에는 비동기 전송이나 유효성 검사를 추가하는 설계 기법. 견고한 폼 구현의 기본적인 접근 방식이다.

Push APIとService Workerを組み合わせてブラウザにプッシュ通知を送信する実装であり、ユーザーの許可取得フローや通知ペイロードの設計、バックグラウンド受信の制御を体系的に行う。

Push API와 Service Worker를 조합하여 브라우저에 푸시 알림을 전송하는 구현이며, 사용자의 허가 취득 흐름이나 알림 페이로드의 설계, 백그라운드 수신의 제어를 체계적으로 수행한다.

大量のリストデータを効率的に描画する技術。表示領域に見えるDOMのみをレンダリングし、スクロールに合わせて動的に入れ替えることでパフォーマンスを最適化する。

대량의 리스트 데이터를 효율적으로 렌더링하는 기술. 화면에 보이는 DOM만 렌더링하고 스크롤에 맞춰 동적으로 교체함으로써 성능을 최적화한다.

実行されることのない不要なコードをビルド時に自動的に削除する最適化手法。Tree Shakingと組み合わせてバンドルサイズを削減し、パフォーマンス向上に貢献する。

실행되지 않는 불필요한 코드를 빌드 시 자동으로 제거하는 최적화 기법. Tree Shaking과 함께 사용해 번들 크기를 줄이고 성능 향상에 기여한다.

JavaScriptからアニメーションをプログラム的に制御するWeb Animations APIの活用。再生・一時停止・逆再生などの細かい制御が可能で、CSSアニメーションの限界を超えた表現を実現する。

JavaScript에서 애니메이션을 프로그래밍적으로 제어하는 Web Animations API의 활용이다. 재생·일시정지·역재생 등의 세밀한 제어가 가능하고 CSS 애니메이션의 한계를 넘는 표현을 실현한다.

Speculation Rules APIを使い、ユーザーが次にアクセスする可能性の高いページを事前レンダリングまたはプリフェッチするブラウザ機能。ページ遷移を瞬時に感じさせる体験を実現する。

Speculation Rules API를 사용하여 사용자가 다음으로 접근할 가능성이 높은 페이지를 사전 렌더링 또는 프리페치하는 브라우저 기능. 페이지 전환을 순간적으로 느끼게 하는 경험을 구현한다.

shadcn/uiのコピーアンドペースト方式のコンポーネントライブラリを活用してプロジェクトに完全な制御権を持つUIを構築するパターンであり、Radix UIとTailwind CSSを基盤とした高品質なコンポーネントを提供する。

shadcn/ui의 복사 및 붙여넣기 방식의 컴포넌트 라이브러리를 활용하여 프로젝트에 완전한 제어권을 가진 UI를 구축하는 패턴이며, Radix UI와 Tailwind CSS를 기반으로 한 고품질 컴포넌트를 제공한다.

HTML標準のPopover APIを使い、ツールチップ・ドロップダウン・通知などのポップアップ要素をJSライブラリなしで実装する手法。自動的なライトディスミスやアクセシビリティを標準で提供する。

HTML 표준의 Popover API를 사용하여 툴팁·드롭다운·알림 등의 팝업 요소를 JS 라이브러리 없이 구현하는 기법이다. 자동적인 라이트 디스미스나 접근성을 표준으로 제공한다.

ファーストビューの表示に必要な最小限のCSSをHTMLにインライン埋め込みし、初期レンダリングをブロックせずにページ表示速度を最適化する手法。

첫 화면 표시에 필요한 최소한의 CSS를 HTML에 인라인으로 삽입하여 초기 렌더링을 차단하지 않고 페이지 표시 속도를 최적화하는 기법.

APIエラーやネットワーク障害発生時に、ユーザーが再試行や代替操作を行えるUIを提供する設計。エラーバウンダリとリトライボタンを組み合わせ、アプリ全体のクラッシュを防止する。

API 에러나 네트워크 장애 발생 시 사용자가 재시도나 대체 조작을 수행할 수 있는 UI를 제공하는 설계. 에러 바운더리와 리트라이 버튼을 조합하여 앱 전체의 크래시를 방지한다.

ライトとダークの配色テーマをユーザーの設定やシステム設定に応じて切り替える機能。prefers-color-schemeメディアクエリとCSS変数を組み合わせて実装される。

라이트와 다크의 배색 테마를 사용자 설정이나 시스템 설정에 따라 전환하는 기능이다. prefers-color-scheme 미디어 쿼리와 CSS 변수를 조합하여 구현된다.

ElementInternals APIを使い、カスタム要素をHTMLフォームに参加させる仕組みである。ネイティブのinput要素と同様にフォーム送信やバリデーションに組み込める。

ElementInternals API를 사용하여 커스텀 요소를 HTML 폼에 참여시키는 구조이다. 네이티브 input 요소와 동일하게 폼 제출이나 밸리데이션에 포함시킬 수 있다.

データやコードをもとに画面上に視覚的なコンテンツを生成・描画するプロセス。サーバーサイドレンダリング（SSR）やクライアントサイドレンダリング（CSR）など手法が複数存在する。

데이터나 코드를 기반으로 화면에 시각적인 콘텐츠를 생성·표시하는 프로세스. 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR) 등 다양한 방식이 존재한다.

要素のレイアウト・スタイル・ペイント計算を特定の範囲に限定するCSS機能。ブラウザの再レンダリング範囲を制限し、描画パフォーマンスを向上させる。

요소의 레이아웃·스타일·페인트 계산을 특정 범위에 한정하는 CSS 기능이다. 브라우저의 재렌더링 범위를 제한하고 렌더링 퍼포먼스를 향상시킨다.

article、section、nav、aside等の意味論的なHTML要素を適切に使い分け、文書構造を明確にする実践。SEOとアクセシビリティの両方を向上させ、スクリーンリーダーの文書解析精度を高める。

article, section, nav, aside 등 의미론적 HTML 요소를 적절히 구분하여 사용하고 문서 구조를 명확히 하는 실천이다. SEO와 접근성을 모두 향상시키며 스크린 리더의 문서 해석 정확도를 높인다.

SSGのビルド時間を短縮しページ数増加に伴うスケーラビリティを確保する最適化。インクリメンタルビルドやオンデマンド生成で対応する。

SSG 빌드 시간을 단축하고 페이지 수 증가에 따른 스케일러빌리티를 확보하는 최적화. 인크리멘탈 빌드나 온디맨드 생성으로 대응한다.

CSS Gridの子要素が親グリッドのトラック定義を継承できる機能。ネストされたグリッドレイアウトで親子間の列幅や行高を揃えるために使用される。

CSS Grid의 자식 요소가 부모 그리드의 트랙 정의를 상속할 수 있는 기능이다. 중첩된 그리드 레이아웃에서 부모 자식 간의 열 너비나 행 높이를 맞추는 데 사용된다.

要素のサイズ変化を監視するブラウザAPI。windowのresizeイベントと異なり個々の要素レベルで検知でき、レスポンシブコンポーネントの実装に活用される。

요소의 크기 변화를 감시하는 브라우저 API이다. window의 resize 이벤트와 달리 개별 요소 레벨에서 감지할 수 있어 반응형 컴포넌트 구현에 활용된다.

overflow-wrap、word-break、hyphensなどのCSS プロパティで長い単語やURLの折り返しを制御する手法。CJK（日中韓）テキストと欧文テキストで挙動が異なるため、多言語対応時に適切な設定が必要になる。

overflow-wrap, word-break, hyphens 등의 CSS 프로퍼티로 긴 단어나 URL의 줄바꿈을 제어하는 기법이다. CJK(한중일) 텍스트와 구미 텍스트에서 동작이 다르므로 다국어 대응 시 적절한 설정이 필요하다.

Reactが提供するグローバル状態管理の仕組み。propsのバケツリレーを避け、コンポーネントツリー全体でデータを共有できる組み込みAPIのこと。

React가 제공하는 전역 상태 관리 메커니즘. props 드릴링을 피하고 컴포넌트 트리 전체에서 데이터를 공유할 수 있는 내장 API.

Style Dictionaryなどを使って一つのデザイントークンソースからCSS変数・Swift・Kotlin向けの出力を自動生成して配信する手法であり、Web・iOS・Androidでのデザイン一貫性を保証する。

Style Dictionary 등을 사용하여 하나의 디자인 토큰 소스에서 CSS 변수, Swift, Kotlin용의 출력을 자동 생성하여 배포하는 기법이며, Web, iOS, Android에서의 디자인 일관성을 보장한다.

ユーザーがページ下部に到達した時に次のデータを自動で読み込む機能。Intersection Observerで検知しページネーションAPIと連携する。

사용자가 페이지 하단에 도달했을 때 다음 데이터를 자동으로 로딩하는 기능. Intersection Observer로 감지하고 페이지네이션 API와 연동한다.

複数ステップのフォームやウィザードで、現在の進捗状況と残りのステップを視覚的に示すUIコンポーネント。ユーザーの離脱率を下げ、入力完了率を向上させる効果がある。

여러 단계의 폼이나 위저드에서 현재 진행 상황과 남은 단계를 시각적으로 나타내는 UI 컴포넌트이다. 사용자의 이탈률을 낮추고 입력 완료율을 향상시키는 효과가 있다.

ビューポート内で最大のコンテンツ要素が描画されるまでの時間を測定する指標。ユーザーが感じるページの読み込み速度を反映し、2.5秒以内が良好とされる。

뷰포트 내에서 최대 콘텐츠 요소가 렌더링될 때까지의 시간을 측정하는 지표이다. 사용자가 느끼는 페이지 로딩 속도를 반영하며 2.5초 이내가 양호하다고 된다.

HTML Drag and Drop APIやdnd-kitなどのライブラリを使い、要素のドラッグ操作でリスト並べ替えやファイルアップロードを実現する実装手法。タッチデバイスとの互換性確保も重要である。

HTML Drag and Drop API나 dnd-kit 등의 라이브러리를 사용하여 요소의 드래그 조작으로 리스트 정렬이나 파일 업로드를 구현하는 기법. 터치 디바이스와의 호환성 확보도 중요하다.

ビルド時にHTMLを事前生成し、CDN経由で配信する手法。リクエスト時のサーバー処理が不要で高速かつ安全だが、データ更新にはリビルドが必要になる。

빌드 시 HTML을 사전 생성하고 CDN 경유로 배포하는 기법이다. 리퀘스트 시 서버 처리가 불필요하여 고속이고 안전하지만 데이터 갱신에는 리빌드가 필요하다.

サーバーレスポンスを待たずにUIを即座に更新し、失敗時のみロールバックする楽観的更新パターン。いいねボタンやカート追加など、ユーザーの操作レスポンスを体感的に高速化する。

서버 응답을 기다리지 않고 UI를 즉시 갱신하고 실패 시에만 롤백하는 낙관적 갱신 패턴이다. 좋아요 버튼이나 장바구니 추가 등 사용자의 조작 응답을 체감적으로 고속화한다.

dnd kitなどのアクセシブルなドラッグアンドドロップライブラリをReactアプリケーションに統合する手法であり、キーボード操作やスクリーンリーダー対応を含むインクルーシブなUI操作を実現する。

dnd kit 등의 접근 가능한 드래그 앤 드롭 라이브러리를 React 애플리케이션에 통합하는 기법이며, 키보드 조작이나 스크린 리더 대응을 포함한 인클루시브한 UI 조작을 실현한다.

HTML5の<canvas>要素をJavaScriptで操作するAPIで、2Dグラフィックスやアニメーション、ゲーム描画などをブラウザ上で直接レンダリングできる。

HTML5의 <canvas> 요소를 JavaScript로 조작하는 API로, 2D 그래픽, 애니메이션, 게임 렌더링 등을 브라우저에서 직접 구현할 수 있다.

Cloudflareのエッジネットワーク上でJavaScriptを実行できるサーバーレスプラットフォーム。低レイテンシでAPIやSSRの処理をエッジで行え、CDNと組み合わせた高速配信が可能。

Cloudflare의 엣지 네트워크에서 JavaScript를 실행할 수 있는 서버리스 플랫폼. 낮은 지연 시간으로 API나 SSR 처리를 엣지에서 수행할 수 있으며, CDN과 결합한 고속 배포가 가능하다.

スクロールに連動して前景と背景を異なる速度で動かすことで奥行き感を演出する視覚効果。scroll-driven animationsやtransform: translate3dで実装し、GPU合成レイヤーで高速描画する。

스크롤에 연동하여 전경과 배경을 다른 속도로 움직여 깊이감을 연출하는 시각 효과이다. scroll-driven animations나 transform: translate3d로 구현하며 GPU 합성 레이어로 고속 렌더링한다.

CSS Houdiniのレイアウトモジュールで、独自のレイアウトアルゴリズムをCSSのdisplayプロパティとして登録できる仕組みである。FlexboxやGridでは実現できない特殊なレイアウトを定義できる。

CSS Houdini의 레이아웃 모듈로 독자적인 레이아웃 알고리즘을 CSS의 display 프로퍼티로 등록할 수 있는 구조이다. Flexbox나 Grid로는 구현할 수 없는 특수한 레이아웃을 정의할 수 있다.

WebGPU APIを使ってGPUの計算能力をブラウザから直接活用する次世代グラフィックスAPIの導入であり、WebGLを超えるパフォーマンスとコンピュートシェーダーによる汎用GPU計算を実現する。

WebGPU API를 사용하여 GPU의 계산 능력을 브라우저에서 직접 활용하는 차세대 그래픽스 API의 도입이며, WebGL을 초월하는 성능과 컴퓨트 셰이더에 의한 범용 GPU 계산을 실현한다.

CSSエンジンの内部APIを開発者に公開し、カスタムプロパティやペイント処理を拡張できるブラウザAPIの総称である。ペイントワークレットやレイアウトワークレットなどで構成される。

CSS 엔진의 내부 API를 개발자에게 공개하여 커스텀 프로퍼티와 페인트 처리를 확장할 수 있는 브라우저 API의 총칭이다. 페인트 워크릿과 레이아웃 워크릿 등으로 구성된다.

大量のデータを複数のページに分割して表示する手法。一度に全データを取得せず、パフォーマンス向上とUX改善を目的としてWebやAPIで広く使われる。

대량의 데이터를 여러 페이지로 나누어 표시하는 기법. 한 번에 모든 데이터를 가져오지 않고, 성능 향상과 UX 개선을 목적으로 웹과 API에서 널리 사용된다.

UIにおいてキーボード操作やスクリーンリーダー向けにフォーカスの移動・制御を適切に管理する実装手法。アクセシビリティ対応の要となる。

UI에서 키보드 조작이나 스크린 리더를 위해 포커스 이동과 제어를 적절히 관리하는 구현 기법으로, 접근성 대응의 핵심이다.

親コンポーネントが暗黙的に子コンポーネントと状態を共有する複合コンポーネントの設計であり、Contextを活用してプロップドリリングを回避しつつ柔軟な組み合わせと高い拡張性を実現する。

부모 컴포넌트가 암묵적으로 자식 컴포넌트와 상태를 공유하는 복합 컴포넌트의 설계이며, Context를 활용하여 프롭 드릴링을 회피하면서 유연한 조합과 높은 확장성을 실현한다.

Service Workerを利用し、ネットワーク接続が回復した際にオフライン中の操作やデータ送信を自動的にバックグラウンドで再試行する仕組み。PWAで多用される。

Service Worker를 활용하여 네트워크 연결이 복구되었을 때 오프라인 중 수행된 작업이나 데이터 전송을 자동으로 백그라운드에서 재시도하는 메커니즘. PWA에서 많이 사용된다.

TanStack Queryのキャッシュ無効化タイミングとスコープを戦略的に設計する手法であり、ミューテーション後の関連クエリの再取得やキャッシュキーの階層構造を最適化してデータの鮮度を維持する。

TanStack Query의 캐시 무효화 타이밍과 스코프를 전략적으로 설계하는 기법이며, 뮤테이션 후의 관련 쿼리의 재취득이나 캐시 키의 계층 구조를 최적화하여 데이터의 신선도를 유지한다.

CDNエッジノードで動作するミドルウェア。リクエストがオリジンサーバーに到達する前に認証・リダイレクト・A/Bテストなどの処理を実行し、低レイテンシを実現する。Next.jsなどで採用。

CDN 엣지 노드에서 동작하는 미들웨어로, 요청이 오리진 서버에 도달하기 전에 인증·리다이렉트·A/B 테스트 등의 처리를 실행하여 낮은 지연 시간을 실현한다. Next.js 등에서 채용.

カラーコード（#FFFFFF等）やフォントサイズなどの視覚的なデザイン値に、意味のある変数名（例: color-brand-primary）を付けたもの。Figmaとコード間でデザインシステムを一貫して管理する最小単位。

컬러 코드(#FFFFFF 등)나 폰트 크기 등 시각적인 디자인 값에 의미 있는 변수명(예: color-brand-primary)을 붙인 것. Figma와 코드 간에 디자인 시스템을 일관되게 관리하는 최소 단위.

CDNのエッジサーバー上でHTMLをレンダリングする手法。ユーザーに地理的に近いサーバーで処理するため、SSRの低レイテンシー版として高速な初回表示を実現できる。

CDN의 엣지 서버에서 HTML을 렌더링하는 기법. 사용자에게 지리적으로 가까운 서버에서 처리하므로, SSR의 저지연 버전으로 빠른 초기 표시를 실현할 수 있다.

Zustandを用いたグローバル状態管理のストア設計であり、ストアの分割粒度やセレクタの最適化、ミドルウェアの活用によりボイラープレートを最小限に抑えたシンプルな状態管理を実現する。

Zustand를 사용한 글로벌 상태 관리의 스토어 설계이며, 스토어의 분할 입도나 셀렉터의 최적화, 미들웨어의 활용에 의해 보일러플레이트를 최소한으로 억제한 심플한 상태 관리를 실현한다.

prefers-color-schemeメディアクエリでOSのダークモード設定を検知し、自動的にテーマを切り替える仕組み。ユーザーの手動切り替えとの優先順位管理やlocalStorageへの保存が実装上の要点になる。

prefers-color-scheme 미디어 쿼리로 OS의 다크 모드 설정을 감지하여 자동으로 테마를 전환하는 구조이다. 사용자의 수동 전환과의 우선순위 관리나 localStorage 저장이 구현상 요점이 된다.

カレンダーUIから日付や日付範囲を選択できるフォームコンポーネント。タイムゾーン対応やロケール切り替え、無効日付の設定など、多言語・国際化を考慮した設計が求められる。

캘린더 UI에서 날짜나 날짜 범위를 선택할 수 있는 폼 컴포넌트이다. 타임존 대응이나 로케일 전환, 비활성 날짜 설정 등 국제화를 고려한 설계가 요구된다.

広告、分析、チャットウィジェット等のサードパーティスクリプトをユーザー操作後やアイドル時に遅延読み込みする手法。メインスレッドのブロッキングを防ぎ、初期表示速度を大幅に改善する。

광고, 분석, 채팅 위젯 등의 서드파티 스크립트를 사용자 조작 후나 아이들 시에 지연 로딩하는 기법이다. 메인 스레드의 블로킹을 방지하고 초기 표시 속도를 대폭 개선한다.

プロジェクトにおけるCSS設計のルールや方法論を定める方針。BEM、CSS Modules、Tailwind CSSなどの選択とスコープ管理の基準を決める。

프로젝트에서 CSS 설계 규칙이나 방법론을 정하는 방침. BEM, CSS Modules, Tailwind CSS 등의 선택과 스코프 관리 기준을 정한다.

Evan Youが開発したESモジュールネイティブなフロントエンドビルドツール。開発時はesbuildでファイルを個別にサーブし起動が高速。本番ビルドはRollupで最適化する。

Evan You가 개발한 ES 모듈 네이티브 프론트엔드 빌드 툴. 개발 시에는 esbuild로 파일을 개별 서빙하여 시작이 빠르다. 프로덕션 빌드는 Rollup으로 최적화한다.

再利用可能なUIパーツ（ボタン・フォーム・モーダルなど）を一元管理するコレクション。デザインの一貫性を保ちつつ開発効率を向上させる。

재사용 가능한 UI 컴포넌트(버튼·폼·모달 등)를 한곳에서 관리하는 컬렉션. 디자인 일관성을 유지하면서 개발 효율을 높여준다.

色覚特性の異なるユーザーにも情報が正確に伝わるようにする配色とデザインの手法であり、色だけに依存せずパターンやアイコン、テキストラベルを併用して視覚的な区別を確保する。

색각 특성이 다른 사용자에게도 정보가 정확히 전달되도록 하는 배색과 디자인의 기법이며, 색에만 의존하지 않고 패턴이나 아이콘, 텍스트 라벨을 병용하여 시각적인 구별을 확보한다.

ARIAのaria-liveまたはrole属性を使い、動的に更新されるコンテンツをスクリーンリーダーに自動通知する領域。通知メッセージやリアルタイム更新のアクセシビリティ確保に重要である。

ARIA의 aria-live 또는 role 속성을 사용하여 동적으로 갱신되는 콘텐츠를 스크린 리더에 자동 통지하는 영역. 알림 메시지나 실시간 업데이트의 접근성 확보에 중요하다.

ブラウザ上でインタラクティブな動作が必要なコンポーネント。useStateやonClickなどのクライアント側APIを使う場合に明示的に指定し、サーバーコンポーネントとの境界を適切に設計する。

브라우저에서 인터랙티브한 동작이 필요한 컴포넌트. useState나 onClick 등의 클라이언트 측 API를 사용할 경우 명시적으로 지정하며, 서버 컴포넌트와의 경계를 적절히 설계한다.

clip-pathプロパティで要素の表示領域を幾何学的な形状で切り抜くCSS機能である。circle()やpolygon()関数でカスタム形状を定義し、画像やセクションの非矩形レイアウトを実現する。

clip-path 프로퍼티로 요소의 표시 영역을 기하학적 형상으로 잘라내는 CSS 기능이다. circle()이나 polygon() 함수로 커스텀 형상을 정의하여 이미지나 섹션의 비직사각형 레이아웃을 구현한다.

ページごとにOGPタグやtitleタグを動的に生成しSEOやSNSシェアを最適化する実装。Next.jsのMetadata APIなどで対応する。

페이지별로 OGP 태그나 title 태그를 동적으로 생성하여 SEO나 SNS 공유를 최적화하는 구현. Next.js의 Metadata API 등으로 대응한다.

JavaScriptファイル内にCSSスタイルを記述する手法。styled-componentsやEmotionが代表的で、コンポーネント単位でスタイルを管理しスコープ汚染を防ぐ。

JavaScript 파일 내에 CSS 스타일을 작성하는 방법론. styled-components나 Emotion이 대표적이며, 컴포넌트 단위로 스타일을 관리해 스코프 오염을 방지한다.

画面下部に一時的に表示される軽量な通知UIコンポーネント。操作結果をユーザーに簡潔に伝えるために使われ、数秒後に自動的に消える。Material Designで定義された概念。

화면 하단에 일시적으로 표시되는 경량 알림 UI 컴포넌트. 작업 결과를 사용자에게 간결하게 전달하며 몇 초 후 자동으로 사라진다. Material Design에서 정의된 개념.

要素の画面内表示を非同期で検知するIntersection Observerの実用的な活用パターン。画像遅延読み込み、無限スクロール、広告表示計測、セクションハイライトなどに応用する。

요소의 화면 내 표시를 비동기로 검지하는 Intersection Observer의 실용적 활용 패턴이다. 이미지 지연 로딩, 무한 스크롤, 광고 표시 계측, 섹션 하이라이트 등에 응용한다.

History APIを置き換える新しいブラウザ標準のナビゲーション管理API。ナビゲーションイベントの統一的なハンドリングやページ遷移のキャンセル・インターセプトが可能になる。

History API를 대체하는 새로운 브라우저 표준의 내비게이션 관리 API. 내비게이션 이벤트의 통일적인 핸들링이나 페이지 전환의 취소·인터셉트가 가능해진다.

非同期データの読み込み中にフォールバックUIを表示するReactの機能。ローディング状態の管理を宣言的に行い、コンポーネントのコードを簡潔に保つことができる。

비동기 데이터 로딩 중에 폴백 UI를 표시하는 React의 기능이다. 로딩 상태 관리를 선언적으로 수행하고 컴포넌트의 코드를 간결하게 유지할 수 있다.

クリックやタップで展開・折りたたみ可能なセクションを持つUIパターン。FAQや設定画面で使われ、限られた画面スペースに大量の情報を整理して表示でき、アクセシビリティにも配慮が必要になる。

클릭이나 탭으로 펼침·접기가 가능한 섹션을 가진 UI 패턴이다. FAQ나 설정 화면에서 사용되며 한정된 화면 공간에 대량의 정보를 정리하여 표시할 수 있다.

キーボードフォーカス時のアウトラインスタイルをデザインシステムに統合してカスタマイズする手法。:focus-visibleを活用し、マウスクリック時は非表示、キーボード操作時のみ表示する。

:focus-visible을 활용하여 키보드 포커스 시의 아웃라인 스타일을 디자인 시스템에 통합하여 커스터마이즈하는 기법이다. 마우스 클릭 시에는 비표시, 키보드 조작 시에만 표시한다.

URLのパターンマッチングを標準化するブラウザAPIである。正規表現より直感的な構文でURLのパス・クエリ・ハッシュをマッチングし、Service WorkerやルーティングでのURL判定を簡素化する。

URL의 패턴 매칭을 표준화하는 브라우저 API이다. 정규 표현식보다 직관적인 구문으로 URL의 경로·쿼리·해시를 매칭하여 Service Worker나 라우팅에서의 URL 판정을 간소화한다.

ユーザーの最初の操作からブラウザが応答するまでの遅延時間を測定する指標。メインスレッドのブロッキングを反映し、100ミリ秒以内が良好とされる。

사용자의 첫 조작에서 브라우저가 응답할 때까지의 지연 시간을 측정하는 지표이다. 메인 스레드의 블로킹을 반영하며 100밀리초 이내가 양호하다고 된다.

@layer規則を使ってCSSの優先順位をレイヤー単位で明示的に制御する機能。サードパーティCSSとの競合を防ぎ、詳細度の管理を簡素化する。

@layer 규칙을 사용하여 CSS의 우선순위를 레이어 단위로 명시적으로 제어하는 기능이다. 서드파티 CSS와의 충돌을 방지하고 상세도 관리를 간소화한다.

ページ遷移をサーバーではなくブラウザ側のJavaScriptで制御する手法。SPAでURLを変えながらページ全体を再読み込みせずにビューを切り替えるために使われる。

페이지 전환을 서버가 아닌 브라우저 측 JavaScript로 제어하는 방식. SPA에서 URL을 변경하면서 페이지 전체를 새로고침하지 않고 뷰를 전환하기 위해 사용된다.

UI要素の現在の状態をアクセシビリティツリーに伝えるWAI-ARIAの属性群。aria-expanded・aria-selected・aria-disabledなどで動的な状態変化を支援技術に通知する。

UI 요소의 현재 상태를 접근성 트리에 전달하는 WAI-ARIA의 속성군이다. aria-expanded·aria-selected·aria-disabled 등으로 동적인 상태 변화를 보조 기술에 통지한다.

Webページのレンダリングをサーバー側で行い、完成したHTMLをクライアントに返す方式。SEO対策や初期表示速度の向上に効果的で、Next.jsなどで広く採用されている。

웹 페이지 렌더링을 서버 측에서 수행하고 완성된 HTML을 클라이언트에 반환하는 방식. SEO 최적화와 초기 로딩 속도 향상에 효과적이며 Next.js 등에서 널리 채용되고 있다.

img要素で複数の画像ソースを画面サイズや解像度に応じて指定するHTML属性。ブラウザが最適な画像を自動選択し、効率的な画像配信を実現する。

img 요소에서 복수의 이미지 소스를 화면 크기나 해상도에 따라 지정하는 HTML 속성이다. 브라우저가 최적의 이미지를 자동 선택하여 효율적인 이미지 배포를 실현한다.

Chrome・Firefox・Safari・Edgeなど複数のブラウザで、UIや機能が同じように動作するよう実装・テストすること。CSS互換性やJSのpolyfill対応が主な課題となる。

Chrome, Firefox, Safari, Edge 등 여러 브라우저에서 UI와 기능이 동일하게 동작하도록 구현하고 테스트하는 것. CSS 호환성과 JS polyfill 대응이 주요 과제이다.

ブラウザ上でOpenGLベースの2D・3DグラフィックスをレンダリングするためのJavaScript APIで、プラグイン不要でハードウェアアクセラレーションを活用できる。

브라우저에서 OpenGL 기반의 2D·3D 그래픽을 렌더링하기 위한 JavaScript API로, 플러그인 없이 하드웨어 가속을 활용할 수 있다.

Web Componentsのslot要素で、Shadow DOM内にライトDOMのコンテンツを投影するプレースホルダーである。名前付きスロットで複数の挿入ポイントを定義し、柔軟なコンポーネント構成を実現する。

Web Components의 slot 요소로 Shadow DOM 내에 라이트 DOM 콘텐츠를 투영하는 플레이스홀더이다. 이름 있는 슬롯으로 여러 삽입 포인트를 정의하여 유연한 컴포넌트 구성을 구현한다.

CSSクラス名をコンポーネント単位でスコープ化し、グローバルな名前衝突を防ぐ仕組み。ビルド時にクラス名がハッシュ付きのユニーク名に変換され、スタイルの分離が保証される。

CSS 클래스명을 컴포넌트 단위로 스코프화하여 글로벌한 이름 충돌을 방지하는 구조이다. 빌드 시 클래스명이 해시 포함 유니크명으로 변환되어 스타일 분리가 보장된다.

ブラウザにページのプリレンダリングやプリフェッチのヒントを与えるSpeculation Rules APIの設計。ユーザーの次のナビゲーション先を予測し、瞬時のページ遷移体験を提供する。

브라우저에 페이지의 프리렌더링이나 프리페치 힌트를 제공하는 Speculation Rules API의 설계이다. 사용자의 다음 내비게이션 대상을 예측하고 순간적인 페이지 전환 경험을 제공한다.

スクロール位置をアニメーションの進行基準にするCSS機能である。scroll-timelineプロパティで設定し、スクロールに連動したアニメーションをJavaScriptなしで実装できる。

스크롤 위치를 애니메이션 진행 기준으로 삼는 CSS 기능이다. scroll-timeline 프로퍼티로 설정하여 스크롤 연동 애니메이션을 JavaScript 없이 구현할 수 있다.

Googleが提供するWebページの品質計測ツール。パフォーマンス・アクセシビリティ・SEOなどを自動分析し、スコアと改善提案を出力する。Chrome DevToolsやCI/CDに統合可能。

Google이 제공하는 웹 페이지 품질 측정 도구. 성능·접근성·SEO 등을 자동 분석하여 점수와 개선 제안을 출력한다. Chrome DevTools 및 CI/CD에 통합 가능하다.

CLS（Cumulative Layout Shift）はページ読み込み中に要素が予期せずズレる現象を数値化したCore Web Vitalsの指標。0.1以下が良好とされ、画像サイズ指定やフォント最適化で改善する。

CLS(Cumulative Layout Shift)는 페이지 로딩 중 요소가 예기치 않게 이동하는 현상을 수치화한 Core Web Vitals 지표입니다. 0.1 이하가 양호하며, 이미지 크기 지정 및 폰트 최적화로 개선할 수 있습니다.

loading='lazy'やIntersection Observerを使い、ビューポート外の画像の読み込みを遅延させる最適化。初期読み込みのデータ量を削減し、FCPとTTIを改善する。

loading='lazy'나 Intersection Observer를 사용하여 뷰포트 밖의 이미지 로딩을 지연시키는 최적화이다. 초기 로딩의 데이터량을 삭감하고 FCP와 TTI를 개선한다.

fetchpriorityやloading属性を使い、画像・スクリプト・フォントなどのリソース読み込み優先度をブラウザに指示する手法。LCPの改善やファーストビューの表示速度向上に直結する。

fetchpriority나 loading 속성을 사용하여 이미지·스크립트·폰트 등의 리소스 로딩 우선순위를 브라우저에 지시하는 기법. LCP 개선이나 퍼스트 뷰 표시 속도 향상에 직결된다.

preload/prefetch/preconnect/dns-prefetchなどのリソースヒントを適切に設定し、重要リソースの取得を高速化する最適化。過剰なヒント指定による逆効果を避けつつ効果的に活用する。

preload/prefetch/preconnect/dns-prefetch 등의 리소스 힌트를 적절히 설정하여 중요 리소스의 취득을 고속화하는 최적화이다. 과도한 힌트 지정에 의한 역효과를 피하면서 효과적으로 활용한다.

SSRで生成された静的HTMLの一部にのみJavaScriptを適用してインタラクティブにする手法。不要なJSの読み込みを減らしパフォーマンスを向上させる。

SSR로 생성된 정적 HTML의 일부에만 JavaScript를 적용하여 인터랙티브하게 만드는 기법. 불필요한 JS 로딩을 줄여 성능을 향상시킨다.

ブラウザのビューポートと対象要素の交差状態を非同期で監視するWeb API。スクロール連動のアニメーションや遅延読み込みに活用され、scroll イベントより高パフォーマンス。

브라우저의 뷰포트와 대상 요소의 교차 상태를 비동기로 감시하는 Web API. 스크롤 연동 애니메이션이나 지연 로딩에 활용되며, scroll 이벤트보다 성능이 우수하다.

import()関数を使って必要なモジュールを必要な時に読み込む戦略。初期バンドルサイズの削減とユーザー体験の向上を両立させる。

import() 함수를 사용하여 필요한 모듈을 필요한 시점에 로딩하는 전략. 초기 번들 사이즈 절감과 사용자 경험 향상을 양립시킨다.

現在の状態とアクションを受け取って新しい状態を返す純粋関数であり、ReduxやuseReducerで状態遷移ロジックを集約して複雑な状態管理を予測可能かつテスト容易にする。

현재의 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수이며, Redux나 useReducer에서 상태 전이 로직을 집약하여 복잡한 상태 관리를 예측 가능하고 테스트 용이하게 한다.

CDNのエッジサーバーでHTMLをレンダリングし、ユーザーに近い場所から高速に応答を返す手法。Cloudflare WorkersやVercel Edge Runtimeで実現。

CDN 에지 서버에서 HTML을 렌더링하여 사용자에게 가까운 위치에서 고속으로 응답을 반환하는 기법. Cloudflare Workers나 Vercel Edge Runtime으로 실현한다.

SPAやNext.jsアプリにおけるURL構造とページ遷移の設計。動的ルート、ネストルート、パラレルルートなどのパターンを適切に組み合わせる。

SPA나 Next.js 앱에서의 URL 구조와 페이지 전환 설계. 동적 라우트, 네스트 라우트, 패럴렐 라우트 등의 패턴을 적절히 조합한다.

Storybookのplay関数を使ってコンポーネントのユーザー操作をシミュレートするインタラクションテストであり、ストーリーの中でクリックや入力を再現してUIの振る舞いを自動検証する。

Storybook의 play 함수를 사용하여 컴포넌트의 사용자 조작을 시뮬레이트하는 인터랙션 테스트이며, 스토리 안에서 클릭이나 입력을 재현하여 UI의 동작을 자동 검증한다.

非同期処理のキャンセルを制御するWeb API。fetchリクエストやイベントリスナーの中断に使用し、不要な通信の停止やメモリリークの防止に役立つ。

비동기 처리의 캔슬을 제어하는 Web API이다. fetch 리퀘스트나 이벤트 리스너의 중단에 사용하며 불필요한 통신 중지나 메모리 누수 방지에 도움이 된다.

ブラウザのキャッシュ機能を活用してAPI応答やアセットの再取得を最小化する設計。SWRやTanStack Queryのキャッシュ設定で実装する。

브라우저 캐시 기능을 활용하여 API 응답이나 에셋의 재취득을 최소화하는 설계. SWR이나 TanStack Query의 캐시 설정으로 구현한다.

テキスト入力時に候補リストを表示するオートコンプリートのアクセシブルな実装パターン。デバウンス処理、キーボードナビゲーション、ARIA comboboxロールの適用を含む。

텍스트 입력 시 후보 리스트를 표시하는 오토 컴플리트의 접근 가능한 구현 패턴이다. 디바운스 처리, 키보드 내비게이션, ARIA combobox 역할의 적용을 포함한다.

margin-leftやpadding-rightなどの物理プロパティをinline-start/block-endなどの論理プロパティに置き換える移行作業。多言語対応やRTLレイアウトの自然なサポートを実現する。

margin-left나 padding-right 등의 물리 프로퍼티를 inline-start/block-end 등의 논리 프로퍼티로 교체하는 전환 작업이다. 다국어 대응이나 RTL 레이아웃의 자연스러운 지원을 실현한다.

大規模なフロントエンドアプリを独立した小さなモジュールに分割し、各チームが自律的に開発・デプロイできるアーキテクチャ手法。マイクロサービスの思想をUIに適用したもの。

대규모 프론트엔드 애플리케이션을 독립적인 소규모 모듈로 분리하여, 각 팀이 자율적으로 개발·배포할 수 있는 아키텍처 방식. 마이크로서비스의 개념을 UI에 적용한 것.

WAI-ARIAの設計パターンに準拠したアクセシブルなUIコンポーネントのライブラリを構築する取り組みであり、タブ・アコーディオン・コンボボックスなどの標準的なウィジェットの操作仕様を統一する。

WAI-ARIA의 설계 패턴에 준거한 접근 가능한 UI 컴포넌트의 라이브러리를 구축하는 활동이며, 탭, 아코디언, 콤보박스 등의 표준적인 위젯의 조작 사양을 통일한다.

HTMLをサーバー側で生成しながら逐次クライアントへ送信するSSR手法。Next.js 13以降のApp RouterでReact Server Componentsと組み合わせて使われ、初期表示の高速化に有効。

HTML을 서버 측에서 생성하면서 순차적으로 클라이언트에 전송하는 SSR 방식. Next.js 13 이후의 App Router에서 React Server Components와 함께 사용되며, 초기 화면 표시 속도 향상에 효과적이다.

ボタン・モーダル・フォームなど再利用可能なUIコンポーネントをまとめたパッケージ。MUI・Ant Design・shadcn/uiなどが代表例で、開発効率とデザイン一貫性を高める。

버튼, 모달, 폼 등 재사용 가능한 UI 컴포넌트를 모아놓은 패키지. MUI, Ant Design, shadcn/ui 등이 대표적이며, 개발 효율과 디자인 일관성을 높이는 데 활용된다.

Incremental Static Regenerationの略でビルド後に個別のページを段階的に再生成するNext.jsの機能であり、SSGの高速表示とSSRのデータ鮮度の両立をrevalidate設定で実現する。

Incremental Static Regeneration의 약칭으로 빌드 후에 개별 페이지를 단계적으로 재생성하는 Next.js의 기능이며, SSG의 고속 표시와 SSR의 데이터 신선도의 양립을 revalidate 설정으로 실현한다.

特定の要素をアンカーとして指定し、別の要素をそのアンカーに相対的に配置できるCSSの機能である。ツールチップやドロップダウンの位置決めをCSSだけで実現できる。

특정 요소를 앵커로 지정하고 다른 요소를 해당 앵커에 상대적으로 배치할 수 있는 CSS 기능이다. 툴팁이나 드롭다운의 위치 지정을 CSS만으로 구현할 수 있다.

CSS3で導入されたレイアウトモデル。親要素にdisplay:flexを指定することで、子要素を柔軟に配置・整列できる。レスポンシブデザインの実装に広く活用される。

CSS3에서 도입된 레이아웃 모델. 부모 요소에 display:flex를 지정하면 자식 요소를 유연하게 배치·정렬할 수 있다. 반응형 디자인 구현에 널리 활용된다.

ページ全体ではなく対話的な部分だけをハイドレーションする最適化手法。静的コンテンツのJavaScript処理を省略し、TTIの短縮とバンドルサイズの削減を実現する。

페이지 전체가 아닌 대화적인 부분만 하이드레이션하는 최적화 기법이다. 정적 콘텐츠의 JavaScript 처리를 생략하고 TTI 단축과 번들 사이즈 절감을 실현한다.

CSSのscroll-snapプロパティを使い、スクロール時に要素が特定の位置にピタッと止まるようにする機能。カルーセルやページ単位のスクロールをJSなしで実装できる。

CSS의 scroll-snap 프로퍼티를 사용하여 스크롤 시 요소가 특정 위치에 딱 멈추도록 하는 기능. 캐러셀이나 페이지 단위 스크롤을 JS 없이 구현할 수 있다.

ブラウザがバックグラウンドでもサーバーからプッシュ通知を受信できるWeb標準API。Service Workerと組み合わせて使用し、アプリを開いていなくても通知を表示できる。

브라우저가 백그라운드 상태에서도 서버로부터 푸시 알림을 수신할 수 있는 웹 표준 API. Service Worker와 함께 사용하며, 앱을 열지 않아도 알림을 표시할 수 있다.

contenteditable属性でHTML要素を直接編集可能にする機能である。リッチテキストエディタの基盤として使われるが、ブラウザ間の挙動差異が大きいため、ProseMirrorなどのライブラリで抽象化して利用することが多い。

contenteditable 속성으로 HTML 요소를 직접 편집 가능하게 하는 기능이다. 리치 텍스트 에디터의 기반으로 사용되지만 브라우저 간 동작 차이가 크므로 ProseMirror 등의 라이브러리로 추상화하여 사용하는 경우가 많다.

Webサイトやアプリで、訪問者が購入・登録などの目標行動を完了する割合を高めるための施策。CROとも呼ばれ、A/Bテストやヒートマップ分析などを活用する。

웹사이트나 앱에서 방문자가 구매·가입 등 목표 행동을 완료하는 비율을 높이기 위한 전략. CRO라고도 하며, A/B 테스트나 히트맵 분석 등을 활용한다.

@scopeルールを使い、CSSセレクターの適用範囲を特定のDOM部分木に限定できる機能である。コンポーネント単位でスタイルの影響範囲を制御でき、スタイルの衝突を防止する。

@scope 규칙을 사용하여 CSS 셀렉터의 적용 범위를 특정 DOM 부분 트리에 한정할 수 있는 기능이다. 컴포넌트 단위로 스타일 영향 범위를 제어하여 스타일 충돌을 방지한다.

大量リストの表示で画面内に見える要素だけをDOMにレンダリングする仮想化手法の実装。TanStack VirtualやReact Virtuosoを使い、数万件のリストでも滑らかなスクロールを実現する。

대량 리스트 표시에서 화면 내에 보이는 요소만을 DOM에 렌더링하는 가상화 기법의 구현이다. TanStack Virtual이나 React Virtuoso를 사용하여 수만 건의 리스트에서도 매끄러운 스크롤을 실현한다.

Viteの開発サーバーとビルド設定を最適化してHMRの速度やビルド時間を改善する手法であり、依存関係のプリバンドル設定やチャンク分割戦略のカスタマイズにより開発体験を向上させる。

Vite의 개발 서버와 빌드 설정을 최적화하여 HMR의 속도나 빌드 시간을 개선하는 기법이며, 의존 관계의 프리번들 설정이나 청크 분할 전략의 커스터마이즈에 의해 개발 경험이 향상된다.

BunはNode.js互換の高速JavaScriptランタイムで、バンドラー・トランスパイラ・パッケージマネージャを内包し、フロントエンド開発の高速化に活用される。

Bun은 Node.js 호환의 고속 JavaScript 런타임으로, 번들러·트랜스파일러·패키지 매니저를 내장하여 프론트엔드 개발 속도 향상에 활용된다.

CSSのcolor()関数やoklab()、oklch()などの新しい色空間関数を活用して知覚的に均一な色操作を行う手法であり、HSLよりも正確な明度制御とコントラスト管理を実現する。

CSS의 color() 함수나 oklab(), oklch() 등의 새로운 색 공간 함수를 활용하여 지각적으로 균일한 색 조작을 수행하는 기법이며, HSL보다 정확한 명도 제어와 대비 관리를 실현한다.

CSS の:has()擬似クラスを使って親要素や兄弟要素の状態に基づいてスタイルを適用する手法であり、JavaScriptなしで条件付きスタイリングを実現する新しいCSSの機能である。

CSS의 :has() 의사 클래스를 사용하여 부모 요소나 형제 요소의 상태에 기반하여 스타일을 적용하는 기법이며, JavaScript 없이 조건부 스타일링을 실현하는 새로운 CSS의 기능이다.

CDNのエッジロケーションでサーバーサイドコードを実行する軽量なランタイム環境であり、ユーザーに近い場所で処理を行うことでレイテンシーを最小化してグローバルな応答速度を向上させる。

CDN의 엣지 로케이션에서 서버 사이드 코드를 실행하는 경량의 런타임 환경이며, 사용자에 가까운 장소에서 처리를 수행함으로써 레이턴시를 최소화하여 글로벌 응답 속도를 향상시킨다.

WebコンポーネントのカプセルHTMLとCSSをメインDOMから隔離する技術。スタイルのスコープを限定し、外部スタイルの干渉を防ぐことでコンポーネントの独立性を保つ。

웹 컴포넌트의 HTML과 CSS를 메인 DOM으로부터 격리하는 기술. 스타일 스코프를 제한하여 외부 스타일의 간섭을 방지하고 컴포넌트의 독립성을 유지한다.

ReactのcreatePortalを使って親コンポーネントのDOM階層外にUIをレンダリングする機能であり、モーダルやツールチップのようにz-indexやoverflow問題を回避する要素に使用される。

React의 createPortal을 사용하여 부모 컴포넌트의 DOM 계층 외에 UI를 렌더링하는 기능이며, 모달이나 툴팁과 같이 z-index나 overflow 문제를 회피하는 요소에 사용된다.

レンダリング処理を中断・再開可能にして、優先度の高いUI更新を先に処理するReactの機能。重い処理中でもユーザーの入力に素早く応答するレスポンシブなUIを実現する。

렌더링 처리를 중단·재개 가능하게 하여 우선도가 높은 UI 갱신을 먼저 처리하는 React의 기능이다. 무거운 처리 중에도 사용자 입력에 빠르게 응답하는 반응적인 UI를 실현한다.

画面下部や上部に配置されたナビゲーション要素で、複数のタブを切り替えてコンテンツを表示するUIコンポーネント。モバイルアプリやWebアプリで広く使用される。

화면 하단이나 상단에 배치된 네비게이션 요소로, 여러 탭을 전환하여 콘텐츠를 표시하는 UI 컴포넌트. 모바일 앱이나 웹 앱에서 널리 사용된다.

CSSのクラス名をコンポーネントごとにローカルスコープ化する仕組み。クラス名の衝突を防ぎ、大規模SPAでのスタイル管理を安全に行える。

CSS 클래스 이름을 컴포넌트별로 로컬 스코프화하는 방식. 클래스 이름 충돌을 방지하고, 대규모 SPA에서 스타일 관리를 안전하게 할 수 있다.

ReactのuseStateを用いてコンポーネントのローカル状態を管理するフックであり、関数コンポーネントで状態の保持と更新を可能にしクラスコンポーネントのsetStateを置き換える。

React의 useState를 이용하여 컴포넌트의 로컬 상태를 관리하는 훅이며, 함수 컴포넌트에서 상태의 보유와 갱신을 가능하게 하고 클래스 컴포넌트의 setState를 대체한다.

入力フォームの値・バリデーション・送信状態を効率的に管理する設計。React Hook FormやFormikなどのライブラリでレンダリングを最適化する。

입력 폼의 값·유효성 검증·제출 상태를 효율적으로 관리하는 설계. React Hook Form이나 Formik 등의 라이브러리로 렌더링을 최적화한다.

React DevToolsやRedux DevToolsなどの開発用ブラウザ拡張機能と連携してアプリケーションのデバッグ効率を向上させる手法であり、状態変更の履歴やコンポーネントツリーの可視化を活用する。

React DevTools나 Redux DevTools 등의 개발용 브라우저 확장 기능과 연동하여 애플리케이션의 디버그 효율을 향상시키는 기법이며, 상태 변경의 이력이나 컴포넌트 트리의 시각화를 활용한다.

CSSプロパティの変化を指定した時間で滑らかに補間するアニメーション機能である。transitionプロパティで対象・期間・タイミング関数を指定し、JavaScriptなしで視覚効果を実現する。

CSS 프로퍼티의 변화를 지정한 시간으로 부드럽게 보간하는 애니메이션 기능이다. transition 프로퍼티로 대상·기간·타이밍 함수를 지정하여 JavaScript 없이 시각 효과를 구현한다.

静的サイト生成を主軸とするフロントエンドフレームワーク。Islands Architectureにより不要なJSを排除し、高速なページロードを実現する。React/Vue/Svelteなど複数UIフレームワークを同時利用可能。

정적 사이트 생성을 중심으로 하는 프론트엔드 프레임워크. Islands Architecture로 불필요한 JS를 제거해 빠른 페이지 로드를 실현하며, React/Vue/Svelte 등 여러 UI 프레임워크를 동시에 사용할 수 있다.

Svelteベースのフルスタックフレームワーク。SSR・SSG・ファイルベースルーティングを標準サポートし、高速な開発と軽量なバンドルサイズが特徴。

Svelte 기반의 풀스택 프레임워크. SSR·SSG·파일 기반 라우팅을 기본 지원하며, 빠른 개발 속도와 가벼운 번들 크기가 특징이다.

CSSネイティブでセレクタの入れ子記述を可能にする機能。従来はSassなどのプリプロセッサが必要だったネスト構文が、標準CSSだけで書けるようになり開発体験が向上する。

CSS 네이티브에서 셀렉터의 중첩 기술을 가능하게 하는 기능. 기존에는 Sass 등의 프리프로세서가 필요했던 네스트 구문을 표준 CSS만으로 작성할 수 있게 되어 개발 경험이 향상된다.

HTTP/3ベースの低遅延な双方向通信を実現するブラウザAPIである。WebSocketの後継として、順序なし配信や複数ストリームの多重化に対応し、リアルタイムアプリケーションの通信品質を向上させる。

HTTP/3 기반의 저지연 양방향 통신을 구현하는 브라우저 API이다. WebSocket의 후계로서 순서 없는 배달이나 복수 스트림 다중화에 대응하여 실시간 애플리케이션의 통신 품질을 향상시킨다.

コンパイル時にフレームワークのコードを排除し、純粋なJavaScriptを生成するUIフレームワーク。仮想DOMを使わず、高速で軽量な動作が特徴。

컴파일 시점에 프레임워크 코드를 제거하고 순수한 JavaScript를 생성하는 UI 프레임워크. 가상 DOM을 사용하지 않아 빠르고 가벼운 동작이 특징.

sRGBを超えた広色域のカラースペースをCSSで扱える機能である。oklch()やoklab()関数で知覚的に均一な色空間を使い、より自然な色の指定とグラデーション生成が可能になる。

sRGB를 넘은 광색역의 색 공간을 CSS에서 다룰 수 있는 기능이다. oklch()나 oklab() 함수로 지각적으로 균일한 색 공간을 사용하여 보다 자연스러운 색 지정과 그라데이션 생성이 가능해진다.

JavaScriptがブラウザ上でHTMLを動的に生成するレンダリング手法。サーバー負荷を軽減しリッチなインタラクションを実現するが、初回表示が遅くなる場合がある。

JavaScript가 브라우저 상에서 HTML을 동적으로 생성하는 렌더링 기법이다. 서버 부하를 경감하고 리치한 인터랙션을 실현하지만 초회 표시가 느려질 수 있다.

SVGアイコンの管理・配信・表示を体系化する設計であり、SVGスプライトやReactコンポーネント化、ツリーシェイキング対応のインポート方式を整備してアイコンの利用効率を最適化する。

SVG 아이콘의 관리, 배포, 표시를 체계화하는 설계이며, SVG 스프라이트나 React 컴포넌트화, 트리 셰이킹 대응의 임포트 방식을 정비하여 아이콘의 이용 효율을 최적화한다.

TypeScriptを使ってAPIのスキーマ定義なしにフロントエンドとバックエンド間で型安全な通信を実現するRPCフレームワーク。Next.jsとの相性が良い。

TypeScript를 사용하여 API 스키마 정의 없이 프론트엔드와 백엔드 간에 타입 안전한 통신을 실현하는 RPC 프레임워크. Next.js와 궁합이 좋다.

@media printで定義する印刷専用のCSSスタイル。ナビゲーションや広告を非表示にし、背景色の除去やbreak-insideによるページ区切り制御を行い、印刷出力を最適化する。

@media print로 정의하는 인쇄 전용 CSS 스타일이다. 내비게이션이나 광고를 비표시로 하고 배경색 제거나 페이지 구분 제어를 수행하여 인쇄 출력을 최적화한다.

HTML要素にアクセシビリティ上の役割を付与するWAI-ARIAの属性。ボタンやナビゲーションなどの役割を明示し、スクリーンリーダーが正しくUIを解釈できるようにする。

HTML 요소에 접근성상의 역할을 부여하는 WAI-ARIA의 속성이다. 버튼이나 내비게이션 등의 역할을 명시하여 스크린 리더가 올바르게 UI를 해석할 수 있도록 한다.

Single Page Applicationの略。ページ遷移時にサーバーから新しいHTMLを取得せず、JavaScriptで動的にコンテンツを書き換えるWebアプリ設計手法。React・Vue・Angularなどが代表的。

Single Page Application의 약자. 페이지 이동 시 서버에서 새 HTML을 받지 않고, JavaScript로 동적으로 콘텐츠를 교체하는 웹 앱 설계 방식. React·Vue·Angular 등이 대표적이다.

prefers-reduced-motionメディアクエリを用い、アニメーションに敏感なユーザー向けに動きを抑制する実装。前庭障害を持つユーザーへの配慮としてWCAGでも推奨されている。

prefers-reduced-motion 미디어 쿼리를 사용하여 애니메이션에 민감한 사용자를 위해 움직임을 억제하는 구현이다. 전정 장애를 가진 사용자에 대한 배려로 WCAG에서도 권장하고 있다.

Next.jsのServer Actionsを使ってフォーム送信やデータ変更をサーバー側で直接処理する実装パターン。API Routeの代替として活用される。

Next.js의 Server Actions를 사용하여 폼 제출이나 데이터 변경을 서버 측에서 직접 처리하는 구현 패턴. API Route의 대안으로 활용된다.

ブラウザのバックグラウンドで動作するスクリプト。ネットワークリクエストのキャッシュ制御やプッシュ通知、オフライン対応などPWA実装の中核を担う。

브라우저 백그라운드에서 동작하는 스크립트로, 네트워크 요청 캐시 제어, 푸시 알림, 오프라인 지원 등 PWA 구현의 핵심 역할을 담당한다.

ライト/ダーク/システム設定のテーマ切替機能を設計・実装するシステム構築。CSS変数によるトークン管理、prefers-color-schemeの検知、ユーザー設定の永続化を含む。

라이트/다크/시스템 설정의 테마 전환 기능을 설계·구현하는 시스템 구축이다. CSS 변수에 의한 토큰 관리, prefers-color-scheme의 검지, 사용자 설정의 영속화를 포함한다.

基本的なHTML/CSSで最低限の機能を提供し、ブラウザ対応状況に応じてJavaScriptなどで機能を段階的に拡張するWeb開発戦略。

기본적인 HTML/CSS로 최소한의 기능을 제공하고, 브라우저 지원 상황에 따라 JavaScript 등으로 기능을 단계적으로 확장하는 웹 개발 전략.

Vue.jsベースのフルスタックフレームワーク。SSR・SSG・SPAに対応し、ファイルベースのルーティングやオートインポートなど開発効率を高める機能を提供する。

Vue.js 기반의 풀스택 프레임워크. SSR·SSG·SPA를 지원하며, 파일 기반 라우팅과 자동 임포트 등 개발 효율을 높이는 기능을 제공한다.

--接頭辞で定義し、var()関数で参照するCSSの変数機能である。JavaScriptから動的に値を変更でき、テーマ切り替えやコンポーネントのバリエーション管理をCSSのカスケード機構で実現する。

-- 접두사로 정의하고 var() 함수로 참조하는 CSS의 변수 기능이다. JavaScript에서 동적으로 값을 변경할 수 있어 테마 전환이나 컴포넌트 변형 관리를 CSS 캐스케이드 구조로 구현한다.

ダイアログやポップオーバーが表示されるブラウザのトップレイヤーの管理機構である。z-indexの階層とは独立して最前面に表示され、複数のトップレイヤー要素間の表示順序を自動的に管理する。

다이얼로그나 팝오버가 표시되는 브라우저의 톱 레이어 관리 기구이다. z-index 계층과 독립적으로 최전면에 표시되며 여러 톱 레이어 요소 간의 표시 순서를 자동으로 관리한다.

大量のリスト項目を表示する際にDOMノードの生成を画面表示分に限定し、スクロール性能を向上させる手法。react-virtualなどで実装する。

대량의 리스트 항목을 표시할 때 DOM 노드 생성을 화면 표시분으로 한정하여 스크롤 성능을 향상시키는 기법. react-virtual 등으로 구현한다.

ブラウザ標準のAPI群を使い、再利用可能なカスタムHTML要素を作成する技術。Custom Elements・Shadow DOM・HTML Templatesの3つの仕様で構成される。

브라우저 표준 API를 사용하여 재사용 가능한 커스텀 HTML 요소를 만드는 기술로, Custom Elements·Shadow DOM·HTML Templates 세 가지 명세로 구성된다.

View Transitions APIを使いページ遷移やDOM変更時にスムーズなアニメーションを実装する手法。SPAとMPA両方に対応し、ネイティブアプリのような滑らかな画面遷移を実現する。

View Transitions API를 사용하여 페이지 전환이나 DOM 변경 시 부드러운 애니메이션을 구현하는 기법이다. SPA와 MPA 모두에 대응하고 네이티브 앱과 같은 매끄러운 화면 전환을 실현한다.

CSSの@layerルールを使い、スタイルの適用優先順位を明示的に管理する仕組み。セレクタの詳細度に依存せず、レイヤー定義順でカスケードを制御できる。

CSS의 @layer 규칙을 사용하여 스타일 적용 우선순위를 명시적으로 관리하는 구조. 선택자 명시도에 의존하지 않고 레이어 정의 순서로 캐스케이드를 제어할 수 있다.

ブラウザの履歴を操作するWeb APIで、pushStateやreplaceStateを使ってURLを変更できる。SPAでのページ遷移をブラウザの戻る・進むボタンと連携させるために使用される。

브라우저의 이력을 조작하는 Web API로 pushState나 replaceState를 사용하여 URL을 변경할 수 있다. SPA에서의 페이지 전환을 브라우저의 뒤로·앞으로 버튼과 연계시키는 데 사용된다.

HTMLのpopover属性を使ってツールチップやドロップダウンをJavaScriptライブラリなしで実装するネイティブAPI活用であり、トップレイヤーへの自動配置とライトディスミスを標準機能で実現する。

HTML의 popover 속성을 사용하여 툴팁이나 드롭다운을 JavaScript 라이브러리 없이 구현하는 네이티브 API 활용이며, 톱 레이어로의 자동 배치와 라이트 디스미스를 표준 기능으로 실현한다.

クライアントサイドレンダリングとサーバーサイドレンダリングをページ特性に応じて使い分ける設計判断。SEOや初期表示速度の要件で選択する。

클라이언트 사이드 렌더링과 서버 사이드 렌더링을 페이지 특성에 따라 사용 구분하는 설계 판단. SEO나 초기 표시 속도 요건으로 선택한다.

開発中にコードを変更した際、ページ全体をリロードせず変更されたモジュールだけを差し替える機能。アプリケーションの状態を保持したまま変更を即時反映でき、開発速度が向上する。

개발 중 코드를 변경했을 때 페이지 전체를 리로드하지 않고 변경된 모듈만 교체하는 기능. 애플리케이션의 상태를 유지한 채 변경을 즉시 반영할 수 있어 개발 속도가 향상된다.

画面に表示されていない領域のコンポーネントを事前にバックグラウンドで描画しておく技術。ユーザーがスクロールや画面遷移をした際に即座に表示でき、体感速度が向上する。

화면에 표시되지 않는 영역의 컴포넌트를 미리 백그라운드에서 그려두는 기술. 사용자가 스크롤이나 화면 전환을 했을 때 즉시 표시할 수 있어 체감 속도가 향상된다.

Webフォントの読み込みに失敗した場合やロード完了前に代替として表示されるシステムフォント。CLS防止のためサイズ調整メトリクスを適用し、レイアウトシフトを最小化する。

웹 폰트 로딩에 실패했거나 로드 완료 전에 대체로 표시되는 시스템 폰트이다. CLS 방지를 위해 사이즈 조정 메트릭스를 적용하여 레이아웃 시프트를 최소화한다.

Webページがソーシャルメディアでシェアされた際に、タイトル・画像・説明などを制御するためのメタデータプロトコル。HTMLの<meta>タグで設定する。

웹 페이지가 소셜 미디어에서 공유될 때 제목·이미지·설명 등을 제어하기 위한 메타데이터 프로토콜. HTML의 <meta> 태그로 설정한다.

ブラウザがHTMLを受け取ってから画面に描画するまでの一連の処理フロー。CSS/JSの読み込み順序を最適化し初期表示速度を向上させる。

브라우저가 HTML을 받아서 화면에 그리기까지의 일련의 처리 플로우. CSS/JS 로딩 순서를 최적화하여 초기 표시 속도를 향상시킨다.

次世代画像フォーマットAVIFをWebサイトで使用するための対応策。WebPよりさらに高い圧縮率を実現し、pictureタグのフォールバックで対応ブラウザに配信する。

차세대 이미지 포맷 AVIF를 웹사이트에서 사용하기 위한 대응책이다. WebP보다 더 높은 압축률을 실현하며 picture 태그의 폴백으로 대응 브라우저에 배포한다.

Viteをベースとした高速なJavaScriptテストフレームワーク。Jest互換のAPIを持ち、ESModulesやTypeScriptをネイティブサポート。Viteプロジェクトとの親和性が高い。

Vite 기반의 고속 JavaScript 테스트 프레임워크. Jest 호환 API를 제공하며 ESModules와 TypeScript를 네이티브로 지원. Vite 프로젝트와의 친화성이 높다.

ReactのuseFormStatusフックを使ってフォーム送信の状態をコンポーネント内で監視する実装であり、送信中のローディング表示やボタンの無効化をプロップスのバケツリレーなしで実現する。

React의 useFormStatus 훅을 사용하여 폼 전송의 상태를 컴포넌트 내에서 감시하는 구현이며, 전송 중의 로딩 표시나 버튼의 비활성화를 프롭스의 바케츠 릴레이 없이 실현한다.

Web Vitalsの中でも特に重要なLCP・INP・CLSの3指標。Googleの検索ランキング要因にも含まれ、SEOとユーザー体験の両方に影響を与える。

Web Vitals 중에서도 특히 중요한 LCP·INP·CLS의 3가지 지표이다. Google 검색 랭킹 요인에도 포함되어 SEO와 사용자 경험 양쪽에 영향을 미친다.

HTMLの標準dialog要素とそのshowModal APIを使ってモーダルダイアログをネイティブに実装する手法であり、フォーカストラップやバックドロップの制御を標準機能で安全に行う。

HTML의 표준 dialog 요소와 그 showModal API를 사용하여 모달 다이얼로그를 네이티브로 구현하는 기법이며, 포커스 트랩이나 백드롭의 제어를 표준 기능으로 안전하게 수행한다.

ドラッグで境界線を移動し、隣接するパネルのサイズを動的に変更できるレイアウト要素。最小・最大サイズ制約やキーボード操作にも対応し、IDEやダッシュボード画面で活用される。

드래그로 경계선을 이동하여 인접한 패널의 크기를 동적으로 변경할 수 있는 레이아웃 요소이다. 최소·최대 크기 제약이나 키보드 조작에도 대응하며 IDE나 대시보드 화면에서 활용된다.

ネイティブCSSでSassのようにセレクターを入れ子に記述できる機能である。&記号で親セレクターを参照し、関連するスタイルをグループ化してCSSの可読性と保守性を向上させる。

네이티브 CSS에서 Sass처럼 셀렉터를 중첩하여 기술할 수 있는 기능이다. & 기호로 부모 셀렉터를 참조하여 관련 스타일을 그룹화하고 CSS의 가독성과 유지보수성을 향상시킨다.

サーバーからHTMLをチャンク単位で段階的に送信し、ブラウザが受け取った部分から順次レンダリングする手法。初期表示速度の向上に貢献し、TTFBの改善が期待できる。

서버에서 HTML을 청크 단위로 단계적으로 전송하여 브라우저가 수신한 부분부터 순차적으로 렌더링하는 기법. 초기 표시 속도 향상에 기여하며 TTFB 개선을 기대할 수 있다.

Next.jsなどのフレームワークで、同一レイアウト内の複数のルートセグメントを並列にレンダリングする機能。ダッシュボードのように複数の独立したコンテンツ領域を持つUIの構築に適している。

Next.js 등의 프레임워크에서 동일 레이아웃 내의 여러 라우트 세그먼트를 병렬로 렌더링하는 기능. 대시보드처럼 여러 독립적인 콘텐츠 영역을 가진 UI 구축에 적합하다.

Cumulative Layout Shiftを抑制するための実装パターン集。画像・広告・動的コンテンツのサイズ予約、フォント読み込み戦略、遅延挿入要素のスペース確保を体系的に対策する。

Cumulative Layout Shift를 억제하기 위한 구현 패턴 모음이다. 이미지·광고·동적 콘텐츠의 사이즈 예약, 폰트 로딩 전략, 지연 삽입 요소의 공간 확보를 체계적으로 대책한다.

デバイスの画面サイズに応じてあらかじめ定義した複数のレイアウトに切り替える設計手法。レスポンシブデザインとは異なり、特定のブレークポイントで固定レイアウトを適用する。

디바이스 화면 크기에 따라 미리 정의된 여러 레이아웃으로 전환하는 설계 방식. 반응형 디자인과 달리, 특정 브레이크포인트에서 고정 레이아웃을 적용한다.

データ読み込み完了前に表示するダミーUI。スケルトンスクリーンやシマーエフェクトとは異なり、実際のコンテンツの形状を模倣してCLS を防ぎ、体感速度を向上させる。

데이터 로딩 완료 전에 표시하는 더미 UI이다. 스켈레톤 스크린이나 시머 이펙트와 달리 실제 콘텐츠의 형상을 모방하여 CLS를 방지하고 체감 속도를 향상시킨다.

ページや要素の切り替え時にアニメーションを簡単に実装できるブラウザネイティブのAPI。SPAやMPA両方で滑らかな画面遷移を少ないコードで実現できる。

페이지나 요소 전환 시 애니메이션을 간단히 구현할 수 있는 브라우저 네이티브 API. SPA와 MPA 모두에서 적은 코드로 부드러운 화면 전환을 실현할 수 있다.

ResizeObserver APIで要素のサイズ変化を非同期に監視するブラウザAPIである。ウィンドウのresizeイベントと異なり、個別の要素レベルでサイズ変更を検知でき、レスポンシブコンポーネントの構築に活用する。

ResizeObserver API로 요소의 크기 변화를 비동기적으로 감시하는 브라우저 API이다. 윈도우의 resize 이벤트와 달리 개별 요소 레벨에서 크기 변경을 감지하여 반응형 컴포넌트 구축에 활용한다.

Webサイトやアプリの設計において、まずモバイル端末向けのUIを優先して設計・実装し、その後デスクトップ向けに拡張していく開発アプローチ。

웹사이트나 앱 설계 시 모바일 기기용 UI를 먼저 설계·구현하고, 이후 데스크톱 환경으로 확장해 나가는 개발 접근 방식.

JavaScript、API、Markupの頭文字を取ったモダンWeb開発アーキテクチャ。事前にビルドされた静的HTMLをCDNから配信し、動的な機能はAPI経由で提供することで、高速かつセキュアなサイトを実現する。

JavaScript, API, Markup의 앞 글자를 딴 모던 웹 개발 아키텍처. 사전 빌드된 정적 HTML을 CDN에서 배포하고, 동적 기능은 API를 통해 제공하여 빠르고 안전한 사이트를 구현한다.

再利用性・テスタビリティ・保守性を高めるためのUIコンポーネント設計の指針。単一責任、Props設計、合成パターンなどを適用する。

재사용성·테스트 용이성·유지보수성을 높이기 위한 UI 컴포넌트 설계 지침. 단일 책임, Props 설계, 합성 패턴 등을 적용한다.

ファーストビューに必要なフォントを優先的に読み込む最適化手法。font-display: swap、preload、サブセット化を組み合わせ、FOIT（不可視テキスト）やFOUT（スタイルなしテキスト）を最小化する。

퍼스트 뷰에 필요한 폰트를 우선적으로 로드하는 최적화 기법이다. font-display: swap, preload, 서브셋화를 조합하여 FOIT(비가시 텍스트)나 FOUT(스타일 없는 텍스트)를 최소화한다.

Interaction to Next Paintの略で、ユーザー操作から次の画面描画までの応答時間を最小化する最適化手法。Core Web Vitalsの主要指標の一つ。

Interaction to Next Paint의 약자로, 사용자 조작 후 다음 화면 렌더링까지의 응답 시간을 최소화하는 최적화 기법. Core Web Vitals의 주요 지표 중 하나.

スクロール位置に連動してアニメーションを進行させるCSS機能。animation-timelineプロパティで、JavaScriptなしにスクロール連動の視覚効果を実現する。

스크롤 위치에 연동하여 애니메이션을 진행시키는 CSS 기능이다. animation-timeline 프로퍼티로 JavaScript 없이 스크롤 연동 시각 효과를 실현한다.

Rustで実装された高速なJavaScriptバンドラー。Webpackの後継としてVercelが開発し、Next.js 13以降に統合。インクリメンタルビルドにより従来比で大幅な高速化を実現する。

Rust로 구현된 고속 JavaScript 번들러. Webpack의 후계자로 Vercel이 개발하였으며, Next.js 13 이후에 통합됨. 증분 빌드를 통해 기존 대비 대폭적인 속도 향상을 실현한다.

React DevToolsのProfilerやブラウザのPerformanceパネルを活用してコンポーネントの再レンダリング回数と所要時間を分析する手法であり、不要な再描画のボトルネックを特定して最適化する。

React DevTools의 Profiler나 브라우저의 Performance 패널을 활용하여 컴포넌트의 재렌더링 횟수와 소요 시간을 분석하는 기법이며, 불필요한 재그리기의 병목을 특정하여 최적화한다.

Googleが定義するWebページのユーザー体験を測定するための品質指標群。LCP・FID・CLSなどの指標でページの読み込み速度や操作性を定量的に評価する。

Google이 정의하는 웹 페이지의 사용자 경험을 측정하기 위한 품질 지표군이다. LCP·FID·CLS 등의 지표로 페이지의 로딩 속도나 조작성을 정량적으로 평가한다.

フィーチャーフラグサービスをReactアプリケーションに統合してコンポーネントレベルで機能の表示を制御する手法であり、SDKフックやコンテキストプロバイダを用いたフラグ評価の設計を行う。

피처 플래그 서비스를 React 애플리케이션에 통합하여 컴포넌트 레벨에서 기능의 표시를 제어하는 기법이며, SDK 훅이나 컨텍스트 프로바이더를 사용한 플래그 평가의 설계를 수행한다.

text-wrap: balanceプロパティで、テキストの各行の長さを均等に分配するCSS機能である。見出しなどの短いテキストブロックで、最終行だけ極端に短くなる問題を自動的に解消する。

text-wrap: balance 프로퍼티로 텍스트 각 행의 길이를 균등하게 분배하는 CSS 기능이다. 제목 등의 짧은 텍스트 블록에서 마지막 행만 극단적으로 짧아지는 문제를 자동으로 해소한다.

大量の行データを持つデータテーブルにおいて可視領域の行のみをDOMにレンダリングする仮想化手法であり、TanStack Virtualを活用してソートやフィルタと併用しても高い描画性能を維持する。

대량의 행 데이터를 가진 데이터 테이블에서 가시 영역의 행만을 DOM에 렌더링하는 가상화 기법이며, TanStack Virtual을 활용하여 정렬이나 필터와 병용해도 높은 그리기 성능을 유지한다.

Interaction to Next Paintのスコアを改善するための具体的な手法であり、イベントハンドラの処理分割やメインスレッドのブロッキング排除、スケジューラAPIの活用でインタラクション応答性を高める。

Interaction to Next Paint의 스코어를 개선하기 위한 구체적인 기법이며, 이벤트 핸들러의 처리 분할이나 메인 스레드의 블로킹 배제, 스케줄러 API의 활용으로 인터랙션 응답성이 향상된다.

ボタン押下時の波紋エフェクトやトグル切替時のスライドアニメーションなど、ユーザー操作に対する即時的な視覚応答。操作の成功を確認させ、次のアクションへの誘導に寄与する。

버튼 누름 시 파문 이펙트나 토글 전환 시 슬라이드 애니메이션 등 사용자 조작에 대한 즉시적 시각 응답이다. 조작의 성공을 확인시키고 다음 액션으로의 유도에 기여한다.

tRPCを使ってフロントエンドとバックエンド間のAPI通信をエンドツーエンドで型安全にする統合パターンであり、REST APIやGraphQLのスキーマ定義なしにTypeScriptの型推論だけでAPI連携を実現する。

tRPC를 사용하여 프론트엔드와 백엔드 간의 API 통신을 엔드투엔드로 타입 안전하게 하는 통합 패턴이며, REST API나 GraphQL의 스키마 정의 없이 TypeScript의 타입 추론만으로 API 연계를 실현한다.

UIや機能を独立した再利用可能な単位に分割したもの。ReactやVueなどのフレームワークで中心的な概念であり、保守性・再利用性の向上に貢献する。

UI나 기능을 독립적이고 재사용 가능한 단위로 분리한 것. React, Vue 등의 프레임워크에서 핵심 개념으로, 유지보수성과 재사용성 향상에 기여한다.

入力内容が正しいかチェックすること。Validation。

입력 내용이 올바른지 확인하는 것. Validation.

Googleが定めるWebページのユーザー体験を測る3つの指標（LCP・FID・CLS）。検索順位にも影響するため、フロントエンド最適化の重要指標として活用される。

Google이 정의한 웹 페이지 사용자 경험을 측정하는 3가지 지표(LCP·FID·CLS)로, 검색 순위에도 영향을 미치기 때문에 프론트엔드 최적화의 핵심 지표로 활용된다.

コンポーネントや画像などのリソースを必要になったタイミングで遅延読み込みする手法であり、React.lazyやIntersection Observer APIを活用して初期ロード時間を短縮する。

컴포넌트나 이미지 등의 리소스를 필요해진 타이밍에 지연 로드하는 기법이며, React.lazy나 Intersection Observer API를 활용하여 초기 로드 시간을 단축한다.

UI要素に動きを加える演出技術。CSS TransitionやJavaScriptライブラリ（GSAP等）を用いてユーザー体験を向上させるために使用される。

UI 요소에 움직임을 추가하는 연출 기술. CSS Transition이나 JavaScript 라이브러리(GSAP 등)를 활용하여 사용자 경험을 향상시키기 위해 사용된다.

axe-coreやLighthouseを使ってWCAG準拠をCIで自動的に検証するテスト手法。手動テストと組み合わせてアクセシビリティ品質を担保する。

axe-core나 Lighthouse를 사용하여 WCAG 준수를 CI에서 자동으로 검증하는 테스트 기법. 수동 테스트와 조합하여 접근성 품질을 담보한다.

サーバー側でのみレンダリングされ、クライアントにJavaScriptバンドルを送信しないコンポーネント。データ取得をサーバー側で完結させ、クライアントのバンドルサイズを削減する効果がある。

서버 측에서만 렌더링되고 클라이언트에 JavaScript 번들을 전송하지 않는 컴포넌트. 데이터 취득을 서버 측에서 완결시켜 클라이언트의 번들 사이즈를 삭감하는 효과가 있다.

ページ表示に必要なリソース（フォント・画像・スクリプト等）を事前に読み込み、初期表示速度やUXを向上させる技術。`<link rel='preload'>`タグやHTTP/2 Server Pushなどで実現する。

페이지 표시에 필요한 리소스(폰트·이미지·스크립트 등)를 미리 불러와 초기 표시 속도와 UX를 향상시키는 기술. `<link rel='preload'>` 태그나 HTTP/2 Server Push 등으로 구현한다.

Webフォントの読み込みによるCLSやFOUTを最小化する最適化手法。font-display戦略、プリロード、サブセット化、ローカルフォントフォールバックを組み合わせて表示品質を向上する。

웹 폰트 로딩에 의한 CLS나 FOUT를 최소화하는 최적화 기법이다. font-display 전략, 프리로드, 서브셋화, 로컬 폰트 폴백을 조합하여 표시 품질을 향상시킨다.

Webページの大部分を静的HTMLで構成し、インタラクティブな部分だけをJavaScriptの「島（アイランド）」として独立して動作させるフロントエンドアーキテクチャパターン。パフォーマンス向上に有効。

웹 페이지의 대부분을 정적 HTML로 구성하고, 인터랙티브한 부분만 JavaScript '섬(아일랜드)'으로 독립적으로 동작시키는 프론트엔드 아키텍처 패턴. 성능 향상에 효과적이다.

モーダルダイアログ表示中にTabキーのフォーカスがモーダル内に閉じ込められるアクセシビリティ機能の実装。開く時の初期フォーカス設定と閉じる時のフォーカス復帰も含む。

모달 다이얼로그 표시 중 Tab 키의 포커스가 모달 내에 갇히는 접근성 기능의 구현이다. 열 때의 초기 포커스 설정과 닫을 때의 포커스 복귀도 포함한다.

Reactコンポーネントをサーバー側でレンダリングする仕組み。クライアントへのJSバンドルを削減し、データフェッチをサーバー側で完結させることでパフォーマンスを大幅に向上させる。

React 컴포넌트를 서버 측에서 렌더링하는 방식. 클라이언트로 전송되는 JS 번들을 줄이고, 데이터 페칭을 서버에서 처리함으로써 성능을 크게 향상시킨다.

UIフレームワークにおけるリアクティブな状態管理の仕組みで、値の変更を自動的に検知して関連するUIだけを効率的に再描画する。SolidJSやPreact、Angularなどで採用されている。

UI 프레임워크에서 리액티브한 상태 관리 구조로, 값의 변경을 자동으로 감지하여 관련 UI만 효율적으로 다시 그린다. SolidJS, Preact, Angular 등에서 채택되고 있다.

Content Security PolicyのHTTPヘッダーを設計してXSSやデータインジェクション攻撃を防止するフロントエンドセキュリティ手法であり、nonceベースやハッシュベースのスクリプト許可ルールを策定する。

Content Security Policy의 HTTP 헤더를 설계하여 XSS나 데이터 인젝션 공격을 방지하는 프론트엔드 보안 기법이며, nonce 기반이나 해시 기반의 스크립트 허가 규칙을 수립한다.

フォントファイルから使用する文字だけを抽出して軽量化する最適化手法。日本語フォントのように文字数が多いフォントのファイルサイズを大幅に削減できる。

폰트 파일에서 사용하는 문자만 추출하여 경량화하는 최적화 기법이다. 일본어 폰트처럼 문자 수가 많은 폰트의 파일 사이즈를 대폭 줄일 수 있다.

Webページで使用するフォントの読み込みを効率化する技術。WOFF2形式の採用やfont-displayプロパティの設定、サブセット化などでレンダリングブロックを防ぎ、表示速度を改善する。

웹 페이지에서 사용하는 폰트 로딩을 효율화하는 기술. WOFF2 형식 채택, font-display 속성 설정, 서브셋화 등을 통해 렌더링 블로킹을 방지하고 표시 속도를 향상시킨다.

画面の下部や側面からスライドして表示されるパネル型のUI要素。モバイルではボトムシート、デスクトップではサイドシートとして利用され、メインコンテンツを遮らずに補足情報を提示する。

화면 하단이나 측면에서 슬라이드하여 표시되는 패널형 UI 요소이다. 모바일에서는 바텀 시트, 데스크톱에서는 사이드 시트로 활용되며 메인 콘텐츠를 가리지 않고 보충 정보를 제시한다.

svh、lvh、dvhなどの新しいビューポート単位で、モバイルブラウザのアドレスバーの表示状態を考慮した正確なレイアウトを実現する。100vhで発生していたモバイルの表示問題を解決する。

svh, lvh, dvh 등의 새로운 뷰포트 단위로, 모바일 브라우저의 주소창 표시 상태를 고려한 정확한 레이아웃을 구현한다. 100vh에서 발생하던 모바일 표시 문제를 해결한다.

CSS Custom Highlight APIで、DOM構造を変更せずにテキスト範囲にスタイルを適用する仕組みである。検索結果のハイライトやコードエディタの構文ハイライトを高性能に実装できる。

CSS Custom Highlight API로 DOM 구조를 변경하지 않고 텍스트 범위에 스타일을 적용하는 구조이다. 검색 결과 하이라이트나 코드 에디터의 구문 하이라이트를 고성능으로 구현할 수 있다.

デザインシステムのコンポーネントライブラリをsemverで管理し、破壊的変更の安全なリリースを実現する手法。マイグレーションガイドと非推奨期間の設定を含む。

디자인 시스템의 컴포넌트 라이브러리를 semver로 관리하고 파괴적 변경의 안전한 릴리스를 실현하는 기법이다. 마이그레이션 가이드와 비추천 기간의 설정을 포함한다.

ネイティブCSSのネスティング構文を活用してセレクタの階層関係を視覚的に表現する手法であり、SassなどのプリプロセッサなしでもCSSの可読性と保守性を向上させる技術である。

네이티브 CSS의 네스팅 구문을 활용하여 셀렉터의 계층 관계를 시각적으로 표현하는 기법이며, Sass 등의 프리프로세서 없이도 CSS의 가독성과 유지보수성을 향상시키는 기술이다.

マウスを使わずキーボード操作のみでUI上を移動・操作できる機能。Tabキーやショートカットで要素間を移動し、アクセシビリティ対応の基本要件となる。

마우스 없이 키보드만으로 UI 요소 간 이동 및 조작이 가능한 기능. Tab 키나 단축키로 요소 간 이동하며, 웹 접근성 대응의 기본 요건이다.

必要になるまでリソースの読み込みを遅延させる技術。画像やコンポーネントを初期ロード時に取得せず、表示が必要なタイミングで取得することでパフォーマンスを向上させる。

필요할 때까지 리소스 로딩을 지연시키는 기술. 이미지나 컴포넌트를 초기 로드 시 가져오지 않고, 표시가 필요한 타이밍에 가져옴으로써 성능을 향상시킨다.

色を視覚的に選択できるフォーム要素。HSL・RGB・HEX形式に対応し、スポイト機能やパレットプリセットを備えることで、デザインツールやテーマ設定画面で直感的な色選択を提供する。

색상을 시각적으로 선택할 수 있는 폼 요소이다. HSL·RGB·HEX 형식에 대응하며 스포이트 기능이나 팔레트 프리셋을 갖추어 디자인 도구나 테마 설정 화면에서 직관적인 색 선택을 제공한다.

REST APIやGraphQLとフロントエンドを連携させる際の設計パターン。データ取得レイヤーの抽象化やエラーハンドリングの統一を行う。

REST API나 GraphQL과 프론트엔드를 연동할 때의 설계 패턴. 데이터 취득 레이어의 추상화나 에러 핸들링 통일을 수행한다.

Reactで独自に作成した再利用可能なフック。useで始まる関数として定義し、状態管理やサイドエフェクトのロジックをコンポーネント間で共有できる仕組み。

React에서 직접 만든 재사용 가능한 훅. use로 시작하는 함수로 정의하며, 상태 관리나 사이드 이펙트 로직을 컴포넌트 간에 공유할 수 있는 구조.

GraphQLクライアント側でのクエリキャッシュ・バッチング・フラグメント管理などを工夫し、通信コストやレンダリング負荷を最小化する最適化手法。Apolloやurqlなどのライブラリが代表的。

GraphQL 클라이언트 측에서 쿼리 캐싱, 배칭, 프래그먼트 관리 등을 활용해 통신 비용과 렌더링 부하를 최소화하는 최적화 기법으로, Apollo나 urql 같은 라이브러리가 대표적이다.

ブラウザに対して事前にリソースの取得や接続を指示するHTML属性群。dns-prefetch、preconnect、prefetch、preloadなどがあり、ページの読み込みパフォーマンス向上に活用される。

브라우저에 미리 리소스 취득이나 연결을 지시하는 HTML 속성 모음. dns-prefetch, preconnect, prefetch, preload 등이 있으며 페이지 로딩 성능 향상에 활용된다.

状態の更新に優先度を付けてUIの応答性を保つためのReact APIの仕組み。緊急でない更新をトランジションとしてマークし、ユーザー入力への応答を妨げないようにする。

상태 업데이트에 우선순위를 부여하여 UI 응답성을 유지하기 위한 React API 구조. 긴급하지 않은 업데이트를 트랜지션으로 표시하여 사용자 입력에 대한 응답을 방해하지 않도록 한다.

Jotaiのアトムベースの状態管理において、派生アトムや非同期アトムを効果的に設計する手法であり、ボトムアップの状態構築により必要最小限のコンポーネント再レンダリングを実現する。

Jotai의 아톰 기반 상태 관리에서 파생 아톰이나 비동기 아톰을 효과적으로 설계하는 기법이며, 보텀업의 상태 구축에 의해 필요 최소한의 컴포넌트 재렌더링을 실현한다.

モーダルやダイアログ内にキーボードフォーカスを閉じ込め、Tabキーでの外部要素への移動を防ぐアクセシビリティ手法。

모달이나 다이얼로그 안에 키보드 포커스를 가두어 Tab 키로 외부 요소로의 이동을 방지하는 접근성 기법.

ブラウザにキーと値のペアを永続的に保存するWeb Storage API。セッション終了後もデータが残り、同一オリジン内でJavaScriptからアクセス可能。容量は通常5MB程度。

브라우저에 키-값 쌍을 영구적으로 저장하는 Web Storage API. 세션 종료 후에도 데이터가 유지되며, 동일 오리진 내에서 JavaScript로 접근 가능. 용량은 보통 5MB 정도.

フロントエンド（ビュー）を持たず、コンテンツの管理機能とAPIのみを提供するCMS。開発者は好きなフロントエンド技術（Reactなど）を使って自由に画面を構築できる。ContentfulやmicroCMSが代表的。

프론트엔드(뷰)를 가지지 않고 콘텐츠 관리 기능과 API만을 제공하는 CMS. 개발자는 원하는 프론트엔드 기술(React 등)을 사용하여 자유롭게 화면을 구축할 수 있다. Contentful이나 microCMS가 대표적이다.

CSSのcontent-visibilityプロパティにより、画面外のコンテンツのレンダリングをスキップしてページの描画速度を向上させる機能。大量のコンテンツを持つページで効果が大きい。

CSS의 content-visibility 프로퍼티로 화면 밖 콘텐츠의 렌더링을 건너뛰어 페이지 그리기 속도를 향상시키는 기능. 대량의 콘텐츠를 가진 페이지에서 효과가 크다.

web-vitalsライブラリやRUM（リアルユーザーモニタリング）を使い、LCP・FID・CLS・INPなどのCore Web Vitalsを自動的に収集・分析する仕組み。継続的なパフォーマンス監視に役立つ。

web-vitals 라이브러리나 RUM(리얼 유저 모니터링)을 사용하여 LCP·FID·CLS·INP 등의 Core Web Vitals를 자동으로 수집·분석하는 구조. 지속적인 성능 감시에 도움이 된다.

CSS変数の命名規則とスコープを体系的に設計してテーマやコンポーネントのスタイル制御を柔軟に行う手法であり、グローバルトークンとローカルトークンの階層構造を構築する。

CSS 변수의 명명 규칙과 스코프를 체계적으로 설계하여 테마나 컴포넌트의 스타일 제어를 유연하게 수행하는 기법이며, 글로벌 토큰과 로컬 토큰의 계층 구조를 구축한다.

CSS変数をトークンとして体系的に設計し、テーマ切替や一貫したデザインの基盤とする手法。グローバル変数とコンポーネントスコープ変数を階層化して管理する。

CSS 변수를 토큰으로 체계적으로 설계하고 테마 전환이나 일관된 디자인의 기반으로 하는 기법이다. 글로벌 변수와 컴포넌트 스코프 변수를 계층화하여 관리한다.

コンポーネントを必要なタイミングまで読み込みを遅延させ、初期バンドルサイズを削減する手法。React.lazyやVueのdefineAsyncComponentなどで動的インポートと組み合わせて使用する。

컴포넌트를 필요한 타이밍까지 로딩을 지연시켜 초기 번들 사이즈를 줄이는 기법이다. React.lazy나 Vue의 defineAsyncComponent 등으로 동적 임포트와 조합하여 사용한다.

WebPやAVIFなどの次世代画像フォーマットを活用してファイルサイズを削減する最適化。pictureタグで複数フォーマットのフォールバックを提供する。

WebP나 AVIF 등의 차세대 이미지 포맷을 활용하여 파일 사이즈를 절감하는 최적화. picture 태그로 여러 포맷의 폴백을 제공한다.

サーバーでのレンダリング結果をチャンクごとにクライアントに段階的に送信する手法。TTFBを短縮しユーザーの体感速度を向上させる。

서버에서의 렌더링 결과를 청크별로 클라이언트에 단계적으로 전송하는 기법. TTFB를 단축하여 사용자의 체감 속도를 향상시킨다.

XSS、CSRF、クリックジャッキングなどのフロントエンド固有のセキュリティ脅威への対策。CSPヘッダーやサニタイズ処理で防御する。

XSS, CSRF, 클릭재킹 등 프론트엔드 고유의 보안 위협에 대한 대책. CSP 헤더나 새니타이즈 처리로 방어한다.

アプリの規模や複雑さに応じて適切な状態管理ライブラリを選択する判断。Zustand、Jotai、Reduxなどの特性を比較検討する。

앱의 규모나 복잡도에 따라 적절한 상태 관리 라이브러리를 선택하는 판단. Zustand, Jotai, Redux 등의 특성을 비교 검토한다.

W3CとFIDOが策定したWeb認証APIの仕様。パスワードレス認証を実現し、生体認証やセキュリティキーを使ってブラウザから安全にログインできる。

W3C와 FIDO가 책정한 웹 인증 API 사양. 패스워드리스 인증을 실현하며, 생체 인증이나 보안 키를 사용해 브라우저에서 안전하게 로그인할 수 있다.

バンドル時に使用されていないコード（デッドコード）を自動的に除去する最適化技術。WebpackやRollupなどのバンドラーが対応しており、最終的なファイルサイズを削減できる。

번들링 시 사용되지 않는 코드(데드 코드)를 자동으로 제거하는 최적화 기술. Webpack이나 Rollup 같은 번들러가 지원하며, 최종 파일 크기를 줄일 수 있다.

UIコンポーネントがエラー発生時に表示する状態。入力フォームのバリデーション失敗やAPI通信エラー時に、ユーザーへ視覚的にフィードバックを伝えるデザイン・実装パターン。

UI 컴포넌트가 에러 발생 시 표시하는 상태. 입력 폼의 유효성 검사 실패나 API 통신 에러 시 사용자에게 시각적으로 피드백을 전달하는 디자인·구현 패턴.

メインスレッドとは別のWeb Workerスレッドでキャンバス描画を実行できるAPIである。重い描画処理をオフロードし、UIのフレームレート低下を防止する。

메인 스레드와 별도의 Web Worker 스레드에서 캔버스 그리기를 실행할 수 있는 API이다. 무거운 그리기 처리를 오프로드하여 UI의 프레임 레이트 저하를 방지한다.

アナリティクスや広告などの外部スクリプトの読み込みを管理する手法。遅延読み込みやWeb Workerへの分離でメインスレッドへの影響を抑える。

애널리틱스나 광고 등 외부 스크립트 로딩을 관리하는 기법. 지연 로딩이나 Web Worker 분리로 메인 스레드 영향을 줄인다.

Scalable Vector Graphicsの略。XMLベースのベクター画像フォーマットで、拡大縮小しても画質が劣化しないためWebのアイコンやロゴに広く使われる。

Scalable Vector Graphics의 약자. XML 기반의 벡터 이미지 포맷으로, 확대·축소해도 화질이 저하되지 않아 웹 아이콘이나 로고에 널리 사용된다.

マウスなしでWebアプリの全機能にアクセスできるキーボード操作の設計。タブ順序の論理化、矢印キーによるウィジェット操作、ショートカットキーの定義を体系的に行う。

마우스 없이 웹 앱의 전 기능에 접근할 수 있는 키보드 조작의 설계이다. 탭 순서의 논리화, 화살표 키에 의한 위젯 조작, 단축키 정의를 체계적으로 수행한다.

コンポーネントライブラリやデザイントークンを組織全体で継続的に管理・進化させる運用プロセス。Storybookでのドキュメント管理が一般的。

컴포넌트 라이브러리나 디자인 토큰을 조직 전체에서 지속적으로 관리·진화시키는 운용 프로세스. Storybook에서의 문서 관리가 일반적이다.

Service WorkerやWeb Manifestを使ってネイティブアプリに近い体験をWebで実現する実装。オフライン対応やプッシュ通知も可能にする。

Service Worker나 Web Manifest를 사용하여 네이티브 앱에 가까운 경험을 웹에서 실현하는 구현. 오프라인 대응이나 푸시 알림도 가능하게 한다.

clamp()、min()、max()、round()などの数学関数をCSS内で直接使用できる機能である。レスポンシブなフォントサイズやスペーシングを数式で定義し、ブレイクポイントなしの流動的なデザインを実現する。

clamp(), min(), max(), round() 등의 수학 함수를 CSS 내에서 직접 사용할 수 있는 기능이다. 반응형 폰트 크기와 간격을 수식으로 정의하여 브레이크포인트 없는 유동적 디자인을 구현한다.

shape-outsideプロパティを使い、フロート要素の周囲のテキスト回り込み形状を定義するCSS機能である。円形や多角形などの形状を指定し、雑誌のようなリッチなテキストレイアウトを実現する。

shape-outside 프로퍼티를 사용하여 플로트 요소 주위의 텍스트 감싸기 형상을 정의하는 CSS 기능이다. 원형이나 다각형 등의 형상을 지정하여 잡지와 같은 풍부한 텍스트 레이아웃을 구현한다.

ドロップダウンやリストから複数項目を同時に選択できるフォーム要素。タグ形式で選択済み項目を表示し、検索フィルタリングと組み合わせて大量の選択肢から効率的に選択できる。

드롭다운이나 리스트에서 복수 항목을 동시에 선택할 수 있는 폼 요소이다. 태그 형식으로 선택 완료 항목을 표시하며 검색 필터링과 조합하여 대량의 선택지에서 효율적으로 선택할 수 있다.

Framer Motionのvariantsやlayout animationを活用してReactアプリケーションに宣言的なアニメーションを設計する手法であり、入退場アニメーションや共有レイアウトの遷移を効率的に実装する。

Framer Motion의 variants나 layout animation을 활용하여 React 애플리케이션에 선언적인 애니메이션을 설계하는 기법이며, 입퇴장 애니메이션이나 공유 레이아웃의 천이를 효율적으로 구현한다.

Progressive Web Appの略。Web技術でネイティブアプリに近いUXを実現する手法。オフライン対応・プッシュ通知・ホーム画面追加などの機能を持つ。

Progressive Web App의 약자. 웹 기술로 네이티브 앱에 가까운 UX를 구현하는 방식. 오프라인 지원, 푸시 알림, 홈 화면 추가 등의 기능을 제공한다.

Web Componentsの仕様の一つで、独自のHTMLタグを定義・登録できる仕組み。JavaScriptのクラスを継承し、再利用可能なUIコンポーネントをブラウザネイティブで作成できる。

Web Components 사양 중 하나로, 고유한 HTML 태그를 정의하고 등록할 수 있는 구조. JavaScript 클래스를 상속하여 재사용 가능한 UI 컴포넌트를 브라우저 네이티브로 작성할 수 있다.

Webサイトやアプリの上部・側部に配置されるメニュー要素。ユーザーが各ページやセクションへ移動するための主要なUIコンポーネント。

웹사이트나 앱의 상단·측면에 배치되는 메뉴 요소. 사용자가 각 페이지나 섹션으로 이동하기 위한 주요 UI 컴포넌트.

Next.jsが提供する静的生成の拡張機能。初回ビルド後も指定した間隔でページを再生成し、静的配信の速度を保ちながら常に最新コンテンツを表示できる。

Next.js가 제공하는 정적 생성 확장 기능. 최초 빌드 이후에도 지정한 간격으로 페이지를 재생성하여, 정적 배포의 속도를 유지하면서 항상 최신 콘텐츠를 표시할 수 있다.

ページ遷移時にビューポート全体のアニメーションを実現するView Transitions API。SPAやMPAでのスムーズな画面切替をブラウザネイティブで実装できる。

페이지 전환 시 뷰포트 전체의 애니메이션을 실현하는 View Transitions API이다. SPA나 MPA에서의 부드러운 화면 전환을 브라우저 네이티브로 구현할 수 있다.

水平スクロールや追加コンテンツの存在をユーザーに示す視覚的なインジケータ。グラデーションのフェードや矢印アイコンで、スクロール可能な方向と残りコンテンツの存在を暗示する。

수평 스크롤이나 추가 콘텐츠의 존재를 사용자에게 알리는 시각적 인디케이터이다. 그라데이션 페이드나 화살표 아이콘으로 스크롤 가능한 방향을 암시한다.

SNSへのコンテンツ共有機能を提供するボタン群。Web Share APIやOGPメタタグと連携し、サードパーティスクリプトに依存しない軽量な実装がパフォーマンス上推奨される。

SNS로의 콘텐츠 공유 기능을 제공하는 버튼 그룹이다. Web Share API나 OGP 메타 태그와 연계하며 서드파티 스크립트에 의존하지 않는 경량 구현이 성능상 권장된다.

ブラウザのネイティブスクロール動作をJavaScriptで上書きするスクロールジャックを避け、ユーザーの操作感を損なわない実装方針。scroll-snap やCSS アニメーションでの代替が推奨される。

브라우저의 네이티브 스크롤 동작을 JavaScript로 덮어쓰는 스크롤 재킹을 피하고 사용자의 조작감을 해치지 않는 구현 방침이다. scroll-snap이나 CSS 애니메이션으로의 대체가 권장된다.

動的に更新されるコンテンツをスクリーンリーダーに通知するためのARIA属性。aria-liveの値（polite/assertive）で通知の優先度を制御し、非視覚ユーザーへの情報伝達を保証する。

동적으로 갱신되는 콘텐츠를 스크린 리더에 통지하기 위한 ARIA 속성이다. aria-live의 값(polite/assertive)으로 통지 우선도를 제어하여 비시각 사용자에 대한 정보 전달을 보장한다.

1つのフォントファイルに太さ・幅・斜体などの軸を含み、連続的にスタイルを変化させられるOpenType仕様のフォントである。複数のフォントファイルを1つに統合でき、読み込み量を削減する。

하나의 폰트 파일에 굵기·너비·기울기 등의 축을 포함하여 연속적으로 스타일을 변화시킬 수 있는 OpenType 사양의 폰트이다. 여러 폰트 파일을 하나로 통합하여 로딩량을 줄일 수 있다.

StackBlitzが開発したWebContainers技術で、ブラウザ内でNode.jsランタイムを動作させる仕組み。オンラインIDEやチュートリアル環境をサーバー不要で提供でき、開発体験が向上する。

StackBlitz가 개발한 WebContainers 기술로, 브라우저 내에서 Node.js 런타임을 동작시키는 구조. 온라인 IDE나 튜토리얼 환경을 서버 없이 제공할 수 있어 개발 경험이 향상된다.

ページ間の移動時にフェードやスライドなどのアニメーション効果を適用する技法。View Transitions APIを活用し、SPAだけでなくMPAでもシームレスな遷移体験を実現する。

페이지 간 이동 시 페이드나 슬라이드 등의 애니메이션 효과를 적용하는 기법이다. View Transitions API를 활용하여 SPA뿐 아니라 MPA에서도 심리스한 전환 경험을 실현한다.

ビルド時にHTMLファイルを事前生成する手法。SSGとも呼ばれ、Next.jsやGatsbyで採用。サーバー負荷が低く、表示速度が速いためパフォーマンス向上に有効。

빌드 시점에 HTML 파일을 사전 생성하는 방식. SSG라고도 불리며 Next.js나 Gatsby에서 채택. 서버 부하가 낮고 표시 속도가 빨라 성능 향상에 효과적.

Reactコンポーネントを自動的に最適化するコンパイラ。useMemoやuseCallbackを手動で書く必要をなくし、再レンダリングを自動で最小化する。

React 컴포넌트를 자동으로 최적화하는 컴파일러. useMemo나 useCallback을 수동으로 작성할 필요를 없애고, 리렌더링을 자동으로 최소화한다.