recursal/MDN huggingface dataset:
예측 구문 분석 (Speculative parsing)
==============================

전통적으로 브라우저에서 HTML 파서는 메인 스레드에서 실행되었으며 스크립트가 네트워크에서 검색되어 실행될 때까지 `</script>` 태그 다음에 차단되었습니다. Firefox 4 이후의 Firefox와 같은 일부 HTML 파서는 메인 스레드에서 예측 구문 분석을 지원합니다. 스크립트가 다운로드되고 실행되는 동안 미리 구문 분석을 합니다. HTML 파서는 스트림에서 미리 찾은 스크립트, 스타일 시트 및 이미지에 대한 예측 로드를 시작하고 예측에 따라 HTML 트리 구성 알고리즘을 실행합니다. 장점은 예측이 성공할 때 이미 스크립트, 스타일 시트 및 이미지를 검색한 수신 파일의 일부를 다시 분석할 필요가 없다는 것입니다. 단점은 예측이 실패할 때 손실되는 작업이 더 많다는 것입니다.

이 문서는 예측을 실패하게 만들고 페이지 로딩 속도를 늦추는 것을 방지하는 데 도움이 됩니다.

연결된 스크립트, 스타일 시트 및 이미지의 예측 로드를 성공적으로 수행하려면 `document.write` (en-US)를 피하세요. `<base>` 요소를 사용하여 페이지의 기본 URI를 재정의하는 경우 문서의 스크립트되지 않은 부분에 요소를 배치하세요. `<base>` 요소를 `document.write()` 또는 `document.createElement`를 통해 추가하지 마세요.

트리 빌더 출력의 손실 방지
---------------

`document.write()`에 의해 삽입된 모든 콘텐츠가 구문 분석되었을 때 `</script>` 태그 뒤의 예측 상태가 더 이상 유지되지 않도록 `document.write()`가 트리 빌더 상태를 변경하면 예측 트리 작성이 실패합니다. 그러나, `document.write()`를 비정상적으로 사용하는 경우에만 문제가 발생합니다. 피해야 할 사항은 아래와 같습니다.

* 불균형한 트리를 사용하지 마세요. `<script>document.write("<div>");</script>`는 잘못되었습니다. `<script>document.write("<div></div>");</script>`는 사용해도 괜찮습니다.
* 완료되지 않은 토큰을 작성하지 마세요. `<script>document.write("<div></div");</script>`는 잘못되었습니다.
* 캐리지 리턴으로 글 작성을 마무리하지 마세요. `<script>document.write("Hello World!\r");</script>`는 잘못되었습니다. `<script>document.write("Hello World!\n");</script>`는 사용해도 괜찮습니다.
* 균형잡힌 태그를 작성하면 쓰기 불균형을 만드는 방식으로 다른 태그가 추론될 수 있습니다. 예, `head` 요소 내부의 `<script>document.write("<div></div>");</script>`는 불균형한 `<script>document.write("</head><body><div></div>");</script>`로 해석됩니다.
* 테이블의 일부를 서식화하지 마세요. `<table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table>`는 잘못되었습니다.
Digest
======

**다이제스트**는 전체 메시지에서 암호화 해쉬 함수에 의해 생성된 작은 값입니다. 이상적으로, 다이제스트는 계산이 빠르고, 되돌릴 수 없으며, 예측할 수 없으므로 누군가 특정 메시지를 변조했는지 여부를 나타냅니다.

다이제스트를 사용하여 여러 작업을 수행할 수 있습니다.

* 비암호화 애플리케이션(예, 해시 테이블의 인덱스 또는 중복 데이터를 감지하거나 파일을 고유하게 식별하는 데 사용되는 지문)
* 메시지 무결성 확인(조작된 메시지는 다른 해시를 갖습니다)
* 비밀번호를 검색할 수는 없지만, 확인할 수 있도록 저장합니다(이 작업을 안전하게 수행하려면 비밀번호도 솔트해야 합니다).
* 의사 난수 생성
* 키 생성합니다

충돌과 예측 가능성을 방지하려면 사용 사례에 적합한 해시 함수를 선택하는 것이 중요합니다.

같이 보기
-----

* 암호화 해쉬 함수를 참고하세요.
* 위키백과의 해쉬 함수
WebM
====

**WebM**은 로열티 비용이 없는 개방형 웹 비디오 포맷이며 Mozilla Firefox에서 네이티브로 지원됩니다.

같이 보기
-----

* 위키백과의 WebM
거터 (Gutters)
============

**거터(Gutters)** 또는 앨리(*alleys*)는 콘텐츠 트랙 사이의 간격입니다. 거터는 `column-gap` (en-US), `row-gap` (en-US), 또는 `gap` 속성을 사용하여 CSS 그리드 레이아웃에서 생성할 수 있습니다.

예제
--

아래 예에는 행과 행, 열과 열 사이의 간격이 20px인 3개의 열과 2개의 행 트랙 그리드가 있습니다.
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #fff8f8;
  padding: 1em;
  color: #d9480f;
}
```



```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1.2fr);
  grid-auto-rows: 45%;
  column-gap: 20px;
  row-gap: 20px;
}
```



```html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
```


그리드 크기 측면에서, 간격은 일반 그리드 트랙인 것처럼 작동하지만 간격에 아무것도 배치할 수 없습니다. 간격은 해당 위치의 그리드 선이 추가 크기를 가지게 된 것처럼, 작동하므로 해당 선 뒤에 배치된 모든 그리드 항목은 간격 끝에서 시작됩니다.

`row-gap` 및 `column-gap` 속성은 트랙 공간을 확보할 수 있는 유일한 요소는 아닙니다. 여백, 패딩 또는 상자 정렬 (en-US)의 공간 정렬 속성 사용은 모두 눈에 보이는 간격에 간섭할 수 있습니다. 따라서 우리의 디자인이 이러한 방법 중 하나를 사용하여 추가 공간을 도입하지 않았다는 것을 알고 있지 않는 한, `row-gap` 및 `column-gap` 속성은 "거터 크기"와 동일하게 고려되어서는 안 됩니다.

같이 보기
-----

### 속성 참고서

* `column-gap` (en-US)
* `row-gap` (en-US)
* `gap`
### 더 읽어보기

* CSS 그리드 레이아웃 안내서: 그리드 레이아웃의 기본 개념
* CSS 그리드 레이아웃 명세서의 거터 정의
WebIDL
======

**WebIDL** 은 웹 애플리케이션 프로그래밍 인터페이스(API)를 구성하는 데이터 타입, 인터페이스, 메서드, 속성 및 기타 구성 요소를 설명하는 데 사용되는 인터페이스 설명 언어입니다. 특정 프로그래밍 언어와는 독립적인 다소 양식이 있는 구문을 사용합니다. 그래서 각 API를 구축하는 데 사용되는 기본 코드는 가장 적합한 언어로 작성될 수 있으며 동시에 API 구성요소를 JavaScript에 호환이 되는 구성에 매핑할 수도 있습니다.

WebIDL은 웹을 위한 거의 모든 API 명세서에서 사용되며, WebIDL의 표준 형식과 구문으로 인해 웹 브라우저를 만드는 프로그래머는 API 구현을 위한 코드를 작성하는 방법에 관계없이 브라우저가 서로 호환되는지 보다 쉽게 확인할 수 있습니다.

같이 보기
-----

* 명세서
* WebIDL 파일에 포함된 정보 (en-US)
* Gecko WebIDL 바인딩
* WebIDL
쉐도우 트리 (Shadow tree)
====================

**쉐도우 트리 (Shadow tree)** 는 최상위 노드가 **쉐도우 루트(shadow root)** 인 DOM 노드의 숨겨진 집합입니다. 쉐도우 루트는 **쉐도우 DOM(shadow DOM)** 의 최상위 노드이며 일반 문서의 DOM 트리의 일부가 아닙니다.

쉐도우 루트는 **호스트** 라고 하는 특정 DOM 노드를 통해 다른 노드 트리에 연결됩니다. 이 호스트는 다른 쉐도우 트리의 일부일 수 있습니다. 쉐도우 루트 호스트의 노드 트리를 **라이트 트리(light tree)** 라고도 합니다.

쉐도우 트리의 숨겨진 DOM 노드는 일반적으로 쉐도우 트리 외부에 적용된 어떤 것에도 영향을 받지 않으며 그 반대도 마찬가지입니다. 쉐도우 DOM이 끝나고 일반 DOM이 시작되는 **shadow 경계** 는 통과할 수 있지만, 의도적으로 표시했을 때만 가능한 부분입니다.

* 외부에서 쉐도우 트리 노드를 스크립팅하려면 특별한 Shadow DOM API에 접근해야 합니다.
* CSS 스코핑 (en-US) 및 CSS 쉐도우 부분 (en-US)을 통해 외부에서 쉐도우 트리 스타일을 지정할 수 있습니다.
같이 보기
-----

* 쉐도우 DOM 사용하기
* `Element.shadowRoot` (en-US) 및 `Element.attachShadow()` (en-US)
* `ShadowRoot` (en-US)
* `<slot>`
* 접근성 트리(Accessibility tree)
인지된 성능 (Perceived performance)
==============================

**인지된 성능(Perceived performance)** 은 웹사이트가 사용자에게 얼마나 빠르고 반응성이 뛰어나며 안정적이라고 '느끼는'지를 나타내는 척도입니다. 사이트 성능에 대한 인식은 실제 로드 및 응답 시간보다 사용자 경험에 더 큰 영향을 미칠 수 있습니다.

같이 보기
-----

* 인지된 성능 (en-US)
Number
======

JavaScript에서 **Number**는 배정밀도 64비트 부동소수점 형식 (IEEE 754)의 숫자 데이터 타입입니다. 다른 프로그래밍 언어에서는 Integer, Float, Double, Bignum와 같은 다양한 숫자 타입들이 존재할 수 있습니다.

같이 보기
-----

* Numeric types 위키피디아
* JavaScript 타입: `Number`
* JavaScript 전역 객체 `Number`
* Glossary:
    + JavaScript
    + 원시 값
Secure Sockets Layer (SSL)
==========================

Secure Sockets Layer(SSL)는 클라이언트와 서버 간의 안전한 링크를 통해 송수신되는 모든 데이터를 안전하게 보장하는 과거의 보안 표준 기술이었다. SSL 버전 3.0은 Netscape가 1999년에 발표했으며 현재에는 Transport Layer Security (TLS) 로 대체되었다.

같이 보기
-----

* Transport Layer Security (Wikipedia)
* Transport Layer Security (TLS) protocol
* Glossary
    + HTTPS
    + TLS
Alignment container
===================

**정렬 컨테이너**는 정렬 주체가 정렬되는 직사각형입니다. 정렬 컨테이너는 레이아웃 모드에 의해 정의됩니다. 정렬 컨테이너는 일반적으로 정렬 대상의 포함 블록이며 포함 블록을 설정하는 상자의 쓰기 모드를 가정합니다.

같이 보기
-----

* CSS 박스 정렬 (en-US) 모듈
* CSS `align-content` 속성
* CSS `align-items` (en-US) 속성
* CSS `align-self` (en-US) 속성
* CSS `align-tracks` (en-US) 속성
* CSS `justify-content` 속성
* CSS `justify-items` (en-US) 속성
* CSS `justify-self` (en-US) 속성
* CSS `justify-tracks` (en-US) 속성
* CSS `place-content` (en-US) 단축 속성
* CSS `place-self` (en-US) 단축 속성
* CSS `scroll-snap-align` (en-US) 속성
NAT
===

**네트워크 주소 변환 (Network Address Translation, NAT)** 은 여러 대의 컴퓨터가 IP 주소를 공유하도록 하는 기술입니다. NAT는 로컬 네트워크의 각 컴퓨터에 고유한 주소를 할당하고 들어오고 나가는 네트워크 트래픽을 조정하여 데이터를 올바른 위치로 보냅니다.

같이 보기
-----

* WebRTC 프로토콜
* 위키백과의 네트워크 주소 변환
Breadcrumb (브레드크럼)
==================

**브레드크럼(breadcrumb)**, 또는 브레드크럼 트레일은 일반적으로 사이트의 header와 기본 컨텐츠 사이에 배치되는 탐색 보조 도구로, 사이트 구조와 관련된 현재 페이지의 계층 구조, 최상위에서부터 현재 페이지까지를 사용자의 링크 목록 등으로 표시합니다. 현재 페이지까지 방문한 순서대로 보입니다.

이 문서의 위치 탐색 경로는 다음과 같습니다.

MDN > Glossary > Breadcrumb

브레드크럼 트레일을 통해 사용자는 웹 사이트 내에서 현재 자신의 위치를 알 수 있습니다. 이러한 유형의 탐색이 올바르게 수행되면, 사용자는 사이트 내 위치와 이동 경로를 알 수 있습니다. 또한 사용자가 이전 위치로 돌아가는 데 도움이 되며 상위 페이지로 이동하는 데 필요한 클릭 수를 줄일 수 있습니다.
평문 (Plaintext)
==============

평문이란 암호화 알고리즘 또는 복호화된 암호문의 입력으로 사용되는 정보를 의미합니다.

평문이라는 용어는 암호화되지 않았고 추가 처리 없이 사람이나 컴퓨터가 읽을 수 있는 텍스트 문서, 이미지 등과 같은 모든 정보를 더 느슨하게 나타내는 'cleartext'라는 용어와 같은 의미로 자주 사용됩니다.
베지에 곡선 (Bézier curve)
=====================

**베지에 곡선** ([bezje]로 발음합니다)은 컴퓨터 그래픽과 애니메이션에 사용되는 수학적으로 표현된 곡선입니다. 벡터 이미지에선, 크기를 무한으로 조정할 수 있는 부드러운 곡선을 모델링하는 데 사용됩니다.

곡선은 최소 2개의 제어점 세트로 정의됩니다. 웹 관련 그래픽과 애니메이션에서는 종종 4개의 제어점(P0, P1, P2, 및 P3)이 있는 곡선인 직육면체 베지어 곡선을 사용합니다.

2차 베지어 곡선을 그리려면 두 개의 가상 선을 그립니다. 하나는 P0 to P1로, 다른 하나는 P1 to P2로 그려줍니다. 첫 번째 도우미 선의 시작점과 두 번째 도우미 선의 끝점이 꾸준히 이동하면서 세 번째 가상의 선이 그려집니다. 이 가상의 선에는 시작점에서 끝점까지 꾸준히 움직이는 점이 그려집니다. 이 점이 그려주는 곡선이 베지어 곡선입니다. 다음은 곡선의 생성되는 모습을 보여주는 애니메이션입니다.

![베지에 곡선 그리기](/ko/docs/Glossary/Bezier_curve/b%C3%A9zier_2_big.gif)

같이 보기
-----

* 위키백과의 베지에 곡선
* CSS의 입방체 베지어 곡선의 완화 함수 (en-US)
* `keySplines (en-US)` SVG 속성
금지된 헤더 이름
=========

**금지된 헤더 이름**은 프로그래밍 방식으로 수정할 수 없는 HTTP 헤더의 이름입니다. 정확히는 금지된 응답 헤더 이름과 대비되는 HTTP **요청** 헤더 이름입니다.

이러한 헤더는 사용자 에이전트가 헤더에 대한 모든 권한을 보유하므로 수정할 수 없습니다. `Sec-`로 시작하는 이름은 개발자에게 헤더에 대한 제어 권한을 부여하는 취득 알고리즘을 사용하는 API(`XMLHttpRequest` 등)로부터 안전한 새 헤더를 만들때 사용하기 위해 예약되어 있습니다.

금지된 헤더 이름은 `Proxy-` 또는 `Sec-` 로 시작하거나 아래 이름 중 하나입니다.

* `Accept-Charset`
* `Accept-Encoding`
* `Access-Control-Request-Headers`
* `Access-Control-Request-Method`
* `Connection`
* `Content-Length`
* `Cookie`
* `Date`
* `DNT` (en-US)
* `Expect`
* `Host`
* `Keep-Alive`
* `Origin`
* `Permissions-Policy` (en-US)
* `Proxy-`
* `Sec-`
* `Referer`
* `TE` (en-US)
* `Trailer` (en-US)
* `Transfer-Encoding`
* `Upgrade` (en-US)
* `Via`

**참고:** 위 목록에 없는 `User-Agent` (en-US) 헤더는 금지됐었으나 명세에 따라 (금지된 헤더 이름 목록 참조(Firefox 43에서 구현됨))이제 사용할 수 있습니다. 따라서 Fetch API `Headers` (en-US) 객체나 `XMLHttpRequest`의 `setRequestHeader()` 메서드로 설정 가능합니다. 그러나 Chrome은 Fetch 요청에서 `User-Agent` 헤더를 조용하게 제거하고 있습니다. Chromium bug 571722를 참고하세요.

같이 보기
-----

금지된 응답 헤더 이름 (용어 사전)
교차축
===

플렉스박스에서, 교차축이란 주축에 수직하는 축으로, `flex-direction`이 `row` 또는 `row-reverse` 인 경우 교차축은 열 방향을 따라갑니다.

![교차축은 열을 따라갑니다.](/ko/docs/Glossary/Cross_Axis/basics3.png)

주축이 `column` 또는 `column-reverse`인 경우 교차축은 행 방향을 따라갑니다.

![교차축은 행 방향을 따라갑니다.](/ko/docs/Glossary/Cross_Axis/basics4.png)

아이템을 교차축에 대해 정렬할 땐 플렉스 컨테이너의 `align-items` 속성 또는 각각 아이템의 `align-self` 속성을 사용합니다. 플렉스 컨테이너가 콘텐츠 여러 줄을 가졌고, 교차축에 남는 공간이 있다면, `align-content` 속성을 통해 열 간격을 조절할 수 있습니다.

같이 보기
-----

### 속성 참고서

* `align-content`
* `align-items` (en-US)
* `align-self` (en-US)
* `flex-wrap`
* `flex-direction`
* `flex`
* `flex-basis`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `justify-content`
* `order`
### 더 읽어보기

* CSS Flexbox Guide:
    + Flexbox의 기본 개념
    + 플렉스 컨테이너 안의 내용 정렬
    + 플렉스 항목의 래핑 마스터하기 (en-US)
* Glossary
    + Flex
    + Flex Container
    + Flex Item
    + Grid
핫링크 (Hotlink)
=============

**hotlink** (**inline link**로도 부름)는 다른 사이트에서 직접 연결된 객체(일반적으로 이미지)입니다. 예를 들어, site1.com에 호스팅된 이미지는 site2.com에 직접 표시됩니다.

연결된 객체를 호스팅하는 웹 사이트에서 원치 않는 대역폭 사용을 유발할 수 있으므로, 이러한 관행이 눈살을 찌푸리게 합니다. 윤리적인 관점에서 볼 때, 허락 없이 행동하는 것은 도둑질로 생각될 수 있습니다.

같이 보기
-----

* 위키백과의 Hotlink
* 용어사전의 Hyperlink
네임스페이스 (Namespace)
==================

네임스페이스 (Namespace)는 프로그램에서 사용되는 이름의 논리적 그룹인 식별자의 컨텍스트입니다. 동일한 컨텍스트 및 범위 내에서, 식별자는 엔터티를 고유하게 식별해야 합니다.

운영체제에서, 디렉터리는 네임스페이스입니다. 디렉토리 내 각 파일이나 하위 디렉토리는 고유한 이름입니다. 동일한 이름을 하위 디렉터리 전체에 걸쳐서 여러 번 사용할 수 있습니다.

HTML, CSS 와 XML 기반 언어에서, 네임스페이스는 요소(또는 속성)가 명시적으로, 혹은 암시적으로 속한 언어입니다.

같이 보기
-----

* 네임스페이스 집중 강의 (en-US)
* CSS 네임스페이스 모듈
* CSS `@namespace`
* `Document.createElementNS()` (en-US) 메소드
* 위키백과의 네임스페이스
상수 (Constant)
=============

상수(Constant)는 프로그래머가 변경할 수 없는 값입니다. 예를 들어, 숫자(1, 2, 42)입니다. 반면에 변수를 사용하면, 프로그래머는 이미 사용중인 변수 이름에 새로운 값를 할당할 수 있습니다.

변수와 마찬가지로, 일부 상수는 식별자에 바인딩됩니다. 예를 들어, `pi` 식별자는 값 3.14… 에 바인딩 될 수 있습니다.

같이 보기
-----

* 위키백과의 상수
호이스팅
====

JavaScript **호이스팅**은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻합니다.

호이스팅은 ECMAScript 사양에서 규범적으로 정의된 용어가 아닙니다. 사양에서는 선언 그룹을 *HoistableDeclaration*로 정의되어 있지만, 여기에는 `function`, `function*` 만 포함되어 있습니다, `async 함수`, `async 함수` 선언을 사용하세요. 호이스팅은 다른 방식이긴 하지만 종종 `var` 선언의 기능으로 간주되기도 합니다. 구어체 용어로는 다음과 같은 동작을 호이스팅으로 간주할 수 있습니다.

1. 변수가 선언된 줄 이전에 해당 범위에서 변수 값을 사용할 수 있는 경우 ("값 호이스팅")
2. 변수가 선언된 줄 이전에 해당 범위의 변수를 참조할 수 있지만 `ReferenceError`를 던지지 않고 값이 항상 `정의되지 않음`인 경우입니다. ("선언 호이스팅")
3. 변수를 선언하면 변수가 선언된 줄 앞의 범위에서 동작이 변경됩니다.
4. 선언의 부작용은 선언이 포함된 나머지 코드를 평가하기 전에 발생합니다.

위의 네 가지 함수 선언은 유형 1 동작으로 호출되고, `var` 선언은 유형 2 동작으로 호출됩니다. `let`, `const` 및 `class` 선언(총칭하여 lexical 선언이라고도 함)은 유형 3 동작으로 올라갑니다. `import` 선언은 유형 1 및 유형 4 동작으로 호출됩니다.

일부에서는 `let`, `const` 및 `class`를 호이스트되지 않는 것으로 보는 것을 선호하는데, 그 이유는 temporal dead zone이 선언 이전의 변수 사용을 엄격하게 금지하고 있기 때문입니다. 호이스팅은 보편적으로 합의된 용어가 아니기 때문에 이러한 반대는 괜찮습니다. 그러나 temporal dead zone은 그 범위에서 관찰 가능한 다른 변화를 일으킬 수 있으며, 이는 어떤 형태의 호이스팅이 있음을 시사합니다.


```js
const x = 1;
{
  console.log(x); // 참조 에러
  const x = 2;
}
```


만약 `const x = 2` 선언이 전혀 호출되지 않는다면(즉, 실행될 때만 효력이 발생한다면), `console.log(x)` 문은 상위 범위에서 `x` 값을 읽을 수 있어야 합니다. 그러나 `const` 선언은 여전히 정의된 전체 범위를 "오염"시키기 때문에 `console.log(x)` 문은 아직 초기화되지 않은 `const x = 2` 선언에서 `x`를 대신 읽어서 `ReferenceError`를 던집니다. 하지만 실용적인 관점에서 볼 때 이러한 선언의 호이스팅은 의미 있는 기능을 제공하지 않기 때문에 어휘 선언을 비호이스팅으로 특성화하는 것이 더 유용할 수 있습니다.

다음은 호이스팅의 한 형태가 아니라는 점에 유의하세요.


```js
{
  var x = 1;
}
console.log(x); // 1
```


여기에는 "선언 전 접근"이 없는데, 이는 단순히 `var` 선언이 블록으로 범위가 지정되지 않았기 때문입니다.

호이스팅에 대한 자세한 내용은 다음을 참조하십시오:

* `var`/`let`/`const` 호이스팅 - 문법 및 유형 가이드
* `함수` 호이스팅 - 함수 가이드
* `class` 호이스팅 - 클래스 가이드 (en-US)
* `import` 호이스팅 - JavaScript 모듈
참조
--

* `var` 문 - MDN
* `let` 문 - MDN
* `const` 문 - MDN
* `function` 문 - MDN
우아한 성능 저하 (Graceful degradation)
================================

**우아한 성능 저하**는 최신 브라우저에서 동작하는 웹 사이트/응용 프로그램 구축에 주력하는 설계 철학입니다. 그러나 오래된 브라우저에서는 비록 좋지 않은 경험이라 할 지라도 필수 콘텐츠와 기능을 여전히 제공합니다.

JavaScript 폴리필을 이용하면 누락되는 기능을 구현할 수 있지만, 스타일과 레이아웃 같은 특징으로 대체할 수 있다면 CSS 종속 또는 HTML 폴백을 이용하는 편이 좋습니다. 일반적인 HTML과 CSS 문제 다루기 (en-US)에서 좋은 예제를 찾을 수 있다.

알려지지 않은 다양한 사용자 에이전트가 웹 사이트에 접근할 때 웹 개발자가 최상의 웹 사이트를 개발하도록 집중할 수 있는 유용한 기법입니다. 점진적 향상은 관련이 있지만 차이가 있습니다. 종종 우아한 성능 저하와 반대인 것처럼 보인다. 실제로 두 접근법은 유효하고 서로를 보완할 수 있다.

같이 보기
-----

* 우아한 성능 저하 on Wikipedia
* 흔한 HTML 및 CSS 문제 다루기 (en-US)
* 기능 탐지 구현 (en-US)
* MDN Web Docs 용어 사전
    + Graceful degradation
    + Polyfill
    + Progressive enhancement
Self-Executing Anonymous Function
=================================

정의되자마자 실행되는 JavaScript function입니다. (a.k.a. IIFE (즉시실행함수))

링크된 즉시실행함수 페이지에서 더 많은 정보를 얻을 수 있습니다.
프로미스 (Promise)
==============

**`Promise`** 는 아직 작업이 완료되지 않은 함수에 의해 반환된 객체입니다. 프로미스는 문자 그대로 프로미스 객체를 통해 결과를 반환할 함수에 의해 만들어진 프로미스를 나타냅니다.

호출된 함수가 작업을 비동기적으로 완료하면 원래 호출자에게 작업이 완료되었음을 알리기 위해 해결(또는 이행 또는 완료) 핸들러라고 불리는 프로미스 객체의 함수가 호출됩니다.

같이 보기
-----

* Futures 및 promises 객체
* JavaScript 참고서의 `Promise`.
* 프로미스 사용하기
간편 URL (Slug)
=============

간편 URL(Slug)는 일반적으로 URL 끝에 있는 웹 주소의 고유하게 식별이 되는 부분입니다. MDN의 맥락에서는, "*<locale>/docs/*" 다음의 URL 부분입니다.

또한 상위 문서 아래에 새 문서가 생성될 때 최종 구성 요소일 수도 있습니다. 예를 들어, 이 페이지의 슬러그는 `Glossary/Slug`입니다.

같이 보기
-----

* 제목과 간편 URL 선택하기 (en-US)
Algorithm
=========

알고리즘(Algorithm)은 기능을 수행하기 위한 독립된 명령어들의 집합입니다.

즉, 알고리즘은 인간이나 기계에 의해 반복적으로 해결할 수 있도록 문제를 해결하는 방법을 기술하는 수단이다. 컴퓨터 과학자들은 "알고리즘의 복잡성"이나 "Big O" 표기법이라는 개념을 통해 알고리즘의 효율성을 비교합니다.

예를 들어:

* 요리 레시피는 인간을 위한 간단한 알고리즘이다.
* 정렬 알고리즘은 종종 컴퓨터 프로그래밍에서 데이터를 정렬하는 방법을 설명하기 위해 사용된다.

일반적인 알고리즘은 Traveling Salesman Problem, Tree Traversal algorithms 등과 같은, 길 찾기 알고리즘이다.

선형 회귀, 로지스틱 회귀, 의사결정 트리, 랜덤 포레스트, 지원 벡터 머신, Recurrent Neural Network(RNN), Long Short Term Memory(LSTM) Neural Network, Convolutional Neural Network(CNNN), Deep Convolutional Neural Network(심층 신경망) 등의 머신 러닝 알고리즘도 있습니다.

같이 보기
-----

* Wikipedia의 Algorithm
* Explanations of sorting algorithms
* Explanations of algorithmic complexity
대칭키 암호화 (Symmetric-key cryptography)
====================================

대칭키 암호화(Symmetric-key cryptography)는 암호화와 복호화에 동일한 키를 사용하는 암호화 알고리즘에 사용되는 용어입니다. 키는 일반적으로 "대칭 키" 또는 "비밀 키"라고 합니다.

일반적으로 키가 쌍으로 생성되고 한 키에 의한 변환이 다른 키를 통해서만 되돌릴 수 있는 공개 키 암호화와 비교됩니다.

대칭키 알고리즘은 올바르게 사용하면 안전하고 효율성이 높아 성능에 부정적인 영향을 주지 않으면서, 대량의 데이터를 암호화하는 데 사용할 수 있습니다.

현재 사용되는 대부분의 대칭키 알고리즘은 블록암호입니다. 즉, 한 번에 한 블록씩 데이터를 암호화합니다. 각 블록의 크기는 고정되어 있으며 알고리즘에 의해 결정됩니다. 예를 들어, AES 16 바이트 블록을 사용합니다. 블록 암호는 항상 블록 크기보다 긴 메시지를 안전하게 암호화하는 방법을 지정하는 '모드'와 함께 사용됩니다. 예를 들어, AES는 암호이고, CTR, CBC 및 GCM은 모두 모드입니다. 부적절한 모드를 사용하거나 모드를 잘못 사용하면, 기본 암호가 제공되는 보안이 완전히 훼손될 수 있습니다.

같이 보기
-----

* MDN 웹 문서 용어 사전
    + Block cipher mode of operation
    + Cryptography
    + Cryptographic hash function
    + Symmetric-key cryptography
테이블 그리드 상자 (Table Grid Box)
===========================

**테이블 그리드 상자(Table Grid Box)** 는 캡션을 제외한 모든 테이블 내부 상자를 포함하는 블록 수준의 상자입니다. 캡션이 포함된 상자를 테이블 래퍼 상자라고 합니다.
ISP
===

인터넷 서비스 제공자(Internet Service Provider, ISP)는 전화선을 통한 전화 접속 연결(이전에는 더 일반적임)이나 케이블 모뎀이나 DSL 서비스와 같은 광대역 연결을 통해 인터넷 접근, 때로는 이메일, 웹 호스팅 및 VoIP를 판매합니다.

같이 보기
-----

* 인터넷 작동 원리 (초보자를 위한 설명)
* 위키백과의 인터넷 서비스 제공자
Mutable
=======

"mutable" 값은 변경 가능(가변)한 변수의 유형입니다. JavaScript에서, 원시 값이 아닌 객체와 배열만이 mutable입니다. 일단, 원시값이 생성되면 이를 변경할 수 없습니다. 단, 해당 값을 보유하는 변수는 재할당될 수 있습니다.

같이 보기
-----

* 위키피디아의 불변 객체
* Immutable
Prototype
=========

프로토타입은 개발 사이클의 초기 단계에서 제품 혹은 어플리케이션의 외형이나 동작을 보여줄 수 있는 모델을 의미합니다.

상속과 프로토타입 체인에 대해서도 살펴보세요.

같이 보기
-----

* 위키백과의 소프트웨어 프로토타이핑
IndexedDB
=========

IndexedDB는 브라우저 내에 대용량 데이터 구조를 저장하고 고성능 검색을 위해 인덱싱하기 위한 웹 API 입니다. SQL 기반 RDBMS와 마찬가지로, IndexedDB는 트랜잭션 데이터베이스 시스템입니다. 그러나, 고정 열 테이블이 아닌 JavaScript 객체를 사용하여 데이터를 저장합니다.

같이 보기
-----

* MDN의 IndexedDB API
* IndexedDB W3C 명세
동적 타입 (Dynamic typing)
======================

**동적 타입 언어**는 마치 JavaScript처럼, 인터프리터가 그 시점의 변수 값을 기반으로 런타임에 변수에 타입을 할당하는 것을 말합니다.

같이 보기
-----

* JavaScript 데이터 타입 및 자료구조
* 위키백과의 타입 시스템
퍼즈 테스팅 (Fuzz testing)
=====================

\*\*퍼징(Fuzzing)\*\*은 자동화된 도구를 사용해 프로그램 또는 프로그램 기능에 유효하지 않거나 예상치 못한 입력을 제공하고 나서, 결과를 확인해서 프로그램이 충돌하거나 부적절하게 작동하는지 확인하는 소프트웨어 테스팅 기술입니다. 퍼징은 소프트웨어의 안정성, 신뢰성 및 보안을 보장하는 중요한 방법입니다.

* 위키백과: 퍼즈 테스팅(Fuzz testing)
Object
======

JavaScript에서, 객체는 속성의 모음으로 볼 수 있습니다. 객체 리터럴 구문을 사용하면, 제한된 속성 집합이 초기화됩니다. 그런 다음 속성을 추가하고 제거할 수 있습니다. 속성 값은 복잡한 데이터 구조를 구축할 수 있는, 다른 객체를 포함하여 모든 유형의 값이 될 수 있습니다. 속성은 "key" 값을 사용하여 식별됩니다. "key" 값은 String 값 또는 Symbol value입니다.

객체 속성에는 *data* 속성 및 *accessor* 속성 두 가지 유형이 있습니다.

**참고:** 접근자 "메서드"가 아닌 접근자 "프로퍼티"를 인식하는 것이 중요합니다. 함수를 값으로 사용하여 JavaScript 객체 클래스와 유사한 접근자를 제공할 수 있지만, 그렇다고 해서 객체가 클래스가 되는 것은 아닙니다.

같이 보기
-----

* JavaScript 데이터 유형과 자료구조 글에서의 JavaScript objects의 자세한 정보
* JavaScript 자습서의 `Object`
XHR (XMLHttpRequest)
====================

`XMLHttpRequest`(XHR)은 AJAX 요청을 생성하는 JavaScript API입니다. XHR의 메서드로 브라우저와 서버간의 네트워크 요청을 전송할 수 있습니다.

같이 보기
-----

* 위키백과 XMLHttpRequest
* 동기식 vs. 비동기식 통신
* `XMLHttpRequest` 객체.
* XMLHttpRequest를 사용하는 방법에 관한 MDN 문서 (en-US).
XPath
=====

**XPath** 는 XML 문서의 섹션과 콘텐츠에 접근할 수 있는 쿼리 언어입니다.

같이 보기
-----

* MDN의 XPath 문서
* XPath 명세서
* 공식 웹사이트
* 위키백과의 XPath
IETF
====

\*\*국제 인터넷 표준화 기구 (The Internet Engineering Task Force, IETF)\*\*는 인터넷 뒤에 있는 메커니즘, 특히 TCP/IP 또는 인터넷 프로토콜 제품군을 관리하는 명세서 초안을 작성하는 세계적인 조직입니다.

IETF는 공개되어 있으며, 자원봉사자에 의해 운영되고 인터넷 협회의 후원을 받습니다.

같이 보기
-----

* 공식 웹사이트
WebKit
======

WebKit은 마크업을 기반으로 올바른 형식의 웹페이지를 표시하는 프레임워크입니다. Apple Safari는 WebKit에 의존하며 대부분의 모바일 브라우저도 사용합니다(WebKit은 이식성이 뛰어나고 사용자 정의 개발이 가능하기 때문입니다).

WebKit은 KDE의 KHTML 및 KJS 라이브러리의 포크로 시작되었지만, 많은 개인과 회사(KDE, Apple, Google 및 Nokia 포함)가 기여해 왔습니다.

WebKit은 Apple 상표이며 프레임워크는 BSD 형식 라이센스에 따라 배포됩니다. 그러나, LGPL:에는 **WebCore** 렌더링 라이브러리와 **JavaScriptCore** 엔진이라는 두 가지 중요한 구성요소가 포함됩니다.

같이 보기
-----

* 위키백과의 WebKit on Wikipedia
* WebKit CSS 확장 (en-US)
넷스케이프 네비게이터 (Netscape Navigator)
================================

넷스케이프 네비게이터 (Netscape Navigator) 또는 넷스케이프는 1990년대에 선두적인 브라우저였습니다. 넷스케이프는 모자이크(Mosaic)를 기반으로 했고 넷스케이프 팀은 모자이크용 코드를 작성한 프로그래머인 Marc Andreessen이 이끌었습니다.

넷스케이프는 웹을 텍스트 전용 경험보다 그래픽 경험으로 만드는데 도움을 주었습니다. 많은 브라우징 기능은 넷스케이프가 도입한 이후 표준이 되었습니다. 넷스케이프는 로드하는 동안 웹페이지를 표시할 수 있었고, 양식 및 대화형 컨텐츠에 JavaScript를 사용했고, 쿠키에 세션 정보를 저장할 수 있습니다. 넷스케이프의 기술적 이점과 초기 지배력에도 불구하고, 1990년대 후반에 인터넷 익스플로러가 시장 점유율에서 빠르게 넷스케이프를 추월했습니다.

같이 보기
-----

* 위키백과의 넷스케이프 네비게이터
최초 콘텐츠풀 페인트 (First contentful paint, FCP)
=========================================

\*\*최초 콘텐츠풀 페인트(FCP)\*\*는 브라우저가 DOM에서 첫 번째 콘텐츠 비트를 렌더링하여, 페이지가 실제로 로드되고 있다는 첫 번째 피드백을 사용자에게 제공하는 경우입니다. FCP 이후에 사용자는 웹 페이지가 로드되어 있다는 것을 느낄 수 있습니다.

최초 콘텐츠풀 페인트 타임스탬프는 브라우저가 텍스트, 이미지(배경 이미지 포함), 비디오, 그려진 캔버스 또는 비어있지 않은 SVG를 처음 렌더링한 시점입니다. 이것은 iframe의 모든 콘텐츠를 제외하지만 보류 중인 웹 글꼴이 있는 텍스트를 포함합니다. 사용자가 페이지 콘텐츠를 소비하기 시작한 것은 이 시점이 처음입니다.

같이 보기
-----

* 최초 페인트
* `PerformancePaintTiming` (en-US)
* 최대 콘텐츠풀 페인트
* 최초 의미있는 페인트
* web.dev의 최초 콘텐츠풀 페인트
컴파일 시간 (Compile time)
=====================

'컴파일 시간'은 프로그램이 처음 로드된 시점부터 프로그램이 구문 분석될때까지의 시간입니다.

같이 보기
-----

* 위키백과의 컴파일 시간
엔진 (Engine)
===========

JavaScript 엔진은 JavaScript 프로그램을 구문 분석하고 실행하는 인터프리터입니다.

같이 보기
-----

* 위키백과의 JavaScript 엔진
접근 가능한 이름 (Accessible name)
===========================

\*\*접근 가능한 이름(Accessible name)\*\*은 사용자 인터페이스 요소의 이름입니다. 이는 보조 기술 사용자에게 요소에 대한 레이블을 제공하는 HTML 요소와 연관된 텍스트입니다.

접근 가능한 이름은 요소의 목적이나 의도를 전달합니다. 이는 사용자가 요소의 용도와 요소와 상호 작용하는 방법을 이해하는 데 도움이 됩니다. 일반적으로, 요소의 접근 가능한 이름은 페이지마다 고유해야 합니다. 이를 통해 사용자는 특정 요소를 다른 요소와 구별하고 상호 작용하려는 요소를 식별하는 데 도움이 됩니다.

요소와 HTML 마크업에 따라, 접근 가능한 이름의 값은 보이는 (예, `<figcaption>` 내의 텍스트) 또는 보이지 않는 (예, 요소에 설정된 `aria-label` 속성) 콘텐츠 또는 둘 다의 조합에서 나타날 수 있습니다. 요소의 접근 가능한 이름이 결정되는 방식은 요소마다 다른 접근 가능한 이름 계산을 기반으로 합니다.

접근 가능한 이름으로 보이는 텍스트를 사용하는 것이 가장 좋습니다. `<a>`, `<td>` (en-US) 및 `<button>`을 포함한 많은 요소는 해당 콘텐츠에서 이름을 얻습니다. 예를 들어, `<a href="foo.html">Bar</a>`가 있는 경우 접근 가능한 이름은 "Bar"입니다.

다른 요소는 연관된 요소의 콘텐츠에서 접근 가능한 이름을 얻습니다. `<fieldset>`, `<table>` (en-US) 및 `<figure>`와 같은 일부 상위 요소의 경우 해당 요소에 하위 `<fieldset>`, `<caption>` 또는 `<figcaption>`는 각각 자동으로 연결됩니다. `<textarea>` (en-US) 및 `<input>` (en-US)와 같은 일부 다른 요소의 경우 접근 가능한 이름은 관련 요소인 `<label>` 요소에서도 알 수 있습니다. 하지만 해당 연결은 form control의 `id`와 일치하는 `<label>`의 `for` 속성 값을 사용하여 명시적으로 설정해야 합니다.

`<img>`와 같은 일부 요소의 경우 접근 가능한 이름은 해당 속성(이 경우, `alt` 속성 값)에서 가져옵니다. `<img src="grape.jpg" alt="banana"/>`가 주어지면 이미지의 접근 가능한 이름은 "banana"입니다.

표시되는 콘텐츠와 요소 또는 여러 텍스트 노드와 요소 사이의 연결을 생성하려면, `aria-labeledby` (en-US) 속성을 사용할 수 있습니다. 접근 가능한 이름이 필요한 UI 요소와 연결할 표시되는 텍스트가 없는 경우, `aria-label` 속성을 사용할 수 있습니다. `<code>`, `<del>` 및 `<mark>`와 같이 인라인 텍스트를 표시하는 요소에 이름을 추가하면 안 됩니다.

텍스트 콘텐츠 섹션과 같은 많은 요소에는 접근 가능한 이름이 필요하지 않습니다. 모든 컨트롤에는 접근 가능한 이름이 있어야 합니다. 정보를 전달하고 순전히 표현용이 아닌 모든 이미지도 마찬가지입니다.

보조 기술은 요소의 역할과 함께 접근 가능한 이름인 접근성 이름 속성을 사용자에게 제공합니다. 많은 요소에는 접근 가능한 이름이 필요하지 않지만, 일부 콘텐츠 역할 (en-US)에는 접근 가능한 이름이 있으면 이점을 얻을 수 있습니다. 예를 들어, `tabpanel` (en-US)은 사용자가 `tab` (en-US) 역할을 사용하여 관련 요소를 활성화한 후에 나타나는 콘텐츠 부분입니다. 이 역할은 `<div>` (en-US) 요소와 같이 필요한 이름이 없는 요소에 설정할 수 있습니다. `tab`은 컨트롤이며, 접근 가능한 이름이 있어야 합니다. `tabpanel`은 `tab`의 하위(콘텐츠 부분)입니다. `tabpanel`에 `aria-labelledby`를 추가하는 것이 가장 좋습니다.

같이 보기
-----

* ARIA 역할 (en-US)
* ARIA 속성
* 접근성
* 접근성 배우기
스피드 인덱스 (Speed index, SI)
=========================

**스피드 인덱스(Speed index, SI)** 는 페이지의 콘텐츠가 시각적으로 얼마나 빨리 채워지는지를 측정하는 페이지 로드 성능 측정항목입니다. 스피드 인덱스는 뷰포트의 크기에 따라 달라지며 밀리초 단위로 표시됩니다. 시간이 짧을수록 점수가 높아집니다.

스피드 인덱스는 다른 마일스톤 및 지표와 관련된 문제를 해결하고 실제 사용자 경험의 척도를 제공하기 위해 도입되었습니다. 스피드 인덱스는 WebPageTest 및 Lighthouse를 포함한 여러 일반적인 감사에서 구현되었습니다.

스피드 인덱스는 페이지가 시각적으로 완료될 때까지 100ms 간격으로 페이지의 시각적으로 완료된 비율을 계산합니다. 전체 점수는 화면이 시각적으로 완전하지 않은 비율을 초당 10회 개인의 비율로 합산한 것입니다.

 페이즈 로드 이벤트 전에 스크롤 없이 볼 수 있는 콘텐츠가 어떻게 로드되고 스피드 인덱스로 측정되는지 보여주는 다이어그램입니다.

 ![SpeedIndex의 계산](/ko/docs/Glossary/Speed_index/speedindex.png)

같이 보기
-----

* 웹 성능 배우기
렌더링 차단 (Render-blocking)
========================

**렌더링 차단 (Render-blocking)** 은 사용자 인터페이스 렌더링을 차단할 때 웹 사이트를 로드하는 프로세스의 모든 부분을 나타냅니다. 렌더링 차단은 사용자가 사이트와 상호 작용(예, 콘텐츠 보기 또는 컨트롤과 상호 작용)할 수 있을 때까지의 시간을 늘리기 때문에 웹 성능에 좋지 않습니다.

렌더링 차단의 가장 일반적인 원인은 처음에 로드된 CSS 또는 JavaScript 파일입니다.

같이 보기
-----

* CSS 성능 최적화 (en-US)
* JavaScript 성능 최적화 (en-US)
* Speckyboy의 렌더링 차단 리소스란 무엇이며, 렌더링 차단 문제를 해결하는 방법 Speckyboy (2018)
사용자 데이터그램 프로토콜 (User Datagram Protocol, UDP)
============================================

**사용자 데이터그램 프로토콜 (User Datagram Protocol, UDP)** 은 보안과 신뢰성보다 전송 속도와 효율성이 더 중요한 경우 데이터를 전송하기 위해 IP과 함께 오래 사용된 프로토콜입니다.

UDP는 최소한의 프로토콜 메커니즘을 갖춘 간단한 무연결 통신 모델을 사용합니다. UDP는 데이터 무결성을 위한 checksums 및 데이터그램의 소스 및 대상에서 다양한 기능을 처리하기 위한 포트 번호를 제공합니다. UDP에는 핸드셰이킹 대화 수단이 없으므로, 사용자 프로그램이 기본 네트워크의 불안정성에 노출됩니다. 전달, 순서 또는 중복에 관한 보호가 보장되지 않습니다. 네트워크 인터페이스 수준에서 오류 수정 기능이 필요한 경우, 애플리케이션은 이 목적을 가지고 설계된 전송 제어 프로토콜(Transmission Control Protocol, TCP) 또는 스트림 제어 전송 프로토콜(Stream Control Transmission Protocol, SCTP)를 사용할 수 있습니다.

UDP는 오류 확인 및 수정이 필요하지 않거나 애플리케이션에서 수행되는 목적에 적합합니다. UDP는 프로토콜 스택에서 이러한 처리를 인한 오버헤드를 방지합니다. 시간에 민감한 애플리케이션은 UDP를 사용하는 경우가 많습니다. 실시간 시스템에서는 UDP는 옵션이 아닐 수 있는 재전송으로 인해 지연된 패킷을 기다리는 것보다, 패킷 삭제가 더 바람직하기 때문입니다.

같이 보기
-----

* 위키백과의 User Datagram Protocol
* 명세서
사용자 에이전트
========

사용자 에이전트(user agent)는 사용자를 대표하는 컴퓨터 프로그램으로, 웹 맥락에선 브라우저를 의미합니다.

브라우저 외에도, 웹 페이지를 스크랩하는 봇, 다운로드 관리자, 웹에 접근하는 다른앱도 사용자 에이전트입니다. 브라우저는 서버에 보내는 모든 요청에 사용자 에이전트(UA) 문자열이라고 부르는, 자신의 정체를 알리는 `User-Agent` (en-US) HTTP 헤더를 보냅니다. 이 문자열은 보통 브라우저 종류, 버전 번호, 호스트 운영체제를 포함합니다.

스팸 봇, 다운로드 관리자, 일부 브라우저는 자신의 정체를 숨기고 다른 클라이언트인 척 하려고 가짜 사용자 에이전트(UA) 문자열을 보내곤 하며, 이를 사용자 에이전트 스푸핑(spoofing)이라고 말합니다.

클라이언트에서는 JavaScript의 `NavigatorID.userAgent` (en-US) 속성을 통해 사용자 에이전트 문자열에 접근할 수 있습니다.

보통 사용자 에이전트 문자열은 `"Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:35.0) Gecko/20100101 Firefox/35.0"`과 같은 형태입니다.

같이 보기
-----

* 위키백과 사용자 에이전트
* `NavigatorID.userAgent` (en-US)
* 사용자 에이전트를 이용한 브라우저 감지
* RFC 2616, 섹션 14.43: The `User-Agent` header
* Glossary:
    + Browser
* HTTP Headers
    + `User-agent` (en-US)