유럽 컴퓨터 제조업 협회 (European Computer Manufacturers Association, ECMA) - MDN Web Docs 용어 사전: 웹 용어 정의

유럽 컴퓨터 제조업 협회 (European Computer Manufacturers Association, ECMA)
=================================================================

\*\*유럽 컴퓨터 제조업 협회 (European Computer Manufacturers Association, ECMA)\*\*는 컴퓨터 하드웨어, 통신 및 프로그래밍 언어의 표준을 개발하는 비영리 조직입니다.

웹에서는 JavaScript 언어의 핵심 명세인 ECMA-262 명세서 (aka. ECMAScript)를 관리하는 기관으로 유명합니다.

같이 보기
-----

* 위키백과의 Ecma 인터내셔널
* Ecma 인터내셔널 웹사이트


스모크 테스트 (Smoke Test) - MDN Web Docs 용어 사전: 웹 용어 정의

스모크 테스트 (Smoke Test)
====================

스모크 테스트는 중요한 소프트웨어 기능에 대한 기능 테스트 또는 단위 테스트로 구성됩니다. 스모크 테스트는 심층적인 추가 테스트보다 먼저 수행됩니다.

스모크 테스트는 아래와 같은 질문에 대답합니다.

* 프로그램이 제대로 시작되나요?
* 메인 컨트롤 버튼이 작동하나요?
* 단순한 비어있는 새 테스트 사용자 계정을 저장할 수 있나요?

이러한 기본 기능이 실패하면, 이 단계에서 더 자세한 QA 작업에 시간을 투자할 이유가 없습니다.

같이 보기
-----

* 위키백과의 스모크 테스팅 (소프트웨어)


사이트 맵 (Site map) - MDN Web Docs 용어 사전: 웹 용어 정의

사이트 맵 (Site map)
================

**사이트 맵(site map 또는 sitemap)** 은 웹사이트 페이지 목록입니다.

사이트 페이지의 구조화된 목록은 검색 엔진과 같은 웹 크롤러가 따라가야 할 링크를 제공하여 검색 엔진 최적화에 도움이 됩니다. 또한 사이트 맵은 사이트 콘텐츠의 개요를 한 눈에 제공하여 사용자의 사이트 탐색을 도와줍니다.


그리드의 선 (Grid Lines) - MDN Web Docs 용어 사전: 웹 용어 정의

그리드의 선 (Grid Lines)
===================

\*\*그리드의 선(Grid Lines)\*\*은 CSS 그리드 레이아웃을 사용하여 명시적인 그리드에 트랙을 정의하면 생성됩니다.

예제
--

아래 예에는 3개의 열 트랙과 2개의 행 트랙이 있는 그리드가 있습니다. 그러면 4개의 열 그리드 선과 3개의 행 그리드 선이 제공됩니다.
```

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

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

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

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

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

줄 번호를 사용하여 줄의 주소를 지정할 수 있습니다. 영어와 같이 왼쪽에서 오른쪽으로 읽는 언어에서는 1번 줄 열이 그리드 왼쪽에 있고 1번 줄 행이 맨 위에 있습니다. 줄 번호는 문서의 쓰기 모드를 따릅니다. 예를 들어, 오른쪽에서 왼쪽으로 쓰는 언어에서는 1번 줄 열이 그리드 오른쪽에 있습니다. 아래 이미지는 언어가 왼쪽에서 오른쪽이라고 가정할 때 그리드의 줄 번호를 보여줍니다.

![번호가 있는 선이 있는 그리드를 보여주는 다이어그램](/ko/docs/Glossary/Grid_Lines/1_diagram_numbered_grid_lines.png)

'명시적 그리드' 외부에 위치한 콘텐츠를 유지하기 위해 암시적 트랙이 만들어질 때 '암시적 그리드'에도 줄이 생성되지만, 이러한 줄은 숫자로 처리할 수 없습니다.

줄 번호별로 항목을 그리드에 배치
------------------

그리드를 생성한 후, 요소를 줄 번호별로 그리드에 배치할 수 있습니다. 아래 예제에서는 요소가 1번 줄 열에서 3번 줄 열까지, 1번 줄 행에서 3번 줄 행까지 배치됩니다.
```

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

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

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

```html
<div class="wrapper">
  <div class="item">Item</div>
</div>
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
}
.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}
```

이름을 지정하는 줄
----------

'명시적 그리드'에 생성된 라인을 트랙 크기 정보 앞이나 뒤에 대괄호 안에 이름을 추가하여 이름을 지정할 수 있습니다. 요소를 배치할 때, 아래에 설명된 것처럼, 줄 번호 대신 이 이름을 사용할 수 있습니다.
```

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

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

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

```html
<div class="wrapper">
  <div class="item">Item</div>
</div>
```

```css
.wrapper {
  display: grid;
  grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [cols-end];
  grid-template-rows: [row1-start] 100px [row2-start] 100px [rows-end];
}
.item {
  grid-column-start: col1-start;
  grid-column-end: col3-start;
  grid-row-start: row1-start;
  grid-row-end: rows-end;
}
```

같이 보기
-----

### 속성 참고서

* `grid-template-columns`
* `grid-template-rows` (en-US)
* `grid-column-start` (en-US)
* `grid-column-end` (en-US)
* `grid-column` (en-US)
* `grid-row-start` (en-US)
* `grid-row-end` (en-US)
* `grid-row` (en-US)
### 더 읽어보기

* CSS 그리드 레이아웃 안내서:
    + 그리드 레이아웃의 기본 개념
    + CSS 그리드를 사용한 줄을 기반으로 하는 배치
    + 이름 있는 그리드 선을 사용한 레이아웃
    + CSS 그리드, 논리적 값 및 쓰기 모드 (en-US)
* CSS 그리드 레이아웃 명세서의 그리드 선 정의


Crawler - MDN Web Docs 용어 사전: 웹 용어 정의

Crawler
=======

웹 크롤러(web crawler)는 웹 페이지에서 데이터를 수집하기 위해 Web을 체계적으로 탐색하는 프로그램입니다. 웹 크롤러는 종종 봇 또는 로봇이라고 합니다. 일반적으로 검색 엔진(예: Google, Bing 등)은 크롤러를 사용하여 인덱스를 구축합니다.

같이 보기
-----

* 위키피디아의 웹 크롤러
* Search engine (용어 사전)


Glyph - MDN Web Docs 용어 사전: 웹 용어 정의

Glyph
=====

\*\*글리프(Glyph)\*\*는 하나 이상의 문자를 시각적으로 표현하기 위해 타이포그래피에서 사용되는 용어입니다.

웹 사이트에서 사용되는 글꼴에는 글꼴의 문자를 나타내는 다양한 글리프 모음이 포함되어 있습니다.

같이 보기
-----

* 위키백과의 글리프
* Quora의 글리프, 문자 및 문자소


첫 사용에 대한 신뢰 (Trust On First Use, TOFU) - MDN Web Docs 용어 사전: 웹 용어 정의

첫 사용에 대한 신뢰 (Trust On First Use, TOFU)
======================================

**첫 사용에 대한 신뢰 (Trust On First Use, TOFU)** 는 클라이언트가 알 수 없는 서버와 신뢰 관계를 생성해야 하는 보안 모델입니다. 이를 위해, 클라이언트는 로컬에 저장된 식별자(예, 공개 키)를 찾습니다. 식별자가 발견되면, 클라이언트는 연결을 설정할 수 있습니다. 식별자가 발견되지 않으면, 클라이언트는 사용자에게 클라이언트가 식별자를 신뢰해야 하는지 결정하라는 메시지를 표시할 수 있습니다.

TOFU는 브라우저가 리디렉션 규칙을 따르는 `Strict-Transport-Security` (HSTS)의 SSH 프로토콜에서 사용됩니다.

같이 보기
-----

* 위키백과의 TOFU


가상 클래스 (Pseudo-class) - MDN Web Docs 용어 사전: 웹 용어 정의

가상 클래스 (Pseudo-class)
=====================

CSS에서, **가상 클래스(pseudo-class)** 선택자는 문서 트리의 정보가 아닌 상태에 따라 요소를 대상으로 합니다. 예를 들어, `a``:visited` 선택자는 사용자가 이미 방문한 링크에만 스타일을 적용합니다.

같이 보기
-----

* 가상 클래스 문서


WCAG - MDN Web Docs 용어 사전: 웹 용어 정의

WCAG
====

**웹 콘텐츠 접근성 지침(Web Content Accessibility Guidelines, WCAG)** 는 W3C의 웹 접근성 표준 그룹에서 게시한 권장 사항입니다. WCAG는 주로 장애가 있는 사용자뿐만 아니라 휴대폰과 같이 리소스가 제한된 장치에서도 콘텐츠에 접근할 수 있도록 하기 위한 일련의 지침을 간략히 설명합니다.

WCAG 1.0을 대체하는 WCAG 2.0은 2008년 12월 11일 W3C 권장 사항으로 게시되었습니다. WCAG 2.0은 4가지 원칙(인식 가능, 실행 가능, 이해 가능 및 견고함)으로 구성된 12가지 지침으로 이루어져 있고, 각 지침에는 테스트 가능한 성공 기준이 존재합니다.

WCAG 세 가지 수준의 적합성을 사용합니다.

* 우선순위 1: 웹 개발자는 **반드시** 이러한 요구사항을 충족해야 합니다. 그렇지 않으면 하나 이상의 그룹이 웹 콘텐츠에 접근하는 것이 불가능합니다. 이 수준에 대한 적합성은 A입니다.
* 우선순위 2: 웹 개발자는 이러한 요구사항을 **충족해야** 합니다. 그렇지 않으면 일부 그룹에서는 웹 콘텐츠에 접근하기 어려울 것입니다. 이 수준에 대한 적합성은 AA 또는 Double-A가 됩니다.
* 우선순위 3: 일부 그룹이 웹 콘텐츠에 더 쉽게 접근할 수 있도록, 웹 개발자는 이러한 요구 사항을 **충족**할 수 있습니다. 이 수준에 대한 적합성은 AAA 또는 Triple-A로 설명됩니다.

WCAG 2.2 및 WCAG 3.0에 대한 작업이 진행 중에 있습니다.

같이 보기
-----

* 위키백과의 WCAG
* MDN의 접근성 정보 (en-US)
* W3C의 The WCAG 2.0 권고안
* 웹 콘텐츠 접근성 지침 2.2: 후보 권고안
* 웹 콘텐츠 접근성 지침 3.0: 초안


전송 계층 보안 (TLS) - MDN Web Docs 용어 사전: 웹 용어 정의

전송 계층 보안 (TLS)
==============

이전에 Secure Sockets Layer (SSL)로 알려진 **Transport Layer Security** (**TLS**)는 어플리케이션들이 네트워크 상에서 안전하게 통신하기 위해 사용된 프로토콜이며, 이메일, 웹 브라우징, 메시징, 그리고 다른 프로토콜들의 감청을 통한 정보의 변형을 방지합니다. SSL과 TLS 모두 네트워크 상에서 보안을 제공하는 암호화 프로토콜을 사용해 네트워크에 보안을 제공함으로써 통신 개인정보 보호를 보장하는 클라이언트 / 서버 프로토콜입니다. 서버와 클라이언트가 TLS로 통신을 할때, 어떠한 제 3자도 메시지를 변형시키거나 감청할 수 없도록 합니다.

모든 최신 브라우저들은 안전한 연결을 하기 위해서 서버가 자신의 신원을 확인하는 유효한 디지털 인증서를 제공하도록 요구하는 TLS 프로토콜을 지원합니다. 클라이언트와 서버 둘 다 각자 개별 디지털 인증서를 제공하면, 서로를 상호 인증해줄 수 있습니다.

**참고:** TLS 1.0 와 1.1은 2020년 초부터 대부분의 브라우저에서 지원하지 않을 예정입니다. 웹 브라우저가 TLS 1.2 나 TLS 1.3을 지원하는지 확인해보는 것이 좋습니다. Firefox는 버전 74 이후로 구 TLS 버전을 사용해서 서버에 연결을 시도할 경우 보안 연결 실패 오류를 반환합니다(Firefox bug 1606734).

같이 보기
-----

* 위키백과의 전송 계층 보안
* RFC 8446 (The Transport Layer Security Protocol, Version 1.3)
* RFC 5246 (The Transport Layer Security Protocol, Version 1.2)
* 전송 계층 보안
* OWASP: Transport Layer Protection Cheat Sheet
* 용어 사전
    + HTTPS
    + SSL


버퍼 (Buffer) - MDN Web Docs 용어 사전: 웹 용어 정의

버퍼 (Buffer)
===========

버퍼(Buffer)는 데이터가 한 곳에서 다른 곳으로 전송되는 동안 데이터를 임시로 저장하는 데 사용되는 물리적 메모리의 저장소입니다.

같이 보기
-----

* 위키백과의 데이터 버퍼


프로토콜 - MDN Web Docs 용어 사전: 웹 용어 정의

프로토콜
====

**프로토콜**은 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계입니다. 기기 간 통신은 교환되는 데이터의 형식에 대해 상호 합의를 요구합니다. 이런 형식을 정의하는 규칙의 집합을 프로토콜이라고 합니다.

같이 보기
-----

* 위키백과 통신 프로토콜
* RFC 공식 인터넷 프로토콜 표준
* HTTP 개요
* 용어사전:
    + TCP
    + Packet


비표준 (Non-normative) - MDN Web Docs 용어 사전: 웹 용어 정의

비표준 (Non-normative)
===================

소프트웨어 명세는 종종 독자가 명세서를 더 잘 이해하도록 도와주거나, 예제와 모범 사례를 보여주기 위해 제공되는 **비표준(non-normative)** 또는 '정보성'으로 표시된 정보가 포함되는 경우가 많습니다. 명세서의 비표준 부분은 지침으로 제공되며, 공식 명세서의 일부로 간주되지 않습니다. 명세서의 공식 부분을 포함하는 섹션은 종종 표준으로 표시됩니다.

같이 보기
-----

* WHATWG 위키의 표준 콘텐츠 및 정보성 콘텐츠에 대한 설명


암호문 (Ciphertext) - MDN Web Docs 용어 사전: 웹 용어 정의

암호문 (Ciphertext)
================

암호학에서, 암호문은 정보를 전달하는 섞여있는 메시지이지만, 맞는 암호 및 비밀(보통 키)을 통해 복호화하여 평문으로 복구하지 않으면 읽을 수 없습니다. 암호문의 보안, 즉 포함된 정보의 안전성은 보안 암호 사용 및 키 비밀 유지에 달려있습니다.

같이 보기
-----

* 위키백과의 암호문


URN - MDN Web Docs 용어 사전: 웹 용어 정의

URN
===

통합 자원 이름(Uniform Resource Name, URN)은 위치나 존재 여부를 지정하지 않고, 리소스를 참조하는 표준 형식의 URI입니다. 다음 예제는 RFC3986에서 가져왔습니다. `urn:oasis:names:specification:docbook:dtd:xml:4.1.2`

같이 보기
-----

* 위키백과의 URN


표현 헤더 (Representation header) - MDN Web Docs 용어 사전: 웹 용어 정의

표현 헤더 (Representation header)
=============================

**표현 헤더 (representation header)** 는 HTTP 메시지 본문으로 전송된 리소스의 특정 '표현'을 설명하는 HTTP 헤더입니다.

 표현은 특정 리소스의 다양한 형태입니다.
 예를 들어, 동일한 데이터가 XML 또는 JSON과 같은 특정 미디어 타입으로 형식화되거나, 작성된 언어 또는 지리적 지역으로 지역화되거나, 전송을 위해 압축되거나 인코딩될 수 있습니다.
 기본 리소스는 각 경우에 동일하지만, 표현은 다릅니다.

클라이언트는 콘텐츠 협상(content negotiation) (`Accept-*` 헤더 사용) 중에 전송되기를 선호하는 형식을 지정하고, 표현 헤더는 실제로 수신한 '선택된 표현'의 형식을 클라이언트에게 알려줍니다.

표현 헤더는 HTTP 요청과 응답 메시지 모두에 존재할 수 있습니다. `HEAD` 요청에 대한 응답으로 전송되면, 리소스가 실제로 요청된 경우 '선택될' 본문 컨텐츠를 설명합니다.

표현 헤더는 `Content-Type`, `Content-Encoding`, `Content-Language` 및 `Content-Location`를 포함합니다.

같이 보기
-----

* RFC 9110, section 3.2: Representations
* 모든 HTTP 헤더의 목록
* Payload header
* Entity header
* `Digest` (en-US)/ `Want-Digest` (en-US)


MIME type - MDN Web Docs 용어 사전: 웹 용어 정의

MIME type
=========

과거에는 **MIME type**으로 불렸지만 지금은 "media type"으로 사용한다. 때때로는 "content type"이라고도 불리기도 한다. **MIME type**은 파일의 형식을 나타내는 문자열로 파일과 같이 송신되는데 content의 형식을 나타내기 위해 사용한다. 예를 들면 오디오 파일은 audio/ogg로 그림 파일은 image/png로 분류할 수 있다.

윈도우에서 사용하는 파일 확장자와 동일한 역할을 한다. **MIME type**이라는 명칭은 이메일에서 사용된 MIME standard에서 유래 됐다.

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

### General knowledge

* 미디어 타입 on Wikipedia
### 기술적인 참고

* MIME type의 종류
* 서버 MIME Type을 적절하게 설정하는 방법 (en-US)
* Web context에서 MIME Types을 사용하기 위한 자세한 방법


응답 헤더 - MDN Web Docs 용어 사전: 웹 용어 정의

응답 헤더
=====

**응답 헤더**는 HTTP 응답에서 사용될 수 있는 HTTP 헤더이며, 메시지의 컨텐츠와는 관련이 없습니다. `Age`, `Location` (en-US) 또는 `Server`와 같은 응답 헤더는 더 상세한 응답의 컨텍스트를 제공하기 위해 사용됩니다.

응답에 나타나는 모든 헤더가 "응답 헤더"인것은 아닙니다. 예를 들어, `Content-Type` 헤더는 응답 메시지 본문(`Content-Encoding` 표현 헤더의 인코딩이 적용되기 전)의 원래 데이터 유형을 나타내는 representation header입니다. 그러나, "대화적으로" 모든 헤더는 일반적으로 응답 메시지에서 응답 헤더로 참조됩니다.

다음은 `GET` 요청 이후의 몇 가지 응답 헤더를 보여줍니다.

```http
200 OK
Access-Control-Allow-Origin: \*
Connection: Keep-Alive
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Date: Mon, 18 Jul 2016 16:06:00 GMT
Etag: "c561c68d0ba92bbeb8b0f612a9199f722e3a621a"
Keep-Alive: timeout=5, max=997
Last-Modified: Mon, 18 Jul 2016 02:36:04 GMT
Server: Apache
Set-Cookie: mykey=myvalue; expires=Mon, 17-Jul-2017 16:06:00 GMT; Max-Age=31449600; Path=/; secure
Transfer-Encoding: chunked
Vary: Cookie, Accept-Encoding
X-Backend-Server: developer2.webapp.scl3.mozilla.com
X-Cache-Info: not cacheable; meta data too large
X-kuma-revision: 1085259
x-frame-options: DENY
```

같이 보기
-----

* 모든 HTTP 헤더 목록
* 용어 사전
    + Representation header
    + HTTP header
    + Response header
    + Fetch metadata response header
    + Request header


코드 경량화 (Minification) - MDN Web Docs 용어 사전: 웹 용어 정의

코드 경량화 (Minification)
=====================

**코드 경량화(Minification)** 는 브라우저에서 리소스를 처리하는 방식에 영향을 주지 않고 불필요하거나 중복되는 데이터를 제거하는 프로세스입니다.

코드 경량화에는 코드 주석, 공백, 사용되지 않는 코드 제거는 물론 변수 및 함수 이름 줄이는 것도 포함될 수 있습니다. 코드 경량화는 파일 크기를 줄여 웹 성능을 향상시키는 데 사용됩니다. 코드 경량화는 일반적으로 빌드 시 발생하는 자동화된 단계입니다.

코드 경량화로 인해 코드를 사람이 읽기가 어려워지므로, 개발자 도구에는 코드에 공백을 다시 추가하는 방식으로 좀 더 읽기 쉽게 만들어주는 '코드 정리(prettification)' 기능이 있습니다.


유효성 검사기 (Validator) - MDN Web Docs 용어 사전: 웹 용어 정의

유효성 검사기 (Validator)
===================

유효성 검사기(validator)는 코드의 구문 오류를 검사하는 프로그램입니다. 유효성 검사기는 모든 형식이나 언어에 대해 생성될 수 있지만, 이 문서에서는 HTML, CSS 및 XML을 확인하는 도구에 대해 얘기합니다.

같이 보기
-----

* 위키백과의 유효성 검사기
* 유효성 검사기의 간단한 목록


손실 압축 (Lossy compression) - MDN Web Docs 용어 사전: 웹 용어 정의

손실 압축 (Lossy compression)
=========================

**손실 압축 (Lossy compression)** 또는 되돌릴 수 없는 압축은 콘텐츠를 표현하기 위해 부정확한 근사치와 부분 데이터 삭제를 사용하는 데이터 압축 방법입니다. 간단히 말하면, 손실 압축으로 인해 초기 파일의 데이터가 손실되어 품질이 저하될 수 있습니다. 이러한 압축은 되돌릴 수 없으며, 콘텐츠의 손실 압축이 수행되면 콘텐츠를 원래 상태로 복원할 수 없습니다.

따라서, 손실 압축을 거친 콘텐츠는 일반적으로 더 이상 편집해서는 안 됩니다.

손실 압축은 이미지 포맷에 널리 사용됩니다.

![손실 압축 이미지](/ko/docs/Glossary/Lossy_compression/2019-11-18.png)

위의 두 이미지 간에는 뚜렷한 품질 차이가 없지만, 손실 압축을 사용하여 두 번째 이미지의 크기가 크게 줄었습니다.

같이 보기
-----

* 무손실 압축


브라우징 맥락 - MDN Web Docs 용어 사전: 웹 용어 정의

브라우징 맥락
=======

**브라우징 맥락**은 브라우저가 `Document`를 표시하는 환경을 말합니다. 오늘날에는 보통 탭이지만, 브라우저 창이나 페이지 내의 프레임도 가능합니다.

각 브라우징 맥락은 특정 출처, 활성화된 문서의 출처, 그리고 표시했던 모든 문서의 방문 기록을 가집니다.

브라우징 맥락 간 통신은 엄격히 제한됩니다. 같은 출처를 가진 브라우징 맥락끼리는 `BroadcastChannel`을 열어 사용할 수 있습니다.

같이 보기
-----

* origin 보기


플렉스 항목 - MDN Web Docs 용어 사전: 웹 용어 정의

플렉스 항목
======

플렉스 컨테이너(`display: flex` 또는 `display: inline-flex`를 지정한 요소)의 바로 아래 자식은 **플렉스 항목**이 됩니다.

플렉스 컨테이너 내의 텍스트 역시 플렉스 항목입니다.

같이 보기
-----

### 속성 참고서

* `align-self` (en-US)
* `flex-basis`
* `flex-grow`
* `flex-shrink`
* `order`
### 더 읽어보기

* CSS Flexbox Guide: Flexbox의 기본 개념
* CSS Flexbox Guide: flex items 순서 배열 (en-US)
* CSS Flexbox Guide: 주축을 따라 플렉스 항목의 비율 제어하기 (en-US)


해시 (Hash) - MDN Web Docs 용어 사전: 웹 용어 정의

해시 (Hash)
=========

해시 함수는 가변 길이 메시지 입력을 받아 고정 길이 해시 출력을 생성합니다. 일반적으로 128비트 "지문" 또는 "메시지 다이제스트" 형식입니다. 해시는 암호학에 매우 유용합니다. 해시는 전송된 데이터의 무결성을 보장하고, 메시지 인증을 가능하게 하는 HMAC의 기반을 제공합니다.

같이 보기
-----

* 위키백과의 해시 함수


역직렬화 (Deserialization) - MDN Web Docs 용어 사전: 웹 용어 정의

역직렬화 (Deserialization)
======================

저수준의 형식(예, 네트워크를 통해 전송되었거나 데이터 저장소에 저장된 형식)을 읽을 수 있는 객체나 기타 데이터 구조로 변환하는 프로세스입니다.

JavaScript에서, 예를 들어, JSON 문자열을 객체로 역직렬화하려면 함수 `JSON.parse()`를 호출하세요.

같이 보기
-----

* 위키백과의 직렬화


Fetch 지시어 (Fetch directive) - MDN Web Docs 용어 사전: 웹 용어 정의

Fetch 지시어 (Fetch directive)
===========================

**CSP fetch 지시어**는 특정 리소스 유형이 로드될 수 있는 `Content-Security-Policy` (en-US) 헤더 및 제어 위치에 사용됩니다. 예를 들어, `script-src`는 개발자가 신뢰할 수 있는 스크립트 소스가 페이지에서 실행되도록 허용하는 반면, `font-src` (en-US)는 웹 글꼴 소스를 제어합니다.

모든 fetch 지시문은 `default-src`으로 대체됩니다. 즉, CSP 헤더에 fetch 지시어가 없으면 사용자 에이전트는 `default-src` 지시어를 찾습니다.

전체 목록은 Fetch 지시어 목록 (en-US)을 참고해주세요.

같이 보기
-----

* 용어 사전
    + CSP
    + Reporting directive
    + Document directive
    + Navigation directive
* 참고서
    + https://www.w3.org/TR/CSP/#directives-fetch
    + `upgrade-insecure-requests` (en-US)
    + `block-all-mixed-content` (en-US)
    + `Content-Security-Policy` (en-US)


얕은 복사 - MDN Web Docs 용어 사전: 웹 용어 정의

얕은 복사
=====

객체의 **얕은 복사**는 복사본의 속성이 복사본이 만들어진 원본 객체와 같은 참조 (메모리 내의 같은 값을 가리킴)를 공유하는 복사입니다. 따라서 원본이나 복사본을 변경하면, 다른 객체 또한 변경될 수 있습니다. 이러한 동작은 원본과 복사본이 완전히 독립적인 깊은 복사의 동작과 대조적입니다.

더 공식적으로, 다음과 같은 경우 두 객체 `o1`과 `o2`는 얕은 복사입니다.

1. 두 객체는 같은 객체가 아닙니다 (`o1 !== o2`).
2. `o1`과 `o2`의 속성은 같은 이름과 순서입니다.
3. 두 객체의 속성 값은 동일합니다.
4. 두 객체의 프로토타입 체인은 동일합니다.

구조상 동일한 정의 또한 참고하세요.

속성이 모두 원시 값인 객체의 복사는 깊은 복사와 얕은 복사의 정의에 모두 부합합니다. 그렇지만 중첩된 속성이 없기 때문에 이런 복사의 깊이에 대해 이야기하는 것은 다소 쓸모가 없습니다. 보통 중첩된 속성을 변경하는 맥락에서 깊은 복사하는 것에 대해 이야기합니다.

얕은 복사의 경우, 중첩된 객체의 값이 아닌 최상위 속성만 복사합니다. 그러므로,

* 복사본의 최상위 속성을 재할당해도 원본 객체에는 영향을 끼치지 않습니다.
* 복사본의 중첩 객체 속성을 재할당하면 원본 객체에 영향을 끼칩니다.

JavaScript에서, 모든 표준 내장 객체의 복사 작업(전개 구문, `Array.prototype.concat()`, `Array.prototype.slice()`, `Array.from()`, `Object.assign()`, `Object.create()`)은 깊은 복사가 아닌 얕은 복사본을 생성합니다.

`ingredientsList` 배열 객체가 생성된 다음, `ingredientsList`를 복사하여 생성된 `ingredientsListCopy` 객체가 있는 다음 예제를 살펴보세요.

```js
const ingredientsList = ["noodles", { list: ["eggs", "flour", "water"] }];

const ingredientsListCopy = Array.from(ingredientsList);
console.log(ingredientsListCopy);
// ["noodles",{"list":["eggs","flour","water"]}]
```

중첩된 속성 값을 재할당하면 두 객체 모두에서 볼 수 있습니다.

```js
ingredientsListCopy[1].list = ["rice flour", "water"];
console.log(ingredientsList[1].list);
// Array [ "rice flour", "water" ]
```

최상위 속성 값(인덱스가 `0`인 경우)을 재할당하면 변경된 객체에서만 볼 수 있습니다.

```js
ingredientsListCopy[0] = "rice noodles";
console.log(ingredientsList[0]); // noodles
console.log(JSON.stringify(ingredientsListCopy));
// ["rice noodles",{"list":["rice flour","water"]}]
console.log(JSON.stringify(ingredientsList));
// ["noodles",{"list":["rice flour","water"]}]
```

같이 보기
-----

* 깊은 복사


Bandwidth - MDN Web Docs 용어 사전: 웹 용어 정의

Bandwidth
=========

대역폭은 주어진 시간 내에 얼마나 많은 정보가 데이터 연결을 통과 할 수 있는지를 나타냅니다. 대개 초당 메가 비트 (Mbps) 또는 초당 기가비트 (Gbps)와 같이 초당 비트 수 (bps)의 배수로 측정됩니다.

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

* 위키피디아의 Bandwidth


OOP - MDN Web Docs 용어 사전: 웹 용어 정의

OOP
===

**OOP**(객체 지향적 프로그래밍)는 데이터가 "객체" 내에 캡슐화되고 구성 요소 부분이 아닌, 객체 자체가 운용되는 프로그래밍 접근 방식입니다.

JavaScript는 매우 객체 지향적인 언어입니다. JavaScript는 클래스 구문 (en-US) 기반의 것과는 대조적으로 **프로토타입** 기반의 모델을 따릅니다.

같이 보기
-----

* 위키백과의 객체 지향 프로그래밍
* 객체 지향 JavaScript의 소개
* 상속과 프로토타입 체인


GPL - MDN Web Docs 용어 사전: 웹 용어 정의

GPL
===

(GNU) GPL (General Public License)은 Free Software Foundation에서 배포하는 copyleft 무료 소프트웨어 라이선스입니다. GPL 라이선스 프로그램의 사용자들은 동일한 면허에 따라 프로그램을 재분배(수정 또는 변경되지 않음)할 경우, 사용, 소스 코드 읽기, 수정 및 변경사항 재분배할 수 있는 자유가 부여됩니다.

같이 보기
-----

* GNU 라이선스의 FAQ
* 위키피디아의 GNU GPL
* GPL License 문단


HTTPS - MDN Web Docs 용어 사전: 웹 용어 정의

HTTPS
=====

**HTTPS** (***HyperText Transfer Protocol Secure***)는 HTTP protocol의 암호화된 버전입니다. 이것은 대개 클라이언트와 서버 간의 모든 커뮤니케이션을 암호화 하기 위하여 SSL 또는 TLS을 사용합니다. 이 보안 연결은 클라이언트가 민감한 정보를 서버와 안전하게 주고받도록 해줍니다. 예를 들면, 금융 활동 이나 온라인 쇼핑이 있을 수 있습니다.

같이 보기
-----

* 위키 피디아의 HTTPS
* HTTPS 커뮤니티 가이드로 이동
* 보안 문맥
* MDN Web Docs 용어 사전
    + HTTP
    + SSL
    + TLS


Variable - MDN Web Docs 용어 사전: 웹 용어 정의

Variable
========

변수는 값을 저장하기 위해 명명된 참조입니다. 변수를 사용하면 미리 정해진 이름을 통해 예측할 수 없는 값에 접근할 수 있습니다.

같이 보기
-----

* 위키백과의 변수 (컴퓨터 과학)
* JavaScript에서의 변수 선언
* JavaScript의 `var` 선언문


참 같은 값 - MDN Web Docs 용어 사전: 웹 용어 정의

참 같은 값
======

JavaScript에서, **참 같은 값**(Truthy)인 값이란 불리언을 기대하는 문맥에서 `true`로 평가되는 값입니다. 따로 거짓 같은 값으로 정의된 값이 아니면 모두 참 같은 값으로 평가됩니다(예: `false`, `0`, `-0`, `0n`, `""`, `null`, `undefined`와 `NaN` 등).

JavaScript는 불리언 문맥에서 형 변환을 사용합니다.

다음은 참 같은 값에 대한 예시입니다. JavaScript는 불리언 문맥에서 참 같은 값을 `true`로 변환하기 때문에 아래의 모든 `if` 블록을 실행합니다.

```js
if (true)
if ({})
if ([])
if (42)
if ("0")
if ("false")
if (new Date())
if (-42)
if (12n)
if (3.14)
if (-3.14)
if (Infinity)
if (-Infinity)
```

### 논리적 AND 연산자, &&

첫 번째 피연산자가 참인 경우, 논리적 AND 연산자는 두 번째 피연산자를 반환합니다.

```js
true && "dog"
// "dog" 반환합니다.

[] && "dog"
// "dog" 반환합니다.
```

같이 보기
-----

* 거짓 같은 값
* 형변환
* 불리언
* 불리언 형변환


첫 번째 CPU 유휴 상태 (First CPU idle) - MDN Web Docs 용어 사전: 웹 용어 정의

첫 번째 CPU 유휴 상태 (First CPU idle)
===============================

\*\*첫 번째 CPU 유휴 상태(First CPU Idle)\*\*는 페이지가 최소한으로 대화형일 때 또는 창이 사용자 입력을 처리할 수 있을 만큼 조용할 때를 측정합니다. 첫 번째 CPU 유휴 상태는 비표준 Google 웹 성능 지표입니다. 일반적으로, 이 지표는 표시되는 모든 UI 요소가 반드시 그런 것은 아니지만, 대부분이 대화형이고 사용자 인터페이스가 평균적으로 대부분의 사용자 입력에 50ms 내에 응답할 때 발생합니다. 첫 번째 대화형이라고도 합니다.


타입 (Type) - MDN Web Docs 용어 사전: 웹 용어 정의

타입 (Type)
=========

**타입** 은 저장할 수 있는 데이터 종류와 데이터가 지켜야 할 구조에 영향을 미치는 값의 특성입니다. 예를 들어, 불리언 데이터 타입은 일정 시간에 `true` 또는 `false` 값만 가질 수 있는 반면, 문자열은 문자열 또는 일련의 문자를 보유할 수 있는 기능이 있습니다. 숫자는 모든 종류의 숫자 값 등을 보유할 수 있습니다.

값의 데이터 타입은 해당 값에 유효한 작업에도 영향을 미칩니다. 예를 들어, 숫자 타입의 값은 다른 숫자와 곱할 수 있지만, 문자열로는 곱할 수 없습니다. 문자열 '2'와 같이 해당 문자열에 숫자'만' 포함되어 있는 경우에도 마찬가지입니다.

타입은 또한 서로 다른 값 간의 비교에 대한 유용한 지식을 제공합니다. 구조화된 타입 간의 비교는 항상 쉬운 가정은 아닙니다. 이전 데이터 구조가 동일하더라도 프로토타입 체인 내부에 상속된 구조가 있을 수 있기 때문입니다.

값 유형을 잘 모르는 경우, `typeof` 연산자를 사용할 수 있습니다.

같이 보기
-----

* 위키백과의 데이터 타입
* JavaScript 데이터 타입
* 용어 사전
    + JavaScript
    + string
    + number
    + bigint
    + boolean
    + null
    + undefined
    + symbol


직렬화 (Serialization) - MDN Web Docs 용어 사전: 웹 용어 정의

직렬화 (Serialization)
===================

객체나 데이터 구조를 네트워크나 저장소(예, 배열 버퍼 또는 파일 형식)를 통한 전송에 적합한 형식으로 변환하는 프로세스입니다.

예를 들어, JavaScript에서는 함수 `JSON.stringify()`를 호출하는 것을 통해 객체를 JSON 문자열로 직렬화할 수 있습니다.

CSS 값은 `CSSStyleDeclaration.getPropertyValue()` (en-US) 함수를 호출하여 직렬화됩니다.

같이 보기
-----

* 위키백과의 직렬화


빈 요소 - MDN Web Docs 용어 사전: 웹 용어 정의

빈 요소
====

**빈 요소**는 자식 노드(예, 중첩 요소 또는 텍스트 노드)를 **가질 수 없는** HTML의 요소 요소입니다. 빈 요소에는 시작 태그만 있습니다. 빈 요소에는 종료 태그를 지정해서는 안 됩니다.

HTML에서, 빈 요소에는 종료 태그가 없어야 합니다. 예를 들어, `<input type="text"></input>`은 잘못된 HTML입니다. HTML와는 다르게, 자식 노드를 가질 수 없는 SVG 또는 MathML 요소는 시작 태그에 XML 스스로 닫는 태그 구문 대신 종료 태그를 사용할 수 있습니다.

HTML, SVG, MathML의 명세는 각각의 요소가 무엇을 담을 수 있는지 매우 정확하게 명시하고 있습니다. 따라 일부 태그의 조합은 아무런 의미도 갖지 않습니다.

빈 요소에 자식이 있는 것으로 표시할 수 있는 방법은 없지만, JavaScript를 사용하여 DOM의 요소에 프로그래밍 방식으로 자식 조드를 추가할 수 있습니다. 그러나 믿을 만한 결과가 아니라, 이 방법은 좋지 않습니다.

HTML의 빈 요소 목록은 다음과 같습니다.

* `<area>`
* `<base>`
* `<br>`
* `<col>` (en-US)
* `<embed>`
* `<hr>`
* `<img>`
* `<input>` (en-US)
* `<link>`
* `<meta>`
* `<param>` (en-US)
지원이 중단되었습니다
* `<source>` (en-US)
* `<track>`
* `<wbr>`
스스로 닫는 태그
---------

"스스로 닫는 태그(`<tag />`)는 HTML에 존재하지 않습니다."

HTML 요소의 시작 태그에 후행 '/'(슬래시) 문자가 있으면 HTML 구문 분석기는 해당 슬래시 문자를 무시합니다. 이는 `<script>` 또는 `<ul>`와 같은 요소에 닫는 태그가 필요한 경우를 기억하는 것이 중요합니다. 이 경우에, 시작 태그에 후행 슬래시를 추가해도 요소가 닫히지 않습니다.

그러나, 일부 코드 포맷도구는 빈 요소의 시작 태그에 후행 슬래시 문자를 추가하여 XHTML과 호환되고 더 읽기 쉽게 만들어줍니다. 예를 들어, 일부 코드 포맷도구는 `<input type="text">`를 `<input type="text" />`로 변환합니다.

XML, XHTML, and SVG의 빈 요소에는 `<circle cx="50" cy="50" r="50" />`와 같이 스스로 닫는 태그가 필요합니다.

SVG 및 MathML에서는 자식 노드를 가질 수 없는 요소는 스스로 닫는 문법으로 표시될 수 있습니다. 이러한 경우 요소의 시작 태그가 스스로 닫는 태그로 표시되면 해당 요소에는 종료 태그가 없어야 합니다.

**참고:** 시작 태그의 후행 `/`(슬래시) 문자 바로 앞에 따옴표가 없는 속성 값이 있는 경우(공백 없이) 슬래시는 구문분석 도구에서 삭제 되지 않고 속성 값의 일부가 됩니다. 예를 들어, `<img src=http://www.example.com/logo.svg/>` 마크업은 `src` 속성이 `http://www.example.com/logo.svg/`으로 나타나므로 URL이 잘못됩니다.

같이 보기
-----

* 교체된 요소


Time to first byte (TTFB) - MDN Web Docs 용어 사전: 웹 용어 정의

Time to first byte (TTFB)
=========================

**Time to First Byte(TTFB)** 는 브라우저가 페이지를 요청한 시점과 서버로부터 첫 번째 정보 바이트를 수신한 시점 사이의 시간을 나타냅니다. 이 시간에는 DNS 조회와 TCP 핸드셰이크 및 TLS 핸드셰이크(HTTPS를 통해 이루어진 경우)를 사용한 연결 설정이 포함됩니다.

TTFB는 요청 시작과 응답 시작 사이에 걸리는(밀리초)입니다.
```

TTFB = responseStart - navigationStart
```

같이 보기
-----

* 일반적인 HTTP 세션
* PerformanceResourceTiming (en-US)
* PerformanceTiming (en-US)


프리 렌더 (Prerender) - MDN Web Docs 용어 사전: 웹 용어 정의

프리 렌더 (Prerender)
=================

 프리 렌더링 (Prerendering)은 사용자가 가까운 미래에 탐색할 '가능성이 있는' 페이지를 추측에 따라 프리페치하고 렌더링하는 행위를 의미합니다(브라우저는 사실상 보이지 않는 별도의 탭에서 백그라운드로 페이지를 렌더링합니다).
 그런 다음 사용자가 페이지를 탐색하기로 선택하면, 해당 콘텐츠가 거의 즉시 표시될 수 있습니다.

예를 들어, 프리 렌더링은 '다음' 버튼으로 링크된 페이지 리소스, 사용자가 마우스를 올려놓은 링크 팝업, 주소 표시줄에 입력되는 URL의 가능한 페이지 대상을 가져오는 데 사용될 수 있습니다.

```html
<link rel="prerender" href="https://example.com/content/to/prerender" />
```

프리 렌더링을 사용하면 프리페치보다 표시 시간이 빨리지고 더 많은 리소스를 필요로 하는 대신 사용자 경험이 향상됩니다.

같이 보기
-----

* 즉각적인 페이지 탐색을 위해 Chrome에서 페이지를 미리 렌더링합니다 주소 표시줄의 URL 프리 렌더링 및 제안된 추측 규칙 API 사용과 같은 프리 렌더링을 위한 Chrome 전용 기능에 대해 설명합니다.
* prefetch


RIL - MDN Web Docs 용어 사전: 웹 용어 정의

RIL
===

라디오 인터페이스 계층 (Radio Interface Layer, RIL)은 장치의 소프트웨어와 장치의 전화, 라디오 또는 모뎀 하드웨어 간에 통신하는 모바일 운영체제 구성 요소입니다.

같이 보기
-----

* 위키백과의 라디오 인터페이스 계층


Firefox 운영체제 (Firefox OS) - MDN Web Docs 용어 사전: 웹 용어 정의

Firefox 운영체제 (Firefox OS)
=========================

Firefox 운영체제 (Firefox OS)는 Mozilla에서 개발한 중단된 오픈소스 모바일 운영체제입니다. 자세한 내용은 Firefox 운영체제를 참조하세요.

Firefox 운영체제는 프로젝트가 공식 이름을 가지기 전에는 Boot2Gecko라고도 불렸습니다.


Accessibility (접근성) - MDN Web Docs 용어 사전: 웹 용어 정의

Accessibility (접근성)
===================

**웹 접근성** (**A11Y**)은 신체적, 기술적 제한에도 불구하고 웹 사이트를 계속 사용할 수 있도록 하는 모범 사례를 말합니다. 웹 접근성은 Web Accessibility Initiative (WAI)를 통해 W3C에서 공식적으로 정의되고 논의됩니다.

같이 보기
-----

* MDN의 접근성 리소스
* MDN에서 접근성 알아보기
* MDN의 ARIA 문서
* The WAI-ARIA 권고안
* 위키백과의 웹 접근성
* Web Accessibility In Mind
* Web Accessibility Initiative 홈페이지


IPv6 - MDN Web Docs 용어 사전: 웹 용어 정의

IPv6
====

**IPv6** 은 인터넷 기반 통신 프로토콜의 현재 버전입니다. IPv6는 다양한 IP 주소를 허용하기 때문에 천천히 IPv4를 대체하고 있습니다.

같이 보기
-----

* Wikipedia의 IPv6


사전 측정 (Advance measure) - MDN Web Docs 용어 사전: 웹 용어 정의

사전 측정 (Advance measure)
=======================

**사전 측정**은 현재 쓰기 방향에 따라 문자 모양이 수평 또는 수직으로 차지하는 전체 공간입니다. 이는 커서가 이동한 거리와 동일하며 문자 바로 앞에 배치된 다음 뒤로 이동합니다.

이 용어는 여러 CSS `<length>` 단위의 정의에 사용됩니다. 'ch' 단위의 "사전 측정"은 현재 가로 축 또는 세로 축이 사용되는지에 따라 주어진 서체에서 문자 "0"의 너비 또는 높이입니다. 단위 `ic`의 유사한 '사전 측정'은 "수" 문자의 너비 또는 높이입니다.

같이 보기
-----

* `<length>`
* 배우기: CSS 값과 단위
* TextMetrics API (en-US)


요청 헤더 - MDN Web Docs 용어 사전: 웹 용어 정의

요청 헤더
=====

**요청 헤더**는 서버가 응답을 맞춤화할 수 있도록 요청 컨텍스트에 대한 정보를 제공하기 위해 HTTP 요청에서 사용할 수 있는 HTTP 헤더입니다. 예를 들어, `Accept-*` 헤더는 허용되는 응답 방식과 선호되는 형식을 나타냅니다. 다른 헤더는 인증 자격 증명(예: `Authorization`)을 제공하거나, 캐싱을 제어하거나, 사용자 에이전트 또는 리퍼러에 대한 정보를 가져오는 데 사용될 수 있습니다.

요청에 나타날 수 있는 모든 헤더가 명세에 따라, "요청 헤더"로 참조되는 것은 아닙니다. 예를 들어, `Content-Type` 헤더는 representation header라고 합니다.

또한, CORS는 요청 헤더의 하위 집합을 simple 헤더로 정의하고, 항상 인증된 것으로 간주되며 프리플라이트 요청에 대한 응답에 명시적으로 나열되지 않는 요청 헤더를 정의합니다.

아래의 HTTP 메시지는 `GET` 요청 이후의 몇 가지 요청 헤더를 보여줍니다.

```http
GET /home.html HTTP/1.1
Host: developer.mozilla.org
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,\*/\*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: https://developer.mozilla.org/testpage.html
Connection: keep-alive
Upgrade-Insecure-Requests: 1
If-Modified-Since: Mon, 18 Jul 2016 02:36:04 GMT
If-None-Match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a"
Cache-Control: max-age=0
```

같이 보기
-----

* 모든 HTTP 헤더 목록
* RFC 9110, section 6.3: 헤더 필드


래스터 이미지 (Raster image) - MDN Web Docs 용어 사전: 웹 용어 정의

래스터 이미지 (Raster image)
======================

**래스터 이미지(raster image)** 는 픽셀 격자로 정의된 이미지 파일입니다. '비트맵'이라고도 합니다. 웹의 일반적인 래스터 이미지 형식은 JPEG, PNG, GIF 및 ICO가 있습니다.

래스터 이미지 파일에는 일반적으로 차원의 세트가 포함되지만, 파비콘 및 CSS 커서 이미지에 사용되는 ICO 및 CUR 형식에는 여러 크기가 포함될 수 있습니다.

같이 보기
-----

* 벡터 이미지


OWASP - MDN Web Docs 용어 사전: 웹 용어 정의

OWASP
=====

**오픈 웹 애플리케이션 보안 프로젝트(Open Web Application Security Project, OWASP)** 는 무료 소프트웨어, 특히 웹의 보안을 위해 일하는 비영리 조직이자 세계적인 네트워크입니다.

같이 보기
-----

* 공식 웹사이트


특성 - MDN Web Docs 용어 사전: 웹 용어 정의

특성
==

**특성**(attribute)은 HTML이나 XML element를 확장해 동작 방식을 바꾸거나 메타데이터를 제공합니다.

특성은 항상 `name="value"`의 형태를 따릅니다. (특성 식별자 뒤에 특성 값)

등호 또는 값 없는 특성이 보일 때도 있습니다. HTML에서는 빈 문자열을 제공하는 단축 표기법이고, XML에서는 특성 이름을 제공하는 단축 표기법입니다.

```html
<input required />
<!-- 다음과 같음 -->
<input required="" />
<!-- 다음과 같음 -->
<input required="required" />
```

특성 반영
-----

특성은 특정 인터페이스의 특정 속성에 "반영"될 수 있습니다. 특성에 접근하여 특성 값을 읽을 수 있음을 의미하며, 특성을 다른 값으로 설정함으로써 수정이 가능합니다.

예를 들어, 아래의 `placeholder`는 `HTMLInputElement.placeholder`에 반영됩니다.

아래 HTML을 확인해봅시다.

```html
<input placeholder="Original placeholder" />
```

아래 코드를 이용해 `HTMLInputElement.placeholder`와 특성 사이의 반영되는 점을 확인할 수 있습니다.

```js
const input = document.querySelector("input");
const attr = input.getAttributeNode("placeholder");
console.log(attr.value);
console.log(input.placeholder); // `attr.value`와 같은 값을 출력합니다.

// 자리 표시자(placeholder) 값을 변경하면 반영된 특성 값도 변경됩니다.
input.placeholder = "Modified placeholder";
console.log(attr.value); // `Modified placeholder`를 출력합니다.
```

같이 보기
-----

* HTML 특성 참고서
* HTML 전역 특성


트리 셰이킹(Tree shaking) - MDN Web Docs 용어 사전: 웹 용어 정의

트리 셰이킹(Tree shaking)
====================

**트리 셰이킹**은 JavaScript 맥락에서 죽은 코드 제거를 설명하기 위해 일반적으로 사용되는 용어입니다.

import 및 export 문을 사용하여, JavaScript 파일에서 사용하기 위한 코드 모듈을 내보내고 가져오는 것을 감지합니다.

최신 JavaScript 애플리케이션에서는 모듈 번들러(예: webpack 또는 Rollup)를 사용하여 여러 JavaScript 파일을 단일 파일로 번들링할 때, 죽은 코드를 자동으로 제거합니다. 이는 프로덕션에 바로 사용할 수 있는 코드를 준비하는 데 중요한 작업으로, 깔끔한 구조와 최소한의 파일 크기로 코드를 최적화하는데 도움이 됩니다.

같이 보기
-----

* Axel Rauschmayer의 책 "JS 살펴보기: 모듈"의 "번들링 과정에서 죽은 코드 제거의 이점"
* 웹팩으로 트리세이킹 구현하기


스크린 리더 (Screen reader) - MDN Web Docs 용어 사전: 웹 용어 정의

스크린 리더 (Screen reader)
======================

스크린 리더는 화면 디스플레이에 표시된 내용을 비시각적 방식(일반적으로 텍스트 음성 변환, 점자 또는 사운드 아이콘)으로 전달하려고 시도하는 소프트웨어 애플리케이션입니다. 스크린 리더는 시각 장애가 있거나 문맹이거나 학습 장애가 있는 사람들에게 필수적입니다. 일부 브라우저 확장 스크린 리더가 있지만, 대부분의 스크린 리더는 브라우저 뿐만 아니라 모든 사용자 애플리케이션에 대해 시스템 전체에서 작동합니다.

웹 접근성 측면에서, 대부분의 사용자 에이전트는 접근성 객체 모델을 제공하고 스크린 리더는 다양한 운영 체제의 기능을 사용하고 후킹 기술을 통해 전용 접근성 API와 상호 작용합니다.

보이스오버(VoiceOver)
----------------

macOS에는 내장 스크린 리더인 VoiceOver가 함께 제공됩니다. VoiceOver에 접근하려면, System Preferences > Accessibility > VoiceOver로 이동하세요. fn+command + F5를 사용하여 VoiceOver를 켜거나 끌 수도 있습니다. VoiceOver는 소리내어 읽고 내용을 표시합니다. 소리내어 읽은 내용은 어두운 회색 상자에 표시됩니다.

데스크톱/노트북 스크린 리더 사용자는 키보드나 기타 비포인팅 장치를 사용하여 웹사이트를 탐색합니다. 사용해보려면 가장 좋은 방법은 동일한 일을 해보세요.

VoiceOver가 없는 키보드 탐색과 마찬가지로, 탭 키와 화살표 키를 사용해 대화형 요소를 탐색할 수 있습니다.

* 다음 대화형 요소: Tab
* 이전 대화형 요소: Shift + Tab
* 같은 이름의 그룹의 다음 라디오 버튼: 오른쪽 또는 아래 화살표
* 같은 이름의 그룹의 이전 라디오 버튼: 왼쪽 또는 위쪽 화살표

페이지 내용 탐색은 탭 키와 Control + Option 키와 함께 다른 키를 사용해 실행될 수 있습니다.

* 다음 제목: Control + Option + H
* 다음 목록: Control + Option + X
* 다음 그래픽 요소: Control + Option + G
* 다음 테이블: Control + Option + T
* HTML 계층 순서 아래로: Control + Option + right arrow
* 이전 제목: Shift + Control + Option + H
* 이전 목록: Shift + Control + Option + X
* 이전 그래픽 요소: Shift + Control + Option + G
* 이전 테이블: Shift + Control + Option + T
* HTML 계층 순서 위로: Control + Option + left arrow
같이 보기
-----

* ARIA


다형성 (Polymorphism) - MDN Web Docs 용어 사전: 웹 용어 정의

다형성 (Polymorphism)
==================

다형성 (Polymorphism)은 여러 데이터 타입에 대한 하나의 인터페이스를 표현한 것입니다.

예를 들어, 정수, 부동 소수점 및 실수는 암시적으로 다형성입니다. 타입에 관계없이 모두 더하기, 빼기, 곱하기 등이 가능합니다.

OOP의 경우, 클래스가 자신의 코드와 자체 데이터를 담당하도록 함으로써, 각 클래스가 모든 객체에 대해 적절하게 동작하는 (한 번 호출된) 자체 '함수'를 갖는다는 점에서 다형성을 달성할 수 있습니다.

같이 보기
-----

* 위키백과의 Polymorphism


프록시 서버 - MDN Web Docs 용어 사전: 웹 용어 정의

프록시 서버
======

**프록시 서버**란 인터넷 상의 여러 네트워크들에 접속할 때 중계 역할을 해주는 프로그램 또는 컴퓨터를 의미합니다. 월드 와이드 웹(World Wide Web) 상의 컨텐츠에 쉽게 접근할 수 있도록 도와줍니다. 프록시는 요청을 가로챈 뒤 응답을 되돌려줍니다. 이렇게 가로챈 요청을 전달하거나 하지 않거나(예, 캐시), 수정할 수도 있습니다(예, 서로 다른 두 네트워크 간의 경계에서 헤더를 바꾸는 경우).

프록시는 사용자의 로컬 컴퓨터에 존재할 수도 있고, 인터넷 상에서 사용자의 컴퓨터와 목표 서버 사이 그 어느 곳에든 존재할 수 있습니다. 일반적으로 크게 주로 2가지 종류의 프록시 서버가 존재합니다.

* \*\*포워드 프록시(forward proxy)\*\*는 인터넷 상에서 어디로든지 요청을 전송해주는 프록시입니다.
* \*\*리버스 프록시(reverse proxy)\*\*는 인터넷에서 요청을 받으면, 내부망 내의 서버로 전송해줍니다.
같이 보기
-----

* 프록시 서버 및 터널링 (en-US)
* 위키백과의 프록시 서버


Latency - MDN Web Docs 용어 사전: 웹 용어 정의

Latency
=======

**Latency**는 요청된 리소스가 대상에 도달하는데 걸리는 네트워크 시간입니다. 지연 시간이 짧으면 기다리는 시간이 거의 없거나, 아예 없습니다. 지연 시간이 길면 요청된 리소스가 대상에 도달하는 데 오랜 시간이 걸려 좋지 않습니다.

지연 시간은 모든 종류의 데이터 흐름의 요인이 될 수 있지만, 일반적으로는 네트워크 지연 시간(데이터 패킷이 소스에서 대상으로 이동하는데 걸리는 시간)과 미디어 코덱 지연 시간(소스 데이터가 인코딩 혹은 디코딩되고 결과 데이터가 소비자에게 도달하는데 걸리는 시간) 관점에서 다룹니다.

같이 보기
-----

* Latency 이해하기


Compile - MDN Web Docs 용어 사전: 웹 용어 정의

Compile
=======

\*\*컴파일(Compiling)\*\*은 주어진 language로 작성된 컴퓨터 프로그램을 다른 언어의 동등한 프로그램으로 변환하는 프로세스입니다. **컴파일러**는 이러한 작업을 실행하는 소프트웨어입니다.

때로는 이 작업을 "조립(assembling)"또는 "빌드(build)"라고도 합니다. 이 작업들은 보통 컴파일과 같은 것(예를 들면 바이너리 형식으로 패키지를 만드는 일) 이상의 작업을 수행합니다 .

일반적으로 컴파일러는 C++ 또는 Rust 또는 Java와 같은 고급 언어로 작성된 코드를 **이진 코드** or **기계 코드**라고 하는 실행 가능한(runnable) 코드로 변환합니다. 예를 들어, WebAssembly는 C++, Rust, C#, Go, Swift, 다양한 언어로 작성된 코드를 컴파일 할 수 있는 실행 가능한 바이너리 코드 형식입니다. WebAssembly는 또한 모든 웹 페이지, 모든 브라우저에서 실행할 수 있습니다.

대부분의 컴파일러는 선행(AOT(Ahead-Of-Time)) 또는 적기(JIT(Just-In-Time))로 컴파일을 수행합니다.

GNU `gcc` 컴파일러는 AOT 컴파일러의 잘 알려진 예제입니다. AOT 컴파일러는 일반적으로 셸 환경 커멘드라인(터미널 또는 콘솔) 또는 IDE 내에서 호출됩니다.

JIT 컴파일러는 일반적으로 직접 호출되지 않지만, 성능 향상을 위해 내부적으로 소프트웨어 런타임에 내장됩니다. 예를 들어, 모든 주요 브라우저는 이제 JIT 컴파일러가 내장된 JavaScript 엔진을 사용합니다.

컴파일러는 또한 TypeScript에서 JavaScript로의 고급 언어로의 번역이 가능합니다. 이러한 경우에 컴파일러를 종종 **트랜스파일러** 라고 합니다.

같이 보기
-----

* C/C++을 WebAssembly로 컴파일하기
* Rust를 WebAssembly로 컴파일하기
* 위키피디아: 컴파일러


Cacheable - MDN Web Docs 용어 사전: 웹 용어 정의

Cacheable
=========

**캐시 가능(cacheable)** 한 응답은 캐시할 수 있는 HTTP 응답으로, 나중에 검색하고 사용하기 위해 저장하여 새 요청을 서버에 저장합니다. 모든 HTTP 응답을 캐시할 수 있는 것은 아니며, 캐시할 HTTP 응답에 대한 제약 조건은 다음과 같습니다.

* `GET` 또는 `HEAD` 메서드는 요청에 사용된 메서드는 그 자체로 캐시 가능합니다. `POST` 또는 `PATCH` 요청에 대한 응답은 유효성이 표시되고 `Content-Location` 헤더가 설정된 경우 캐시될 수도 있지만 거의 구현되지 않았습니다. (예를 들어, Firefox는 https://bugzilla.mozilla.org/show\_bug.cgi?id=109553 에 따라 이를 지원하지 않습니다.) `PUT` 혹은 `DELETE` 다른 메서드는 캐시 가능하지 않고 그 결과 역시 캐시할 수 없습니다.
* 애플리케이션 캐싱에 의해 알려진 응답의 상태 코드는 캐시 가능한 것으로 간주됩니다. `200`, `203`, `204`, `206`, `300`, `301`, `404`, `405`, `410`, `414`, `501` 상태 코드는 캐시 가능합니다.
* 응답에는 `Cache-Control`과 같은 캐싱을 방지하는 특정 헤더가 있습니다.

특정 URI에 대한 일부 캐시할 수 없는 요청/응답은 동일한 URI에서 이전에 캐시된 응답을 무효화할 수 있습니다. 예를 들어 pageX.html에 대한 `PUT` 요청은 동일한 URI에 대한 `GET` 혹은 `HEAD` 요청의 캐시를 무효화합니다.

요청 메서드와 응답 상태가 모두 캐시 가능한 경우 요청에 대한 응답을 캐시할 수 있습니다.

```http
GET /pageX.html HTTP/1.1
(…)

200 OK
(…)
```

`PUT` 요청을 캐시할 수 없습니다. 같은 URI에 대한 `HEAD` 혹은 `GET`를 통한 요청은 캐시된 데이터를 무효화합니다.

```http
PUT /pageX.html HTTP/1.1
(…)

200 OK
(…)
```

응답의 `Cache-Control` 헤더는 캐싱을 방지합니다.

```http
GET /pageX.html HTTP/1.1
(…)

200 OK
Cache-Control: no-cache
(…)
```

같이 보기
-----

* 메서드와 캐싱에 대한 자세한 내용은 HTTP 명세서에서 제공합니다.
* 일반적으로 캐시 가능한 메서드에 대한 설명: `GET`, `HEAD`
* 일반적으로 캐시 불가능한 메서드에 대한 설명: `PUT`, `DELETE`, 가끔 `POST`


Stringifier - MDN Web Docs 용어 사전: 웹 용어 정의

Stringifier
===========

객체의 stringifier는 문자열이 필요한 상황에서 사용할 객체의 텍스트 표현을 제공하기 위해 정의된 속성 또는 메서드입니다.

같이 보기
-----

* WebIDL 파일에 포함된 정보 (en-US)에 있는 Stringifiers


SCM - MDN Web Docs 용어 사전: 웹 용어 정의

SCM
===

SCM (Source Control Management, 소스 제어 관리)는 소스 코드를 관리하는 시스템입니다. 일반적으로 SCM은 소스 파일의 버전 관리를 처리하기 위해 소프트웨어를 사용하는 것을 의미합니다. SCM은 소스 코드가 어떻게 변경되었는지, 누가 변경했는지 추적하기 때문에 프로그래머는 유용한 내용을 편집하는 것을 두려워하지 않고 소스 코드 파일을 수정할 수 있습니다.

SCM 시스템 종류로는 CVS, SVN, GIT이 포함됩니다.

같이 보기
-----

* 위키백과의 버전 관리


특권 (Privileged) - MDN Web Docs 용어 사전: 웹 용어 정의

특권 (Privileged)
===============

사용자에게 시스템에 대한 추가 권한이 부여되거나, 일반 사용자에 비해 더 높은 우선순위 수준의 콘텐츠에 대한 궁극적인 접근 권한이 부여되는 경우, 사용자를 **특권** 이 있다고 합니다.

같이 보기
-----

* 위키백과의 특권 (컴퓨팅)
* 정보 보안 자습서


SEO - MDN Web Docs 용어 사전: 웹 용어 정의

SEO
===

**SEO**(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정입니다. 검색 랭크 개선이라고도 합니다.

검색 엔진은 웹을 크롤링하면서 페이지에서 페이지로 링크를 따라가고, 찾은 콘텐츠의 색인을 생성합니다. 검색 결과에 보이는 것은 바로 그 콘텐츠 색인입니다. 크롤러는 일정 규칙을 따르므로, SEO를 진행하며 해당 규칙을 밀접하게 따라가면 웹사이트가 검색 결과의 보다 높은 곳에 노출돼 (전자상거래와 광고라면) 수익으로 연결될 수도 있습니다.

검색 엔진은 일부 SEO 가이드라인을 제공하긴 하지만 대형 검색 엔진의 경우 결과 랭킹은 영업 비밀로 취급합니다. 따라서 SEO는 검색 엔진의 공식 가이드라인에 더해 경험적인 지식, 논문과 특허 등에서 가져온 이론적 지식을 결합한 과정입니다.

SEO는 세 가지 큰 방향으로 나눌 수 있습니다.

기술적

콘텐츠 마크업을 작성할 때 시맨틱 HTML을 사용하세요. 색인하길 원했던 콘텐츠만 크롤러가 긁어갈 것입니다.

콘텐츠 작성

방문자층에 맞는 언어로 콘텐츠를 작성하세요. 이미지와 더불어 텍스트를 사용해, 크롤러가 주제를 이해할 수 있도록 도우세요.

인기도

다른 유명한 사이트에서 여러분의 사이트로 링크를 했다면 더 많은 트래픽을 받습니다.

더 알아보기
------

### 일반 지식

* 검색 엔진 최적화 on Wikipedia
### SEO 배우기

* Google Webmasters 학습 문서


정보 아키텍처 (Information architecture) - MDN Web Docs 용어 사전: 웹 용어 정의

정보 아키텍처 (Information architecture)
==================================

웹 디자인 및 개발에 적용되는 정보 아키텍처는 웹 사이트의 정보 / 컨텐츠 / 기능을 구성하여 정보와 서비스를 쉽게 사용하고 찾을 수 있도록 하는 방법으로, 최상의 사용자 경험을 제공하는 방식입니다.

같이 보기
-----

* 위키백과의 정보 아키텍처


문서 지시문 (Document directive) - MDN Web Docs 용어 사전: 웹 용어 정의

문서 지시문 (Document directive)
===========================

**CSP 문서 지시문**은 `Content-Security-Policy` (en-US)에 사용되며 정책이 적용되는 문서 또는 워커 환경의 속성을 관리합니다.

문서 지시문은 `default-src` 지시문으로 대체되지 않습니다.

전체 목록은 문서 지시문 (en-US)을 참고해주세요.

같이 보기
-----

* 용어 사전
    + CSP
    + Reporting 지시문
    + Fetch 지시문
    + Navigation 지시문
* 참조
    + https://www.w3.org/TR/CSP/#directives-document
    + `upgrade-insecure-requests` (en-US)
    + `block-all-mixed-content` (en-US)
    + `Content-Security-Policy` (en-US)


JavaScript - MDN Web Docs 용어 사전: 웹 용어 정의

JavaScript
==========

JavaScript(또는 "JS")는 클라이언트 측에서 웹페이지를 동적으로 다룰때 사용되는 프로그래밍 언어이지만, 종종 서버 측에서 Node.js와 같은 런타임을 이용하여 사용되기도 합니다.

JavaScript는 Java 프로그래밍 언어와 **혼동해서는 안 됩니다**. "Java" 및 "JavaScript"는 미국 및 기타 국가에서 Oracle의 상표(또는 등록 상표)이지만, 두 프로그래밍 언어는 구문, 의미 및 사용 사례가 크게 다릅니다.

대부분 JavaScript는 브라우저에서 사용됩니다. 개발자들은 DOM을 통해서 웹 페이지의 내용을 조작할 수 있으며, AJAX와 IndexedDB로 데이터를 다룹니다. canvas로 그림을 그리기도 하고, 다양한 API들을 활용해 브라우저를 실행하는 기기와 상호작용합니다. 브라우저들의 APIs 성능 향상과 성장세를 등에 업고 JavaScript는 세계에서 가장 많이 쓰이는 언어 중 하나로 자리매김 하였습니다.

### 기원과 역사

Brendan Eich (당시 Netscape Corporation에 근무)가 서버 측 언어로 생각한 JavaScript는 곧 1995년 9월 Netscape Navigator 2.0에 등장했습니다. JavaScript는 즉각적인 성공을 거두었고 Internet Explorer 3.0는 1996년 8월에 JScript라는 이름으로 JavaScript 지원을 도입했습니다.

1996년 11월 Netscape는 JavaScript를 업계 표준으로 만들기 위해 Ecma International과 협력하기 시작했습니다. 이후 표준화된 JavaScript는 ECMAScript라고 불리며 ECMA-262에 지정되어 있으며, ECMA-262의 최신 버전(12번째, ES2021)은 2021년 6월 현재 출시되었습니다.

최근, JavaScript는 성공적인 플랫폼 Node.js과 함께 서버로 돌아왔습니다. Node.js(Chrome's V8 JavaScript Engine를 사용해 빌드되었습니다)는 가장 유명한 브라우저 밖에서의 크로스플랫폼 JavaScript 실행 환경입니다. Node.js를 활용하면 JavaScript를 PC에서 쓰이는 자동화 스크립트 언어로 쓸 수도 있고, 완전히 작동하는 HTTP 및 Web Sockets (en-US) 서버를 만들 수 있습니다.

같이 보기
-----

* 위키피디아의 JavaScript
* MDN의 The JavaScript guide
* NodeSchool의 "javascripting" workshop
* codecademy.com의 JavaScript 과정
* 최신 ECMAScript 표준
* MDN의 The JavaScript reference
* *Eloquent JavaScript* 책


Internet - MDN Web Docs 용어 사전: 웹 용어 정의

Internet
========

인터넷은 가장 중요한 두 가지 프로토콜인 TCP/IP라는 인터넷 프로토콜 제품군을 사용하는 전 세계 네트워크입니다.

같이 보기
-----

* 인터넷 작동 원리 (초보자를 위한 소개)


텔넷 (Telnet) - MDN Web Docs 용어 사전: 웹 용어 정의

텔넷 (Telnet)
===========

**텔넷(Telnet)** 은 원격 컴퓨터에 접근하기 위한 명령줄 도구이자 기본 TCP/IP 프로토콜입니다.

같이 보기
-----

* 위키백과의 텔넷


인라인 요소 - MDN Web Docs 용어 사전: 웹 용어 정의

인라인 요소
======

CSS에서, 인라인 레이아웃에 참여하는 콘텐츠를 **인라인 수준 콘텐츠**라고 합니다. 대부분의 텍스트 시퀀스, 교체된 요소 및 생성된 콘텐츠는 기본적으로 인라인 수준입니다.

인라인 레이아웃에서, 텍스트의 혼합 스트림, 대체된 요소 및 기타 인라인 상자는 줄 상자 스택으로 조각화하여 배치됩니다. 각 줄 상자 내에서, 인라인 수준의 상자는 쓰기 모드에 따라 수직 또는 수평으로 정렬됩니다. 일반적으로 텍스트의 기준선에 따라 정렬됩니다. 이것은 CSS로 변경할 수 있습니다.

![inline layout](/ko/docs/Glossary/Inline-level_content/inline_layout.png)

**참고:** HTML(**Hypertext Markup Language**)의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다. 프리젠테이션 특성으로서, 이것은 이제 CSS에 의해 지정됩니다.

예제
--

```html
<p>
  This span is an <span class="highlight">inline-level element</span>; its
  background has been colored to display both the beginning and end of the
  element's influence. Input elements, like <input type="radio" /> and
  <input type="checkbox" />, are also inline-level content.
</p>
```

이런 예제에서, `<p>` 요소에는 일부 텍스트가 포함되어 있습니다. 해당 텍스트 내에는 인라인 수준 요소인 `<span>` 요소와 `<input>` (en-US) 요소가 있습니다. `<span>`이 두 줄에 걸쳐 있으면, 두 줄 상자가 생성됩니다. 이러한 요소는 인라인이기 때문에, 단락이 끊어지지 않은 텍스트 흐름의 단일 단락으로 렌더링됩니다.
```

body {
  margin: 0;
  padding: 4px;
  border: 1px solid #333;
}

.highlight {
  background-color: #ee3;
}
```

같이 보기
-----

* 블록 레벨 요소
* 인라인 레이아웃 (en-US)
* `display` (en-US)


가비지 컬렉션 (Garbage collection) - MDN Web Docs 용어 사전: 웹 용어 정의

가비지 컬렉션 (Garbage collection)
============================

**Garbage collection** 은 더 이상 다른 객체에 의해 참조되지 않는 객체를 찾아 삭제하는 과정을 설명하기 위해서 컴퓨터 프로그래밍에서 사용되는 용어입니다.

즉, 가비지 컬렉션은 다른 객체에서 사용하지 않는 객체를 제거하는 프로세스입니다. 종종 'GC'로 축약되는 가비지 컬렉션은 JavaScript에서 사용하는 메모리 관리 시스템의 기본 구성 요소입니다.

같이 보기
-----

* 위키백과의 메모리 관리
* 위키백과의 가비지 컬렉션 (컴퓨터 과학)
* MDN JavaScript 안내서의 가비지 컬렉션
* JavaScript의 메모리 관리


CSS 전처리기 - MDN Web Docs 용어 사전: 웹 용어 정의

CSS 전처리기
========

**CSS 전처리기**는 전처리기가 가진 특별한 syntax으로 CSS를 생성하도록 하는 프로그램입니다.

선택할 수 있는 많은 CSS 전처리기가 있지만, 대부분의 CSS 전처리기는 기본 CSS에 존재하지 않는 특징(믹스인(mixin), 중첩 셀렉터(nesting selector), 상속 셀렉터(inheritance selector), 기타 등)을 추가할 것입니다, 이러한 특징은 CSS 구조를 가독성있고 더 유지보수 하기 좋게 합니다.

CSS 전처리기를 사용하기 위해서는, 당신의 웹 server에 CSS 컴파일러를 설치해야 하거나, 개발환경에서 컴파일한 후 컴파일된 CSS 파일을 웹 서버에 업로드합니다.

같이 보기
-----

* 가장 인기있는 CSS 전처리기들:
    + SASS
    + LESS
    + Stylus
    + PostCSS
* MDN 웹 문서 용어 사전
    + CSS


사전 요청 - MDN Web Docs 용어 사전: 웹 용어 정의

사전 요청
=====

교차 출처 리소스 공유 사전 요청은 본격적인 교차 출처 HTTP 요청 전에 서버 측에서 그 요청의 메서드와 헤더에 대해 인식하고 있는지를 확인하는 CORS 요청입니다.

이것은 `Access-Control-Request-Method`, `Origin`, 선택적으로 `Access-Control-Request-Headers` 헤더 구성으로 2가지 또는 3가지의 HTTP request headers를 사용하는 `OPTIONS` 요청입니다.

사전 요청은 일반적인 상황에서는 브라우저에서 자동으로 발생됩니다. 그러므로 프런트엔드 개발자가 이 요청을 직접 작성할 필요는 없습니다. 단순 요청의 경우 사전 실행 요청이 생략됩니다.

예를 들어, 클라이언트는 `DELETE` 요청을 하기 전에 사전 요청을 통해 서버가 `DELETE`을 허용하는지 물어볼 수 있습니다.

```http
OPTIONS /resource/foo
Access-Control-Request-Method: DELETE
Access-Control-Request-Headers: origin, x-requested-with
Origin: https://foo.bar.org
```

서버가 허용하는 경우, `Access-Control-Allow-Methods` 헤더 값에 `DELETE`를 포함하여 사전 요청에 응답합니다.

```http
HTTP/1.1 204 No Content
Connection: keep-alive
Access-Control-Allow-Origin: https://foo.bar.org
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Max-Age: 86400
```

위의 예와 같이, `Access-Control-Max-Age` 헤더를 사용하여 동일한 URL을 사용하는 요청에 대해 사전 응답을 선택적으로 캐시할 수 있습니다. 사전 응답을 캐시하기 위해, 브라우저는 브라우저가 관리하는 일반 HTTP 캐시와 별개인 특정 캐시를 사용합니다. 사전 응답은 브라우저의 일반 HTTP 캐시에 저장되지 않습니다.

같이 보기
-----

* CORS
* `OPTIONS`


ARPANET - MDN Web Docs 용어 사전: 웹 용어 정의

ARPANET
=======

**ARPANET** (Advanced Research Projects Agency NETwork)은 민감한 군사 데이터를 전송하고 미국 전역의 주요 연구 그룹을 연결하기 위한 강력한 매체로 1969년에 구축된 초기 컴퓨터 네트워크였습니다. ARPANET은 먼저 NCP(Network Control Protocol)를 실행했고 이후 인터넷 프로토콜 또는 TCP/IP 제품군의 첫 번째 버전을 실행하여 ARPANET을 두드러지게 만들었습니다. 초기 Internet의 일부입니다. ARPANET은 1990년 초에 폐쇄되었습니다.

같이 보기
-----

* .arpa
* TCP
* 위키백과의 ARPANET


지배자 (Dominator) - MDN Web Docs 용어 사전: 웹 용어 정의

지배자 (Dominator)
===============

그래프 이론에서, 루트 노드에서 노드 B까지 모든 경로가 A를 통과하면 노드 A가 노드 B를 지배합니다.

이 개념은 A를 통해서만 B에 접근할 수 있다는 것을 의미하므로 가비지 컬렉션에 중요한 개념입니다. 따라서 가비지 컬렉터가 A에 도달할 수 없고 회수하기에 적합하다고 판단하면, B 또한 도달할 수 없고, 회수에 적합하다고 판단합니다. 따라서 A가 지배하는 객체는 A가 가지고 있는 크기(A 자체가 해제될 경우 해제될 수 있는 총 메모리 양)에 포함됩니다.

같이 보기
-----

* 위키백과의 지배자
* 지배자
* 가비지 컬렉션


HSTS - MDN Web Docs 용어 사전: 웹 용어 정의

HSTS
====

**HTTP Strict Transport Security**를 사용하면 웹 사이트가 브라우저에 HTTP를 사용하여 사이트를 불러와서는 안 되며, 대신 HTTP를 사용하여 사이트에 접근하려는 모든 시도를 HTTPS 요청으로 자동 변환해야 함을 알릴 수 있습니다. 서버가 보낸 리소스와 함께 하나의 HTTP 헤더인 `Strict-Transport-Security`로 구성됩니다.

다시 말해, URL에서 프로토콜을 HTTP에서 HTTPS로 변경하는 것이 작동하도록(더 안전함) 브라우저에 알리고 모든 요청에 대해 이를 수행하도록 요청합니다.

같이 보기
-----

* `Strict-Transport-Security`
* OWASP 문서 HTTP Strict Transport Security
* 위키피디아 HTTP Strict Transport Security


복합 연산 (Composite operation) - MDN Web Docs 용어 사전: 웹 용어 정의

복합 연산 (Composite operation)
===========================

CSS에서, CSS 규칙의 속성 값은 해당 속성의 '기본 값'이고, 키프레임의 동일한 속성 값은 해당 효과 크기입니다.

'복합 연산'은 효과 값을 기본 값과 결합하여 생성하는 데 사용되는 특정 작업입니다. 복합 연산에는 세 가지 유형이 있습니다.

* **대체**: 효과 값이 기본 값을 대체합니다. 이 경우 최종 효과 값은 원래 효과 값 자체입니다.
* **추가**: 효과 값이 기본 값에 추가됩니다.
* **누적**: 효과 값은 기본 값과 결합됩니다.

**참고:** CSS의 복합 연산은 애니메이션에만 적용됩니다.

같이 보기
-----

* `animation-composition` (en-US)
* `KeyframeEffect.composite` (en-US)


Server - MDN Web Docs 용어 사전: 웹 용어 정의

Server
======

서버는 일반적으로 클라이언트라고 불리는 사용자에게 서비스를 제공하는 소프트웨어 또는 하드웨어이다. 하드웨어 서버는 네트워크의 공유 컴퓨터로서, 대개 강력하고 데이터 센터에 저장된다. 소프트웨어 서버(하드웨어 서버에서 자주 실행됨)는 클라이언트 프로그램에 서비스를 제공하는 프로그램 또는 사용자 클라이언트의 user interface을 말한다.

서비스는 일반적으로 지역 네트워크 또는 인터넷과 같은 광역 네트워크를 통해 제공된다. 클라이언트 프로그램과 서버 프로그램은 전통적으로 API을 사용하여 인코딩된 메시지를 프로토콜에 전달하여 연결한다.

예를 들어:

* 인터넷에 연결된 웹 서버가 이 페이지를 읽을 수 있도록 브라우저 소프트웨어로 HTML을 보내고 있음.
* 파일, 이름, 메일, 인쇄 및 팩스의 로컬 영역 네트워크 서버
* 데이터 센터의 미니컴퓨터, 메인프레임, 슈퍼컴퓨터
더 알아보기
------

### 일반적인 지식

* 서버의 소개
* Wikipedia의 Server (computing)


프리페치 (Prefetch) - MDN Web Docs 용어 사전: 웹 용어 정의

프리페치 (Prefetch)
===============

 프리페치는 사용자가 가까운 미래에 탐색할 가능성이 '있는' 페이지에 대해 백그라운드에서 리소스를 추론적으로 가져오는 방식을 의미합니다.
 이렇게 하면 사용자가 해당 페이지로 이동하기로 선택한 경우 미리 가져온 페이지의 로드 시간을 크게 줄일 수 있습니다.
 예를 들어, 프리페치는 '다음' 버튼으로 연결된 페이지 리소스, 사용자가 마우스를 가져가는 링크 팝업 또는 검색 결과를 가져오는 데 사용될 수 있습니다.

### 리소스 프리페치

 리소스는 향후 탐색에 필요한 가능성에 따라 미리 가져와야 합니다.
 브라우저는 주소 표시줄의 현재 URL과 같은 일부 리소스에 대해 필요한 리소스를 자동으로 추론할 수 있습니다.

 브라우저는 또한 `rel="prefetch"` (en-US)을 사용하여 `<link>` 요소에 대한 콘텐츠를 미리 가져옵니다.
 이 방식을 통해서, 개발자는 현재 페이지에서 가능한 탐색 방법을 브라우저에 암시해줄 수 있습니다.
 이러한 링크만 미리 가져오고(`<a>` 요소는 그렇지 않습니다), `fetchPriority="low"`가 있는 요소를 포함해 현재 페이지에서 사용하는 리소스보다 낮은 우선순위로 가져옵니다.

프리페칭은 가능한 다음 탐색을 위해 HTML과 하위 리소스를 모두 가져오는 데 사용될 수 있습니다. 일반적인 사용 사례는 사이트의 나머지 부분에서 사용하는 더 많은 '무거운' 리소스를 가져오는 간단한 웹사이트 랜딩 페이지를 갖는 것입니다.

```html
<link rel="prefetch" href="/app/style.css" />
<link rel="prefetch" href="https://example.com/landing-page" />
```

`prefetch` 작업에 대한 가져오기 요청으로 인해 HTTP 헤더 `Sec-Purpose: prefetch` (en-US)가 포함된 HTTP 요청이 생성됩니다. 서버는 이 헤더를 사용해 리소스에 대한 캐시 시간 초과를 변경하거나, 다른 특수 처리를 수행할 수 있습니다.
 요청에는 값이 `empty`로 설정된 `Sec-Fetch-Dest` (en-US) 헤더도 포함되어야 합니다.
 요청의 `Accept` 헤더는 일반 탐색 요청에 사용되는 값과 일치해야 합니다. 이를 통해 브라우저는 탐색 후 일치하는 캐시된 리소스를 찾을 수 있습니다.
 응답이 반환되면, HTTP 캐시의 요청과 함께 캐시됩니다.

**참고:** 브라우저 공급업체는 현재 전송되는 헤더를 중심으로 정렬하고 있으며, 다른 헤더와 값을 사용할 수 있습니다.
 명세 준수 사항을 추적하는 가장 좋은 장소는 `Sec-Purpose` (en-US) 호환성 표입니다.

### DNS 프리페치

DNS 프리페치 (en-US)는 도메인 네임을 미리 확인하여, 요청 시 도메인 조회와 관련된 시간을 줄여 로드 시간을 단축합니다.

```html
<link rel="dns-prefetch" href="https://example.com/" />
```

같이 보기
-----

* 즉각적인 페이지 탐색을 위해 Chrome에서 페이지를 미리 렌더링 (developer.chrome.com)
* prerender
* 프리로드
* dns 프리페치 (en-US)
* 페이지 예측
* 지연 로딩


TCP 핸드셰이크 (TCP handshake) - MDN Web Docs 용어 사전: 웹 용어 정의

TCP 핸드셰이크 (TCP handshake)
=========================

전송 제어 프로토콜(Transmission Control Protocol)은 uses a **3방향 핸드셰이크(three-way handshake)** (TCP-handshake, 3개의 메시지 핸드셰이크 및/또는 SYN-SYN-ACK로 알려져 있습니다)를 사용하여 IP 기반 네트워크를 통해 TCP/IP 연결을 설정합니다.

TCP 세션을 협상하고 시작하기 위해 TCP가 전송하는 세 가지 메시지는 각각 **SYN(SYNchronize)**, **SYN-ACK(SYNchronize-ACKnowledgement)**, **ACK(ACKnowledge)** 라는 이름을 가집니다. 세 가지 메시지 메커니즘은 서로 정보를 주고 받기를 윈하는 두 컴퓨터가 HTTP 브라우저 요청과 같은 데이터를 전송하기 전에 연결 매개변수를 협상할 수 있도록 설계되었습니다.

호스트(일반적으로 브라우저)는 TCP SYNchronize 패킷을 서버로 보냅니다. 서버는 SYN을 수신하고 SYNchronize-ACKnowledgement를 다시 보냅니다. 호스트는 서버의 SYN-ACK을 수신하고 ACKnowledge를 다시 보냅니다. 서버는 ACK를 수신하고 TCP 소켓 연결이 설정됩니다.

이 핸드셰이크 단계는 보안 연결을 생성할 때, DNS 조회 이후 및 TLS 핸드셰이크 이전에 발생합니다. 4방향 핸드셰이크를 통해 연결의 각 측면에서 독립적으로 연결을 종료할 수 있습니다.

같이 보기
-----

* 전송 계층 보안 (Transport Layer Security, TLS)프로토콜
* HTTPS
* 위키백과의 전송 계층 보안


후디니 (Houdini) - MDN Web Docs 용어 사전: 웹 용어 정의

후디니 (Houdini)
=============

후디니(Houdini)는 개발자에게 CSS를 확장해, 브라우저 렌더링 엔진의 스타일 및 레이아웃 프로세스에 연결할 수 있는 기능을 제공하는 저수준 API의 모음입니다. 후디니(Houdini)는 개발자에게 CSS 객체 모델 (CSSOM)에 대한 접근 권한을 주어, 개발자가 브라우저에서 CSS로 구문 분석할 수 있는 코드를 작성할 수 있도록 만들어 줍니다.

후디니(Houdini)의 이점은 개발자가 웹 표준 명세서가 CSS 기능을 정의할 때까지, 그리고 모든 브라우저가 기능을 완전히 구현할 때까지 기다리지 않고 CSS 기능을 만들 수 있다는 것입니다.

 후디니(Houdini)가 지원하는 많은 기능은 JavaScript로 생성될 수 있지만, JavaScript가 활성화되기 전에 CSSOM과 직접 상호작용하면 구문 분석 시간이 더 빨라집니다. 브라우저는 스크립트에 있는 스타일 업데이트를 적용하기 전에 레이아웃, 페인트 및 복합 프로세스를 포함한 CSSOM을 생성합니다. 업데이트된 JavaScript 스타일을 구현하기 위해 레이아웃, 페인트 및 복합 프로세스가 반복됩니다.
 후디니(Houdini) 코드는 첫 번째 렌더링 주기가 완료될 때까지 기다리지 않습니다. 오히려, 첫 번재 주기에 포함되어, 렌더링 가능하고 이해가능한 스타일을 만듭니다.

같이 보기
-----

* Houdini (en-US)
* CSSOM
* CSS Paint API (en-US)
* CSS Typed OM (en-US)


UX - MDN Web Docs 용어 사전: 웹 용어 정의

UX
==

**사용자 경험(User experience, UX)** 은 User eXperience의 약어입니다. 사용자와 시스템 간의 상호작용을 연구하는 학문입니다. 목표는 사용자의 관점에서 시스템과 쉽게 상호 작용할 수 있도록 만드는 것입니다.

시스템은 최종 사용자가 상호 작용하는 모든 종류의 제품이나 애플리케이션이 될 수 있습니다. 예를 들어, 웹 페이지에서 수행된 UX 연구는 사용자가 페이지를 이해하고, 다른 영역으로 이동하고, 일반적인 작업을 완료하는 것이 쉬운지, 그리고 이 과정이 마찰을 줄여줄 수 있는지 보여줄 수 있습니다.

같이 보기
-----

* 위키백과의 User experience


공백 (Whitespace) - MDN Web Docs 용어 사전: 웹 용어 정의

공백 (Whitespace)
===============

**공백(Whitespace)** 은 다른 문자 사이에 가로 또는 세로 간격을 제공하는 데 사용되는 문자열을 나타냅니다. 공백은 HTML, CSS, JavaScript 및 기타 컴퓨터 언어에서 토큰을 구분하는 데 자주 사용됩니다.

공백 문자와 사용법은 언어마다 차이가 있습니다.

HTML에서
------

Infra Living Standard에서는 5개의 문자를 'ASCII 공백'으로 정의합니다(U+0009 TAB, U+000A LF, U+000C FF, U+000D CR 및 U+0020 SPACE).

JavaScript에서
------------

ECMAScript 언어 명세서는 여러 유니코드 코드 포인트를 '공백'으로 정의합니다(U+0009 CHARACTER TABULATION <TAB>, U+000B LINE TABULATION <VT>, U+000C FORM FEED <FF>, U+0020 SPACE <SP>, U+00A0 NO-BREAK SPACE <NBSP>, U+FEFF ZERO WIDTH NO-BREAK SPACE <ZWNBSP> 및 기타 유니코드 "Space\_Separator" 코드 포인트 <USP>).

같이 보기
-----

* 위키백과의 공백 문자
* HTML, CSS 및 DOM에서 공백을 처리하는 방법 (en-US)
* `white-space`
* 명세서
    + ASCII 공백 명세
    + ECMAScript 언어 명세서
* 용어 사전
    1. Character


PHP - MDN Web Docs 용어 사전: 웹 용어 정의

PHP
===

**PHP**(PHP: Hypertext Preprocessor)는 HTML에 내장되어 웹 애플리케이션과 동적 웹 사이트를 구축할 수 있는 오픈 소스 서버 측 스크립팅 언어입니다.

예제
--

### 기본 문법

```php
// PHP 코드 시작
<?php
 // PHP 코드가 위치
?>
// PHP 코드 종료
```

### 화면에 데이터 출력하기

```php
<?php
 echo "Hello World!";
?>
```

### PHP 변수

```php
<?php
 // 변수
 $nome='Danilo';
 $sobrenome='Santos';
 $pais='Brasil';
 $email='danilocarsan@gmail.com';

 // 변수 출력하기
 echo $nome;
 echo $sobrenome;
 echo $pais;
 echo $email;
?>
```

같이 보기
-----

* 공식 웹사이트
* PHP on Wikipedia
* 위키북스의 PHP 프로그래밍
* MDN 웹 문서 용어 사전
    + Java
    + JavaScript
    + Python
    + Ruby


CORS - MDN Web Docs 용어 사전: 웹 용어 정의

CORS
====

**CORS** (Cross-Origin Resource Sharing)는 브라우저가 프론트엔드 JavaScript 코드가 교차 출처(cross-origin)에 대한 응답에 접근하는 것을 차단하는지 여부를 결정하는 HTTP headers 전송으로 이루어진 시스템입니다.

동일 출처 보안 정책은 리소스에 대한 출처 간 접근을 금지합니다. 그러나 CORS는 웹 서버가 리소스에 대한 출처 간 접근을 허용하도록 선택할 수 있는 기능을 제공합니다.

CORS 헤더
-------

`Access-Control-Allow-Origin`

응답을 공유할 수 있는지 여부를 나타냅니다.

`Access-Control-Allow-Credentials`

자격 증명 플래그가 true일 때 요청에 대한 응답을 노출할 수 있는지 여부를 나타냅니다.

`Access-Control-Allow-Headers`

실제 요청을 할 때 사용할 수 있는 HTTP 헤더를 나타내기 위해 실행 전 요청에 대한 응답으로 사용됩니다.

`Access-Control-Allow-Methods`

실행 전 요청에 대한 응답으로 리소스에 접근할 때 허용되는 메서드를 지정합니다.

`Access-Control-Expose-Headers`

이름을 나열하여 응답의 일부로 노출될 수 있는 헤더를 나타냅니다.

`Access-Control-Max-Age`

실행 전 요청 결과를 캐시할 수 있는 기간을 나타냅니다.

`Access-Control-Request-Headers`

실제 요청이 이루어질 때 사용될 HTTP 헤더를 서버에 알리기 위해 프리플라이트 요청을 발행할 때 사용됩니다.

`Access-Control-Request-Method`

실제 요청이 이루어질 때 어떤 HTTP method가 사용될 것인지 서버에 알리기 위해 프리플라이트 요청을 발행할 때 사용됩니다.

`Origin`

가져오기(fetch) 요청이 시작된 위치를 나타냅니다.

`Timing-Allow-Origin` (en-US)

Resource Timing API (en-US)의 기능을 통해 검색된 속성 값을 볼 수 있는 출처를 지정합니다. 그렇지 않으면, 교차 출처 제한으로 인해 0으로 보고됩니다.

같이 보기
-----

* 교차 출처 리소스 공유 (CORS) on MDN
* 위키피디아의 교차 출처 리소스 공유
* Fetch 명세


DOM - MDN Web Docs 용어 사전: 웹 용어 정의

DOM
===

**DOM** (Document Object Model) 은 HTML 또는 XML 기반 문서와 상호작용하고 표현하는 API입니다. DOM은 browser에서 로드되며, node 트리(각 노드는 문서의 부분을 나타냅니다)로 표현하는 문서 모델입니다(예, element, 문자열, 또는 주석).

DOM은 document의 모든 노드에 접근하고 상호작용할 수 있도록 브라우저에서 코드를 실행할 수 있게 해주기 때문에, Web에서 가장 많이 사용되는 API 중 하나입니다. 노드들은 생성, 이동 및 변경될 수 있습니다. 이벤트 리스너를 노드에 추가해 주어진 이벤트가 발생할 때 트리거되게 할 수 있습니다.

같이 보기
-----

* MDN의 DOM 문서
* DOM 표준
* 위키피디아의 문서 객체 모델


직렬화 가능 객체 (Serializable object) - MDN Web Docs 용어 사전: 웹 용어 정의

직렬화 가능 객체 (Serializable object)
===============================

**직렬화 가능 객체 (Serializable object)** 는 모든 JavaScript 환경('영역')에서 직렬화되고 나중에 역직렬화될 수 있는 객체입니다.

예를 들어, 직렬화 가능 객체를 통해, 디스크에 저장하고 나중에 복원하거나 `structuredClone()`를 사용하여 복제하거나, `DedicatedWorkerGlobalScope.postMessage()` (en-US)를 사용하여 워커 간에 공유할 수 있습니다.

 직렬화에는 원래 객체의 모든 속성과 기타 부분이 포함되지 않을 수 있습니다.
 예를 들어, `DOMException` (en-US)의 직렬화에는 `name` 및 `message` 속성이 포함되어야 하지만, 다른 속성이 포함되어 있는지 여부는 구현에 따라 다릅니다.
 결과적으로, 역직렬화된 객체는 원래 객체의 동일한 복제본/복사본이 아닐 수 있습니다.
 그러나 역직렬화된 새 객체는 깊은 복사이므로, 원래 객체에서 직렬화된 다음 새 객체로 역직렬화된 속성은 원래 객체와 참조를 공유하지 않습니다.

 어떤 경우에는 객체를 직렬화 및 역직렬화할 때, 복사본을 만드는 것보다 일부 리소스를 전송하는 것이 합리적입니다.
 전송할 수 있는 객체를 전송 가능한 객체 (en-US)라고 합니다.

지원되는 객체
-------

 모든 원시 값은 직렬화 가능합니다.
 모든 객체가 직렬화 가능한 객체는 아닙니다.
 직렬화할 수 있는 객체는 The structured clone algorithm > Supported types에 나열되어 있습니다.

**참고:** 직렬화 가능 객체는 웹 IDL 파일에 `[Serializable]` 속성으로 마크업되어 있습니다.


Immutable - MDN Web Docs 용어 사전: 웹 용어 정의

Immutable
=========

불변 값은 완전히 새로운 값을 생성하지 않고는 내용을 변경할 수 없는 값입니다.

JavaScript에서, 원시 값은 불변입니다. 원시 값이 생성되면 변경할 수 없지만, 이를 가진 변수에 다른 값을 다시 할당할 수 있습니다. 반대로, 객체 및 배열은 기본적으로 변경할 수 있습니다. 새 값을 다시 할당하지 않고도 속성과 요소를 변경할 수 있습니다.

몇 가지 이유로 불변 객체를 사용하는 것이 도움될 수 있습니다.

* 성능 향상하기(향후 객체의 변경에 대한 계획 없음)
* 메모리 사용을 줄이기(전체 객체를 복제하는 대신 객체 참조 만들기)
* 스레드 안전성(여러 스레드가 서로 간섭하지 않고 동일한 객체 참조 가능)
* 개발자의 정신적인 부담 감소(객체의 상태가 변경되지 않고 항상 일관됨)

변경 가능성을 쉽게 증명할 수 있습니다. 속성을 변경할 수 있는 한 가지 방법을 제공하는 한 객체는 변경 가능합니다. 반면에, "불변성"은 이를 보호할 언어적 의미가 없다면 증명하기 어렵습니다. 이는 개발자 간 약속의 문제입니다. 예를 들어, `Object.freeze()`는 JavaScript에서 객체를 변경할 수 없도록 만드는 언어 수준 메서드입니다.

같이 보기
-----

* 위키피디아의 불변 객체
* Mutable


알파 (알파 채널) - MDN Web Docs 용어 사전: 웹 용어 정의

알파 (알파 채널)
==========

**알파 채널**은 (`<color>`)의 불투명도를 지정합니다. 색상은 여러 숫자들의 디지털 형식으로 표현되고, 각 숫자는 색상의 특정 구성 요소의 강도 또는 강도 수준을 나타냅니다. 이러한 각 구성 요소를 **채널**이라고 합니다. 일반적인 이미지 파일에서 색상 채널은 최종 색상을 구성하는 데 빨간색, 녹색, 파란색이 얼마나 사용되는지를 나타냅니다. 배경을 어느 정도 볼 수 있는 색상을 표현하기 위해, 색상에 네 번째 채널인 알파 채널을 추가합니다.

예를 들어, 색상 `#8921F2`(`rgb(137 33 242)` 또는 `hsl(270 89% 54)`로 표현됩니다)는 멋진 보라색 음영입니다. 아래에는 왼쪽 상단 모서리에 해당 색상의 작은 상자가 있고, '동일' 색상이지만 알파 채널이 0.5(50% 불투명도)로 설정된 `#8921F280` 상자가 있습니다. `80`은 16진수로 50%에 해당합니다. 이 색상은 `rgb(137 33 242 / 0.5)` 또는 `hsl(270 89% 54 / 0.5)`. 두 개의 상자는 텍스트 단락 위에 그려집니다.

![색상에 대한 알파 채널의 효과를 보여주는 이미지입니다.](/ko/docs/Glossary/Alpha/alpha-channel-example.png)

보시다시피, 알파 채널이 없는 색상은 배경 텍스트를 완전히 차단하는 반면, 알파 채널이 있는 상자는 보라색 배경 색상을 통해 표시됩니다.

같이 보기
-----

* CSS 색상
* CSS 값과 단위 소개
* 이미지 파일 형식 및 형식 안내서 (en-US)
* 알파 합성 on Wikipedia
* RGBA 색상 모델 on Wikipedia
* 채널 (디지털 이미지) on Wikipedia


Simple header - MDN Web Docs 용어 사전: 웹 용어 정의

Simple header
=============

CORS-safelisted request header의 과거 표현입니다.


그리드 행 (Grid Row) - MDN Web Docs 용어 사전: 웹 용어 정의

그리드 행 (Grid Row)
================

\*\*그리드 행(grid row)\*\*은 CSS 그리드 레이아웃의 수평 트랙, 즉 두 수평 그리드 선 사이의 공간입니다. `grid-template-rows` (en-US) 속성 또는 약식 `grid` (en-US) 또는 `grid-template` (en-US) 속성에 의해 정의됩니다.

또한, 요소가 '명시적 그리드'에서 생성된 행 외부에 배치되면 '암시적 그리드'에서 행이 생성될 수 있습니다. 이러한 행은 기본적으로 자동 크기가 지정되거나, `grid-auto-rows` (en-US) 속성으로 지정된 크기를 가질 수 있습니다.

CSS 그리드 레이아웃에서 정렬 시, 행 방향으로 작동되는 축은 '인라인 또는 가로 축'으로 알려져 있습니다.

같이 보기
-----

### 속성 참고서

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

* CSS 그리드 레이아웃 안내서: 그리드 레이아웃 기본 개념


난수 생성기 (Random Number Generator) - MDN Web Docs 용어 사전: 웹 용어 정의

난수 생성기 (Random Number Generator)
================================

**의사 난수 생성기 (pseudorandom number generator, PRNG)** 는 복잡하고 예측 불가능해 보이는 패턴으로 숫자를 출력하는 알고리즘입니다. 진정한 난수(예를 들어, 방사선 소스)는 전혀 예측할 수 없지만, 모든 알고리즘은 예측 가능하며 PRNG는 동일한 시작 매개변수 또는 'seed'를 전달하면 동일한 숫자를 반환합니다.

PRNG는 게임과 같은 다양한 애플리케이션에 사용될 수 있습니다.

암호학적으로 안전한 PRNG는 암호화에 사용하기에 적합한 특정 추가 속성을 갖춘 PRNG입니다. 여기에는 아래가 포함됩니다.

* 공격자가 (시드에 대한 지식 없이) 출력을 예측하는 것은 계산을 고려했을 때 불가능합니다.
* 공격자가 현재 상태를 알아낼 수 있다면, 공격자가 이전에 내보낸 숫자를 알아낼 수 있어서는 안 됩니다.

대부분의 PRNG는 암호학적으로 안전하지 않습니다.

같이 보기
-----

* 위키백과의 의사 난수 생성기
* 암호화된 보안 PRNG가 아닌 내장된 JavaScript PRNG 함수인 `Math.random()`.
* 암호화된 보안 숫자를 제공하기 위한 함수인 `Crypto.getRandomValues()`


키워드(Keyword) - MDN Web Docs 용어 사전: 웹 용어 정의

키워드(Keyword)
============

\*\*키워드(Keyword)\*\*는 내용을 설명하는 단어나 문구입니다. 온라인 키워드는 검색 엔진에 대한 쿼리로 사용되거나 웹사이트의 콘텐츠를 식별하는 단어로 사용됩니다.

검색 엔진을 사용할 때, 키워드를 사용하여 찾고 있는 내용을 지정하면 검색 엔진이 관련 웹 페이지를 반환합니다. 보다 정확한 결과를 얻으려면, "Mustang" 대신 "Blue Mustang GTO"와 같은 보다 구체적인 키워드를 사용해 보세요. 또한, 웹페이지는 메타 태그(`<head>` 섹션 안에서) 키워드를 사용하여 페이지 콘텐츠를 설명하므로, 검색 엔진이 웹페이지를 더 잘 식별하고 구성할 수 있습니다.

같이 보기
-----

* 위키백과의 Keyword


WAI - MDN Web Docs 용어 사전: 웹 용어 정의

WAI
===

웹 접근성 표준(Web Accessibility Initiative, WAI)은 비표준 브라우저 또는 장치가 필요할 수 있는 다양한 문제를 가지고 있는 사람들의 접근성을 개선하기 위한 월드 와이드 웹 컨소시엄(World Wide Web Consortium, W3C)의 노력입니다.

같이 보기
-----

* WAI 웹사이트
* 위키백과의 웹 접근성 표준


단편화 상자 (Fragmentainer) - MDN Web Docs 용어 사전: 웹 용어 정의

단편화 상자 (Fragmentainer)
======================

단편화 상자 (Fragmentainer)는 CSS Fragmentation 명세서에 아래와 같이 정의되어 있습니다.

>
> 단편화된 흐름의 일부 (또는 전체)를 포함하는 페이지 상자, 열 상자 또는 영역과 같은 상자입니다. 단편화 상자는 사전 정의되거나, 필요에 따라 생성될 수 있습니다. 깨지기 쉬운 콘텐츠가 블록 차원의 단편화 상자를 오버플로우하는 경우, 대신 조각화 컨텍스트에서 다음 컨테이너로 침범하게 됩니다.
>
>
>

단편화된 컨텍스트는 CSS 페이징 미디어(CSS Paged Media)에서 찾을 수 있고, 여기서 단편화 상자는 페이지를 정의하는 상자입니다. 다중 열 레이아웃에서 단편화 상자는 다중 열 컨테이너에 열이 정의될 때 생성되는 열 상자입니다. CSS 영역에서 각 영역은 단편화 상자입니다.


ITU - MDN Web Docs 용어 사전: 웹 용어 정의

ITU
===

국제 전기 통신연합 (International Telecommunication Union, ITU)은 전선, 라디오, 전화, 인터넷을 포함한 통신에 대한 표준과 규칙을 제정하도록 UN에서 승인한 조직입니다.

전송이 필요한 위치에 도달하도록 보장하는 규칙을 정의하고 모스 부호에 사용되는 "SOS" 경고 신호를 생성하는 것부터, 국제 전기 통신연합 (ITU)은 정보와 아이디어를 교환하기 위해 기술을 사용하는 방법에 있어 오랫동안 중요한 역할을 해왔습니다.

인터넷 시대에 스트리밍, 원격 회의 및 기타 목적에 사용되는 비디오 및 오디오 데이터 형식에 대한 표준을 설정하는 국제 전기 통신연합 (ITU)의 역할입니다. 예를 들어, ITU와 동화상 전문가 그룹(Moving Picture Experts Group, MPEG)은 함께 협력하여 MPEG-2 (ITU H.262), AVC (ITU H.264) 및 HEVC (ITU H.265)와 같은 다양한 MPEG 명세서를 개발 및 게시하고 유지 관리했습니다.

같이 보기
-----

* ITU 웹사이트
* ITU 역사 포털


코덱 (Codec) - MDN Web Docs 용어 사전: 웹 용어 정의

코덱 (Codec)
==========

**코덱** ("**co**der-**dec**oder"에서 파생된 혼합어)은 데이터 스트림을 인코딩하거나 디코딩하는 프로그램, 알고리즘 또는 장치입니다. 특정 코덱은 특정 인코딩 또는 압축 기술을 처리하는 방법을 알고 있습니다.

같이 보기
-----

* 위키백과의 코덱
* 웹 비디오 코덱 안내서
* 웹 오디오 코덱 안내서 (en-US)
* 웹에서의 미디어 타입 및 형식 안내 (en-US)


LCP - MDN Web Docs 용어 사전: 웹 용어 정의

LCP
===

**최대 콘텐츠풀 페인트 (Largest contentful paint, LCP)** 성능 지표는 페이지가 처음 로드되기 시작할 때부터 기록된, 뷰포트 내에 표시되는 가장 큰 이미지 또는 텍스트 블록의 렌더링 시간을 제공합니다.

LCP를 결정할 때 아래 요소가 포함되어 측정됩니다.

* `<img>` 요소.
* SVG 내부의 `<image>` (en-US) 요소.
* `<video>` 요소의 포스터 이미지.
* `background-image`가 있는 요소.
* `<p>`와 같은, 텍스트 노드 그룹.
같이 보기
-----

* `LargestContentfulPaint` (en-US)
* 최초 콘텐츠풀 페인트
* 최초 페인트


Google Chrome - MDN Web Docs 용어 사전: 웹 용어 정의

Google Chrome
=============

구글 크롬(Google Chrome)은 구글이 개발한 무료 웹 브라우저입니다. 이는 Chromium 오픈 소스 프로젝트에 기반을 두고 있습니다. 몇 가지 주요 차이점은 BrowserStack에 설명되어 있습니다. 크롬은 Blink라고 불리는 고유한 레이아웃을 지원한다. 크롬의 iOS 버전은 Blink가 아니라 해당 플랫폼의 웹뷰(WebKit)를 사용한다는 점에 유의해야 합니다.

같이 보기
-----

* 위키피디아의 Google Chrome
### 크롬 사용자들을 위해

일반 사용자를 위해 다음 중 하나의 링크를 이용하세요.

* Android
* iOS
* Desktop
### 웹 개발자들을 위해

최신 Chrome 기능을 시도하려면, 사전 안정화된 빌드 중 하나를 설치해야 합니다. 구글은 업데이트를 자주 하며, 배포된 버전이 안정된 버전과 나란히 실행되도록 설계하였습니다. 새로운 기능에 대해 알아보려면 Chrome 릴리스 블로그를 방문해야 합니다.

* Android용 Chrome Dev
* Desktop용 Chrome Canary.


델타 (Delta) - MDN Web Docs 용어 사전: 웹 용어 정의

델타 (Delta)
==========

**델타**라는 용어는 두 값 또는 상태 간의 차이를 나타냅니다.

이름은 로마 알파벳의 문자 'D'에 해당하는 그리스 문자 Δ (델타)에서 유래되었습니다. 'D'는 'difference'의 약칭으로 문자 Δ를 사용하는 것을 의미합니다.

'델타'라는 용어는 물리적 또는 가상 객체의 속도, 위치 또는 가속도 변화를 전달할 때 일반적으로 사용됩니다. 음파의 크기나 주파수의 변화를 설명할 때도 사용됩니다.

예를 들어, 화면의 객체가 왼쪽에서 오른쪽으로 얼마나 멀리 이동하는지 설명할 때, 'delta x' 또는 'Δx'라는 용어를 사용할 수 있습니다.

마찬가지로, 'X'의 새 값과 이전 값이 주어지면, 다음과 같이 델타를 계산할 수 있습니다.

```js
let deltaX = newX - oldX;
```

더 일반적으로는, 델타를 수신하고 이를 사용하여 저장된 이전 조건을 업데이트합니다.

```js
let newX = oldX + deltaX;
```

같이 보기
-----

* 마우스 휠 이벤트 (예를 들어, `WheelEvent` (en-US)는 `deltaX` (en-US), `deltaY` (en-US) 및 `deltaZ` (en-US) 속성에서 마지막 이벤트 이후 휠이 이동한 거리를 제공합니다)


정적 메서드 (Static method) - MDN Web Docs 용어 사전: 웹 용어 정의

정적 메서드 (Static method)
======================

정적 메서드 (또는 정적 함수)는 객체의 멤버로 정의된 메서드이지만 생성자를 통해 생성된 객체 인스턴스가 아닌 API 객체의 생성자에서 직접 접근할 수 있습니다.

Web API에서, 정적 메서드는 인터페이스에 의해 정의되지만 해당 유형의 객체를 먼저 인스턴스화하지 않고도 호출할 수 있는 메서드입니다.

객체 인스턴스에서 호출되는 메서드를 '인스턴스 메서드'라고 합니다.

예제
--

Notifications API에서, `Notification.requestPermission()` (en-US) 메서드는 `Notification` 생성자 자체에서 호출됩니다. `Notification.requestPermission()` (en-US) 메서드는 정적 메서드입니다.

```js
let promise = Notification.requestPermission();
```

반면에 `Notification.close()` (en-US) 메서드는 인스턴스 메서드입니다. 이는 특정 알림 객체 인스턴스에서 호출되어 해당 시스템 알림을 닫습니다.

```js
let myNotification = new Notification("This is my notification");

myNotification.close();
```

같이 보기
-----

* Techopedia의 정적 메서드
* static
* MDN 웹 문서 용어 사전
    + Object
    + Method


최초 페인트 (First paint) - MDN Web Docs 용어 사전: 웹 용어 정의

최초 페인트 (First paint)
====================

\*\*최초 페인트(First Paint)\*\*는 네비게이션과 브라우저가 처음으로 픽셀을 화면에 렌더링해서 본문의 기본 배경색과 시각적으로 다른 모든 항목 렌더링하는 사이의 시간입니다. 이는 페이지 로드 시에 첫번째로 중요한 순간이며 "브라우저가 페이지 렌더링을 시작했나요?"에 대한 대답이 됩니다.

같이 보기
-----

* 최초 콘텐츠풀 페인트
* `PerformancePaintTiming` (en-US)
* 최대 콘텐츠풀 페인트
* 최초 의미있는 페인트


페이로드 헤더 (Payload header) - MDN Web Docs 용어 사전: 웹 용어 정의

페이로드 헤더 (Payload header)
========================

**페이로드 헤더(payload header)** 는 하나 이상의 메시지에서 원래 리소스 표현의 안전한 전송 및 재구성과 관련된 페이로드 정보를 설명하는 HTTP 헤더입니다. 페이로드 헤더에는 메시지 페이로드의 길이, 이 페이로드에 전달되는 리소스 부분(다중 부분 메시지의 경우), 전송에 적용되는 인코딩, 메시지 무결성 검사 등과 같은 정보가 포함됩니다.

페이로드 헤더는 HTTP 요청 및 응답 메시지 모두(즉, 페이로드 데이터를 전달하는 모든 메시지)에 존재할 수 있습니다.

페이로드 헤더는 `Content-Length`, `Content-Range`, `Trailer` (en-US) 및 `Transfer-Encoding`을 포함합니다.

같이 보기
-----

* 모든 HTTP 헤더 목록
    + `Content-Length`
    + `Content-Range`
    + `Trailer` (en-US)
    + `Transfer-Encoding`
    + Representation header
* RFC 7231, section 3.3: Payload semantics


HTTP - MDN Web Docs 용어 사전: 웹 용어 정의

HTTP
====

The HyperText Transfer Protocol (**HTTP**)은 Web에서 하이퍼미디어 문서를 전송하는 네트워크 프로토콜입니다. 일반적으로 하이퍼미디어 문서를 사람들이 읽을 수 있도록 브라우저와 서버 사이에 존재합니다. 현재 버전의 HTTP 명세는 HTTP/2입니다.

URI의 일부로, "http://example.com/" 내의 "http"를 "스킴"이라고 합니다. "http" 스키마를 사용하는 리소스는 일반적으로 HTTP 프로토콜을 사용하여 암호화되지 않은 연결을 통해 전송됩니다. "https" 스키마 ("https://developer.mozilla.org"와 같이)는 리소스가 HTTP 프로토콜을 사용하여 전송되지만 안전한 TLS 채널을 통해 전송된다는 것을 나타냅니다.

HTTP 텍스트 기반 (모든 통신은 일반 텍스트로 수행됩니다) 이며 stateless (이전의 통신을 인식하지 않습니다) 입니다. 이 속성은 www 상에서 인간이 문서(웹 사이트) 를 읽는 것을 이상적으로 수행할 수 있도록 합니다. 그뿐만 아니라, HTTP 는 서버 간 웹 서비스 REST 또는 웹 사이트 내의 요청 AJAX 에 대한 기초로도 사용할 수 있어 웹 사이트를 더욱 동적으로 만들 수 있습니다.

같이 보기
-----

* HTTP (MDN
* 위키피디아의 HTTP


Alignment subject - MDN Web Docs 용어 사전: 웹 용어 정의

Alignment subject
=================

CSS 상자 정렬 (en-US)에서 **정렬 대상**은 속성에 의해 정렬되는 항목입니다.

`justify-self` (en-US) 및 `align-self` (en-US)의 경우, 정렬 대상은 해당 상자의 쓰기 모드를 사용해 속성이 설정된 상자의 여백 상자입니다. `justify-content` 및 `align-content`의 경우, 상자의 쓰기 모드도 사용됩니다.

정렬 대상의 정의는 사용되는 레이아웃 모드에 따라 다릅니다.

블록 컨테이너 (테이블 셀 포함)

블록의 전체 내용을 단일 단위로 나타냅니다.

다중 컬럼 컨테이너

컬럼 상자들 사이에 공백이 있는 경우를 나타냅니다.

플렉스 컨테이너

`justify-content`의 경우, 각 플렉스 라인의 플렉스 항목입니다. `align-content`의 경우, 플렉스 라인을 의미합니다. 이것은 여러 줄의 플렉스 컨테이너에만 영향을 미칠 수 있다는 것에 주목하세요.

그리드 컨테이너

행과 열 공백이 그리드 항목 사이에 추가된 적절한 축의 그리드 항목입니다. 축소된 거터는 공간 삽입을 위한 유일한 기회로 생각될 수 있습니다.

같이 보기
-----

* CSS 상자 정렬 (en-US) 모듈


태그 - MDN Web Docs 용어 사전: 웹 용어 정의

태그
==

HTML에서는 요소을 생성하기 위해 **태그**가 사용됩니다.

HTML 요소의 이름은 요소의 시작 태그 시작 부분과 요소 종료 태그의 끝에 나타나는 이름입니다(요소에 종료 태그가 있는 경우). 예를 들어, `<p>` 시작 태그와 `</p>` 종료 태그의 `p`는 HTML 단락 요소의 이름입니다. 종료 태그의 요소 이름 앞에는 슬래시 문자 `</p>`가 오고 빈 요소경우 종료 태그가 필요하지도 허용되지도 않습니다.

같이 보기
-----

* 위키백과의 HTML 요소
* WHATWG의 HTML 요소 구문
* HTML 소개


상속 (Inheritance) - MDN Web Docs 용어 사전: 웹 용어 정의

상속 (Inheritance)
================

상속은 객체 지향 프로그래밍의 주요 기능입니다. 데이터 추상화는 여러 단계에서 수행될 수 있습니다. 즉, 클래스는 슈퍼클래스와 서브클래스를 가질 수 있습니다.

애플리케이션 개발자는, 슈퍼클래스의 속성 및 메서드 중 어느 것을 유지하고 추가할지 선택하여 클래스를 만들 수 있습니다. 클래스를 정의하는 방식은 매우 유연한 장점이 있습니다. 일부 언어에서는 클래스가 두 개 이상의 슈퍼클래스로부터 상속될 수 있도록 합니다(다중 상속을 의미합니다).

같이 보기
-----

* 상속과 프로토타입 체인


표준 (Normative) - MDN Web Docs 용어 사전: 웹 용어 정의

표준 (Normative)
==============

표준(Normative)은 소프트웨어 명세서에 표준화되어 규칙으로 따라야 하는 섹션을 나타내는 데 일반적으로 사용되는 단어입니다. 명세서에는 '비표준(non-normative)' 또는 '정보성(informative)'로 표시되는 섹션이 포함될 수도 있습니다. 비표준과 정보성 섹션은 독자가 명세서를 더 잘 이해하도록 도와주거나 예제나 최선의 방법을 보여주기 위한 목적입니다. 원칙적으로는 따를 필요가 없는 관행입니다.

같이 보기
-----

* WHATWG 위키의 표준 콘텐츠 및 정보성 콘텐츠에 대한 설명


무손실 압축 (Lossless compression) - MDN Web Docs 용어 사전: 웹 용어 정의

무손실 압축 (Lossless compression)
=============================

\*\*무손실 압축(Lossless compression)\*\*은 압축된 데이터를 원본 데이터로 완벽하게 재구성할 수 있는 데이터 압축 알고리즘의 일종입니다. 무손실 압축 방법은 되돌릴 수 있습니다. 무손실 압축의 예로는 GZIP, Brotli, WebP 및 PNG가 있습니다.

반면에 손실 압축은 원본 파일에서 일부 데이터를 삭제하여 부정확한 근사치를 사용하기 때문에, 되돌릴 수 없는 압축 방법입니다.

같이 보기
-----

* 용어 사전
    + GZIP
    + Brotli
    + PNG
    + Lossy compression


웹 서버 (Web server) - MDN Web Docs 용어 사전: 웹 용어 정의

웹 서버 (Web server)
=================

웹 서버(web server)는 일반적으로 클라이언트라고 하는 사용자에게 서비스를 제공하는 하드웨어 서버에서 실행되는 소프트웨어입니다. 반면에, 서버는 일반적으로 데이터 센터로 알려진 컴퓨터로 가득 찬 방에 있는 하드웨어입니다.

같이 보기
-----

* 서버에 대한 소개
* 위키백과의 서버 (컴퓨팅)


클래스 (Class) - MDN Web Docs 용어 사전: 웹 용어 정의

클래스 (Class)
===========

객체 지향 프로그래밍에서, '클래스'는 객체의 특성을 정의합니다. 클래스는 객체의 속성 및 메서드의 템플릿 정의이며, 객체의 더 구체적인 인스턴스를 표현하는 "청사진"입니다.

같이 보기
-----

* JavaScript의 클래스
* 상속과 프로토타입 체인
* 위키백과의 클래스 기반 프로그래밍
* 위키백과의 객체 지향 프로그래밍


RTF - MDN Web Docs 용어 사전: 웹 용어 정의

RTF
===

서식 있는 텍스트 형식 (Rich Text Format, RTF)은 형식 지정 지침(굵게 또는 기울임꼴)을 지원하는 일반 텍스트 기반 파일 형식입니다.

1980년대에 Microsoft Word 팀의 프로그래머 3명이 RTF를 만들었고 Microsoft는 2008년까지 이 형식을 계속 개발했습니다. 그러나 많은 워드 프로세싱 프로그램은 여전히 RTF를 읽고 쓸 수 있습니다.

같이 보기
-----

* 위키백과의 서식 있는 텍스트 형식
* Microsoft의 v1.9.1 명세서


배열 - MDN Web Docs 용어 사전: 웹 용어 정의

배열
==

"배열"은 데이터(언어에 따라 원시 값 또는 객체)의 순서가 있는 집합입니다. 배열은 하나의 변수에 여러 개의 값들을 저장하는데 사용합니다. 이것은 단 하나의 값을 저장하는 변수와 대비됩니다.

어떤 숫자 배열의 각 항목에 붙어 있는데 그것을 숫자 인덱스라고 부릅니다. 숫자 인덱스는 항목에 접근하게 해줍니다. Javascript에서 배열은 인덱스 0에서 시작하고 여러 메서드로 조작할 수 있습니다.

Javascript에서 배열은 아래와 같이 보입니다.

```js
let myArray = [1, 2, 3, 4];
let catNamesArray = ["Jacqueline", "Sophia", "Autumn"];
// JavaScript에서 배열은 위에 보이는 것과 같이 여러 데이터 유형을 담을 수 있습니다.
```

같이 보기
-----

* Wikipedia의 배열
* MDN의 JavaScript `Array`


요소 - MDN Web Docs 용어 사전: 웹 용어 정의

요소
==

**요소**(element)는 웹 페이지를 구성합니다. XML과 HTML에서, 요소는 데이터 항목, 텍스트 한 묶음, 이미지를 담을 수 있고, 아무것도 담지 않을 수도 있습니다. 일반적인 요소는 여는 태그와 몇 가지 특성, 내부의 텍스트 콘텐츠, 닫는 태그로 구성됩니다.

![Example: in
Hello world!
, '
' is an opening tag, 'class="nice"' is an attribute and its value, 'Hello world!' is enclosed text content, and '
' is a closing tag.](/ko/docs/Glossary/Element/anatomy-of-an-html-element.png)

요소와 태그는 **같지 않습니다**. 태그는 소스 코드에서 요소의 시작과 끝을 표시하고, 요소는 브라우저가 페이지를 표시할 때 사용하는 문서 모델인 DOM의 일부입니다.

같이 보기
-----

* HTML 시작하기
* 사용자 지정 요소 정의하기
* DOM의 요소를 나타내는 `Element` (en-US) 인터페이스


Blink - MDN Web Docs 용어 사전: 웹 용어 정의

Blink
=====

 Blink는 Google이 Chromium의 한 부분(따라서 Chrome에도 포함되어 있습니다)으로 개발한 오픈 소스 브라우저 레이아웃 엔진입니다.
 특히, Blink는 레이아웃, 렌더링 및 DOM을 처리하는 WebKit에서 WebCore 라이브러리의 포크로 시작되었지만, 현재는 별도의 렌더링 엔진으로 자체적으로 작동하고 있습니다.

같이 보기
-----

* Blink 프로젝트 홈페이지
* 위키백과의 Blink
* Blink의 FAQ
* 용어 사전
    + Google Chrome
    + Gecko
    + Trident
    + WebKit
    + Rendering engine


Node.js - MDN Web Docs 용어 사전: 웹 용어 정의

Node.js
=======

**Node.js**는 개발자가 서버 사이드 및 네트워크 응용 프로그램을 만들 수 있도록 지원하는 크로스 플랫폼 JavaScript 런타임 환경입니다.

Node 패키지 매니저 (npm)
------------------

npm은 Node.js와 함께 다운로드되어 번들로 제공되는 패키지 관리자입니다. 명령줄(CLI) 클라이언트 `npm`을 사용하여 Node.js 프로젝트에서 사용할 패키지를 다운로드, 구성 및 생성할 수 있습니다. 다운로드한 패키지는 종속성 디렉토리 `node_modules/`를 포함하지 않고 ES imports문 및 CommonJS `require()`문을 통해서 가져올 수 있습니다. Node.js는 패키지를 가져올 때 지정된 상대 또는 절대 경로 없이 패키지를 확인하기 때문입니다.

npm에서 호스팅되는 패키지는 https://registry.npmjs.org/의 레지스트리에서 다운로드되지만, 호환되는 인스턴스를 사용하도록 CLI를 구성할 수 있습니다.

같이 보기
-----

* 위키백과 Node.js
* Node.js 웹사이트
* API 참조 문서
* 가이드
* npm 문서


사원수 (Quaternion) - MDN Web Docs 용어 사전: 웹 용어 정의

사원수 (Quaternion)
================

**사원수(quaternion)** 는 두 개의 3D 벡터의 몫이며 3D 그래픽과 가속도계 기반 센서에서 방향 또는 회전 데이터를 나타내는 데 사용됩니다.

수학적 사원수는 이보다 더 복잡하지만, WebGL 또는 WebXR (en-US)를 사용하는 동안 회전을 나타내는 데 사용되는 **단위 사원수(unit quaternions)** (또는 **회전 사원수(rotational quaternions)**)는 예를 들어 3D 포인트와 동일한 구문을 사용하여 표현됩니다. 따라서, `DOMPoint` (en-US) (또는 `DOMPointReadOnly` (en-US)) 타입은 사원수를 저장하는 데 사용됩니다.

같이 보기
-----

* 위키백과의 사원수와 공간 회전
* 위키백과의 사원수
* WebXR 장치 API 참고서에서 `XRRigidTransform.orientation` (en-US)


SLD - MDN Web Docs 용어 사전: 웹 용어 정의

SLD
===

SLD (2단계 도메인)는 '최상위 도메인(Top Level Domain, TLD)' 바로 앞에 있는 도메인 네임의 일부입니다. 예를 들어, `mozilla.org`에서 SLD는 `mozilla`이고 TLD는 `org`입니다.

자세한 정보는 2단계 도메인을 참조하세요.


Repo - MDN Web Docs 용어 사전: 웹 용어 정의

Repo
====

Git 또는 SVN와 같은 리비전 컨트롤 시스템(revision control system)에서, 저장소(repo)는 다양한 메타 데이터와 함께 애플리케이션의 코드 소스를 호스팅하는 장소입니다.

같이 보기
-----

* 위키백과의 레포지토리(Repository)


크로노스 그룹 (The Khronos Group) - MDN Web Docs 용어 사전: 웹 용어 정의

크로노스 그룹 (The Khronos Group)
===========================

\*\*크로노스 그룹 (The Khronos Group)\*\*은 150개 이상의 업계 선도 기업으로 구성된 회원 중심의 개방형 비영리 컨소시엄입니다. 크로노스 그룹의 목적은 3D 그래픽, 증강 및 가상 현실, 병렬 프로그래밍, 비전 가속 및 기계 학습을 위한 로열티 없는 고급 상호 운용성 표준을 만드는 것입니다.

이 그룹은 OpenGL 및 `WebGL API`와 같은 표준을 유지 관리합니다.

같이 보기
-----

* 위키백과의 크로노스 그룹
* 크로노스 그룹 웹사이트


IIFE - MDN Web Docs 용어 사전: 웹 용어 정의

IIFE
====

**즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)** 은 정의되자마자 즉시 실행되는 Javascript Function 를 말한다. IIFE라는 이름은 Ben Alman이 블로그에서 처음으로 시작되었습니다.

```js
(function () {
  // …
})();

(() => {
  // …
})();

(async () => {
  // …
})();
```

이는 Self-Executing Anonymous Function 으로 알려진 디자인 패턴이고 크게 두 부분으로 구성됩니다.

1. `Grouping Operator` `()` 안에 어휘 범위로 둘러싸인 익명함수입니다. 이는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라 IIFE 내부안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법입니다.
2. 두 번째 부분은 즉시 실행 함수를 생성하는 괄호`()`입니다. 이를 통해 JavaScript 엔진은 함수를 즉시 해석해서 실행합니다.
사용 예시
-----

### 전역 이름공간을 오염시키는 것을 방지

애플리케이션은 다양한 소스 파일의 많은 함수와 전역 변수를 포함할 수 있기 때문에, 전역 변수의 수를 제한하는 것이 중요합니다. 필요 없는 초기화 코드가 있는 경우, IIFE 패턴을 사용할 수 있습니다. 코드를 다시 재사용하지 않을 것이기 때문에 이 경우 IIFE를 사용하는 것이 함수 선언 또는 함수 표현식을 사용하는 것보다 더 좋습니다.

```js
(() => {
  // 초기화 코드
  let firstVariable;
  let secondVariable;
})();

// firstVariable와 secondVariable은 이 함수 실행 후에 사용할 수 없습니다.
```

### 비동기 함수 실행

`async` IIFE를 사용하면 top-level await이 없는 이전 브라우저 및 JavaScript 런타임에서도 `await` 및 `for-await`을 사용할 수 있습니다.

```js
const getFileStream = async (url) => {
  // 구현
};

(async () => {
  const stream = await getFileStream("https://domain.name/path/file.ext");
  for await (const chunk of stream) {
    console.log({ chunk });
  }
})();
```

### 모듈 패턴

우리는 또한 IIFE를 사용하여 비공개 및 공개 변수와 메서드를 생성할 수 있습니다. 더 정교한 모듈 사용을 위해, 패턴 및 IIFE의 다른 사용에 대해서는 Addy Osmani의 Learning JavaScript Design Patterns라는 책을 볼 수 있습니다.

```js
const makeWithdraw = (balance) =>
  ((copyBalance) => {
    let balance = copyBalance; // This variable is private
    const doBadThings = () => {
      console.log("I will do bad things with your money");
    };
    doBadThings();
    return {
      withdraw(amount) {
        if (balance >= amount) {
          balance -= amount;
          return balance;
        }
        return "Insufficient money";
      },
    };
  })(balance);

const firstAccount = makeWithdraw(100); // "I will do bad things with your money"
console.log(firstAccount.balance); // undefined
console.log(firstAccount.withdraw(20)); // 80
console.log(firstAccount.withdraw(30)); // 50
console.log(firstAccount.doBadThings); // undefined; this method is private
const secondAccount = makeWithdraw(20); // "I will do bad things with your money"
console.log(secondAccount.withdraw(30)); // "Insufficient money"
console.log(secondAccount.withdraw(20)); // 0
```

### ES6 이전의 var가 있는 For 루프

**ES6** 및 블록 범위에서 **let** and **const**문이 도입되기 전에 과거 코드에서 다음과 같은 IIFE 사용을 볼 수 있습니다. **var**문을 사용하면 함수 범위와 전역 범위만 가지게 됩니다. 버튼 0, 버튼 1이라는 텍스트가 있는 2개의 버튼을 만들고 싶은 예제를 생각해보면, 다음 코드는 작동하지 않습니다.

```js
for (var i = 0; i < 2; i++) {
  const button = document.createElement("button");
  button.innerText = `Button ${i}`;
  button.onclick = function () {
    console.log(i);
  };
  document.body.appendChild(button);
}
console.log(i); // 2
```

클릭하면 `i`가 전역 변수이고, 마지막 값이 2이므로 2로 로그를 보여주게 됩니다. ES6 이전에 이 문제를 해결하려면 IIFE 패턴을 사용할 수 있습니다.

```js
for (var i = 0; i < 2; i++) {
  const button = document.createElement("button");
  button.innerText = `Button ${i}`;
  button.onclick = (function (copyOfI) {
    return function () {
      console.log(copyOfI);
    };
  })(i);
  document.body.appendChild(button);
}
console.log(i); // 2
```

클릭하면, button 0과 1이 0과 1이라고 출력합니다. 변수 i는 전역적으로 정의됩니다. **let**문을 사용하면 간단하게 다음과 같이 할 수 있습니다.

```js
for (let i = 0; i < 2; i++) {
  const button = document.createElement("button");
  button.innerText = `Button ${i}`;
  button.onclick = function () {
    console.log(i);
  };
  document.body.appendChild(button);
}
console.log(i); // Uncaught ReferenceError: i is not defined.
```

클릭하면, button 0과 1이 0과 1이라고 출력합니다.

같이 보기
-----

* 위키피디아의 IIFE
* Glossary
    + Function
    + Self-Executing Anonymous Function


Method - MDN Web Docs 용어 사전: 웹 용어 정의

Method
======

**메서드**(**method**)는 객체의 속성인 함수입니다. 객체 인스턴스에 의해 수행되는 작업인 내장된 인스턴스 메서드 또는 객체 생성자에서 직접 호출되는 작업인 "정적 메서드" 2가지 종류의 메서드가 있습니다.

**참고:** JavaScript 함수 자체는 객체이므로, 해당 맥락에서 메서드는 실제로 함수에 대한 객체 참조입니다.

`F`가 `O`의 메서드라고 할 때, 이는 종종 `F`가 `O`를 `this` 바인딩으로 사용한다는 의미입니다. `this` 값에 따라 다른 동작을 갖지 않는 함수 속성(또는 bind된 함수 및 화살표 함수와 같이 동적 `this` 바인딩이 전혀 없는 함수 속성)은 보편적으로 메서드로 생각되지 않을 수 있습니다.

같이 보기
-----

* 위키백과의 (computer programming) 메서드
* JavaScript에서 메서드의 정의 (전통적인 구문과 새로운 약어의 비교)
* JavaScript 내장 메서드 목록
* MDN Web Docs 용어 사전
    + function
    + object
    + property
    + static method


UI - MDN Web Docs 용어 사전: 웹 용어 정의

UI
==

***User Interface***(UI) 는 사용자와 기계의 상호작용을 촉진하는 모든 것들을 의미합니다. 컴퓨터의 세계에서는 키보드, 조이스틱, 화면, 프로그램 등 무엇이든 될 수 있습니다. 컴퓨터 소프트웨어의 경우, 커맨드 라인 프롬프트, 웹페이지, 사용자 입력 양식 또는 응용 프로그램의 프론트엔드 페이지가 될 수 있다

같이 보기
-----

* 위키백과의 사용자 인터페이스
* 위키백과의 프론트엔드 웹 개발


대체 정렬 (Fallback alignment) - MDN Web Docs 용어 사전: 웹 용어 정의

대체 정렬 (Fallback alignment)
==========================

CSS 상자 정렬 (en-US)에서, 요청된 정렬을 수행할 수 없는 경우를 처리하기 위해 대체 정렬이 지정됩니다. 예를 들어, `justify-content: space-between`을 지정하는 경우, 정렬 제목이 하나 이상 있어야 합니다. 그렇지 않은 경우, 대체 정렬이 사용됩니다. 아래에 설명된 대로 정렬 방법에 따라 지정됩니다.

First baseline

`start`

Last baseline

`safe end`

Baseline

`start`

Space-between

`flex-start` (start)

Space-around

`center`

Space-evenly

`center`

Stretch

`flex-start` (start)

같이 보기
-----

* CSS 상자 정렬 (en-US)


Cookie - MDN Web Docs 용어 사전: 웹 용어 정의

Cookie
======

쿠키는 웹사이트가 웹 브라우저를 통해 방문자의 컴퓨터에 남기는 작은 정보 조각입니다.

쿠키는 웹사이트에 대한 사용자의 웹 경험을 개인화하는 데 사용됩니다. 여기에는 해당 웹사이트에 접근할 때 사용자의 기본 설정이나 입력 내용이 포함될 수 있습니다. 사용자는 쿠키를 허용, 거부 또는 삭제하도록 웹 브라우저를 맞춤화할 수 있습니다.

쿠키는 `Set-Cookie` HTTP 헤더를 사용하거나 JavaScript의 `document.cookie` (en-US)를 사용하여 서버 수준에서 설정하고 수정할 수 있습니다.

같이 보기
-----

* 위키백과의 HTTP cookie


Microsoft Edge - MDN Web Docs 용어 사전: 웹 용어 정의

Microsoft Edge
==============

**Microsoft Edge**는 Microsoft Windows에 포함되어 제공되는 무료 그래픽 웹 브라우저입니다. Microsoft 는 오랜 기간 사용했던 인터넷 익스플로러를 대체하기 위해, 2014년부터 초기 코드명 스파르탄, 즉 Edge를 개발했습니다.

같이 보기
-----

* 공식 웹 사이트
* MDN Web Docs 용어 사전
    + Google Chrome
    + Microsoft Edge
    + Microsoft Internet Explorer
    + Mozilla Firefox
    + Netscape Navigator
    + Opera Browser


HTTPS RR - MDN Web Docs 용어 사전: 웹 용어 정의

HTTPS RR
========

\*\*HTTPS RR(HTTPS Resource Records)\*\*는 HTTPS를 통해 서비스에 접근하는 방법에 대한 구성 정보 및 매개변수를 전달하는 DNS 레코드 유형입니다.

*HTTPS RR* 는 HTTPS를 사용하여 서비스에 연결하는 프로세스를 최적화하는 데 사용할 수 있습니다.
 또한, 'HTTPS 리소스 레코드'가 있으면 원본의 모든 유용한 HTTP 리소스에 HTTPS를 통해 도달할 수 있다는 신호가 표시됩니다. 결과적으로 브라우저가 도메인에 대한 연결을 HTTP에서 HTTPS로 안전하게 업그레이드할 수 있음을 의미합니다.

### 같이 보기

* DNS(DNS SVCB 및 HTTPS RR)를 통한 서비스 바인딩 및 매개변수 명세서 (Draft IETF specification: draft-ietf-dnsop-svcb-https-00)
* 엄격한 전송 보안 vs. HTTPS 리소스 레코드: 비교 (Emily M. Stark blog)
* SSL
* TLS


IANA - MDN Web Docs 용어 사전: 웹 용어 정의

IANA
====

\*\*인터넷 할당 번호 기관 (Internet Assigned Numbers Authority, IANA)\*\*은 인터넷 프로토콜에서 사용되는 도메인 이름, IP 주소 및 기타 이름과 번호를 기록 및/또는 할당하는 업무를 담당하는 ICANN의 자회사입니다.

같이 보기
-----

* 공식 웹사이트
* 위키백과의 IANA


출처 - MDN Web Docs 용어 사전: 웹 용어 정의

출처
==

웹 콘텐츠의 **출처**(origin)는 접근할 때 사용하는 URL의 스킴(프로토콜), 호스트(도메인), 포트로 정의됩니다. 두 객체의 스킴, 호스트, 포트가 모두 일치하는 경우 같은 출처를 가졌다고 말합니다.

일부 작업은 동일 출처 콘텐츠로 제한되나, CORS를 통해 제한을 해제할 수 있습니다.

예제
--

동일한 스킴(`http`)와 호스트 이름(`example.com`)을 갖고 있기 때문에 동일한 출처이며, 다른 파일 경로는 중요하지 않습니다.

* `http://example.com/app1/index.html`
* `http://example.com/app2/index.html`

서버는 기본적으로 포트 80을 통해 HTTP 콘텐츠를 전달하므로 출처는 동일합니다.

* `http://example.com:80`
* `http://example.com`

서로 다른 스킴을 사용하기 때문에 동일한 출처가 아닙니다.

* `http://example.com/app1`
* `https://example.com/app2`

서로 다른 호스트 이름을 사용하기 때문에 동일한 출처가 아닙니다.

* `http://example.com`
* `http://www.example.com`
* `http://myapp.example.com`

서로 다른 포트를 사용하기 때문에 동일한 출처가 아닙니다.

* `http://example.com`
* `http://example.com:8080`
같이 보기
-----

* 동일 출처 정책
* Site
* HTML 명세: 출처


테이블 래퍼 상자 (Table Wrapper Box) - MDN Web Docs 용어 사전: 웹 용어 정의

테이블 래퍼 상자 (Table Wrapper Box)
=============================

**테이블 래퍼 상자(Table Wrapper Box)** 는 테이블에 표시되는 캡션에 필요한 공간을 설명하는 테이블 그리드 상자 주위에 생성된 상자입니다. 이 상자는 테이블이 둘러싸는 블록이라는 특성을 가진 절대 위치 항목에 대한 둘러싸는 항목이 됩니다.


매개변수 (Parameter) - MDN Web Docs 용어 사전: 웹 용어 정의

매개변수 (Parameter)
================

매개변수는 함수에 전달되는 이름이 있는 변수입니다. 매개변수를 의미하는 변수는 인자를 함수로 가져오는 데 사용됩니다.

예를 들면 다음과 같습니다.

```js
function example(parameter) {
  console.log(parameter); // Output = foo
}

const argument = "foo";

example(argument);
```

예제에는 두 가지 종류의 매개변수가 있습니다.

입력 매개변수

가장 일반적인 종류이며 함수에 값을 전달하는 목적으로 사용됩니다. 프로그래밍 언어에 따라, 입력 매개변수는 여러 가지 방법(예, 값을 통한 호출, 주소를 통한 호출, 참조를 통한 호출)으로 전달될 수 있습니다.

출력/반환 매개변수

주로 함수에서 여러 값을 반환하지만, 혼란을 불러일으키므로 권장되지 않습니다.

### 매개변수(parameter) 와 인자(arguments)의 차이점

'매개변수' 와 '인자'의 차이점에 주목하세요.

* 함수 매개변수는 함수 정의 부분에 선언된 이름입니다.
* 함수 인자는 함수에 전달된 실제 값입니다.
* 매개변수는 넘겨받은 인수값으로 초기화됩니다.
같이 보기
-----

* 위키백과의 '매개변수' 와 '인자'의 차이점
* 함수 선언
* 함수 표현식


고유 크기 (Intrinsic size) - MDN Web Docs 용어 사전: 웹 용어 정의

고유 크기 (Intrinsic size)
======================

CSS에서, 요소의 고유 크기(intrinsic size)는 외부 요인이 적용되지 않은 경우에, 콘텐츠를 기반으로 하는 크기입니다. 예를 들어, 인라인 요소의 크기는 본질적으로 `너비`, `높이`로 결정되며, 가로 여백과 패딩은 영향을 주지만, 세로 여백과 패딩은 영향을 미치지 않습니다.

고유 크기를 계산하는 방법은 CSS 내장 및 외부 크기 조정 명세서에 정의되어 있습니다.

고유 크기 조정은 요소의 `min-content` 및 `max-content` 크기를 고려합니다. 텍스트의 경우 `min-content` 크기는 텍스트가 오버플로를 일으키지 않고 인라인 방향으로 최대한 작게 래핑되어, 가능한 한 많은 자동 줄바꿈(Soft Wrap)을 수행하는 경우입니다. 텍스트 문자열이 포함된 상자의 경우, `min-content` 크기는 가장 긴 단어로 정의됩니다. `width` 속성에 대한 `min-content` 키워드 값은 `min-content` 크기에 따라 요소의 크기를 지정합니다.

`max-content` 크기는 그 반대입니다. 텍스트의 경우, 오버플로가 발생하더라도 자동 줄바꿈(Soft Wrap)을 수행하지 않고 텍스트를 최대한 넓게 표시합니다. `max-content` 키워드 값은 이 동작을 노출합니다.

이미지의 경우, 고유 크기는 동일한 의미를 갖습니다. 렌더링을 변경하기 위해 CSS를 적용하지 않은 경우 이미지가 표시되는 크기입니다. 기본적으로 이미지는 "1x" 픽셀 밀도(1 장치 픽셀 = 1 CSS 픽셀)를 갖는 것으로 가정하므로, 고유 크기는 단순히 픽셀 높이와 너비입니다. 고유 이미지 크기와 해상도는 EXIF 데이터에서 명시적으로 지정할 수 있습니다. `srcset` 속성을 사용하여 이미지에 대해 고유 픽셀 밀도를 설정할 수도 있습니다. (note that 두 메커니즘을 모두 사용하는 경우, the `srcset`값은 EXIF 값 "위에" 적용됩니다).


블록 암호 운용 방식 - MDN Web Docs 용어 사전: 웹 용어 정의

블록 암호 운용 방식
===========

일반적으로 문맥상 '모드'라고 불리는, 블록 암호 운용 방식은 블록 크기보다 긴 메시지를 암호화하거나 해독하는 데 블록 암호를 사용하는 방법을 지정합니다.

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


HTTP/2 - MDN Web Docs 용어 사전: 웹 용어 정의

HTTP/2
======

**HTTP/2** 는 HTTP 네트워크 프로토콜의 주요 개정판입니다.

HTTP/2의 주요 목표는 "지연 시간"을 감소시키는 것입니다. 전체 요청과 응답 멀티플렉싱을 가능하게 하여 대기 시간을 줄이고, HTTP 헤더 필드를 효율적으로 압축함으로써 프로토콜 오버헤드를 최소화하고, 요청에 대한 우선 순위를 결정하고 서버 푸시 지원을 추가하는 것입니다.

HTTP/2는 어떤 방식으로도 HTTP의 어플리케이션 의미를 수정하지 않습니다. HTTP 메서드, 상태 코드, URI, 헤더 필드와 같은 HTTP 1.1의 핵심 개념은 그대로 유지하는 대신, HTTP/2는 전체 프로세스를 관리하는 클라이언트-서버 사이의 데이터의 형식(프레임)과 전송 방식을 수정하여 새로운 프레임 계층 내에서 어플리케이션 복잡성을 숨깁니다. 결과적으로, 기존의 모든 어플리케이션은 수정 과정을 거치지 않고 전달될 수 있습니다.

같이 보기
-----

* MDN의 HTTP 설명
* 위키피디아의 HTTP/2
* 용어 사전
    + HTTP
    + Latency


암호화 스위트 (Cipher suite) - MDN Web Docs 용어 사전: 웹 용어 정의

암호화 스위트 (Cipher suite)
======================

암호화 스위트는 키 교환 알고리즘, 인증 방법, 대량 암호화 암호 및 메시지 인증 코드의 조합입니다.

TLS와 같은 암호화시스템에서는, 클라이언트와 서버는 안전하게 통신을 시작하기 전에 암호화 스위트에 동의해야 합니다. 일반적인 암호화 스위트는 ECDHE\_RSA\_WITH\_AES\_128\_GCM\_SHA256 또는 ECDHE-RSA-AES128-GCM-SHA256 유사하고 다음을 나타냅니다.

* 키 교환을 위한 ECDHE (타원 곡선 일시적인 Diffie-Hellman)
* 인증을 위한 RSA
* AES-128을 암호로 사용하고, Galois/Counter Mode (GCM)를 블록 암호 운용 방식으로 사용
* 해시 기반 메시지 인증 코드인 SHA-256 (HMAC)
같이 보기
-----

* Mozilla는 TLS에 대한 암호화 스위트 선택을 권장합니다


Copyleft - MDN Web Docs 용어 사전: 웹 용어 정의

Copyleft
========

Copyleft는 일반적으로 라이선스를 지칭하는 용어로서, 그러한 라이선스는 해당 저작물의 재배포가 원래 라이선스와 동일한 라이선스의 대상이 되어야 한다는 것을 나타내기 위해 사용됩니다. copyleft 라이선스의 예로는 GNU GPL(소프트웨어용)과 Creative Commons SA(Share Alike) 라이선스(예술 작품에서)가 있습니다.

같이 보기
-----

* Wikipedia의 Copyleft


스크롤 컨테이너 (Scroll container) - MDN Web Docs 용어 사전: 웹 용어 정의

스크롤 컨테이너 (Scroll container)
===========================

**스크롤 컨테이너(scroll container)** 는 스크롤 막대가 있는지 여부에 관계없이, 콘텐츠를 스크롤할 수 있는 요소 상자입니다. CSS `overflow` 속성이 `scroll`로 설정되거나 `overflow`가 `auto`로 설정되고 콘텐츠가 컨테이너를 넘어갈 때 사용자 에이전트는 요소 상자에 스크롤 막대를 추가해 스크롤 컨테이너로 만들어줍니다.

요소 상자의 콘텐츠가 테두리 상자를 넘으면, 사용자는 스크롤 막대를 사용해 화면 요소에서 숨겨졌던 잘린 콘텐츠를 스크롤 할 수 있습니다.

스크롤 컨테이너에는 스크롤포트와 스크롤 막대가 포함되어 있습니다.

스크롤포트(Scrollport)
-----------------

스크롤포트는 스크롤 컨테이너의 보이는 부분이며 스크롤 컨테이너의 패딩 상자와 일치합니다. 스크롤 막대는 내용을 볼 수 있도록 스크롤포트 안과 밖으로 내용을 이동하는 데 사용됩니다.


느슨한 모드 (Sloppy mode) - MDN Web Docs 용어 사전: 웹 용어 정의

느슨한 모드 (Sloppy mode)
====================

ECMAScript 5 이상에서는 스크립트가 탄력성(일부 실패가 전체에 영향을 끼치지 않는 특성)을 향상하기 위해 여러 가지 방법으로 JavaScript의 의미를 변경하고 문제가 발생했을 때 무슨 일이 일어나고 있는지 더 쉽게 이해할 수 있는 새로운 엄격 모드를 선택할 수 있습니다.

일반적이고 엄격하지 않은 JavaScript 모드를 **느슨한 모드** 라고도 합니다. 이것은 공식적인 명칭은 아니지만, 중요한 JavaScript 코드를 작성하는 데 시간을 투자한다면 이 이름을 접하게 될 가능성이 높습니다.

같이 보기
-----

* Speaking JavaScript 책, 7번째 부분 ("JavaScript Syntax")에 있는 "엄격 모드".


거짓같은 값 - MDN Web Docs 용어 사전: 웹 용어 정의

거짓같은 값
======

**거짓 같은 값**(Falsy, **falsey**로 쓰이기도 함) 값은 Boolean 문맥에서 `false`로 평가되는 값입니다.

JavaScript는 조건절, 반복문 등 불리언 값이 필요한 곳에서 형 변환을 이용해 특정 값을 불리언 값으로 변환합니다.

다음은 JavaScript의 거짓 같은 값들입니다:

| 값 | 타입 | 설명 |
| --- | --- | --- |
| null | Null | `null` 키워드는 아무런 값도 없음을 의미합니다. |
| undefined | Undefined | `undefined`는 원시값을 의미합니다. |
| `false` | Boolean | `false` (en-US) 키워드. |
| NaN | Number | `NaN`은 숫자가 아님을 의미합니다. |
| `0` | Number | The `Number` 0, `0.0`, `0x0` 등도 포함합니다. |
| `-0` | Number | The `Number` 음수 0, `-0.0`, `-0x0` 등도 포함합니다. |
| `0n` | BigInt | The `BigInt` 0, `0x0n` 등도 포함합니다. Note that there is no `BigInt`에 음수 0가 없다는 것에 주목하세요. `0n`의 음수 0은 `0n`입니다. |
| `""` | String | 비어있는 string 값, also `''` 및 ````도 포함합니다.. |
| `document.all` | Object | JavaScript의 유일한 거짓같은 객체는 내장 `document.all`입니다. |

`null` 및 `undefined` 값은 또한 nullish입니다..

예제
--

다음은 거짓 같은 값의 예시입니다. 거짓 같은 값은 불리언 문맥에서 false로 변환되므로, 아래의 모든 `if` 블록은 실행되지 않습니다.

```js
if (false) {
  // 도달할 수 없습니다.
}

if (null) {
  // 도달할 수 없습니다.
}

if (undefined) {
  // 도달할 수 없습니다.
}

if (0) {
  // 도달할 수 없습니다.
}

if (-0) {
  // 도달할 수 없습니다.
}

if (0n) {
  // 도달할 수 없습니다.
}

if (NaN) {
  // 도달할 수 없습니다.
}

if ("") {
  // 도달할 수 없습니다.
}
```

### 논리 AND 연산자, &&

첫 번째 객체가 거짓 같은 값이라면, 해당 객체를 반환합니다.

```js
console.log(false && "dog");
// ↪ false

console.log(0 && "dog");
// ↪ 0
```

같이 보기
-----

* 참 같은 값
* 형 변환
* 불리언
* 불리언 변환


웹 성능 (Web performance) - MDN Web Docs 용어 사전: 웹 용어 정의

웹 성능 (Web performance)
======================

**웹 성능(Web performance)** 은 콘텐츠를 요청한 시점부터 요청한 콘텐츠가 사용자의 브라우저에 표시될 때까지의 객관적인 시간, 객관적인 렌더링 시간, 로드 시간 및 런타임에 대한 주관적인 사용자 경험입니다.

객관적으로, 웹 페이지나 웹 애플리케이션이 다운로드되고, 사용자의 웹 브라우저에 표시되고, 반응형 및 상호작용을 할 수 있게 되는 데 걸리는 측정 가능한 시간(밀리초)입니다. 이것은 초당 프레임 수이며, 사용자 상호 작용에 메인 스레드를 사용할 수 없는 시간입니다. 주관적으로, 사용자가 콘텐츠를 요청한 시점과 사용자가 요청한 콘텐츠가 사용 가능하고 그렇게 느낄 때까지 걸리는 시간이 느리거나, 빠르다고 '느끼는지' 여부에 대한 사용자의 인식입니다.

같이 보기
-----

* 웹 성능 배우기
* 인지 성능


실시간 스트리밍 프로토콜 (Real-time streaming protocol, RTSP) - MDN Web Docs 용어 사전: 웹 용어 정의

실시간 스트리밍 프로토콜 (Real-time streaming protocol, RTSP)
==================================================

실시간 스트리밍 프로토콜 (Real-time streaming protocol, RTSP)은 서버와 클라이언트 사이에서 미디어 스트리밍이 발생하는 방식을 제어하는 네트워크 프로토콜입니다. 기본적으로, RTSP는 비디오를 스트리밍할 때 '일시 중지'/'재생'을 클릭하면 어떤 일이 발생하는지 설명하는 프로토콜입니다. 컴퓨터가 리모콘이고 스트리밍 서버가 텔레비전이라고 비유하면, RTSP는 리모콘 명령이 TV에 어떤 영향을 미치는지 설명합니다.

같이 보기
-----

* 위키백과의 RTSP
* RFC 7826 (프로토콜의 작동 방식을 정확하게 표시한 문서 중 하나)
* 용어사전
    + RTSP


Database - MDN Web Docs 용어 사전: 웹 용어 정의

Database
========

**데이터베이스** 는 검색, 구조화 및 확장과 같은 일부 작업을 더 쉽게 수행할 수 있도록 조직된 데이터를 수집하는 저장 시스템입니다.

웹 개발에서, 대부분의 데이터베이스는 데이터를 조직하기 위해 관계형 데이터베이스 관리 시스템(RDBMS)을 사용하며 SQL으로 프로그래밍합니다. 그러나, NoSQL이라 불리는 일부 데이터베이스는 데이터를 조직하기 위해 앞서 설명한 매커니즘을 따르지 않습니다.

유명한 서버측 RDBMS로는 MySQL(또는 MySQL을 포크한 MariaDB), SQL Server, Oracle Database가 있습니다. 반면에 유명한 NoSQL의 예로는 MongoDB, Cassandra, Redis 등이 있습니다.

브라우저에는 IndexedDB라는 자체 데이터베이스 시스템도 있습니다.

같이 보기
-----

* 위키피디아의 Database
* 용어사전
    + IndexedDB
    + SQL


FTU - MDN Web Docs 용어 사전: 웹 용어 정의

FTU
===

최초 사용 시간 (First Time Use, FTU)은 Firefox 운영체제가 있는 기기에 Gecko 버전을 실행할 때 로드가 되는 애플리케이션입니다.

FTU를 사용하여 여러 가지 중요한 옵션(예, 시간대, Wi-Fi 세부 정보, 기본 언어, 연락처 가져오기)을 설정하거나 '전화 둘러보기'를 통해 장치에 대해 자세히 알아볼 수 있습니다.


분산 서비스 거부 (Distributed Denial of Service, DDoS) - MDN Web Docs 용어 사전: 웹 용어 정의

분산 서비스 거부 (Distributed Denial of Service, DDoS)
===============================================

분산 서비스 거부(Distributed Denial of Service, DDoS)는 서버 리소스를 마비시키고 합법적인 사용자를 차단하기 위해, 손상된 다수의 시스템이 단일 대상을 공격하도록 만드는 공격입니다.

일반적으로 많은 사람들이 다수의 봇을 사용해 은행이나 신용 카드 결제 게이트웨이와 같은 유명 웹 서버를 공격합니다. DDoS는 컴퓨터 네트워크 및 CPU 리소스 관리와 관련이 있습니다.

일반적인 DDoS 공격에서, 공격자는 하나의 컴퓨터 시스템의 취약점을 악용하고 이 컴퓨터를 DDoS 마스터로 만드는 것부터 시작합니다. 봇마스터라고 알려지는 공격 마스터는 다른 취약한 시스템을 식별하고 맬웨어로 감염시킵니다. 결국 공격자는 제어되는 기계에 지정된 대상에 공격하도록 지시합니다.

DDoS 공격에는 두 가지 유형이 있습니다. 네트워크 중심 공격(대역폭을 사용하여 서비스에 과부하) 및 애플리케이션 계층 공격(애플리케이션 호출로 서비스 또는 데이터베이스에 과부하)이 있습니다. 대상에 대한 데이터 오버플로로 인해 대상 시스템이 포화되어 합법적인 트래픽에 응답할 수 없거나 매우 느리게 응답합니다(따라서 '서비스 거부'라는 이름이 붙었습니다). 감염된 컴퓨터의 소유자는 일반적으로 자신의 컴퓨터가 손상되었다는 사실을 알지 못하고, 서비스 손실도 겪게 됩니다.

침입자의 통제를 받는 컴퓨터를 좀비 또는 봇이라고 합니다. 공동 감염된 컴퓨터의 네트워크는 봇넷 또는 좀비 군대로 알려져 있습니다. Kaspersky Labs과 Symantec은 스팸, 바이러스, 웜이 아닌 봇넷을 인터넷 보안에 대한 가장 큰 위협으로 식별했습니다.

미국 컴퓨터 비상 준비팀(US-CERT)은 서비스 거부 공격의 증상을 다음과 같이 정의합니다.

* 비정상적으로 느린 네트워크 성능(파일 열기 또는 웹 사이트 접근)
* 특정 웹사이트를 이용할 수 없음
* 어떤 웹사이트에도 접속할 수 없음
* 스팸 이메일 수신량이 급격히 증가함(이러한 유형의 DoS 공격은 이메일 폭탄으로 간주됨)
* 무선 또는 유선 인터넷 연결 끊김
* 웹이나 인터넷 서비스에 대한 장기간의 접근 거부
같이 보기
-----

* 위키백과의 서비스 거부 공격


스태킹 컨텍스트 (Stacking context) - MDN Web Docs 용어 사전: 웹 용어 정의

스태킹 컨텍스트 (Stacking context)
===========================

**스태킹 컨텍스트 (Stacking context)** 는 마치 책상 위의 카드를 옆으로 늘어놓거나 서로 겹치게 만들 수 있듯, 웹 페이지에서 어떤 요소가 위에 그려지는지 결정하는 방법입니다.

같이 보기
-----

* stacking context에 대한 설명과 예제


Digital certificate - MDN Web Docs 용어 사전: 웹 용어 정의

Digital certificate
===================

디지털 인증서는 공개적으로 알려진 암호화 키를 조직에 바인딩하는 데이터 파일입니다.

디지털 인증서에는 일반 이름(예, mozilla.org)과 같은 조직(e.g., Mozilla 회사) 또한 위치(Mountain View)에 대한 정보가 포함되어 있습니다.

디지털 인증서는 가장 일반적으로 인증 기관에 의해 서명되어 인증서의 신뢰성을 증명합니다.

같이 보기
-----

* 위키백과의 디지털 인증서


리소스 타이밍 (Resource Timing) - MDN Web Docs 용어 사전: 웹 용어 정의

리소스 타이밍 (Resource Timing)
=========================

성능 문제를 진단하려면 리소스 단위의 성능 데이터가 필요합니다. 리소스 타이밍 API (en-US)는 페이지가 로드될 때 가져오는 각 개별 리소스에 대한 타이밍 정보를 캡처할 수 있는 JavaScript API입니다.

같이 보기
-----

* 리소스 타이밍 API 사용하기 (en-US)
* 서버 타이밍(Server Timing)


불리언 - MDN Web Docs 용어 사전: 웹 용어 정의

불리언
===

컴퓨터 과학에서 **불리언(boolean)** 은 논리적인 데이터 유형입니다. 불리언은 `참(true)` 혹은 `거짓(false)` 값 만을 가질 수 있습니다.

Javascript에서 불리언 조건은 어떤 코드 부문이 실행되어야 할 지(예를 들어 if 절 안에서) 또는 어떤 코드 부문을 반복해야 할지(예를 들어 for 문 안에서) 결정하는 데 사용합니다.

아래는 불리언이 쓰일 수 있는 예시를 보여주는 유사코드입니다(실행 가능한 코드는 아닙니다).

```js
/\* JavaScript if문 \*/
if (boolean conditional) {
  // 조건이 참일 경우 실행되는 코드
}
if (boolean conditional) {
  console.log("boolean conditional resolved to true");
} else {
  console.log("boolean conditional resolved to false");
}
/\* JavaScript for 루프 \*/
for (control variable; boolean conditional; counter) {
  // 조건이 참일 경우 반복해서 실행할 코드
}
```

불리언이란 이름은 기호 논리학 분야의 선구자인 영국 수학자 조지 불의 이름을 따왔습니다.

여기까지 일반적인 소개였습니다. The term **불리언**이라는 용어는 문맥에 따라 더 구체적인 의미를 가질 수 있습니다. 다음을 읽어보세요.

Boolean (JavaScript)
JavaScript에서의 **불리언**은 `true` 또는 `false`일 수 있는 Primitive입니다.
Boolean attribute (ARIA)
ARIA의 **불리언 속성**은 열거 목록에 `true` 또는 `false`를 포함하는 Enumerated입니다.
Boolean attribute (HTML)
HTML의 **불리언 속성** 은 `true` 또는 `false`일 수 있는 속성입니다.
### 같이 보기

* 위키피디아의 불리언 자료형


구문분석 (Parse) - MDN Web Docs 용어 사전: 웹 용어 정의

구문분석 (Parse)
============

구문분석(Parsing)이란 프로그램을 분석하고 런타임 환경이 실제로 실행할 수 있는 내부 형식(예, 브라우저 내부의 JavaScript 엔진)으로 변환하는 것을 의미합니다.

브라우저는 HTML을 구문분석 하는 것을 통해 DOM 트리로 만듭니다. HTML 구문분석에는 토큰화 (en-US) 및 트리 구성이 포함됩니다. HTML 토큰에는 시작 태그와 끝 태그는 물론 속성 이름과 값도 포함됩니다. 문서의 형식이 올바른 경우, 구문 분석이 간단하고 빠릅니다. 구문분석기는 토큰화된 입력을 문서로 구문 분석하여 트리를 구축합니다.

HTML 구문분석기가 이미지와 같은 논블록킹 리소스를 찾으면, 브라우저는 해당 리소스를 요청하고 구문분석을 계속합니다. CSS 파일이 발견되면 구문분석을 계속할 수 있지만, 특히 `async` 또는 `defer` 속성이 없는 `<script>` 태그의 경우에는 렌더링을 차단하고 HTML 구문 분석을 일시 중지합니다.

브라우저가 CSS 스타일을 발견하면, 텍스트를 CSS 객체 모델(CSSOM)로 구문 분석합니다. CSS 객체 모델 데이터 구조는 레이아웃 스타일 지정 및 페인팅에 사용됩니다. 그런 다음 브라우저는 콘텐츠를 화면에 그릴 수 있도록 두 구조 모두에서 렌더링 트리를 생성합니다. JavaScript도 다운로드 되어 구문 분석된 후 실행됩니다.

JavaScript 구문 분석은 컴파일 타임 동안, 또는 메소드 호출 중인 경우와 같이 구문분석기가 호출될 때마다 수행됩니다.

같이 보기
-----

* 위키백과의 Parse


UTF-8 - MDN Web Docs 용어 사전: 웹 용어 정의

UTF-8
=====

UTF-8(UCS Transformation Format 8)은 월드 와이드 웹의 가장 일반적인 문자 인코딩입니다. 각 문자는 1~4바이트로 표시됩니다. UTF-8은 ASCII와 역호환되며 표준 유니코드 문자를 나타낼 수 있습니다.

처음 128개의 UTF-8 문자는 처음 128개의 ASCII 문자(숫자 0-127)와 정확히 일치하며, 이는 기존 ASCII 텍스트가 이미 유효한 UTF-8임을 의미합니다. 다른 모든 문자는 2~4바이트를 사용합니다. 각각의 바이트는 인코딩 목적으로 남겨진 비트가 있습니다. 비 ASCII 문자가 저장을 위해 1 바이트 이상을 요구하기 때문에, 바이트가 분리되고 재결합되지 않은 상태로 실행하면 손상될 위험이 있습니다.

같이 보기
-----

* 위키백과의 UTF-8
* 유니코드 웹사이트의 UTF-8에 대한 FAQ


도메인 샤딩 (Domain sharding) - MDN Web Docs 용어 사전: 웹 용어 정의

도메인 샤딩 (Domain sharding)
========================

브라우저는 각 도메인의 활성 연결 수를 제한합니다. 해당 제한을 초과하는 리소스를 동시에 다운로드할 수 있도록 \*\*도메인 샤딩(Domain sharding)\*\*은 콘텐츠를 여러 하위 도메인으로 분할합니다. 여러 도메인을 사용하여 여러 리소스를 제공하는 경우, 브라우저는 더 많은 리소스를 동시에 다운로드할 수 있으므로, 페이지 로드 시간이 빨라지고 사용자 경험이 향상됩니다.

성능 측면에서, 도메인 샤딩의 문제는 각 도메인에 대한 추가 DNS 조회 비용과 각 TCP 연결 설정에 따른 오버헤드입니다.

HTTP 요청의 초기 응답은 일반적으로 다운로드 해야 하는 JavaScript, CSS, 이미지 및 기타 미디어 파일과 같은 기타 리소스를 나열하는 HTML 파일입니다. 브라우저는 도메인 당 활성 연결 수를 제한하므로, 리소스를 순차적으로 다운로드해야 해서 단일 도메인에서 필요한 모든 리소스를 제공하는 데 속도가 느려질 수 있습니다. 도메인 샤딩을 사용하면 필요한 다운로드가 둘 이상의 도메인에서 제공되므로, 브라우저가 필요한 리소스를 동시에 다운로드할 수 있습니다. 그러나, 다중 도메인은 DNS 조회로 인해 초기 로드 시간이 느려지므로, 안티패턴입니다.

HTTP2는 무제한 동시 요청을 지원하므로 HTTP/2가 활성화되면 도메인 샤딩이 더 이상 필요하지 않게 됩니다.

같이 보기
-----

* TLS
* DNS
* HTTP/2


GZip 압축 (GZip compression) - MDN Web Docs 용어 사전: 웹 용어 정의

GZip 압축 (GZip compression)
==========================

gzip은 파일 압축 및 압축 해제에 사용되는 파일 형식입니다. 파일 크기를 더 작게 만들어 더 빠른 네트워크 전송을 가능하게 하는 Deflate 알고리즘을 기반으로 합니다. gzip은 일반적으로 웹 서버와 최신 브라우저에서 지원됩니다. 즉, 서버는 파일을 보내기 전에 자동으로 gzip으로 압축할 수 있고, 브라우저는 파일을 받으면 압축을 풀 수 있습니다.

같이 보기
-----

* gzip 홈페이지
* 위키백과의 gzip


유효 연결 타입 (Effective connection type) - MDN Web Docs 용어 사전: 웹 용어 정의

유효 연결 타입 (Effective connection type)
====================================

\*\*유효 연결 타입 (Effective connection type, ECT)\*\*은 실제 연결이 광대역이나 Wi-Fi 테더링이더라도, 브라우저가 페이지를 요청하는 시간과 유효 연결 타입 사이의 시간을 기준으로 3G와 같은 셀룰러 연결 타입을 반환하는, 측정된 네트워크 성능을 나타냅니다.

'`slow-2g`', '`2g`', '`3g`'과 '`4g`' 값은 관찰되는 왕복 시간과 다운링크 값을 사용하여 결정됩니다.

| 유효 연결 타입 | 최소 왕복 시간 | 최대 다운링크 | 설명 |
| --- | --- | --- | --- |
| `slow-2g` | 2000ms | 50 Kbps | 이 네트워크는 텍스트 전용 페이지와 같은 소규모 전송에만 적합합니다. |
| `2g` | 1400ms | 70 Kbps | 이 네트워크는 작은 이미지 전송에 적합합니다. |
| `3g` | 270ms | 700 Kbps | 이 네트워크는 고해상도 이미지, 오디오, SD 비디오 등 대용량 리소스를 전송하는 데 적합합니다. |
| `4g` | 0ms | ∞ | 이 네트워크는 HD 비디오, 실시간 비디오 등에 적합합니다. |

유효타입 (en-US)은 네트워크 정보 API의 속성으로, navigator.connection 객체를 통해 JavaScript에 노출됩니다. 유효 연결 타입을 보려면, 지원 브라우저의 개발자 도구 콘솔을 열고 다음을 입력하세요.

```js
navigator.connection.effectiveType;
```

같이 보기
-----

* 네트워크 정보 API
* `NetworkInformation` (en-US)
* `NetworkInformation.effectiveType` (en-US)
* `ECT` (en-US)


OTA - MDN Web Docs 용어 사전: 웹 용어 정의

OTA
===

**무선 펌웨어 업데이트(Over The Air, OTA)** 는 중앙 서버에서 연결된 장치의 소프트웨어를 자동으로 갱신하는 것을 말합니다. 특정 업데이트 모음을 수신하는 모든 장치 소유자는 동일한 '채널'에 있으며, 각 장치는 종종 여러 채널(예, 프로덕션 또는 엔지니어링 빌드)에 접근할 수 있습니다.

같이 보기
-----

* 위키백과의 Over-the-air programming


ASCII - MDN Web Docs 용어 사전: 웹 용어 정의

ASCII
=====

**미국정보교환표준부호**(*American Standard Code for Information Interchange*) 또는 **ASCII**는 문자, 숫자, 구두점, 제어문자를 디지털 형태로 바꾸어주는 대표적인 문자 인코딩 방식입니다. 2007년부터 웹에서는 UTF-8이 주로 쓰이고 있습니다.

같이 보기
-----

Wikipedia의 ASCII


영역 (Gamut) - MDN Web Docs 용어 사전: 웹 용어 정의

영역 (Gamut)
==========

색상의 \*\*영역 (Gamut)\*\*은 일반적으로 디스플레이나 인쇄 장치가 나타낼 수 있는 색상의 하위 집합입니다.

어떤 디스플레이나 프린터도 인간의 눈이 인지할 수 있는 전체 색상의 범위를 표현할 수 없습니다. 장치 'gamut'는 색상의 범위를 지원하는 세트를 나타냅니다.

전통적으로, 웹 개발에서, 사용되는 유일한 색영역은 '표준 빨강-녹색-파랑(Standard Red-Green-Blue, sRGB)'였습니다. sRGB의 각 기본 색상에 대해서 3바이트를 사용합니다. 그러나, '와이드 컬러(wide-color)' 모니터와 전문 프린터는 이 범위를 사용하여 표현할 수 없는 더 넓은 범위의 색상을 지원합니다.

2021년부터, 브라우저는 영화 산업에서 널리 사용되는 P3 및 rec2020와 같은 다른 영역에 대한 기능을 제공하기 시작했습니다.

개발자는 `color-gamut` (en-US) 미디어 기능을 사용하여 더 넓은 영역을 지원하는 장치에 대해서 다양한 색상 세트를 정의할 수 있습니다. LCH 원통형 좌표계에 대해 `lch()` (en-US) 또는 Lab 좌표계에 대해 `lab()` (en-US)과 같은 특정 CSS 함수를 사용하여 RGB 영역 외부의 색상을 설명할 수 있습니다.

같이 보기
-----

* 위키백과의 Gamut


미들웨어 (Middleware) - MDN Web Docs 용어 사전: 웹 용어 정의

미들웨어 (Middleware)
=================

미들웨어는 시스템의 일부가 데이터를 통신하고 관리할 수 있도록 하는 모든 소프트웨어 또는 서비스에 대한 (느슨하게 정의된) 용어입니다. 컴포넌트와 입력/출력 간의 통신을 담당하는 소프트웨어이므로, 개발자는 애플리케이션의 특정 목적에 집중할 수 있습니다.

서버 사이드 웹 애플리케이션 프레임워크에서, 미들웨어라는 용어는 데이터베이스 접근과 같은 작업을 처리하기 위해 프레임워크의 요청 및 응답 처리를 하고, 파이프라인에 추가할 수 미리 구축되어 있는 소프트웨어 컴포넌트를 가리키는 데 더 구체적으로 사용되는 경우가 대부분입니다.

같이 보기
-----

* 위키백과의 미들웨어(분리된 애플리케이션)
* 위키백과의 미들웨어


연속적인 미디어 (Continuous Media) - MDN Web Docs 용어 사전: 웹 용어 정의

연속적인 미디어 (Continuous Media)
===========================

연속 미디어(Continuous media)란 소스와 대상(destination) 사이에 시간적인 관계가 있는 데이터를 의미합니다. 연속적인 미디어의 가장 일반적인 예로는 오디오와 모션 비디오가 있습니다. 연속적인 미디어는 소스와 대상(sink) 사이에 "엄격한" 시간적인 관계가 있는 실시간(대화형)이거나, 관계가 덜 엄격한 스트리밍(재생)일 수 있습니다.

CSS는 인쇄 매체를 포함한 다양한 상황에서 사용될 수 있습니다. 그리고 일부 CSS, 특히 레이아웃에 사용되는 CSS는 컨텍스트에 따라 다르게 동작합니다.

따라서 연속적인 미디어는 콘텐츠가 분리되지 않은 컨텍스트를 식별합니다. 연속적인 미디어는 끊임없이 재생될 수 있습니다. 화면에 표시되는 웹 콘텐츠는 음성 콘텐츠와 마찬가지로 연속적인 미디어입니다.


멱등성 - MDN Web Docs 용어 사전: 웹 용어 정의

멱등성
===

동일한 요청을 한 번 보내는 것과 여러 번 연속으로 보내는 것이 같은 효과를 지니고, 서버의 상태도 동일하게 남을 때, 해당 HTTP 메서드가 **멱등성**을 가졌다고 말합니다.

다른 말로는, 멱등성 메서드에는 통계기록 등을 제외하면 어떠한 부수효과(side effect)도 존재해서는 안됩니다. 예를 들어, 서버는 모든 요청을 받은 시간과 함께 기록할 수 있습니다. 멱등성(Idempotency)는 클라이언트가 의도한 효과에만 적용됩니다. 예를 들어, POST 요청은 데이터를 서버로 보내려고 하거나, DELETE 요청은 서버에서 리소스를 삭제하려고 합니다.

safe 메서드는 `PUT` and `DELETE`와 마찬가지로 멱등적입니다. `POST` 메서드는 멱등성이 아닙니다.

멱등성을 따질 땐 실제 서버의 백엔드 상태만 보면 되며, 각 요청에서 반환하는 응답 코드는 다를 수 있습니다. 첫 번째 `DELETE` 요청이 `200`을 반환한다면, 그 이후는 아마 `404`를 반환할 것입니다. `DELETE`가 멱등성을 가진다는 것은, REST API에서 개발자는 `DELETE` 메서드를 사용해 "목록의 마지막 항목 제거" 기능을 구현해서는 안 된다는 것입니다.

다만, 서버는 메서드의 멱등성을 보장하지 않으며, 일부 애플리케이션은 잘못된 구현으로 멱등성 제약을 어길 수도 있습니다.

`GET /pageX HTTP/1.1`는 안전한(읽기 전용) 메서드이기 때문에 멱등성을 가집니다. 그 동안 서버의 데이터가 업데이트된 경우, 다음에 하는 호출은 클라이언트에 다른 데이터를 반환할 수 있습니다.

`POST /add_row HTTP/1.1`은 멱등성을 가지지 않습니다. 여러 번 호출되면 여러 행을 추가합니다.

```http
POST /add\_row HTTP/1.1
POST /add\_row HTTP/1.1   -> Adds a 2nd row
POST /add\_row HTTP/1.1   -> Adds a 3rd row
```

`DELETE /idX/delete HTTP/1.1`의 상태 코드는 응답마다 달라질 수 있지만, 그럼에도 멱등성을 가집니다.

```http
DELETE /idX/delete HTTP/1.1   -> Returns 200 if idX exists
DELETE /idX/delete HTTP/1.1   -> Returns 404 as it just got deleted
DELETE /idX/delete HTTP/1.1   -> Returns 404
```

같이 보기
-----

* HTTP 명세의 멱등성 정의
* 멱등성 메서드 문서: `GET`, `HEAD`, `PUT`, `DELETE`, `OPTIONS`, `TRACE` (en-US)
* 비 멱등성 메서드 문서: `POST`,`PATCH`, `CONNECT`


해시 기반 메시지 인증 코드 (HMAC) - MDN Web Docs 용어 사전: 웹 용어 정의

해시 기반 메시지 인증 코드 (HMAC)
======================

\*\*해시 기반 메시지 인증 코드(Hash-based message authentication code, HMAC)\*\*는 암호학적인 메시지 인증에 사용되는 프로토콜입니다.

모든 종류의 암호화 함수를 사용할 수 있고, 그 강도는 기본 기능(예, SHA1 또는 MD5)과 선택한 비밀 키에 따라 다릅니다. 이러한 조합을 통해 HMAC 검증 알고리즘은 HMAC-SHA1과 같은 복합 이름으로 알려져 있습니다.

HMAC는 무결성과 인증을 모두 보장하는 데 사용됩니다.

같이 보기
-----

* HMAC on Wikipedia
* IETF의 RFC 2104


탐색 지시문 (Navigation directive) - MDN Web Docs 용어 사전: 웹 용어 정의

탐색 지시문 (Navigation directive)
=============================

**CSP 탐색 지시문 (Navigation directive)** 는 `Content-Security-Policy` (en-US) 헤더에 사용되며, 예를 들어 사용자가 탐색하거나 양식을 제출할 수 있는 위치를 제어합니다.

탐색 지시문은 `default-src` 지시문으로 대체되지 않습니다.

전체 목록은 탐색 지시문 (en-US)을 참조하세요.

같이 보기
-----

* https://www.w3.org/TR/CSP/#directives-navigation
* 다른 종류의 지시문:
    + Fetch directive
    + Document directive
    + Reporting directive
    + `block-all-mixed-content` (en-US)
    + `upgrade-insecure-requests` (en-US)
    + `trusted-types` (en-US)
* `Content-Security-Policy` (en-US)


WebRTC - MDN Web Docs 용어 사전: 웹 용어 정의

WebRTC
======

**WebRTC** ('Web Real-Time Communication') API는 영상 채팅, 음성 통화, 그리고 P2P 파일 공유 웹 어플리케이션에서 사용할 수 있습니다.

WebRTC 의 3가지 주요 부분.

`getUserMedia()` (en-US)

기기의 카메라와 마이크를 같이 혹은 개별로 접속권한을 부여받으며, RTC connection에 신호를 연결할 수 있습니다.

`RTCPeerConnection` (en-US)

비디오 채팅 또는 음성 통화를 구성하기 위한 인터페이스입니다.

`RTCDataChannel` (en-US)

브라우저간에 peer-to-peer (en-US) 데이터 경로 설정방법을 제공합니다.

같이 보기
-----

* 위키백과의 WebRTC
* MDN의 WebRTC 자습서
* WebRTC 브라우저 지원


Lazy load - MDN Web Docs 용어 사전: 웹 용어 정의

Lazy load
=========

\*\*Lazy Loading(지연 로딩)\*\*은 사용자의 행동이나 탐색 패턴에 기반해 사용자가 필요할 때 일부 자원(이미지 같은)을 지연해서 로드하는 전략입니다. 통상적으로 이 자원들은 스크롤하여 화면에 보여질 때 로드됩니다.

제대로 구현된 경우에는 자원 지연 로딩은 사용자에게 끊김이 없다는 느낌, 페이지가 움직이기 시작할 때까지 필요한 자원 감소, 대화형이 가능한 시간 등 초기 로드 성능 향상에 도움이 됩니다.

같이 보기
-----

* Lazy loading


NAT용 세션 탐색 유틸리티 (Session Traversal Utilities for NAT, STUN) - MDN Web Docs 용어 사전: 웹 용어 정의

NAT용 세션 탐색 유틸리티 (Session Traversal Utilities for NAT, STUN)
===========================================================

**NAT용 세션 탐색 유틸리티 (Session Traversal Utilities for NAT, STUN)** 는 네트워크 주소 변환 (Network Address Translator, NAT) 주변에서 데이터를 전송하기 위한 보조 프로토콜입니다. STUN은 IP 주소, 포트 및 NAT 뒤에 네트워크 컴퓨터의 연결 상태를 반환합니다.

같이 보기
-----

* 위키백과의 STUN
* WebRTC 프로토콜
### 기술적 참고서

* 명세서


깃 (Git) - MDN Web Docs 용어 사전: 웹 용어 정의

깃 (Git)
=======

\*\*깃(Git)\*\*은 무료 오픈소스 분산 소스 코드 관리(SCM) 시스템입니다. 분산되어 있는 개발 팀이 코드 베이스를 쉽게 처리할 수 있습니다. 이전 SCM 시스템과 차별화되는 점은 마스터 레포지토리를 변경하거나 쓰기 권한이 없어도, 로컬 개발 시스템에서 일반적인 작업(분기, 커밋 등)을 수행할 수 있다는 것입니다.

같이 보기
-----

* 문서가 포함된 공식 웹사이트
* Git 기반 그래픽 프로젝트 호스팅인 깃헙(GitHub)


Forbidden response header name - MDN Web Docs 용어 사전: 웹 용어 정의

Forbidden response header name
==============================

**금지된 응답 헤더 이름**은 프로그래밍 방식으로 수정할 수 없는 HTTP 헤더의 이름(`Set-Cookie`)입니다.

같이 보기
-----

* Fetch 명세서: 금지된 응답 헤더 이름
* 금지된 헤더 이름 (용어 사전)


ICE - MDN Web Docs 용어 사전: 웹 용어 정의

ICE
===

\*\*대화형 연결 구축 (Interactive Connectivity Establishment, ICE)\*\*은 네트워크 토폴로지에 관계없이(일반적으로 오디오 및 비디오 채탱용) 두 피어를 연결하기 위해 (다른 기술 중에서) WebRTC에서 사용하는 프레임워크입니다. 이 프로토콜을 사용하면 두 피어가 모두 네트워크 주소 변환 (Network Address Translator, NAT)를 사용하여 해당 로컬 네트워크의 다른 장치와 글로벌 IP 주소를 공유하는 경우에도 서로 연결을 찾고 설정할 수 있습니다.

ICE 프레임워크 알고리즘은 두 피어를 연결하기 위해 지연 시간이 가장 짧은 경로를 찾고, 아래 옵션을 순서대로 시도합니다.

1. 직접 UDP 연결 (이 경우에만 STUN 서버는 피어의 네트워크 연결 주소를 찾는 데 사용됩니다)
2. HTTP 포트를 통한 직접 TCP 연결
3. HTTPS 포트를 통한 직접 TCP 연결
4. relay/TURN 서버를 통한 간접 연결 (직접 연결이 실패한 경우. 예를 들어, 한 피어가 NAT 통과를 차단하는 방화벽 뒤에 있는 경우)
같이 보기
-----

* ICE를 사용하는 주요 웹 관련 프로토콜인 WebRTC
* WebRTC 프로토콜
* ICE에 대한 IETF 명세서인 RFC 8445
* ICE 후보를 나타내는 인터페이스인 `RTCIceCandidate`


깊은 복사 - MDN Web Docs 용어 사전: 웹 용어 정의

깊은 복사
=====

객체의 **깊은 복사**는 복사본의 속성이 복사본이 만들어진 원본 객체와 같은 참조(메모리 내의 같은 값을 가리킴)를 공유하지 않는 복사입니다. 따라서 원본이나 복사본을 변경할 때, 다른 객체가 변경되지 않는 것을 보장할 수 있습니다. 이러한 동작은 원본이나 복사본의 중첩된 속성을 변경하면 다른 객체도 변경될 수 있는 얕은 복사의 동작과 대조적입니다.

두 객체 `o1`과 `o2`는 관찰된 동작이 같다면 구조적으로 동일합니다. 이러한 동작에는 다음이 포함됩니다.

1. `o1`과 `o2`의 속성은 같은 이름과 순서입니다.
2. 두 객체의 속성 값은 구조적으로 동일합니다.
3. 두 객체의 프로토타입 체인은 구조적으로 동일합니다 (구조적으로 동일하다는 것은 이러한 객체는 보통 일반 객체이므로 둘 다 `Object.prototype`에서 상속된다는 것을 의미합니다).

구조적으로 동일한 객체는 같은 객체 (`o1 === o2`) 또는 복사본 (`o1 !== o2`)일 수 있습니다. 동일한 원시 값은 항상 동일하게 비교하기 때문에 복사본을 만들 수 없습니다.

이제 깊은 복사를 다음과 같이 보다 공식적으로 정의할 수 있습니다.

1. 두 객체는 같은 객체가 아닙니다 (`o1 !== o2`).
2. `o1`과 `o2`의 속성은 같은 이름과 순서입니다.
3. 두 객체의 속성 값은 서로의 깊은 복사 값입니다.
4. 두 객체의 프로토타입 체인은 구조적으로 동일합니다.

깊은 복사는 프로토타입 체인을 복사할 수도 있고 복사하지 않을 수도 있습니다 (그리고 자주 복사하지 않습니다). 그러나 구조적으로 동일하지 않은 프로토타입 체인을 가진 두 객체(예로, 하나는 배열이고 다른 하나는 일반 객체)는 서로의 복사본이 아닙니다.

속성이 모두 원시 값인 객체의 복사는 깊은 복사와 얕은 복사의 정의에 모두 부합합니다. 그렇지만 중첩된 속성이 없기 때문에 이런 복사의 깊이에 대해 이야기하는 것은 다소 쓸모가 없습니다. 보통 중첩된 속성을 변경하는 맥락에서 깊은 복사하는 것에 대해 이야기합니다.

JavaScript에서, 모든 표준 내장 객체의 복사 작업(전개 구문, `Array.prototype.concat()`, `Array.prototype.slice()`, `Array.from()`, `Object.assign()`, `Object.create()`)은 깊은 복사본을 생성하지 않습니다 (대신, 얕은 복사본을 생성합니다).

직렬화가 가능하다면 JavaScript 객체의 깊은 복사를 만드는 한 가지 방법은, `JSON.stringify()`를 사용하여 객체를 JSON 문자열로 변환한 다음, `JSON.parse()`로 문자열을 다시 (완전히 새로운) JavaScript 객체로 변환하는 것입니다.

```js
const ingredientsList = ["noodles", { list: ["eggs", "flour", "water"] }];
const ingredientsListDeepCopy = JSON.parse(JSON.stringify(ingredientsList));
```

깊은 복사는 원본 객체와 참조를 공유하지 않기 때문에 깊은 복사본에 어떠한 변경이 있어도 원본 객체에 영향을 주지 않습니다.

```js
// ingredientsListDeepCopy의 'list' 속성 값을 변경합니다.
ingredientsListDeepCopy[1].list = ["rice flour", "water"];
// ingredientsList의 'list' 속성은 변경되지 않습니다.
console.log(ingredientsList[1].list);
// Array(3) [ "eggs", "flour", "water" ]
```

그러나 위 코드의 객체는 직렬화할 수 있을 만큼 단순하지만, 많은 JavaScript 객체는 전혀 직렬화할 수 없습니다. 예를 들어, 함수 (클로저 포함), 심볼, HTML DOM API에서 HTML 요소를 나타내는 객체, 재귀 데이터, 그리고 많은 다른 경우가 있습니다. 이 경우 객체를 직렬화하기 위해 `JSON.stringify()`를 호출하면 실패할 것입니다. 그래서 이러한 객체의 깊은 복사본을 만드는 방법은 없습니다.

Web API `structuredClone()`은 또한 깊은 복사본을 만들고 원본에서 전송가능한 객체 (en-US)를 복사하는 대신 새로운 복사본으로 전송할 수 있는 장점이 있습니다. 또한 `Error`와 같은 더 많은 데이터 타입을 처리합니다. 그러나 `structuredClone()`은 JavaScript 언어 자체의 기능이 아니라 web API를 실행하는 브라우저 및 다른 JavaScript 호스트의 기능입니다. 그리고 직렬화할 수 없는 객체를 복제하기 위해 `structuredClone()`을 호출하면, `JSON.stringify()`를 호출해 직렬화하는 것과 같은 방식으로 실패할 것입니다.

같이 보기
-----

* 얕은 복사
* `window.structuredClone()`


복호화 (Decryption) - MDN Web Docs 용어 사전: 웹 용어 정의

복호화 (Decryption)
================

암호학에서, **복호화**는 암호문을 평문으로 변환하는 것입니다.

 복호화는 암호화의 기본 요소입니다. 암호라는 암호화 알고리즘을 사용하여 암호문 메시지를 일반 텍스트로 변환합니다.
 암호화와 마찬가지로, 최신 암호의 복호화는 특정 알고리즘과 키라는 비밀을 사용하여 수행됩니다. 알고리즘은 공개되는 경우가 많아, 암호화가 안전하게 유지된다면 키는 비밀로 유지되어야 합니다.

![복호화 기본 요소입니다](/ko/docs/Glossary/Decryption/decryption.png)

복호화는 encryption의 반대이며 키가 비밀로 유지되는 경우, 특정 비밀을 알지 못한 채 복호화하는 것은 수학적으로 수행하기 어렵습니다. 얼마나 어려운지는 선택한 암호화 알고리즘의 보안에 따라 달라지고 암호화 분석의 진행과 함께 발전합니다.

같이 보기
-----

* 암호화와 복호화


국제화 (internationalization, I18N) - MDN Web Docs 용어 사전: 웹 용어 정의

국제화 (internationalization, I18N)
================================

국제화 (i18n ("internationalization" 부터 유래, 20자로 이루어진 단어))는 제품이나 서비스를 모든 대상 문화에 쉽게 적용할 수 있도록 하는 모범 사례입니다.

>
> **국제화(Internationalization)**는 문화, 지역, 언어가 다양한 대상 고객을 위해 쉽게 현지화**할 수 있는** 제품, 애플리케이션 또는 문서 콘텐츠를 설계하고 개발하는 것입니다(W3C 정의에 따름).
>
>
>

무엇보다도 국제화(i18n)에는 여러 가지 지원이 필요합니다.

* 문자 모음 (일반적으로 유니코드를 통함)
* 측정 단위 (통화, °C/°F, km/miles 등)
* 시간 및 날짜 형식
* 키보드 레이아웃
* 텍스트 방향
같이 보기
-----

* 위키백과의 i18n
* W3C의 i18n
* i18nguy.com의 i18n 자료


정적 타이핑 (Static typing) - MDN Web Docs 용어 사전: 웹 용어 정의

정적 타이핑 (Static typing)
======================

**정적 타입(statically-typed)** 언어는 컴파일 시간에 변수 타입이 알려진 언어(Java, C, or C++ 등) 입니다. 대부분의 언어에서는 프로그래머가 타입을 명시적으로 표시해야 합니다. (OCaml와 같이) 다른 경우에는, 타입 추론을 통해 프로그래머가 변수 타입을 표시하지 않을 수 있습니다.

같이 보기
-----

* 위키백과의 타입 시스템