recursal/MDN huggingface dataset:
패킷 (Packet)
===========

패킷 또는 네트워크 패킷은 네트워크를 통해 전송되는 형식화된 데이터 덩어리입니다. 네트워크 패킷의 주요 컴포넌트는 사용자 데이터와 제어 정보입니다. 사용자 데이터는 '페이로드(payload)'로 알려져 있습니다. 제어정보는 페이로드를 전달하기 위한 정보입니다. 소스와 목적지에 대한 네트워크 주소, 순서 정보, 오류 감지 코드로 구성되며 일반적으로 패킷 헤더와 푸터에서 발견됩니다.

패킷에 포함된 내용
----------

### 홉 제한

홉은 패킷이 한 네트워크에서 다음 네트워크로 전달될 때 발생합니다. 패킷이 통과할 때마다 1씩 감소하는 필드입니다. 홉 제한이 0에 도달하면 전송 작업이 실패하고 패킷이 삭제됩니다.

시간이 지남에 따라 패킷 수로 인해 폐쇄 회로 내에서 횡단이 발생할 수 있고, 순환하는 패킷 수가 증가하여 궁극적으로 네트워킹 실패로 이어질 수 있습니다.

### 오류 감지 및 수정

오류 감지 및 수정은 데이터가 수신기로 전송될 때 발생하는 오류를 감지하고 수정하는 데 사용되는 코드입니다. 오류 수정에는 역방향 오류 수정과 순방향 오류 수정의 두 가지 유형이 있습니다. 역뱡향 오류 수정은 수신자가 발신자에게 전체 데이터 단위를 재전송하도록 요청하는 경우입니다. 순방향 오류 수정은 수신자가 자동으로 오류를 수정하는 오류 수정 코드를 사용하는 것입니다.

송신기에서는, 패킷이 전송되기 전에 계산이 수행됩니다. 대상에서 수신되면 체크섬이 다시 계산되어 패킷의 체크섬과 비교됩니다.

### 우선순위

이 필드는 어떤 패킷이 다른 패킷보다 더 높은 우선순위를 가져야 하는지를 나타냅니다. 높은 우선순위 대기열은 네트워크가 혼잡할 때 낮은 우선순위 대기열보다 더 빨리 비워지게 됩니다.

### 주소

네트워크 패킷을 라우팅할 때 송신 호스트의 소스 주소와 수신 호스트의 대상 주소라는 두 개의 네트워크 주소가 필요합니다.

### 사용자 데이터 - 페이로드

페이로드는 애플리케이션을 대신하여 전달되는 데이터입니다. 일반적으로 네트워크 프로토콜과 때로는 경로의 장비에 의해 설정된 최대 길이까지 가변 길이입니다.

사용된 참고자료
--------

* 네트워크 패킷
* 홉 (네트워크)
* 오류 감지 및 수정 작동 방식
스코프
===

현재 실행되는 컨텍스트를 말한다. 여기서 컨텍스트는 값과 **표현식**이 \*\*"표현"\*\*되거나 참조 될 수 있음을 의미한다. 만약 **변수** 또는 다른 표현식이 "해당 스코프"내에 있지 않다면 사용할 수 없다. 스코프는 또한 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만 반대는 불가하다.

\*\*함수\*\*는 \*\*JavaScript\*\*에서 **클로저** 역할을 하기 때문에 스코프를 생성하므로 함수 내에 정의된 변수는 외부 함수나 다른 함수 내에서는 접근 할 수 없다. 예를 들어 다음과 같은 상황은 유효하지 않다.


```js
function exampleFunction() {
  var x = "declared inside function";
  // x는 오직 exampleFunction 내부에서만 사용 가능.
  console.log("Inside function");
  console.log(x);
}

console.log(x); // 에러 발생
```


그러나 다음과 같은 코드는 변수가 함수 외부의 전역에서 선언되었기 때문에 유효하다.


```js
var x = "declared outside function";

exampleFunction();

function exampleFunction() {
  console.log("Inside function");
  console.log(x);
}

console.log("Outside function");
console.log(x);
```

Learn more
----------

### General knowledge

* Scope (computer science) on Wikipedia
열거형 (Enumerated)
================

컴퓨터 과학에서, **열거형** 타입은 제한된 이름이 있는 값의 모음으로 구성된 데이터 타입입니다.

HTML 열거 속성
----------

HTML에서 열거 속성은 제한된 사전 정의된 텍스트 값 모음이 있는 속성입니다. 예를 들어, 전역 HTML `dir` 속성은 세 가지 유효한 값(`ltr`, `rtl` 및 `auto`)이 있습니다.

열거된 각 속성에는 속성이 값 없이 존재할 경우(값이 누락되는 경우)에 대한 기본값 및 속성에 유효하지 않은 값이 할당될 경우에 대한 기본값이 있습니다. 불리언 HTML 속성과 달리, 이 속성에는 값이 존재하는지, 생략되었는지, 유효하지 않은지에 관계없이 속성이 존재할 때 항상 true입니다. 열거된 HTML 속성을 사용하면, 생략된 값의 기본값이 유효하지 않은 값의 기본값과 다를 수 있습니다.

예를 들어, 전역 HTML `contenteditable` 속성은 두 개의 유효한 키워드( `true` 및 `false`)를 가집니다. 속성이 있지만 값이 설정되지 않은 경우, 값은 `true`입니다. 값이 설정되었지만, 유효하지 않은 경우(`contenteditable="contenteditable"`와 같이), 값은 세 번째 상태인 `inherit`으로 매핑됩니다.

ARIA 열거 속성
----------

ARIA 상태와 속성은 HTML이므로 열거된 속성도 있습니다. ARIA 속성이 열거된 목록에 `true` 및 `false` 값을 모두 포함하는 경우, 일반적으로 생략된 속성은 `false`로, 유효하지 않은 값은 `true`로 처리하는 반면, 빈 문자열이나 생략된 값의 기본값은 속성에 따라 다릅니다.

예를 들어, `aria-current` 속성은 `page`, `step`, `location`, `date`, `time`, `true` 및 `false`를 포함하는 제한된 값 목록을 허용합니다. 이 경우에는, 속성이 없거나, 빈 문자열이거나, 값이 없거나 `aria-current="false"`로 설정된 경우에, 속성은 false이고 사용자에게 노출되지 않습니다. 열거된 값 목록에 없는 비어 있지 않은 문자열 값은 `aria-current="true"`가 설정된 것처럼 처리됩니다.

JavaScript 열거 속성
----------------

JavaScript에서, 열거 가능 속성은 내부 열거 가능 플래그가 true로 설정된 속성입니다. 열거 가능 속성은 단순 할당이나 속성 초기자를 통해 생성된 속성의 기본값입니다. 대부분의 반복 메커니즘(`for...in` 반복문 및 `Object.keys`와 같습니다)은 열거 가능한 키만 접근하게 됩니다.

같이 보기
-----

* 불리언
* JavaScript 데이터 타입과 자료구조
* HTML 표준의 열거 속성
CSS 선택자 (Selector (CSS))
========================

**CSS 선택자**는 규칙이 일치하는 문서의 요소를 설명하는 CSS 규칙의 일부입니다. 일치하는 요소는 규칙에 지정된 스타일이 적용됩니다.

예제
--

이 CSS를 생각해보세요.


```css
p {
  color: green;
}

div.warning {
  width: 100%;
  border: 2px solid yellow;
  color: white;
  background-color: darkred;
  padding: 0.8em 0.8em 0.6em;
}

#customized {
  font:
    16px Lucida Grande,
    Arial,
    Helvetica,
    sans-serif;
}
```


이 선택자들은 `"p"` (`<p>` 요소 내부 텍스트에 녹색을 적용), `"div.warning"` (class `"warning"`이 있는 모든 `<div>` (en-US) 요소는 경고 상자처럼 보임) 및 `"#customized"` (ID가 `"customized"`인 요소의 기본 글꼴을 16픽셀 크기의 Lucida Grande 또는 몇 가지 대체 글꼴 중 하나로 설정) 입니다.

그런 다음, 이 CSS를 다음과 같은 일부 HTML에 적용할 수 있습니다.


```html
<p>This is happy text.</p>

<div class="warning">
  Be careful! There are wizards present, and they are quick to anger!
</div>

<div id="customized">
  <p>This is happy text.</p>

  <div class="warning">
    Be careful! There are wizards present, and they are quick to anger!
  </div>
</div>
```


결과 페이지 콘텐츠의 스타일은 다음과 같습니다.

같이 보기
-----

* CSS 소개에서 CSS 선택자에 대해 더 알아보기
* 기본 선택자
    + 타입 선택자 `elementname`
    + 클래스 선택자 `.classname`
    + ID 선택자 `#idname`
    + 범용 선택자 `* ns|* *|*`
    + 속성 선택자 `[attr=value]`
    + 상태 선택자 `a:active, a:visited`
* 그룹화 선택자
    + 선택자 목록 `A, B`
* 결합자
    + 인접 형제 선택자 `A + B`
    + 일반 형제 선택자 `A ~ B`
    + 자식 선택자 `A > B`
    + 하위 선택자 `A B`
* 의사 요소
    + 의사 클래스 `:`
    + 의사 요소 `::`
레이아웃 뷰포트 (Layout viewport)
==========================

**레이아웃 뷰포트(layout viewport)** 는 브라우저가 웹페이지를 그리는 뷰포트입니다. 본질적으로, 레이아웃 뷰포트는 볼 수 있는 것을 나타내는 반면에, 시각적 뷰포트는 현재 사용자의 디스플레이 장치에 표시되는 것을 나타냅니다.

예를 들어, 핀치 동작(두 개의 손가락으로 안쪽으로 모으는 행위)을 사용해 사이트 콘텐츠를 확대 및 축소할 수 있는 모바일 장치에서 매우 중요한 부분입니다. 렌더링된 문서는 어떤 방식으로도 변경되지 않으므로 사용자가 확대/축소 수준을 조정해도 레이아웃 뷰포트는 동일하게 유지됩니다. 대신에, 시각적 뷰포트가 업데이트되어 볼 수 있는 페이지 영역을 나타냅니다.

같이 보기
-----

* 시각적 뷰포트 API (en-US)
* 위키백과의 뷰포트
* 쿼크모드의 두 가지 뷰포트 이야기
* MDN 용어사전의 뷰포트
* MDN 용어사전의 시각적 뷰포트
XInclude
========

XInclude는 문서에 다른 문서나 일부를 포함할 수 있도록 하는 포함 태그를 정의하는 W3C 권장 사항입니다. 콘텐츠는 다른 XML 파일이나 텍스트 파일에서 포함될 수 있습니다.

XInclude 메커니즘은 주요 브라우저에서 기본적으로 지원되지 않습니다.

같이 보기
-----

* XInclude 표준
* `XPath`
마크업 (Markup)
============

마크업 언어는 텍스트를 정의하고 표현하기 위해 고안된 것입니다. 하이퍼텍스트 마크업 언어 (HyperText Markup Language,HTML)은 마크업 언어의 예입니다.

HTML 파일과 같은 텍스트 파일 내에서, 요소는 콘텐츠의 해당 부분의 목적을 설명하는 태그를 사용하여 '표시'됩니다.

마크업 언어의 종류
----------

**표현적 마크업 (Presentational Markup):**

WYSIWYG을 사용하는 전통적인 워드 프로세싱 시스템에서 사용됩니다(보이는 대로 얻을 수 있습니다). 사용자, 편집자, 작성자가 사람일 경우에는 숨겨져 있습니다.

**순차적 마크업 (Procedural Markup):**

텍스트와 결합되어 프로그램에 텍스트 처리에 대한 지침을 제공합니다. 이 텍스트는 작성자에 의해 수정될 수 있습니다.

**설명적 마크업 (Descriptive Markup):**

프로그램이 문서를 처리하는 방법에 대해 문서 항목에 레이블을 지정합니다. 예를 들어, HTML `<td>` (en-US)은 HTML 테이블의 셀을 정의합니다.

같이 보기
-----

* MDN 웹 문서 용어사전
    + HTML
    + XHTML
    + XML
    + SVG
페이지 로드 시간 (Page load time)
==========================

**페이지 로드 시간(Page load time)** 은 페이지를 로드하는 데 걸리는 시간으로, 탐색 시작 (en-US)부터 로드 이벤트 시작 (en-US)까지 측정됩니다.


```js
let time = performance.timing;

let pageloadtime = time.loadEventStart - time.navigationStart;
```


페이지 로드 시간은 완벽한 웹 성능 지표처럼 들리지만, 그렇지 않습니다. 로드 시간은 장치 기능, 네트워크 상태 및 서버와의 거리에 따라 사용자마다 크게 다를 수 있습니다. 페이지 로드 시간이 측정되는 개발 환경은 사용자의 현실을 반영하지 않는 최적의 환경일 가능성이 높습니다. 또한, 웹 성능은 로드 이벤트가 발생하는 시점에만 국한되지 않습니다. 또한 페이지 로드 시간은 인지된 성능, 응답성, jank 및 지터와 관련이 있습니다.

같이 보기
-----

* 탐색 및 리소스 타이밍 (en-US)
* `PerformanceNavigationTiming` (en-US)
* `PerformanceResourceTiming` (en-US),
렌더링 엔진 (Rendering engine)
=========================

**렌더링 엔진(rendering engine)** 은 화면에 텍스트와 이미지를 그리는 소프트웨어입니다. 엔진은 문서 (종종 HTML)에서 구조화된 텍스트를, 그리고 주어진 선언에 따라 적절한 형식 (종종 CSS에 제공됨)을 지정합니다. 레이아웃 엔진의 예로는 Blink, Gecko, EdgeHTML, WebKit 가 있습니다.

같이 보기
-----

* 위키백과의 웹 브라우저 엔진
* Venkatraman.R - Behind Browsers (Part 1, Basics)
메타데이터 가져오기 요청 헤더 (Fetch metadata request header)
================================================

**메타데이터 가져오기 요청 헤더**는 요청이 시작된 맥락에 대한 추가 정보를 제공하는 HTTP 요청 헤더입니다. 이를 통해 서버는 요청이 어디서 왔는지와 리소스를 어떻게 사용하는지에 따라 요청을 허용할지 여부를 결정할 수 있습니다.

이 정보를 사용하여 서버는 리소스 격리 정책을 구현할 수 있고, 이를 통해 외부 사이트에서는 공유하기로 의도된, 적절하게 사용되는 리소스만 요청할 수 있습니다. 이 접근 방식은 CSRF, 교차 사이트 스크립트 포함(Cross-site Script Inclusion, 'XSSI'), 타이밍 공격 및 교차 출처 정보 유출(cross-origin information leaks)과 같이, 일반적인 교차 사이트 웹 취약점을 완화하는 데 도움이 될 수 있습니다.

이 헤더에는 `Sec-` 접두사가 붙어서, 금지 헤더 목록이 있습니다. 따라서 금지 헤더 목록은 JavaScript가 수정할 수 없습니다.

메타데이터 가져오기 요청 헤더는 아래와 같습니다.

* `Sec-Fetch-Site` (en-US)
* `Sec-Fetch-Mode` (en-US)
* `Sec-Fetch-User` (en-US)
* `Sec-Fetch-Dest` (en-US)

 아래 요청 헤더는 동일한 명세서에 있지 않기 때문에, 엄격히 '메타데이터 가져오기 요청 헤더'는 아니지만, 비슷하게 리소스가 사용되는 방식에 대한 맥락 정보를 제공합니다.
 서버는 이를 사용하여 캐싱 동작 및 반환되는 정보를 수정할 수 있습니다.

* `Sec-Purpose` (en-US) 
Experimental
* `Service-Worker-Navigation-Preload` (en-US)
같이 보기
-----

* web.dev의메타데이터 가져오기를 사용해 웹 공격으로부터 리소스를 보호하세요
* 메타데이터 가져오기 요청 헤더 플레이그라운드 (secmetadata.appspot.com)
* 모든 HTTP 헤더 목록
* 모든 HTTP 헤더 > 메타데이터 가져오기 요청 헤더 목록
* 용어사전
    + Representation 헤더
    + HTTP 헤더
    + Response 헤더
    + Request 헤더
제어 흐름 (Control flow)
====================

'제어 흐름'은 컴퓨터가 스크립트의 명령문을 실행하는 순서입니다.

컴퓨터가 조건문 및 루프아 같이 제어 흐름을 변경하는 (매우 빈번합니다) 구조를 통해 실행되지 않는 한, 코드는 파일의 첫 번재 줄부터 마지막 줄까지 순서대로 실행됩니다.

예를 들어, 웹페이지 양식에서 사용자 데이터의 유효성을 검사하는 데 사용되는 스크립트를 상상해보세요. 스크립트는 검증된 데이터를 제출하지만, 사용자가 필수 입력 필드를 비워두면, 이를 입력하라는 메시지를 표시합니다. 이를 위해서, 스크립트는 조건 구조 또는 `if...else`를 사용하여 양식이 다 채워졌는지 여부에 따라 다른 코드가 실행되도록 합니다.


```js
if (isEmpty(field)) {
  promptUser();
} else {
  submitForm();
}
```


JavaScript 또는 PHP 등의 일반적인 스크립트에는 조건문, 반복문 및 함수를 포함한 많은 제어 구조가 포함되어 있습니다. 이벤트가 발생할 때 스크립트의 일부가 실행되도록 설정할 수도 있습니다.

예를 들어, 위의 인용문은 사용자가 양식에 대해 **제출** 버튼을 클릭할 때 실행되는 함수 내에 있을 수 있습니다. 함수에는 양식의 모든 필드를 반복하여 각 필디를 차례로 확인하는 반복문이 포함될 수도 있습니다. `if` 및 `else` 섹션의 코드를 다시 살펴보면, `promptUser` 및 `submitForm` 줄은 스크립트의 다른 함수에 대한 호출일 수도 있습니다. 보시다시피, 제어 구조는 단 몇 줄의 코드로도 복잡한 처리 흐름을 지시할 수 있습니다.

제어 흐름은 스크립트를 읽을 때 처음부터 끝까지 읽어야 할 뿐만 아니라 프로그램 구조와 실행 순서에 미치는 영향도 살펴봐야 함을 의미합니다.

같이 보기
-----

* 위키백과의 제어 흐름
* MDN의 JavaScript 참조 - 제어 흐름
* MDN의 명령문 (제어 흐름)
전역 스코프 (Global scope)
=====================

프로그래밍 환경에서, '전역 범위'는 다른 모든 범위를 포함하고, 모든 범위에 접근 가능한 스코프입니다.

클라이언트 사이드 JavaScript에서, 전역 범위는 일반적으로 모든 코드가 실행되는 웹 페이지입니다.

같이 보기
-----

* JavaScript 변수 스코프 소개
* 위키백과의 스코프
Three js
========

three.js는 GPU 기반 게임 및 기타 그래픽 기반 앱을 브라우저에서 바로 실행할 수 있는 JavaScript 기반 WebGL 엔진입니다. three.js 라이브러리는 브라우저에서 3D 장면을 그리기 위한 다양한 기능과 API를 제공합니다.

같이 보기
-----

* 위키백과의 Three.js
* three.js 공식 웹사이트
잉크 오버플로우 (Ink overflow)
=======================

상자의 \*\*잉크 오버플로우 (Ink overflow)\*\*는 상자의 테두리 상자 외부에 시각적 효과를 생성하는 상자 부분과 내용을 나타냅니다. 시각적으로만 잉크 오버플로는 상자 모델 속성에 영향을 주지 않으므로, 레이아웃에 영향을 주지 않습니다.

잉크 오버플로는 레이아웃에 영향을 주지 않거나 스크롤 가능한 오버플로 영역을 확장하지 않는 상자 그림자 (en-US), 테두리 이미지, 텍스트 장식, 테두리 등과 같은 페인팅 효과의 오버플로우입니다. 잉크 오버플로는 em 박스 외부로 확장되는 상승 및 하강과 같은 글자의 모양(glyph, 글리프)가 돌출된 현상이기도 합니다.

대체된 요소는 항상 독립적인 서식 컨텍스트를 설정하므로, 대체된 콘텐츠의 오버플로는 항상 잉크 오버플로입니다(스크롤 가능한 오버플로와 반대입니다).

같이 보기
-----

* CSS 오버플로우 모듈 (en-US)
루비 (Ruby)
=========

**루비 (Ruby)** 는 오픈 소스 프로그래밍 언어입니다. 웹 관련 맥락에서, Ruby는 웹사이트/앱을 생성하기 위해 'Ruby On Rails(ROR)' 프레임워크와 함께 서버 사이드에서 자주 사용됩니다.

Ruby는 HTML 문서에서 동아시아 텍스트에 주석을 달아 발음 정보를 제공하는 방법이기도 합니다. `<ruby>` 요소를 참고하세요.

같이 보기
-----

* 위키백과의 Ruby
* Ruby's 공식 웹사이트
* Ruby On Rails' 공식 웹사이트
표준 순서 (Canonical order)
=======================

CSS에서 표준 순서는 별도의 값을 지정(또는 구문 분석)해야 하거나 CSS 속성 값의 일부로 직렬화해야 하는 순서를 참조하는 데 사용됩니다. 표준 순서는 속성의 형식적 문법에 의해 정의되며 일반적으로 단일 단축 값의 일부로 정식 값을 지정해야 하는 순서를 나타냅니다.

예를 들어, `background` 단축 속성 값은 여러 개의 `background-*` 기본 속성으로 구성됩니다. 기본 값의 표준 순서는 다음과 같이 정의됩니다.

1. `background-image`
2. `background-position` (en-US)
3. `background-size` (en-US)
4. `background-repeat`
5. `background-attachment`
6. `background-origin`
7. `background-clip`
8. `background-color`

또한, 해당 문법은 `background-size` (en-US)의 값을 받게 되면, **반드시** `background-position` (en-US)의 값 **뒤에** 슬래시로 구분해서 지정되어야 한다고 정의합니다. 다른 값은 순서에 상관없이 나타날 수 있습니다.

같이 보기
-----

* StackOverflow의 유용한 추가 토론인 CSS 속성과 관련해 "표준 순서"는 무엇을 의미하나요?
* MDN의 CSS 값에 사용되는 공식 문법에 대한 설명
이벤트 (Event)
===========

이벤트는 JavaScript 코드로 수정할 수 있는 DOM 요소에 의해 생성된 리소스입니다.

같이 보기
-----

* MDN의 Event 문서
* 공식 웹사이트
* 위키백과의 DOM 이벤트
XForms
======

**XForms** 은 웹 양식을 작성하고 XML 형식의 양식 데이터를 처리하기 위한 규칙입니다.

**참고:** XForms을 더 이상 지원하는 주요 브라우저는 없습니다. 대신 HTML forms을 사용하는 것이 좋습니다.
예외 (Exception)
==============

\*\*예외(exception)\*\*는 정상적인 코드 실행을 중단하는 조건입니다. JavaScript 문법 에러는 매우 일반적인 예외가 있는 코드입니다.

같이 보기
-----

* 위키백과의 예외 핸들링
스레드 (Thread)
============

컴퓨터 과학의 스레드는 동시에 여러 작업이나 프로그램을 실행하는 것입니다. 코드를 실행할 수 있는 각 단위를 **스레드** 라고 합니다.

**메인 스레드** 는 브라우저에서 사용자 이벤트를 처리하고, 디스플레이를 렌더링 및 페인팅하고, 일반적인 웹 페이지나 앱을 구성하는 대부분의 코드를 실행하는 데 사용되는 스레드입니다. 이러한 일이 모두 하나의 스레드에서 발생하기 때문에, 느린 웹 사이트나 앱 스크립트는 전체 브라우저의 속도를 저하시킵니다. 더 안 좋은 부분은 사이트나 앱 스크립트가 무한 루프에 빠지면 전체 브라우저가 중단된다는 것입니다.

최신 JavaScript는 추가 스레드를 생성하는 방법을 제공하며, 각 스레드는 서로 통신하면서 독립적으로 실행됩니다. 자체 스레드에서 기본 스레드와 동시에 실행되는 하위 프로그램을 분리하는 데 사용할 수 있는 web workers와 같은 기술을 사용해 수행될 수 있습니다. 이러한 기술들로 느리거나 복잡하거나 장기간 실행되는 작업을 메인 스레드와 독립적으로 실행할 수 있으며, 사이트나 앱의 전반적인 성능은 물론 브라우저의 전반적인 성능도 보존할 수 있습니다. 또한, 스레딩을 사용하면 웹 애플리케이션이 최신 멀티 코어 프로세서를 활용할 수 있기 때문에, 단일 코어에서 실행되는 멀티 스레드 애플리케이션보다 훨씬 더 나은 성능을 얻을 수 있습니다.

**service worker** 라는 특별한 유형의 워커를 생성하여 사용자의 허가를 받아 사이트에서 실행할 수 있습니다. 사용자가 현재 해당 사이트를 사용하지 않는 경우에도 마찬가지입니다. 서비스 워커는 사용자가 사이트에 활성 사용자로써 참여하지 않는 동안 어떤 일이 발생하면 사용자에게 알릴 수 있는 사이트를 만드는 데 사용됩니다. 예를 들어, 사용자가 현재 메일 서비스에 로그인하지 않았음에도 새 이메일을 받았다고 알리는 등의 작업을 수행할 수 있습니다.

전반적으로 우리 운영 체제 내의 이러한 스레드는 매우 유용하다는 것을 알 수 있습니다. 이는 컨텍스트 전환 시간을 최소화하고 보다 효율적인 통신을 가능하게 하며 다중 프로세서 아키텍처를 추가로 사용할 수 있도록 해줍니다.

같이 보기
-----

* 비동기 JavaScript
* Web worker API
* Service worker API
* 용어 사전
    + Main thread
통합 개발 환경 (IDE)
==============

**통합 개발 환경 (Integrated Development Environment, IDE)** 또는 대화형 개발 환경은 소프트웨어 개발을 위해 컴퓨터 프로그래머에게 포괄적인 기능을 제공하는 소프트웨어 응용 프로그램입니다. IDE는 일반적으로 소스코드 편집기, 빌드 자동화 도구 및 디버거로 구성됩니다.

같이 보기
-----

* 위키백과의 IDE
Head
====

**Head** 란 HTML 문서의 일부분으로써 해당 문서의 metadata 를 포함하는데, 예를 들면, 저자, 설명, 그리고 HTML에 적용될 수 있는 CSS 또는 JavaScript 파일들로 연결되는 것들이 이에 해당될 수 있습니다.

같이 보기
-----

* MDN에서의 `<head>` 요소 참조
* MDN Learning Area의 The HTML <head> (en-US) 참고
그리드 셀 (Grid Cell)
=================

CSS 그리드 레이아웃에서, \*\*그리드 셀 (Grid Cell)\*\*은 CSS 그리드에 사용할 수 있는 가장 작은 단위입니다. 이는 교차하는 4개의 격자선 사이의 공간이며 개념적으로는 표 셀과 매우 유사합니다.

![그리디의 개별 셀을 보여주는 다이어그램](/ko/docs/Glossary/Grid_Cell/1_grid_cell.png)

그리드 배치 방법 중 하나를 사용해 항목을 배치하지 않으면, 그리드 컨테이너의 바로 밑 자식 요소는 자동 배치 알고리즘에 의해 각 개별 그리드 셀에 하나씩 배치됩니다. 모든 요소를 담을 수 있는 충분한 셀을 만들기 위해 추가 행 또는 열 그리드 트랙이 생성됩니다.

예제
--

이 예제에서는 3개의 열 트랙 그리드를 만들었습니다. 5개의 요소는 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: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```



```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}
```



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

같이 보기
-----

### 속성 참고서

* `grid-template-columns`
* `grid-template-rows` (en-US)
* `grid-auto-rows` (en-US)
* `grid-auto-columns` (en-US)
### 더 읽어보기

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

JavaScript와 같은 프로그래밍 언어에서, 래퍼는 하나 이상의 다른 기능들을 호출하기 위한 기능입니다. 때로는 순전히 편의상, 때로는 프로세스에서 약간 다른 작업을 하도록 조절하는 기능입니다.

예를 들면, AWS용 SDK 라이브러리는 래퍼의 하나의 예제로 들 수 있습니다.

같이 보기
-----

* 위키백과의 래퍼 함수
* MDN 웹 문서 용어 사전
    + API
    + Class
    + Function
의사 코드
=====

의사 코드는 일반적으로 사람에게 일부 코드 구문의 작동 방식을 나타내거나, 코드 아키텍처 항목의 디자인을 설명하는 데 사용되는 코드와 유사한 구문을 나타냅니다. 코드로 실행시키려고 하면 작동하지 **않을 것입니다.**

같이 보기
-----

* 위키백과의 의사 코드
텔레비전 기술자 협회 (Society of Motion Picture and Television Engineers, SMPTE)
=======================================================================

**텔레비전 기술자 협회 (Society of Motion Picture and Television Engineers, SMPTE)** (**SMPTE**) 는 엔터테인먼트 미디어를 제작, 방송, 저장 및 제공하는 데 사용되는 표준과 기술을 개발하고 정의하는 엔지니어와 과학자의 전문 협회입니다.

예를 들어, SMPTE는 현대 디지털 영화관에서 쓰이는 디지털 영화에 사용되는 표준을 정의합니다.
전역 객체
=====

전역 객체는 전역 범위 에 항상 존재하는 객체 를 의미합니다.

JavaScript에선, 전역 객체로 선언된 객체들이 항상 존재합니다. 웹브라우저에서, 스크립트가 `var` 키워드를 통해 전역 변수를 생성할 때, 이 때 생성되는 변수들은 전역 객체의 멤버로서 생성됩니다. (이것은 Node.js 에서는 예외입니다). 전역 객체의 interface는 스크립트가 실행되고 있는 곳의 실행 컨텍스트에 의존합니다. 예를 들어,

* 웹브라우저에 있는 스크립트가 특별히 백그라운드 작업으로 시작하지 않는 코드들은 그것의 전역 객체로써 `Window` 를 가집니다. 이것은 Web에 있는 JavaScript 코드의 상당수가 그렇습니다.
* `Worker` 에서 실행하는 코드는 그것의 전역 객체로서 `WorkerGlobalScope` (en-US) 를 가집니다.
* Node.js 환경에서 실행하는 스크립트에는 전역 객체로 `global`이라는 객체를 가집니다.

`globalThis` 전역 속성을 사용하면 현재 환경에 관계없이 전역 객체에 접근할 수 있습니다.

`var`문 및 상단의 함수 선언 전역 객체에서 만들어지는 속성입니다.

전역 객체의 속성은 global scope에 자동으로 추가됩니다.

JavaScript에서, 전역 객체는 항상 자신에 대한 참조를 가지고 있습니다.

브라우저 에서의 `window` 객체
--------------------

`window` 객체는 브라우저에서 전역 객체입니다. 어느 전역 객체나 함수는 `window` 객체의 프로퍼티로서 접근될 수 있습니다.


```js
console.log(globalThis === globalThis.globalThis); // true (모든 곳에서)
console.log(window === window.window); // true (브라우저에서)
console.log(self === self.self); // true (브라우저 또는 웹 워커에서)
console.log(frames === frames.frames); // true (브라우저에서)
console.log(global === global.global); // true (Node.js에서)
```

같이 보기
-----

* MDN Web Docs Glossary
    + 전역 범위
    + 객체
* `Window`
* `WorkerGlobalScope` (en-US)
* `global`
TCP 느린 시작 (TCP slow start)
==========================

TCP 느린 시작은 네트워크 성능에 대한 전송 속도를 높이는 데 도움이 됩니다. 처음에는 해당 기능이 무엇인지 알지 못하고 혼잡을 일으키지 않고 이 작업을 수행합니다. TCP 느린 시작은 패킷 전송에 사용 가능한 대역폭을 감지하고 네트워크 연결 속도의 균형을 맞추는 데 사용되는 알고리즘입니다. 초기에 기능을 알 수 없는 네트워크 혼잡 현상을 방지하고, 네트워크의 최대 용량을 찾을 때까지 확산되는 정보의 양을 천천히 늘립니다.

TCP 느린 시작을 구현하기 위해, 혼잡 창('cwnd')은 확인('ACK')을 수신하기 전에 소스가 네트워크를 통해 전송할 수 있는 데이터 양에 대한 상한을 설정합니다. 느린 시작 임계값('ssthresh')은 느린 시작의 (비)활성화를 결정합니다. 새로운 연결이 이루어지면 cwnd는 하나의 TCP 데이터 또는 확인 패킷으로 초기화되고 확인 또는 ACK를 기다립니다. 해당 ACK가 수신되면, 'cwnd'가 'ssthresh'보다 커질 때까지 혼잡 창이 증가됩니다. 혼잡이 발생하면 느린 시작도 종료됩니다.

혼잡 제어
-----

혼잡 자체는 메시지 트래픽이 너무 많아 네트워크 응답 시간이 느려질 때 네트워크 계층 내에서 발생하는 상태입니다. 서버는 TCP 패킷으로 데이터를 보내고, 사용자의 클라이언트는 확인 또는 ACK를 반환하여 전달을 확인합니다. 하드웨어 및 네트워크 상태에 따라 연결 용량이 제한됩니다. 서버가 너무 많은 패킷을 너무 빨리 보내면 해당 패킷이 삭제됩니다. 즉, 확인이 없을 것입니다. 서버는 이를 누락된 ACK로 등록합니다. 혼잡 제어 알고리즘은 전송된 패킷과 ACK의 흐름을 사용하여 전송 속도를 결정합니다.

같이 보기
-----

* 페이지 채우기: 브라우저 작동 방식
* http 개요
Card sorting
============

카드 정렬은 정보 아키텍처에서 사용되는 간단한 기술로, 웹 사이트(또는 다른 제품) 디자인에 참여한 사람들이 제품에 대해 느끼는 콘텐츠 / 서비스 / 기능을 작성하도록 초대됩니다. 제품이 해당 기능을 포함하고 카테고리나 그룹으로 이러한 기능들을 구성하고 있어야 합니다. 예를 들어, 웹사이트의 각 페이지에 어떤 내용이 들어가야 하는지 알아내는 데 사용할 수 있습니다. 이 용어의 이름은 카드 정렬이 문자 그대로 카드에 항목을 쓴 다음, 카드를 더미로 배열하여 수행되는 경우가 많다는 사실에서 유래되었습니다.

같이 보기
-----

* 위키백과의 카드 정렬
Localization
============

**현지화**(**l10n**)는 소프트웨어 사용자 인터페이스를 특정 문화에 적응시키는 과정입니다.

다음은 고려해야 할 일반적인 요인입니다.

* 언어
* 측정 단위 (e.g., 유럽에서 킬로미터, U.S.에서 마일)
* 텍스트 입력 방향 (e.g., 유럽 언어는 왼쪽에서 오른쪽, 아라비아 표기법 오른쪽에서 왼쪽으로 입력됨)
* 라틴 문자의 대문자 사용 (e.g., 영어는 평일에 대해서는 대문자를 사용하고, 스페인어는 소문자를 사용합니다).
* 관용어의 적응 (e.g., "Raining cats and dogs"는 문자 그대로 번역하면 의미가 없습니다).
* 레지스터의 사용 (e.g., 일본어에서 공손한 말투는 일상적인 말투와 유난히 다릅니다).
* 숫자 형식 (e.g., 독일이 10 000,00 vs U.S에서 10,000.00).
* 날짜 형식
* 통화
* 문화적 참고자료
* 종이 크기
* 색채심리학
* 현지 법규 준수
* 현지 공휴일
* 개인 이름
같이 보기
-----

* 위키피디아의 Localization
최초 의미있는 페인트 (First Meaningful Paint, FMP)
=========================================

**최초 의미있는 페인트(FMP)** 이후에 웹 페이지 초기 렌더링 직후 기본 화면 레이아웃(above-the-fold)이 변경되고, 웹 글꼴이 로드됩니다. FMP 이후에 사용자는 웹 페이지를 유용하다고 느낄 수 있습니다.

FMP는 페이지 로드의 작은 차이에도 매우 민감합니다. 이로 인해 일관되지 않은(이중적인) 결과가 발생할 수 있습니다. 측정항목에 대한 정의는 브라우저 별 구현 세부정보에 의존합니다. 즉, 표준화할 수 없고 모든 웹 브라우저에서 구현되지 않았습니다.

**경고:** 최초 의미있는 페인트 (FMP)는 Lighthouse 6.0부터 지원되지 않습니다. 앞으로는 대신, LargestContentfulPaint API 사용을 고려해주세요.

같이 보기
-----

* 최초 콘텐트풀 페인트
* 최대 콘텐트풀 페인트
접근성 트리
======

**접근성 트리**는 대부분의 HTML 요소에 대한 정보와 관련된 접근성을 포함합니다.

브라우저는 마크업을 DOM tree (en-US)로 불리는 내부적인 표현으로 전환시킵니다. DOM 트리는 모든 마크업의 요소, 특성, 텍스트 노드를 표현하는 객체들을 포함합니다. 그 다음 브라우저는 DOM 트리에 기반된 접근성 트리를 생성합니다. 이 트리는 플랫폼별 접근성 API에서 스크린 리더와 같은 보조 기술이 이해할 수 있는 표현을 제공하기 위해 사용됩니다.

접근성 트리 객체에는 4가지 속성들이 있습니다.

**이름**

이것을 어떻게 나타내야 합니까? 예를 들어, "더 읽기" 텍스트가 있는 링크는 "더 읽기"가 이름입니다. (이름들이 접근 가능한 이름과 설명 계산 사양에서 계산되는 방법에 대해 더 알아보기)

**설명**

이름 이상으로 더 많은 설명을 제공하고 싶으면, 이것을 어떻게 설명해야 합니까? 테이블의 설명은 테이블이 포함하는 정보의 종류로 설명할 수 있습니다.

**역할** (en-US)

이것의 종류는 무엇입니까? 예를 들어, 버튼, 탐색 모음 혹은 아이템들의 목록입니까?

**상태**

이것이 상태를 가집니까? 예제들로 선택 또는 선택 해제된 체크박스, 접기 또는 확장된 `<summary>` (en-US) 요소를 포함합니다.

추가적으로, 접근성 트리는 주로 요소와 함께 수행될 수 있는 것에 대한 정보를 포함합니다. 링크를 '추적'하거나 텍스트 인풋을 '입력'할 수 있습니다.

2022년 4월 기준 아직은 초안 형태이나 웹 인큐베이터 커뮤니티 그룹(Web Incubator Community Group)에서 접근성 시멘틱들을 더 쉽게 표현하고 계산된 접근성 트리에 읽기 접근을 허용하는 API들을 만들어내기 위한 **접근성 객체 모델 (AOM)** 도 있습니다.

같이 보기
-----

* 용어 사전
    + 접근성
    + ARIA
Brotli
======

**Brotli**은 범용 무손실 압축 알고리즘입니다.

LZ77 알고리즘의 최신 변형, 허프만 코딩 및 2차 컨텍스트 모델링을 결합하여 데이터를 압축하며, 현재 사용 가능한 최고의 범용 압축 방법과 비교할 수 있는 압축 비율을 제공합니다. Brotli는 gzip보다 더 나은 압축 비율을 제공하며 압축하는 데 드는 속도는 비슷하지만, brotli 압축은 Gzip 압축보다 느린 과정이므로, gzip이 캐시 가능한 컨텐츠를 압축하는 데 있어서 더 나은 옵션일 수 있습니다.

Brotli은 대부분의 최신 브라우저와 호환되지만, 대안을 고려할 수도 있습니다.

같이 보기
-----

* brotli.org
* Brotli GitHub 리포지토리
* Brotli on Wikipedia
* Caniuse의 Brotli
Grid Axis
=========

CSS 그리드 레이아웃은 '행' 및 '열' 방향의 콘텐츠 레이아웃을 가능하게 하는 2차원 레이아웃을 표시하는 방법입니다. 따라서, 모든 그리드에는 '블록 또는 열 방향의 축' 또는 '인라인 또는 행 방향의 축'이라는 2개의 축이 있습니다.

이러한 축을 따라 상자 정렬 명세서 (en-US)에 정의된 속성을 사용하여 항목을 정렬하고 맞출 수 있습니다.

CSS에서 '블록 또는 열 방향의 축'은 텍스트 블록을 배치할 때 사용되는 축입니다. 두 개의 단락이 있고, 오른쪽에서 왼쪽으로, 위에서 아래로 흐르는 언어 방향으로 작업하는 경우 , 블록 축에서 하나가 다른 단락 아래에 배치됩니다.

![CSS 그리드 레이아웃의 블록 축을 보여주는 다이어그램](/ko/docs/Glossary/Grid_Axis/7_block_axis.png)

'인라인 또는 행 방향의 축'은 블록 축을 가로질러 실행되며 일반 텍스트가 흐르는 방향입니다. 이것은 CSS 그리드 레이아웃의 행입니다.

![CSS 그리드 레이아웃의 인라인 축을 보여주는 다이어그램](/ko/docs/Glossary/Grid_Axis/7_inline_axis.png)

이러한 축의 물리적 방향은 문서의 쓰기 모드 (en-US)에 따라 변경될 수 있습니다.

같이 보기
-----

* CSS 그리드 레이아웃 안내서: 그리드 레이아웃의 기본 개념
* CSS 그리드 레이아웃 안내서: 그리드 레이아웃의 상자 정렬 (en-US)
* CSS 그리드 레이아웃 안내서: 그리드, 논리값 및 쓰기 모드 (en-US)
값 (Value)
=========

데이터 또는 해당 데이터 주변의 객체 **래퍼** 맥락에서, 값은 객체 래퍼에 포함된 **기본 값** 입니다. **변수** 또는 **속성** 맥락에서, 값은 기본 값이거나 **객체 참조** 일 수 있습니다.

CSS 속성 값의 맥락에는, 지정된 값, 계산된 값, 실제 값이 있습니다. 모든 요소와 의사 요소에 적용되는 모든 CSS 속성의 최종 값은 4단계를 통한 계산의 결과입니다. 이 값은 명세서(지정된 값)를 통해 결정된 다음, 상속에 사용되는 값(계산된 값)으로 해석됩니다. 그 후에 필요한 경우 절대값(사용된 값)으로 변환되고, 최종적으로 로컬 환경(실제 값 (en-US))의 제한에 따라 변환됩니다.

CSS 데이터 타입은 CSS 값 및 단위를 참조하세요.

같이 보기
-----

* 위키백과의 원시 래퍼 클래스
General 헤더
==========

**General 헤더**는 HTTP 헤더를 가리키는 데 사용되는 구식 용어로, 요청 메시지와 응답 메시지 모두에 사용할 수 있지만 콘텐츠 자체에는 적용되지 않습니다(콘텐츠에 적용된 헤더는 entity header라고 했습니다). 헤더가 사용되고 있는 컨텍스트에 따라, general 헤더는 response 또는 request 헤더일 수 입니다(e.g. `Cache-Control`).

**참고:** 현재 버전의 HTTP/1.1 명세에서는 헤더를 "일반 헤더"로 구체적으로 분류하지 않습니다. 이제 컨텍스트에 따라 간단히 response 또는 request 헤더라고 합니다.
가변 벡터 도형 (SVG)
==============

*Scalable Vector Graphics* (**SVG**)는 XML 신텍스에 기반을 둔 2D 벡터 이미지 형식(포맷)이다.

W3C는 1990년 후반부터 SVG를 사용하기 시작했지만, SVG를 지원하는 Internet Explorer 9가 출시된 후에야 널리 사용되기 시작했다. 현재 주요 웹브라우저(browsers)들은 SVG를 지원한다.

XML 신텍스를 기반으로 한 SVG는 CSS를 통해 스타일 처리가 가능하고, JavaScript(JavaScript)를 사용해 상호소통이 가능하다. 현재 HTML5는 SVGtags가 HTML문서에서 직접 사용 되도록 지원한다.

벡터 이미지 형식 (vector image format)으로써, SVG 그래픽은 무한정적인 크기를 가질 수 있고, 이러한 점 때문에 어떠한 화면 크기에도 적용 가능한 인터페이스 요소와 그래픽을 만들 수 있어 반응형 디자인(responsive design (en-US)) 에서 아주 유용하게 여겨진다. 또한 SVG는 클리핑(clipping), 마스킹(masking), 필터(filter), 애니매이션(animation) 등 여러가지 유용한 툴 셋들을 제공한다.

더보기
---

### 일반 상식

* SVG 위키피디아
### SVG 배우기

* W3.org's SVG Primer
### 기술 정보

* SVG documentation on MDN
* Latest SVG specification
주축
==

플렉스박스에서, 주축이란 `flex-direction` 속성이 지정한 방향과 수평한 축입니다. `flex-direction`은 다음과 같은 네 가지 방향이 가능합니다.

* `row`
* `row-reverse`
* `column`
* `column-reverse`

`row` 또는 `row-reverse`를 선택한 경우, 주축은 행을 따라 인라인 방향으로 진행합니다.

![이 이미지에서 flex-direction is 행을 주축을 형성하는 행입니다](/ko/docs/Glossary/Main_Axis/basics1.png)

`column` 또는 `column-reverse`인 경우, 주축은 페이지의 위에서 아래, 블록 방향으로 진행합니다.

![컨테이너의 전체 너비를 차지하는 3개의 플렉스 항목이 코드 순서대로 다른 항목 아래에 표시됩니다. Flex-direction은 열로 설정됩니다(주축은 수직, 즉, 위에서 아래로)](/ko/docs/Glossary/Main_Axis/basics2.png)

아이템의 `flex` 속성을 통하면, 컨테이너의 사용 가능한 공간을 그 아이템에 더 할당하는 방식으로 주축 방향 크기를 키울 수 있습니다. 아니면 `justify-content` 속성을 사용해 아이템 사이와 주위 여백을 조절할 수 있습니다.

주 축에서는 항목의 `flex` 속성을 통해 항목 자체에 사용 가능한 공간을 추가하여 플렉스 항목의 크기를 제어할 수 있습니다. 또는, `justify-content` 속성을 사용하여 항목 사이와 항목 주위의 공간을 제어할 수 있습니다.

같이 보기
-----

### 속성 참고서

* `flex-basis`
* `flex-direction`
* `flex-grow`
* `flex-shrink`
* `justify-content`
* `flex`
### 더 읽어보기

* CSS Flexbox Guide
    + Flexbox 기본 개념
    + flex container의 항목 배치
    + 주 축을 따라 flex 항목의 비율 제어하기 (en-US)
보안 컨텍스트 (Secure Context)
========================

**보안 컨텍스트(secure context)** 는 특정 최소 인증 및 기밀 표준이 충족되는 `Window` 또는 `Worker` 입니다. 많은 웹 API 및 기능은 보안 컨텍스트에서만 접근할 수 있으므로 악성 코드에 의한 오용 가능성이 줄어듭니다.

자세한 정보는 Web > Security > Secure Contexts을 참조하세요.
DSL
===

**DSL**라는 용어는 상황에 따라 여러가지 의미를 가질 수 있습니다. 다음을 참조하세요.

도메인 특화 언어 (Domain-Specific Language, DSL)
\*\*도메인 특화 언어 (DSL)\*\*은 응용 프로그램 도메인 내의 특정 문제를 해결하도록 설계된, 제한된 범위의 컴퓨터 언어 유형입니다.
디지털 가입자 회선 (Digital Subscriber Line, DSL)
**디지털 가입자 회선**은 전화선을 통해 유선 데이터 전송을 보내는 광대역 인터넷 연결 유형입니다.
같이 보기
-----

* 위키백과의 DSL