フロントエンド IT用語 韓国語一覧
프론트엔드 IT 용어 일본어 목록
193語収録 / 193개 수록
実際のDOMを直接操作せず、メモリ上に仮想のDOMツリーを保持し差分のみを効率的に更新する仕組み。ReactやVue.jsで採用されパフォーマンス向上に貢献する。
실제 DOM을 직접 조작하지 않고 메모리 상에 가상 DOM 트리를 유지하여 변경된 부분만 효율적으로 업데이트하는 방식. React와 Vue.js에서 채택하여 성능 향상에 기여한다.
Reactアプリ向けの軽量な状態管理ライブラリ。ReduxやContextに比べてボイラープレートが少なく、シンプルなAPIでグローバル状態を管理できる。
React 앱을 위한 경량 상태 관리 라이브러리. Redux나 Context에 비해 보일러플레이트가 적고, 간단한 API로 전역 상태를 관리할 수 있다.
ReactライクなAPIを持つ高パフォーマンスなUIライブラリ。仮想DOMを使わず、細粒度のリアクティビティでDOMを直接更新するため、レンダリング速度が非常に速い。
React와 유사한 API를 가진 고성능 UI 라이브러리. 가상 DOM을 사용하지 않고 세밀한 반응성으로 DOM을 직접 업데이트하기 때문에 렌더링 속도가 매우 빠르다.
デフォルトでJavaScriptを一切クライアントに送信しないフレームワーク。AstroやQwikなどが代表例で、静的HTMLを優先しパフォーマンスを最大化する設計思想。
기본적으로 JavaScript를 클라이언트에 전혀 전송하지 않는 프레임워크. Astro, Qwik 등이 대표적이며, 정적 HTML을 우선시해 성능을 극대화하는 설계 철학.
Webサーバーからフォントファイルを配信し、ユーザーのローカル環境に依存せず任意のフォントをブラウザで表示する仕組み。Google FontsやAdobe Fontsが代表的なサービス。
웹 서버에서 폰트 파일을 제공하여 사용자의 로컬 환경에 의존하지 않고 임의의 폰트를 브라우저에서 표시하는 방식. Google Fonts, Adobe Fonts가 대표적인 서비스이다.
Go言語で実装された超高速JavaScriptバンドラー・トランスパイラ。従来のwebpackやBabelと比べ10〜100倍高速で、ビルド時間の大幅短縮が可能。
Go 언어로 구현된 초고속 JavaScript 번들러·트랜스파일러. 기존 webpack이나 Babel에 비해 10〜100배 빠르며, 빌드 시간을 대폭 단축할 수 있다.
スマートフォンアプリで画面を下に引っ張ることでコンテンツを再読み込みする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向けの型安全なクライアントサイドルーティングライブラリ。URLの状態管理やネストされたルート、ファイルベースルーティングをサポートし、TypeScriptとの親和性が高い。
React용 타입 안전 클라이언트 사이드 라우팅 라이브러리. URL 상태 관리, 중첩 라우트, 파일 기반 라우팅을 지원하며 TypeScript와의 호환성이 뛰어나다.
ブラウザがWebページの画像・CSS・JSなどのリソースをローカルに保存する仕組み。再訪問時の読み込み速度向上とサーバー負荷軽減に役立つが、更新反映の遅延原因にもなる。
브라우저가 웹 페이지의 이미지·CSS·JS 등의 리소스를 로컬에 저장하는 메커니즘. 재방문 시 로딩 속도 향상과 서버 부하 감소에 유용하지만, 업데이트 반영이 늦어지는 원인이 되기도 한다.
ブラウザのタブ単位でデータを一時保存するWeb Storage API。タブを閉じると自動削除され、同一オリジン内のみアクセス可能。LocalStorageと異なりセッション限定の保存に適している。
브라우저 탭 단위로 데이터를 임시 저장하는 Web Storage API. 탭을 닫으면 자동 삭제되며 동일 오리진 내에서만 접근 가능. LocalStorage와 달리 세션 한정 저장에 적합하다.
GoogleのFirebaseが提供する静的サイト・SPAのホスティングサービス。CDN配信・SSL証明書自動発行・カスタムドメイン対応など、フロントエンドのデプロイを簡単に行える。
Google Firebase에서 제공하는 정적 사이트 및 SPA 호스팅 서비스. CDN 배포, SSL 인증서 자동 발급, 커스텀 도메인 지원 등 프론트엔드 배포를 간편하게 처리할 수 있다.
ブラウザ標準のHTTP通信API。XHRに代わりPromiseベースで非同期リクエストを行う。REST APIやJSONデータの取得に広く使われる。
브라우저 표준 HTTP 통신 API. XHR을 대체하며 Promise 기반으로 비동기 요청을 처리한다. REST API나 JSON 데이터 취득에 널리 사용된다.
FacebookとGoogleが共同開発したJavaScriptパッケージマネージャー。npmの代替として登場し、高速なインストールや確定的な依存関係管理を特徴とする。
Facebook과 Google이 공동 개발한 JavaScript 패키지 매니저. npm의 대안으로 등장했으며, 빠른 설치 속도와 결정론적 의존성 관리를 특징으로 한다.
HTMLの<head>内に記述する要素で、ページのタイトル・説明・キーワードなどをブラウザや検索エンジンに伝える。SEO対策やOGP設定にも活用される。
HTML의 <head> 내에 작성하는 요소로, 페이지의 제목·설명·키워드 등을 브라우저와 검색 엔진에 전달한다. SEO 최적화 및 OGP 설정에도 활용된다.
ReactのレンダリングをUIの応答性を維持しながら中断・再開できる仕組み。重い処理中もユーザー操作をブロックせず、優先度に基づいて描画を制御する。
React의 렌더링을 UI 응답성을 유지하면서 중단·재개할 수 있는 기능. 무거운 처리 중에도 사용자 조작을 블로킹하지 않고 우선순위에 따라 렌더링을 제어한다.
タブレット端末の画面サイズ（主に768px〜1024px）に最適化されたUIレイアウト設計。レスポンシブデザインの一部として実装されることが多い。
태블릿 단말기의 화면 크기(주로 768px~1024px)에 최적화된 UI 레이아웃 설계. 반응형 디자인의 일부로 구현되는 경우가 많다.
Next.jsが提供する仕組みで、静的ページをビルド後も一定間隔で自動再生成できる機能。ISRとも呼ばれ、全体リビルド不要でコンテンツを最新に保てる。
Next.js에서 제공하는 기능으로, 정적 페이지를 빌드 후에도 일정 간격으로 자동 재생성할 수 있다. ISR이라고도 불리며, 전체 리빌드 없이 콘텐츠를 최신 상태로 유지할 수 있다.
CSSカスタムプロパティとも呼ばれ、`--変数名`の形式で定義し`var()`関数で参照できるCSS固有の変数機能。テーマ切替やデザイントークン管理に広く活用される。
CSS 커스텀 프로퍼티라고도 불리며, `--변수명` 형식으로 정의하고 `var()` 함수로 참조할 수 있는 CSS 고유의 변수 기능. 테마 전환이나 디자인 토큰 관리에 널리 활용된다.
Reactアプリでサーバーデータのフェッチ・キャッシュ・同期を効率化するライブラリ。非同期状態管理をシンプルにし、ローディングやエラー処理も標準化できる。
React 앱에서 서버 데이터의 페칭·캐싱·동기화를 효율적으로 처리하는 라이브러리. 비동기 상태 관리를 단순화하고 로딩 및 에러 처리도 표준화할 수 있다.
ユーザーがフォームに入力したデータが正しい形式・条件を満たしているかチェックする処理。クライアント側とサーバー側の両方で実施するのが基本。
사용자가 폼에 입력한 데이터가 올바른 형식과 조건을 충족하는지 확인하는 처리. 클라이언트 측과 서버 측 모두에서 실시하는 것이 기본이다.
DOM要素のサイズ変化を監視するブラウザAPIで、要素のwidthやheightが変わった際にコールバックを発火する。ウィンドウリサイズと独立して要素単位で監視できる点が特徴。
DOM 요소의 크기 변화를 감지하는 브라우저 API로, 요소의 width나 height가 변경될 때 콜백을 실행한다. 윈도우 리사이즈와 독립적으로 요소 단위로 감시할 수 있는 것이 특징이다.
ブラウザを通じて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로 간결한 코드를 작성할 수 있다.
HTMLやXML文書をツリー構造で表現したプログラミングインターフェース。JavaScriptからノードを操作することでページの動的な更新が可能になる。
HTML 또는 XML 문서를 트리 구조로 표현한 프로그래밍 인터페이스. JavaScript로 노드를 조작하여 페이지를 동적으로 업데이트할 수 있다.
親要素のサイズに基づいてスタイルを変更するCSS機能。従来のメディアクエリがビューポート基準なのに対し、コンポーネント単位でレスポンシブ対応が可能になる。
부모 요소의 크기를 기준으로 스타일을 변경하는 CSS 기능. 기존 미디어 쿼리가 뷰포트 기준인 것과 달리, 컴포넌트 단위로 반응형 대응이 가능해진다.
アプリケーション内のデータの状態を一元的に管理する手法。ReactのReduxやVuexなど、フレームワーク固有のライブラリを用いて実装されることが多い。
애플리케이션 내 데이터 상태를 중앙에서 관리하는 기법. React의 Redux나 Vuex 등 프레임워크 전용 라이브러리를 활용해 구현하는 경우가 많다.
古いブラウザが対応していない最新のWeb標準機能を、JavaScriptで擬似的に実装して補完するコード。クロスブラウザ対応の際に使用される。
구형 브라우저가 지원하지 않는 최신 웹 표준 기능을 JavaScript로 유사하게 구현하여 보완하는 코드. 크로스 브라우저 대응 시 사용된다.
ブラウザやCDNがHTTPレスポンスをキャッシュする方法を制御する戦略。Cache-ControlやETagヘッダーを活用し、通信コスト削減とパフォーマンス向上を図る。
브라우저나 CDN이 HTTP 응답을 캐시하는 방법을 제어하는 전략. Cache-Control 및 ETag 헤더를 활용하여 통신 비용 절감과 성능 향상을 도모한다.
HTMLをサーバー側で生成してクライアントに返す描画方式。初期表示の高速化やSEO対策に有効で、Next.jsやNuxt.jsで広く採用されている。
HTML을 서버 측에서 생성하여 클라이언트에 반환하는 렌더링 방식. 초기 표시 속도 향상과 SEO 대응에 효과적이며, Next.js와 Nuxt.js에서 널리 채택되고 있다.
フロントエンドアプリをマイクロサービス的に独立したモジュールへ分割するアーキテクチャ。チームごとに独立したデプロイ・技術選択が可能になる。
프론트엔드 앱을 마이크로서비스처럼 독립된 모듈로 분할하는 아키텍처. 팀별로 독립적인 배포 및 기술 선택이 가능해진다.
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 스레드에서 분리해 화면 멈춤 현상을 방지하는 데 사용된다.
現在の画面上に重ねて表示されるダイアログやポップアップのこと。ユーザーが操作を完了するまで背面のコンテンツを操作できなくするUI要素。
현재 화면 위에 겹쳐서 표시되는 다이얼로그나 팝업을 말한다. 사용자가 작업을 완료할 때까지 뒤쪽 콘텐츠를 조작할 수 없게 하는 UI 요소이다.
ビルド時にCSSを生成（ゼロランタイム）する、型安全なCSS-in-JSライブラリ。Chakra UIチームが開発し、Next.jsのServer Components環境などでも安全に動作する。
빌드 시 CSS를 생성(제로 런타임)하는 타입 안전 CSS-in-JS 라이브러리. Chakra UI 팀이 개발했으며, Next.js의 Server Components 환경 등에서도 안전하게 동작한다.
Reactのための軽量な状態管理ライブラリ。アトム（atom）という最小単位で状態を定義し、必要なコンポーネントのみ再レンダリングされる効率的な設計が特徴。
React를 위한 경량 상태 관리 라이브러리. atom이라는 최소 단위로 상태를 정의하며, 필요한 컴포넌트만 리렌더링되는 효율적인 설계가 특징이다.
Webサイトのロード時間やファイルサイズなどに上限値を設けた指標。Performance Budgetとも呼ばれ、パフォーマンス劣化を防ぐためにCI/CDに組み込むことが多い。
웹사이트의 로딩 시간이나 파일 크기 등에 상한선을 설정한 지표로, 성능 저하를 방지하기 위해 CI/CD 파이프라인에 통합하여 관리하는 경우가 많다.
デバイスの画面サイズや解像度に応じて最適な画像を配信する技術。HTMLの`srcset`属性や`<picture>`タグを用いて実装し、表示品質とパフォーマンスを両立させる。
디바이스의 화면 크기나 해상도에 따라 최적의 이미지를 제공하는 기술. HTML의 `srcset` 속성이나 `<picture>` 태그를 사용해 구현하며, 표시 품질과 성능을 동시에 확보한다.
モジュールを実行時に非同期で読み込む仕組み。import()構文を使い、必要なタイミングでのみリソースを取得することでバンドルサイズ削減やパフォーマンス改善を実現する。
모듈을 실행 시점에 비동기로 불러오는 방식. import() 구문을 사용하여 필요한 시점에만 리소스를 가져옴으로써 번들 크기 절감과 성능 향상을 실현한다.
TypeScript向けの軽量スキーマバリデーションライブラリ。ZodよりもバンドルサイズがはるかにSmallで、ツリーシェイキングに最適化されている。
TypeScript용 경량 스키마 유효성 검사 라이브러리. Zod보다 번들 크기가 훨씬 작고, 트리 쉐이킹에 최적화되어 있다.
Vercel製のReact向けデータフェッチングライブラリ。stale-while-revalidate戦略を採用し、キャッシュを即時表示しながらバックグラウンドでデータを再検証することで、高速なUXを実現する。
Vercel이 만든 React용 데이터 패칭 라이브러리. stale-while-revalidate 전략을 채택하여 캐시를 즉시 표시하면서 백그라운드에서 데이터를 재검증함으로써 빠른 UX를 실현한다.
Tailwind CSSはユーティリティファーストのCSSフレームワークで、クラスを組み合わせてスタイリングする設計手法。コンポーネントの再利用性と保守性を高める。
Tailwind CSS는 유틸리티 퍼스트 CSS 프레임워크로, 클래스를 조합하여 스타일링하는 설계 방식이다. 컴포넌트의 재사용성과 유지보수성을 높일 수 있다.
画面サイズやデバイスに応じてレイアウトが自動的に最適化されるUI設計手法。PC・タブレット・スマホなど異なる端末で最適な表示を実現する。
화면 크기나 디바이스에 따라 레이아웃이 자동으로 최적화되는 UI 설계 방식. PC·태블릿·스마트폰 등 다양한 기기에서 최적의 화면을 제공한다.
フロントエンドの巨大なモノリスを、機能やチームごとに独立した小さなコンポーネントに分割し、統合して一つのアプリとして見せるアーキテクチャ。マイクロサービスのフロント版。
프론트엔드의 거대한 모놀리스를 기능이나 팀 단위로 독립된 작은 컴포넌트로 분할하고 통합하여 하나의 앱으로 보여주는 아키텍처. 마이크로서비스의 프론트엔드 버전이다.
複数のJavaScriptファイルやモジュールを1つまたは少数のファイルにまとめるツール。WebpackやVite、Rollupなどが代表例で、依存関係の解決や最適化も行う。
여러 JavaScript 파일이나 모듈을 하나 또는 소수의 파일로 묶어주는 도구. Webpack, Vite, Rollup 등이 대표적이며, 의존성 해결 및 최적화도 수행한다.
HTML5で提供されるグラフィック描画用の要素。JavaScriptを使って図形・画像・アニメーションをピクセル単位で動的に描画できるAPIを提供する。
HTML5에서 제공하는 그래픽 렌더링용 요소. JavaScript를 사용해 도형·이미지·애니메이션을 픽셀 단위로 동적으로 그릴 수 있는 API를 제공한다.
Rustベースの軽量・高速・セキュアなクロスプラットフォームのデスクトップアプリ構築フレームワーク。OSネイティブのWebViewを使うため、Electronに比べてバイナリサイズが非常に小さい。
Rust 기반의 가볍고 빠르며 안전한 크로스 플랫폼 데스크톱 앱 구축 프레임워크. OS 네이티브 WebView를 사용하기 때문에 Electron에 비해 바이너리 크기가 매우 작다.
画面サイズやユーザー設定に応じてフォントサイズを動的に変化させる手法。CSSのclamp()やvw単位、rem単位などを活用してレスポンシブなタイポグラフィを実現する。
화면 크기나 사용자 설정에 따라 폰트 크기를 동적으로 변경하는 기법. CSS의 clamp()나 vw 단위, rem 단위 등을 활용해 반응형 타이포그래피를 구현한다.
JavaScriptモジュールバンドラーであるRollupのビルド設定。入力ファイル・出力形式・プラグイン等をrollup.config.jsに記述し、ライブラリやアプリのバンドルを制御する。
JavaScript 모듈 번들러인 Rollup의 빌드 설정. 입력 파일, 출력 형식, 플러그인 등을 rollup.config.js에 작성하여 라이브러리나 앱의 번들링을 제어한다.
イベントが実行されること。Trigger/Fire。「이벤트가 발생하다(イベントが発生する)」と言う。
이벤트가 실행되는 것. Trigger/Fire.
ブラウザ上でネイティブに近い速度でコードを実行できるバイナリ形式の命令セット。C/C++やRustなどからコンパイル可能で、Wasmとも呼ばれる。
브라우저에서 네이티브에 가까운 속도로 코드를 실행할 수 있는 바이너리 형식의 명령어 집합으로, C/C++, Rust 등에서 컴파일 가능하며 Wasm이라고도 불린다.
Reactの機能で、非同期データ取得やコード分割時にローディング状態を宣言的に制御するコンポーネント。fallbackにローディングUIを指定できる。
React의 기능으로, 비동기 데이터 패칭이나 코드 분할 시 로딩 상태를 선언적으로 제어하는 컴포넌트. fallback에 로딩 UI를 지정할 수 있다.
Webpack 5で導入された機能で、複数の独立したビルドが実行時に互いのモジュールを動的に共有・読み込みできる仕組み。マイクロフロントエンド構成に多用される。
Webpack 5에서 도입된 기능으로, 독립적으로 빌드된 여러 애플리케이션이 런타임에 서로의 모듈을 동적으로 공유하고 로드할 수 있는 구조. 마이크로 프론트엔드 구성에 널리 활용된다.
React向けのアニメーションライブラリ。宣言的なAPIでフェード・スライド・ドラッグ・ジェスチャーなどを簡単に実装でき、複雑なUIアニメーションも直感的に作れる。
React용 애니메이션 라이브러리. 선언적 API로 페이드·슬라이드·드래그·제스처 등을 쉽게 구현할 수 있으며, 복잡한 UI 애니메이션도 직관적으로 제작할 수 있다.
画面の端に一時的に表示される小さな通知UIコンポーネント。数秒後に自動的に消え、ユーザー操作を妨げない非侵入型の通知手法として広く使われる。
화면 가장자리에 일시적으로 표시되는 작은 알림 UI 컴포넌트. 몇 초 후 자동으로 사라지며, 사용자 조작을 방해하지 않는 비침습적 알림 방식으로 널리 사용된다.
JavaScriptをほとんど書かずに、HTMLのカスタム属性だけでAJAXリクエストやCSSトランジション、WebSocketなどの動的機能を実現できる軽量ライブラリ。
JavaScript를 거의 작성하지 않고 HTML 커스텀 속성만으로 AJAX 요청, CSS 트랜지션, WebSocket 등 동적 기능을 구현할 수 있는 경량 라이브러리.
CDNエッジノード上でコードを実行する軽量ランタイム環境。Node.js APIの一部のみ使用可能で、低レイテンシなレスポンスが実現できる。Next.jsなどで採用。
CDN 엣지 노드에서 코드를 실행하는 경량 런타임 환경. Node.js API의 일부만 사용 가능하며, 낮은 지연 시간의 응답을 실현할 수 있다. Next.js 등에서 채택.
アラビア語やヘブライ語などの右から左に読む言語に対応するため、UIレイアウトを右起点に反転させる実装対応。CSS論理プロパティやdir属性を活用する。
아랍어나 히브리어 등 오른쪽에서 왼쪽으로 읽는 언어를 지원하기 위해 UI 레이아웃을 우측 기준으로 반전시키는 구현 대응. CSS 논리 속성이나 dir 속성을 활용한다.
ブラウザ標準の決済UIを提供するWeb APIで、クレジットカード情報や配送先をブラウザが管理し、チェックアウトフローを大幅に簡略化できる。
브라우저 표준 결제 UI를 제공하는 Web API로, 신용카드 정보와 배송지를 브라우저가 관리하며 결제 플로우를 대폭 간소화할 수 있다.
Webpack 5で導入された機能で、複数の独立したビルドが実行時に別アプリのモジュールを動的に共有・読み込みできる仕組み。マイクロフロントエンド構成の実現に活用される。
Webpack 5에서 도입된 기능으로, 독립적으로 빌드된 여러 애플리케이션이 런타임에 서로의 모듈을 동적으로 공유하고 로드할 수 있는 구조. 마이크로 프론트엔드 구현에 활용된다.
WAI-ARIAで定義されたHTML属性で、スクリーンリーダー等の支援技術にUI要素の役割・状態・プロパティを伝えるためのアクセシビリティ仕様。
WAI-ARIA에서 정의한 HTML 속성으로, 스크린 리더 등 보조 기술에 UI 요소의 역할·상태·속성을 전달하기 위한 접근성 사양입니다.
ReactベースのフルスタックWebフレームワーク。サーバーサイドレンダリングとネストされたルーティングを標準サポートし、Web標準APIを重視した設計が特徴。
React 기반의 풀스택 웹 프레임워크. 서버 사이드 렌더링과 중첩 라우팅을 기본 지원하며, 웹 표준 API를 중시한 설계가 특징이다.
ページ遷移なしでデータを取得する通信。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()`을 연속으로 연결하여 비동기 처리를 순차적으로 실행하는 기법으로, 콜백 지옥을 피하고 가독성 높은 코드를 구현할 수 있다.
画面サイズに応じてレイアウトが変わるデザイン。
화면 크기에 따라 레이아웃이 바뀌는 디자인.
画面サイズやデバイスに応じてレイアウトが自動調整されるWebデザイン手法。メディアクエリやフレキシブルグリッドを活用し、PC・タブレット・スマホで最適な表示を実現する。
화면 크기나 디바이스에 따라 레이아웃이 자동으로 조정되는 웹 디자인 기법. 미디어 쿼리와 플렉시블 그리드를 활용하여 PC·태블릿·스마트폰에서 최적의 화면을 구현한다.
ブラウザ上で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 기준에 따라 도구 및 수동 테스트로 문제점을 파악한다.
障害のあるユーザーも含め、誰もが使えるようにUI/UXを設計・実装すること。WAI-ARIAやスクリーンリーダー対応、キーボード操作対応などが主な対応内容。
장애가 있는 사용자를 포함해 누구나 사용할 수 있도록 UI/UX를 설계하고 구현하는 것. WAI-ARIA, 스크린 리더 대응, 키보드 조작 지원 등이 주요 구현 내용이다.
CSSの2次元レイアウトシステム。行と列を組み合わせた格子状の構造でWebページのレイアウトを効率的に設計できる。Flexboxと併用されることが多い。
CSS의 2차원 레이아웃 시스템. 행과 열을 조합한 격자 구조로 웹 페이지 레이아웃을 효율적으로 설계할 수 있으며, Flexbox와 함께 자주 사용된다.
情報をカード状のボックスUIにまとめた再利用可能なUIパーツ。画像・タイトル・テキスト・ボタンなどを1単位として表示し、一覧画面などで多用される。
정보를 카드 형태의 박스 UI로 묶은 재사용 가능한 UI 파트. 이미지·제목·텍스트·버튼 등을 하나의 단위로 표시하며, 목록 화면 등에서 자주 활용된다.
ブラウザ上で動作するクライアントサイドの非リレーショナルデータベース。大量の構造化データをオフラインでも保存・検索でき、PWAやオフライン対応アプリの開発で活用される。
브라우저에서 동작하는 클라이언트 사이드 비관계형 데이터베이스. 대량의 구조화된 데이터를 오프라인 상태에서도 저장·검색할 수 있으며, PWA 및 오프라인 지원 앱 개발에 활용된다.
ページネーションの代わりに、スクロールが画面下部に達すると自動的に次のコンテンツを読み込む UI パターン。SNS やニュースフィードで多く採用される。
페이지네이션 대신 스크롤이 화면 하단에 도달하면 자동으로 다음 콘텐츠를 불러오는 UI 패턴. SNS나 뉴스 피드에서 많이 사용된다.
Facebookが開発したJavaScript向けテストフレームワーク。React環境に最適化されており、スナップショットテストやモック機能を標準搭載し、設定不要ですぐに使える点が特徴。
Facebook이 개발한 JavaScript용 테스트 프레임워크. React 환경에 최적화되어 있으며, 스냅샷 테스트와 목(mock) 기능을 기본 탑재하여 별도 설정 없이 바로 사용할 수 있다는 점이 특징이다.
データ取得や処理の待機中にユーザーへ視覚的フィードバックを与えるアニメーション表示。スピナーやスケルトンスクリーンなどが代表的な実装例。
데이터 로드나 처리 대기 중 사용자에게 시각적 피드백을 제공하는 애니메이션 표시. 스피너나 스켈레톤 스크린 등이 대표적인 구현 예시.
コンテンツ読み込み中にレイアウトの骨格をグレーのブロックで表示するUI手法。ローディングスピナーより体感速度が向上し、ユーザー離脱を防ぐ効果がある。
콘텐츠 로딩 중 레이아웃의 골격을 회색 블록으로 표시하는 UI 기법. 로딩 스피너보다 체감 속도가 향상되며, 사용자 이탈을 방지하는 효과가 있다.
UIコンポーネントを独立した環境で開発・テスト・ドキュメント化するためのオープンソースツール。React・Vue・Angularなど主要フレームワークに対応し、デザインシステム構築に活用される。
UI 컴포넌트를 독립된 환경에서 개발·테스트·문서화하기 위한 오픈소스 툴. React·Vue·Angular 등 주요 프레임워크를 지원하며, 디자인 시스템 구축에 활용된다.
CSS Gridの子要素が親グリッドのトラック定義を継承できる機能。`grid-template-columns: subgrid`を指定することで、入れ子構造でも整合性のあるレイアウトが実現できる。
CSS Grid의 자식 요소가 부모 그리드의 트랙 정의를 상속받을 수 있는 기능. `grid-template-columns: subgrid`를 지정하면 중첩 구조에서도 일관성 있는 레이아웃을 구현할 수 있다.
ブラウザ上で大量データをローカル保存できるNoSQL型クライアントサイドDBの活用。オフライン対応やキャッシュ戦略に利用される。
브라우저에서 대량 데이터를 로컬로 저장할 수 있는 NoSQL 형태의 클라이언트 사이드 DB 활용. 오프라인 지원 및 캐싱 전략에 사용된다.
ブラウザ間でプラグイン不要にリアルタイム音声・映像・データ通信を実現するオープン標準API。ビデオ会議やP2P通信の実装に広く使われる。
플러그인 없이 브라우저 간 실시간 음성·영상·데이터 통신을 가능하게 하는 오픈 표준 API. 화상 회의나 P2P 통신 구현에 널리 활용된다.
サーバーサイドレンダリングで生成された静的HTMLに対し、クライアント側でJavaScriptを紐付けてインタラクティブな状態に変換するプロセス。Next.jsやNuxt.jsで重要な概念。
서버 사이드 렌더링으로 생성된 정적 HTML에 클라이언트 측에서 JavaScript를 연결하여 인터랙티브한 상태로 변환하는 프로세스. Next.js나 Nuxt.js에서 중요한 개념.
TypeScript向けのスキーマ宣言・バリデーションライブラリ。型定義とバリデーションを一元管理でき、フォームやAPIレスポンスの検証に広く活用される。
TypeScript용 스키마 선언 및 유효성 검사 라이브러리. 타입 정의와 유효성 검사를 일원화하여 관리할 수 있으며, 폼이나 API 응답 검증에 널리 활용된다.
DOM要素の変更（属性・テキスト・子ノードの追加削除など）を非同期で監視するブラウザAPIで、旧来のMutationEventsを置き換えるために設計された。
DOM 요소의 변경(속성, 텍스트, 자식 노드 추가·삭제 등)을 비동기로 감시하는 브라우저 API로, 기존의 MutationEvents를 대체하기 위해 설계되었다.
ウェブサイトやアプリで、購入・登録・問い合わせなど目標アクションの完了率（CVR）を高めるための施策全般。A/Bテストやヒートマップ分析などが代表的な手法。
웹사이트나 앱에서 구매·가입·문의 등 목표 액션의 완료율(CVR)을 높이기 위한 전반적인 시책. A/B 테스트나 히트맵 분석 등이 대표적인 방법론이다.
Viteのvite.config.tsを調整し、ビルド速度・バンドルサイズ・HMR性能を最大化する作業。rollupOptionsやplugins設定が主な対象となる。
Vite의 vite.config.ts를 조정하여 빌드 속도, 번들 크기, HMR 성능을 극대화하는 작업으로, rollupOptions 및 plugins 설정이 주요 대상이다.
Reactでフォーム管理を効率化するライブラリ。再レンダリングを最小限に抑えつつ、バリデーションや入力値の管理をシンプルに実装できる。
React에서 폼 관리를 효율화하는 라이브러리. 리렌더링을 최소화하면서 유효성 검사와 입력값 관리를 간단하게 구현할 수 있다.
Block, Element, Modifierの略。CSSのクラス命名規則の一つで、UIの構成要素を論理的に分割し、クラス名（例：`block__element--modifier`）だけで構造を予測可能にする手法。
Block, Element, Modifier의 약자. CSS 클래스 명명 규칙 중 하나로, UI 구성 요소를 논리적으로 분할하고, 클래스명(예: `block__element--modifier`)만으로 구조를 예측 가능하게 만드는 기법.
Resumabilityという概念を採用したJavaScriptフレームワーク。ハイドレーションを不要にし、初期表示速度を極限まで最適化することでCore Web Vitalsの改善に特化している。
Resumability 개념을 채택한 JavaScript 프레임워크. 하이드레이션을 불필요하게 만들어 초기 표시 속도를 극한까지 최적화함으로써 Core Web Vitals 개선에 특화되어 있다.
ブラウザのバックグラウンドで動作するスクリプトを活用し、オフラインキャッシュ・プッシュ通知・バックグラウンド同期などPWAの中核機能を実現する技術。
브라우저 백그라운드에서 동작하는 스크립트를 활용하여 오프라인 캐시, 푸시 알림, 백그라운드 동기화 등 PWA의 핵심 기능을 구현하는 기술.
Search Engine Optimizationの略。検索エンジンの検索結果で上位表示されるようにWebサイトの構造やコンテンツを最適化する施策・技術のこと。
Search Engine Optimization의 약자. 검색 엔진 검색 결과에서 상위에 노출되도록 웹사이트의 구조와 콘텐츠를 최적화하는 기법 및 기술을 말한다.
コピーペーストで使えるRadix UIベースのReactコンポーネント集。npmパッケージではなくソースコードを直接プロジェクトに配置するため、フルカスタマイズが可能。
복사 붙여넣기로 사용할 수 있는 Radix UI 기반의 React 컴포넌트 모음. npm 패키지가 아닌 소스 코드를 직접 프로젝트에 배치하므로 완전한 커스터마이징이 가능하다.
React環境で、クライアント（ブラウザ）から直接サーバー側の非同期関数を呼び出せる機能。APIルートを別途作成せずにフォームの送信やデータミューテーションを実装できる。
React 환경에서 클라이언트(브라우저)로부터 직접 서버 측의 비동기 함수를 호출할 수 있는 기능. 별도의 API 라우트를 만들지 않고 폼 제출이나 데이터 뮤테이션을 구현할 수 있다.
親コンテナのサイズに応じてスタイルを変えるCSS機能。メディアクエリがビューポート基準なのに対し、コンポーネント単位のレスポンシブ対応が可能になる。
부모 컨테이너의 크기에 따라 스타일을 변경하는 CSS 기능. 미디어 쿼리가 뷰포트 기준인 것과 달리, 컴포넌트 단위의 반응형 대응이 가능하다.
WebアプリのJSやCSSなどのリソースをまとめて圧縮・分割し、ロード時間を短縮する手法。Tree ShakingやCode Splittingが代表的な最適化技術。
웹 앱의 JS, CSS 등 리소스를 묶어 압축·분할하여 로딩 시간을 단축하는 기법. Tree Shaking과 Code Splitting이 대표적인 최적화 기술이다.
Denoが提供するエッジコンピューティング向けサーバーレスホスティングサービス。TypeScriptをそのままデプロイでき、世界中のエッジノードで低レイテンシな実行環境を提供する。
Deno가 제공하는 엣지 컴퓨팅용 서버리스 호스팅 서비스. TypeScript를 그대로 배포할 수 있으며, 전 세계 엣지 노드에서 낮은 레이턴시의 실행 환경을 제공한다.
JavaScriptのバンドル最適化手法で、実際に使用されていないコード（デッドコード）をビルド時に自動的に除去し、最終的なバンドルサイズを削減する技術。WebpackやRollupで活用される。
JavaScript 번들 최적화 기법으로, 실제로 사용되지 않는 코드(데드 코드)를 빌드 시 자동으로 제거하여 최종 번들 크기를 줄이는 기술. Webpack이나 Rollup에서 활용된다.
ByteDanceが開発する、Rustで書かれた超高速なWebビルドツール。Webpackと高い互換性を持ちながら、ビルド時間を劇的に短縮する次世代バンドラー。
ByteDance가 개발한 Rust 기반의 초고속 웹 빌드 도구. Webpack과 높은 호환성을 가지면서 빌드 시간을 극적으로 단축하는 차세대 번들러.
大量のリストデータを効率的に描画する技術。表示領域に見えるDOMのみをレンダリングし、スクロールに合わせて動的に入れ替えることでパフォーマンスを最適化する。
대량의 리스트 데이터를 효율적으로 렌더링하는 기술. 화면에 보이는 DOM만 렌더링하고 스크롤에 맞춰 동적으로 교체함으로써 성능을 최적화한다.
実行されることのない不要なコードをビルド時に自動的に削除する最適化手法。Tree Shakingと組み合わせてバンドルサイズを削減し、パフォーマンス向上に貢献する。
실행되지 않는 불필요한 코드를 빌드 시 자동으로 제거하는 최적화 기법. Tree Shaking과 함께 사용해 번들 크기를 줄이고 성능 향상에 기여한다.
ファーストビューの表示に必要な最小限のCSSをHTMLにインライン埋め込みし、初期レンダリングをブロックせずにページ表示速度を最適化する手法。
첫 화면 표시에 필요한 최소한의 CSS를 HTML에 인라인으로 삽입하여 초기 렌더링을 차단하지 않고 페이지 표시 속도를 최적화하는 기법.
データやコードをもとに画面上に視覚的なコンテンツを生成・描画するプロセス。サーバーサイドレンダリング（SSR）やクライアントサイドレンダリング（CSR）など手法が複数存在する。
데이터나 코드를 기반으로 화면에 시각적인 콘텐츠를 생성·표시하는 프로세스. 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR) 등 다양한 방식이 존재한다.
Reactが提供するグローバル状態管理の仕組み。propsのバケツリレーを避け、コンポーネントツリー全体でデータを共有できる組み込みAPIのこと。
React가 제공하는 전역 상태 관리 메커니즘. props 드릴링을 피하고 컴포넌트 트리 전체에서 데이터를 공유할 수 있는 내장 API.
HTML5の<canvas>要素をJavaScriptで操作するAPIで、2Dグラフィックスやアニメーション、ゲーム描画などをブラウザ上で直接レンダリングできる。
HTML5의 <canvas> 요소를 JavaScript로 조작하는 API로, 2D 그래픽, 애니메이션, 게임 렌더링 등을 브라우저에서 직접 구현할 수 있다.
Cloudflareのエッジネットワーク上でJavaScriptを実行できるサーバーレスプラットフォーム。低レイテンシでAPIやSSRの処理をエッジで行え、CDNと組み合わせた高速配信が可能。
Cloudflare의 엣지 네트워크에서 JavaScript를 실행할 수 있는 서버리스 플랫폼. 낮은 지연 시간으로 API나 SSR 처리를 엣지에서 수행할 수 있으며, CDN과 결합한 고속 배포가 가능하다.
大量のデータを複数のページに分割して表示する手法。一度に全データを取得せず、パフォーマンス向上とUX改善を目的としてWebやAPIで広く使われる。
대량의 데이터를 여러 페이지로 나누어 표시하는 기법. 한 번에 모든 데이터를 가져오지 않고, 성능 향상과 UX 개선을 목적으로 웹과 API에서 널리 사용된다.
UIにおいてキーボード操作やスクリーンリーダー向けにフォーカスの移動・制御を適切に管理する実装手法。アクセシビリティ対応の要となる。
UI에서 키보드 조작이나 스크린 리더를 위해 포커스 이동과 제어를 적절히 관리하는 구현 기법으로, 접근성 대응의 핵심이다.
Service Workerを利用し、ネットワーク接続が回復した際にオフライン中の操作やデータ送信を自動的にバックグラウンドで再試行する仕組み。PWAで多用される。
Service Worker를 활용하여 네트워크 연결이 복구되었을 때 오프라인 중 수행된 작업이나 데이터 전송을 자동으로 백그라운드에서 재시도하는 메커니즘. PWA에서 많이 사용된다.
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의 저지연 버전으로 빠른 초기 표시를 실현할 수 있다.
Evan Youが開発したESモジュールネイティブなフロントエンドビルドツール。開発時はesbuildでファイルを個別にサーブし起動が高速。本番ビルドはRollupで最適化する。
Evan You가 개발한 ES 모듈 네이티브 프론트엔드 빌드 툴. 개발 시에는 esbuild로 파일을 개별 서빙하여 시작이 빠르다. 프로덕션 빌드는 Rollup으로 최적화한다.
再利用可能なUIパーツ（ボタン・フォーム・モーダルなど）を一元管理するコレクション。デザインの一貫性を保ちつつ開発効率を向上させる。
재사용 가능한 UI 컴포넌트(버튼·폼·모달 등)를 한곳에서 관리하는 컬렉션. 디자인 일관성을 유지하면서 개발 효율을 높여준다.
JavaScriptファイル内にCSSスタイルを記述する手法。styled-componentsやEmotionが代表的で、コンポーネント単位でスタイルを管理しスコープ汚染を防ぐ。
JavaScript 파일 내에 CSS 스타일을 작성하는 방법론. styled-components나 Emotion이 대표적이며, 컴포넌트 단위로 스타일을 관리해 스코프 오염을 방지한다.
画面下部に一時的に表示される軽量な通知UIコンポーネント。操作結果をユーザーに簡潔に伝えるために使われ、数秒後に自動的に消える。Material Designで定義された概念。
화면 하단에 일시적으로 표시되는 경량 알림 UI 컴포넌트. 작업 결과를 사용자에게 간결하게 전달하며 몇 초 후 자동으로 사라진다. Material Design에서 정의된 개념.
ページ遷移をサーバーではなくブラウザ側のJavaScriptで制御する手法。SPAでURLを変えながらページ全体を再読み込みせずにビューを切り替えるために使われる。
페이지 전환을 서버가 아닌 브라우저 측 JavaScript로 제어하는 방식. SPA에서 URL을 변경하면서 페이지 전체를 새로고침하지 않고 뷰를 전환하기 위해 사용된다.
Webページのレンダリングをサーバー側で行い、完成したHTMLをクライアントに返す方式。SEO対策や初期表示速度の向上に効果的で、Next.jsなどで広く採用されている。
웹 페이지 렌더링을 서버 측에서 수행하고 완성된 HTML을 클라이언트에 반환하는 방식. SEO 최적화와 초기 로딩 속도 향상에 효과적이며 Next.js 등에서 널리 채용되고 있다.
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로, 플러그인 없이 하드웨어 가속을 활용할 수 있다.
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 이하가 양호하며, 이미지 크기 지정 및 폰트 최적화로 개선할 수 있습니다.
SSRで生成された静的HTMLの一部にのみJavaScriptを適用してインタラクティブにする手法。不要なJSの読み込みを減らしパフォーマンスを向上させる。
SSR로 생성된 정적 HTML의 일부에만 JavaScript를 적용하여 인터랙티브하게 만드는 기법. 불필요한 JS 로딩을 줄여 성능을 향상시킨다.
ブラウザのビューポートと対象要素の交差状態を非同期で監視するWeb API。スクロール連動のアニメーションや遅延読み込みに活用され、scroll イベントより高パフォーマンス。
브라우저의 뷰포트와 대상 요소의 교차 상태를 비동기로 감시하는 Web API. 스크롤 연동 애니메이션이나 지연 로딩에 활용되며, scroll 이벤트보다 성능이 우수하다.
大規模なフロントエンドアプリを独立した小さなモジュールに分割し、各チームが自律的に開発・デプロイできるアーキテクチャ手法。マイクロサービスの思想をUIに適用したもの。
대규모 프론트엔드 애플리케이션을 독립적인 소규모 모듈로 분리하여, 각 팀이 자율적으로 개발·배포할 수 있는 아키텍처 방식. 마이크로서비스의 개념을 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 등이 대표적이며, 개발 효율과 디자인 일관성을 높이는 데 활용된다.
CSS3で導入されたレイアウトモデル。親要素にdisplay:flexを指定することで、子要素を柔軟に配置・整列できる。レスポンシブデザインの実装に広く活用される。
CSS3에서 도입된 레이아웃 모델. 부모 요소에 display:flex를 지정하면 자식 요소를 유연하게 배치·정렬할 수 있다. 반응형 디자인 구현에 널리 활용된다.
ブラウザがバックグラウンドでもサーバーからプッシュ通知を受信できるWeb標準API。Service Workerと組み合わせて使用し、アプリを開いていなくても通知を表示できる。
브라우저가 백그라운드 상태에서도 서버로부터 푸시 알림을 수신할 수 있는 웹 표준 API. Service Worker와 함께 사용하며, 앱을 열지 않아도 알림을 표시할 수 있다.
Webサイトやアプリで、訪問者が購入・登録などの目標行動を完了する割合を高めるための施策。CROとも呼ばれ、A/Bテストやヒートマップ分析などを活用する。
웹사이트나 앱에서 방문자가 구매·가입 등 목표 행동을 완료하는 비율을 높이기 위한 전략. CRO라고도 하며, A/B 테스트나 히트맵 분석 등을 활용한다.
BunはNode.js互換の高速JavaScriptランタイムで、バンドラー・トランスパイラ・パッケージマネージャを内包し、フロントエンド開発の高速化に活用される。
Bun은 Node.js 호환의 고속 JavaScript 런타임으로, 번들러·트랜스파일러·패키지 매니저를 내장하여 프론트엔드 개발 속도 향상에 활용된다.
WebコンポーネントのカプセルHTMLとCSSをメインDOMから隔離する技術。スタイルのスコープを限定し、外部スタイルの干渉を防ぐことでコンポーネントの独立性を保つ。
웹 컴포넌트의 HTML과 CSS를 메인 DOM으로부터 격리하는 기술. 스타일 스코프를 제한하여 외부 스타일의 간섭을 방지하고 컴포넌트의 독립성을 유지한다.
画面下部や上部に配置されたナビゲーション要素で、複数のタブを切り替えてコンテンツを表示するUIコンポーネント。モバイルアプリやWebアプリで広く使用される。
화면 하단이나 상단에 배치된 네비게이션 요소로, 여러 탭을 전환하여 콘텐츠를 표시하는 UI 컴포넌트. 모바일 앱이나 웹 앱에서 널리 사용된다.
CSSのクラス名をコンポーネントごとにローカルスコープ化する仕組み。クラス名の衝突を防ぎ、大規模SPAでのスタイル管理を安全に行える。
CSS 클래스 이름을 컴포넌트별로 로컬 스코프화하는 방식. 클래스 이름 충돌을 방지하고, 대규모 SPA에서 스타일 관리를 안전하게 할 수 있다.
静的サイト生成を主軸とするフロントエンドフレームワーク。Islands Architectureにより不要なJSを排除し、高速なページロードを実現する。React/Vue/Svelteなど複数UIフレームワークを同時利用可能。
정적 사이트 생성을 중심으로 하는 프론트엔드 프레임워크. Islands Architecture로 불필요한 JS를 제거해 빠른 페이지 로드를 실현하며, React/Vue/Svelte 등 여러 UI 프레임워크를 동시에 사용할 수 있다.
Svelteベースのフルスタックフレームワーク。SSR・SSG・ファイルベースルーティングを標準サポートし、高速な開発と軽量なバンドルサイズが特徴。
Svelte 기반의 풀스택 프레임워크. SSR·SSG·파일 기반 라우팅을 기본 지원하며, 빠른 개발 속도와 가벼운 번들 크기가 특징이다.
コンパイル時にフレームワークのコードを排除し、純粋なJavaScriptを生成するUIフレームワーク。仮想DOMを使わず、高速で軽量な動作が特徴。
컴파일 시점에 프레임워크 코드를 제거하고 순수한 JavaScript를 생성하는 UI 프레임워크. 가상 DOM을 사용하지 않아 빠르고 가벼운 동작이 특징.
TypeScriptを使ってAPIのスキーマ定義なしにフロントエンドとバックエンド間で型安全な通信を実現するRPCフレームワーク。Next.jsとの相性が良い。
TypeScript를 사용하여 API 스키마 정의 없이 프론트엔드와 백엔드 간에 타입 안전한 통신을 실현하는 RPC 프레임워크. Next.js와 궁합이 좋다.
Single Page Applicationの略。ページ遷移時にサーバーから新しいHTMLを取得せず、JavaScriptで動的にコンテンツを書き換えるWebアプリ設計手法。React・Vue・Angularなどが代表的。
Single Page Application의 약자. 페이지 이동 시 서버에서 새 HTML을 받지 않고, JavaScript로 동적으로 콘텐츠를 교체하는 웹 앱 설계 방식. React·Vue·Angular 등이 대표적이다.
ブラウザのバックグラウンドで動作するスクリプト。ネットワークリクエストのキャッシュ制御やプッシュ通知、オフライン対応などPWA実装の中核を担う。
브라우저 백그라운드에서 동작하는 스크립트로, 네트워크 요청 캐시 제어, 푸시 알림, 오프라인 지원 등 PWA 구현의 핵심 역할을 담당한다.
基本的なHTML/CSSで最低限の機能を提供し、ブラウザ対応状況に応じてJavaScriptなどで機能を段階的に拡張するWeb開発戦略。
기본적인 HTML/CSS로 최소한의 기능을 제공하고, 브라우저 지원 상황에 따라 JavaScript 등으로 기능을 단계적으로 확장하는 웹 개발 전략.
Vue.jsベースのフルスタックフレームワーク。SSR・SSG・SPAに対応し、ファイルベースのルーティングやオートインポートなど開発効率を高める機能を提供する。
Vue.js 기반의 풀스택 프레임워크. SSR·SSG·SPA를 지원하며, 파일 기반 라우팅과 자동 임포트 등 개발 효율을 높이는 기능을 제공한다.
ブラウザ標準のAPI群を使い、再利用可能なカスタムHTML要素を作成する技術。Custom Elements・Shadow DOM・HTML Templatesの3つの仕様で構成される。
브라우저 표준 API를 사용하여 재사용 가능한 커스텀 HTML 요소를 만드는 기술로, Custom Elements·Shadow DOM·HTML Templates 세 가지 명세로 구성된다.
CSSの@layerルールを使い、スタイルの適用優先順位を明示的に管理する仕組み。セレクタの詳細度に依存せず、レイヤー定義順でカスケードを制御できる。
CSS의 @layer 규칙을 사용하여 스타일 적용 우선순위를 명시적으로 관리하는 구조. 선택자 명시도에 의존하지 않고 레이어 정의 순서로 캐스케이드를 제어할 수 있다.
Webページがソーシャルメディアでシェアされた際に、タイトル・画像・説明などを制御するためのメタデータプロトコル。HTMLの<meta>タグで設定する。
웹 페이지가 소셜 미디어에서 공유될 때 제목·이미지·설명 등을 제어하기 위한 메타데이터 프로토콜. HTML의 <meta> 태그로 설정한다.
Viteをベースとした高速なJavaScriptテストフレームワーク。Jest互換のAPIを持ち、ESModulesやTypeScriptをネイティブサポート。Viteプロジェクトとの親和性が高い。
Vite 기반의 고속 JavaScript 테스트 프레임워크. Jest 호환 API를 제공하며 ESModules와 TypeScript를 네이티브로 지원. Vite 프로젝트와의 친화성이 높다.
デバイスの画面サイズに応じてあらかじめ定義した複数のレイアウトに切り替える設計手法。レスポンシブデザインとは異なり、特定のブレークポイントで固定レイアウトを適用する。
디바이스 화면 크기에 따라 미리 정의된 여러 레이아웃으로 전환하는 설계 방식. 반응형 디자인과 달리, 특정 브레이크포인트에서 고정 레이아웃을 적용한다.
ページや要素の切り替え時にアニメーションを簡単に実装できるブラウザネイティブのAPI。SPAやMPA両方で滑らかな画面遷移を少ないコードで実現できる。
페이지나 요소 전환 시 애니메이션을 간단히 구현할 수 있는 브라우저 네이티브 API. SPA와 MPA 모두에서 적은 코드로 부드러운 화면 전환을 실현할 수 있다.
Webサイトやアプリの設計において、まずモバイル端末向けのUIを優先して設計・実装し、その後デスクトップ向けに拡張していく開発アプローチ。
웹사이트나 앱 설계 시 모바일 기기용 UI를 먼저 설계·구현하고, 이후 데스크톱 환경으로 확장해 나가는 개발 접근 방식.
JavaScript、API、Markupの頭文字を取ったモダンWeb開発アーキテクチャ。事前にビルドされた静的HTMLをCDNから配信し、動的な機能はAPI経由で提供することで、高速かつセキュアなサイトを実現する。
JavaScript, API, Markup의 앞 글자를 딴 모던 웹 개발 아키텍처. 사전 빌드된 정적 HTML을 CDN에서 배포하고, 동적 기능은 API를 통해 제공하여 빠르고 안전한 사이트를 구현한다.
Interaction to Next Paintの略で、ユーザー操作から次の画面描画までの応答時間を最小化する最適化手法。Core Web Vitalsの主要指標の一つ。
Interaction to Next Paint의 약자로, 사용자 조작 후 다음 화면 렌더링까지의 응답 시간을 최소화하는 최적화 기법. Core Web Vitals의 주요 지표 중 하나.
Rustで実装された高速なJavaScriptバンドラー。Webpackの後継としてVercelが開発し、Next.js 13以降に統合。インクリメンタルビルドにより従来比で大幅な高速化を実現する。
Rust로 구현된 고속 JavaScript 번들러. Webpack의 후계자로 Vercel이 개발하였으며, Next.js 13 이후에 통합됨. 증분 빌드를 통해 기존 대비 대폭적인 속도 향상을 실현한다.
UIや機能を独立した再利用可能な単位に分割したもの。ReactやVueなどのフレームワークで中心的な概念であり、保守性・再利用性の向上に貢献する。
UI나 기능을 독립적이고 재사용 가능한 단위로 분리한 것. React, Vue 등의 프레임워크에서 핵심 개념으로, 유지보수성과 재사용성 향상에 기여한다.
入力内容が正しいかチェックすること。Validation。
입력 내용이 올바른지 확인하는 것. Validation.
Googleが定めるWebページのユーザー体験を測る3つの指標（LCP・FID・CLS）。検索順位にも影響するため、フロントエンド最適化の重要指標として活用される。
Google이 정의한 웹 페이지 사용자 경험을 측정하는 3가지 지표(LCP·FID·CLS)로, 검색 순위에도 영향을 미치기 때문에 프론트엔드 최적화의 핵심 지표로 활용된다.
UI要素に動きを加える演出技術。CSS TransitionやJavaScriptライブラリ（GSAP等）を用いてユーザー体験を向上させるために使用される。
UI 요소에 움직임을 추가하는 연출 기술. CSS Transition이나 JavaScript 라이브러리(GSAP 등)를 활용하여 사용자 경험을 향상시키기 위해 사용된다.
ページ表示に必要なリソース（フォント・画像・スクリプト等）を事前に読み込み、初期表示速度やUXを向上させる技術。`<link rel='preload'>`タグやHTTP/2 Server Pushなどで実現する。
페이지 표시에 필요한 리소스(폰트·이미지·스크립트 등)를 미리 불러와 초기 표시 속도와 UX를 향상시키는 기술. `<link rel='preload'>` 태그나 HTTP/2 Server Push 등으로 구현한다.
Webページの大部分を静的HTMLで構成し、インタラクティブな部分だけをJavaScriptの「島（アイランド）」として独立して動作させるフロントエンドアーキテクチャパターン。パフォーマンス向上に有効。
웹 페이지의 대부분을 정적 HTML로 구성하고, 인터랙티브한 부분만 JavaScript '섬(아일랜드)'으로 독립적으로 동작시키는 프론트엔드 아키텍처 패턴. 성능 향상에 효과적이다.
Reactコンポーネントをサーバー側でレンダリングする仕組み。クライアントへのJSバンドルを削減し、データフェッチをサーバー側で完結させることでパフォーマンスを大幅に向上させる。
React 컴포넌트를 서버 측에서 렌더링하는 방식. 클라이언트로 전송되는 JS 번들을 줄이고, 데이터 페칭을 서버에서 처리함으로써 성능을 크게 향상시킨다.
Webページで使用するフォントの読み込みを効率化する技術。WOFF2形式の採用やfont-displayプロパティの設定、サブセット化などでレンダリングブロックを防ぎ、表示速度を改善する。
웹 페이지에서 사용하는 폰트 로딩을 효율화하는 기술. WOFF2 형식 채택, font-display 속성 설정, 서브셋화 등을 통해 렌더링 블로킹을 방지하고 표시 속도를 향상시킨다.
マウスを使わずキーボード操作のみでUI上を移動・操作できる機能。Tabキーやショートカットで要素間を移動し、アクセシビリティ対応の基本要件となる。
마우스 없이 키보드만으로 UI 요소 간 이동 및 조작이 가능한 기능. Tab 키나 단축키로 요소 간 이동하며, 웹 접근성 대응의 기본 요건이다.
必要になるまでリソースの読み込みを遅延させる技術。画像やコンポーネントを初期ロード時に取得せず、表示が必要なタイミングで取得することでパフォーマンスを向上させる。
필요할 때까지 리소스 로딩을 지연시키는 기술. 이미지나 컴포넌트를 초기 로드 시 가져오지 않고, 표시가 필요한 타이밍에 가져옴으로써 성능을 향상시킨다.
Reactで独自に作成した再利用可能なフック。useで始まる関数として定義し、状態管理やサイドエフェクトのロジックをコンポーネント間で共有できる仕組み。
React에서 직접 만든 재사용 가능한 훅. use로 시작하는 함수로 정의하며, 상태 관리나 사이드 이펙트 로직을 컴포넌트 간에 공유할 수 있는 구조.
GraphQLクライアント側でのクエリキャッシュ・バッチング・フラグメント管理などを工夫し、通信コストやレンダリング負荷を最小化する最適化手法。Apolloやurqlなどのライブラリが代表的。
GraphQL 클라이언트 측에서 쿼리 캐싱, 배칭, 프래그먼트 관리 등을 활용해 통신 비용과 렌더링 부하를 최소화하는 최적화 기법으로, Apollo나 urql 같은 라이브러리가 대표적이다.
ブラウザに対して事前にリソースの取得や接続を指示するHTML属性群。dns-prefetch、preconnect、prefetch、preloadなどがあり、ページの読み込みパフォーマンス向上に活用される。
브라우저에 미리 리소스 취득이나 연결을 지시하는 HTML 속성 모음. dns-prefetch, preconnect, prefetch, preload 등이 있으며 페이지 로딩 성능 향상에 활용된다.
ブラウザにキーと値のペアを永続的に保存するWeb Storage API。セッション終了後もデータが残り、同一オリジン内でJavaScriptからアクセス可能。容量は通常5MB程度。
브라우저에 키-값 쌍을 영구적으로 저장하는 Web Storage API. 세션 종료 후에도 데이터가 유지되며, 동일 오리진 내에서 JavaScript로 접근 가능. 용량은 보통 5MB 정도.
フロントエンド（ビュー）を持たず、コンテンツの管理機能とAPIのみを提供するCMS。開発者は好きなフロントエンド技術（Reactなど）を使って自由に画面を構築できる。ContentfulやmicroCMSが代表的。
프론트엔드(뷰)를 가지지 않고 콘텐츠 관리 기능과 API만을 제공하는 CMS. 개발자는 원하는 프론트엔드 기술(React 등)을 사용하여 자유롭게 화면을 구축할 수 있다. Contentful이나 microCMS가 대표적이다.
W3CとFIDOが策定したWeb認証APIの仕様。パスワードレス認証を実現し、生体認証やセキュリティキーを使ってブラウザから安全にログインできる。
W3C와 FIDO가 책정한 웹 인증 API 사양. 패스워드리스 인증을 실현하며, 생체 인증이나 보안 키를 사용해 브라우저에서 안전하게 로그인할 수 있다.
バンドル時に使用されていないコード（デッドコード）を自動的に除去する最適化技術。WebpackやRollupなどのバンドラーが対応しており、最終的なファイルサイズを削減できる。
번들링 시 사용되지 않는 코드(데드 코드)를 자동으로 제거하는 최적화 기술. Webpack이나 Rollup 같은 번들러가 지원하며, 최종 파일 크기를 줄일 수 있다.
UIコンポーネントがエラー発生時に表示する状態。入力フォームのバリデーション失敗やAPI通信エラー時に、ユーザーへ視覚的にフィードバックを伝えるデザイン・実装パターン。
UI 컴포넌트가 에러 발생 시 표시하는 상태. 입력 폼의 유효성 검사 실패나 API 통신 에러 시 사용자에게 시각적으로 피드백을 전달하는 디자인·구현 패턴.
Scalable Vector Graphicsの略。XMLベースのベクター画像フォーマットで、拡大縮小しても画質が劣化しないためWebのアイコンやロゴに広く使われる。
Scalable Vector Graphics의 약자. XML 기반의 벡터 이미지 포맷으로, 확대·축소해도 화질이 저하되지 않아 웹 아이콘이나 로고에 널리 사용된다.
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가 제공하는 정적 생성 확장 기능. 최초 빌드 이후에도 지정한 간격으로 페이지를 재생성하여, 정적 배포의 속도를 유지하면서 항상 최신 콘텐츠를 표시할 수 있다.
ビルド時にHTMLファイルを事前生成する手法。SSGとも呼ばれ、Next.jsやGatsbyで採用。サーバー負荷が低く、表示速度が速いためパフォーマンス向上に有効。
빌드 시점에 HTML 파일을 사전 생성하는 방식. SSG라고도 불리며 Next.js나 Gatsby에서 채택. 서버 부하가 낮고 표시 속도가 빨라 성능 향상에 효과적.
Reactコンポーネントを自動的に最適化するコンパイラ。useMemoやuseCallbackを手動で書く必要をなくし、再レンダリングを自動で最小化する。
React 컴포넌트를 자동으로 최적화하는 컴파일러. useMemo나 useCallback을 수동으로 작성할 필요를 없애고, 리렌더링을 자동으로 최소화한다.