recursal/MDN huggingface dataset:
RDF
===

**자원 기술 프레임워크 (Resource Description Framework, RDF)** 는 웹페이지와 같은 World Wide Web의 정보를 표현하기 위해 W3C에서 개발한 언어입니다. RDF는 애플리케이션 간에 완전히 자동화된 방식으로 교환될 수 있도록 리소스 정보를 인코딩하는 표준 방법을 제공합니다.

같이 보기
-----

* 위키백과의 자원 기술 프레임워크
SQL
===

**SQL** (구조화 질의어, Structured Query Language) 은 테이블 기반 데이터베이스에서 데이터를 업데이트, 수집, 계산하기 위해 디자인된 기술형 컴퓨터 언어입니다.

같이 보기
-----

### 일반적인 지식

* 위키백과의 SQL
### SQL 배우기

* sqlzoo.net에서 SQL 배우기
* Tutorial Point
TCP
===

\*\*TCP (전송 제어 프로토콜)\*\*은 두 개의 호스트를 연결하고 데이터 스트림을 교환하게 해주는 중요한 네트워크 프로토콜입니다. TCP는 데이터와 패킷이 보내진 순서대로 전달하는 것을 보장해줍니다. Vint CERF와 Bob Kahn (당시 DARPA 과학자)는 TCP를 1970년 대에 설계하였습니다.

TCP의 역할은 에러가 없이 패킷이 신뢰할 수 있게 전달 되었는지 보증해 주는 것입니다. TCP는 혼잡 제어를 구현합니다. 이는 초기 요청은 작게 시작하여 컴퓨터들과 서버 및 네트워크가 지원할 수 있는 대역폭 수준까지 크기가 증가한다는 것을 의미합니다.

같이 보기
-----

* 위키백과 의 전송 제어 프로토콜
* HTTP 개요
* 브라우저는 어떻게 작동하는가
* 용어 사전
    + IPv4
    + IPv6
    + Packet
클로저 (Closure)
=============

실행의 \*\*범위\*\*를 정의하는 바인딩입니다. JavaScript에서, \*\*함수\*\*는 클로저 문맥을 생성합니다.

같이 보기
-----

* 위키백과의 클로저
* MDN의 클로저
SGML
====

**표준 일반화 마크업 언어 (Standard Generalized Markup Language, SGML)** 는 선언적 마크업 언어를 정의하기 위한 ISO 명세서입니다.

웹에서는 HTML 4, XHTML 및 XML이 널리 사용되는 SGML 기반 언어입니다. 제 5판 이후 HTML은 더 이상 SGML 기반이 아니며, 자체 구문 분석 규칙을 가지고 있다는 점은 주목할 가치가 있습니다.

같이 보기
-----

* 위키백과의 SGML
* SGML 소개
스크립트 지원 요소 (Script-supporting element)
======================================

HTML 문서에서, **스크립트 지원 요소 (script-supporting elements)** 는 페이지의 모양이나 레이아웃에 직접적으로 기여하지 않는 요소입니다. 대신 스크립트이거나 스크립트에서만 사용되는 정보를 포함합니다.

이러한 요소는 중요할 수 있지만, 페이지의 스크립트가 명시적으로 그렇게 하도록 하지 않는 한 표시된 페이지에 영향을 주지 않습니다.

스크립트 지원 요소는 `<script>` 및 `<template>` 두 가지 밖에 없습니다.

같이 보기
-----

Script-supporting elements
키(Key)
======

키는 암호화 및/또는 복호화에 대한 암호에서 사용되는 정보입니다.

키를 제외한 암호화 시스템에 관한 모든 것이 공개된 경우에도 암호화된 메시지는 안전하게 유지되어야 합니다.

대칭키 암호화에서, 암호화와 복호화에 동일한 키가 사용됩니다. 공개키 암호화에서, '공개 키' 와 '개인 키'라는 관련 키의 쌍이 있습니다. 공개 키는 자유롭게 사용할 수 있지만, 개인 키는 비밀로 유지됩니다. 공개 키는 해당 개인 키로만 해독할 수 있는 메시지를 암호화할 수 있으며, 그 반대의 경우도 마찬가지입니다.

같이 보기
-----

* 위키백과의 케르크호프스의 원리(Kerckhoffs's principle)
* MDN 웹 용어 사전
    + Block cipher mode of operation
    + Cipher
    + Ciphertext
    + Cipher suite
    + Cryptanalysis
    + Cryptography
    + Decryption
    + Encryption
    + Key
    + Plaintext
    + Public-key cryptography
    + Symmetric-key cryptography
프로그레시브 웹 앱 (Progressive web apps)
=================================

프로그레시브 웹 앱 (Progressive web apps, PWA)은 웹 플랫폼 기술을 사용하여 구축되었지만, 플랫폼별 앱과 같은 사용자 경험을 제공하는 애플리케이션입니다.

이러한 종류의 앱은 검색 엔진을 통한 검색 가능성, URL을 통한 연결 가능, 여러 폼 요소에서 작동 등 웹의 가장 좋은 부분을 모두 활용하지만, 최신 API(Service Workers 및 Push)를 통해 점진적으로 향상됩니다.

이러한 기능에는 설치 가능, 오프라인 작업, 서버에서 사용자와의 쉬운 동기화 및 재참여가 포함됩니다.

같이 보기
-----

* MDN의 프로그레시브 웹 앱
* web.dev의 프로그레시브 웹 앱
플렉스 (Flex)
==========

`플렉스(Flex)`는 CSS `display` (en-US) 속성에 추가된 새로운 값입니다. `inline-flex`와 함께 적용되는 요소가 플렉스 컨테이너가 되고, 플렉스 컨테이너의 자식 요소가 각각  플렉스 아이템입니다. 그런 다음 요소는 플렉스 레이아웃에 포함되고, CSS 플렉시블 상자 레이아웃 모듈에 정의된 모든 속성이 적용될 수 있습니다.

`flex` 속성은 `flex-grow`, `flex-shrink` 및 `flex-basis`에 대한 약어입니다.

또한, `<flex>` 는 CSS 그리드 레이아웃의 플렉시블한 길이 (en-US)를 참조할 수 있습니다.

같이 보기
-----

### 속성 참고서

* `align-content`
* `align-items` (en-US)
* `align-self` (en-US)
* `flex`
* `flex-basis`
* `flex-direction`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `flex-wrap`
* `justify-content`
* `order`
### 추가 자료

* 'CSS 플렉시블 상자 레이아웃 모듈 레벨 1 명세서'
* CSS 플렉스박스 안내서:
    + 플렉스 박스의 기본 개념
    + 플렉스박스와 다른 레이아웃 메소드와의 관계 (en-US)
    + 플렉스 컨테이너 요소 정렬
    + 플렉스 요소 순서 (en-US)
    + 주축을 따른 플렉스 요소의 비율 제어 (en-US)
    + 플렉스 요소의 래핑 마스터하기 (en-US)
    + 플렉스박스의 일반적인 사용 사례
블록 레벨 콘텐츠
=========

CSS에서, 블록 레이아웃에 속하는 콘텐츠를 **블록 레벨 콘텐츠**라고 합니다.

블록 레이아웃에서, 상자는 둘러싸는 블록의 맨 위에서 시작하여 수직으로 차례로 배치됩니다. 각 상자의 왼쪽 바깥쪽 가장자리는 둘러싸는 블록의 왼쪽 가장자리에 닿게 됩니다. 블록 수준 요소는 항상 새로운 줄에서 시작합니다. 영어나 아랍어 같은 수평 쓰기 모드에서는, 상위 요소(컨테이너)의 전체 가로 공간과 내용의 높이와 같은 세로 공간을 가지게 되어 "블록"을 만듭니다.

**HTML**(Hypertext Markup Language)의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다. 기본적으로 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다. 이 글에서 자세한 설명을 읽을 수 있습니다.

**참고:** 둘러싸는 블록의 `writing-mode` (en-US)이 기본값 (en-US) 이외의 값으로 설정되면, 위의 블록 레이아웃 동작이 변경됩니다.

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

예제
--

이 예제에선, 두 개의 단락 (`<p>`) 요소가 `<div>` (en-US) 안에 배치됩니다.


```html
<div>
  <p>
    이 문단은 블록 레벨 요소입니다. 부모 요소와 구분할 수 있도록 배경 색을
    입혔습니다.
  </p>
  <p>이 문단은 두 번째 단락입니다.</p>
</div>
```


단락(`<p>`) 요소는 기본적으로 블록 레벨 요소이기 때문에, 블록 레이아웃으로 표시됩니다.
```

p {
  background-color: #8abb55;
}
```

같이 보기
-----

* 인라인 레벨 요소
* 블록 서식 컨텍스트 (en-US)
* `display` (en-US)
* `writing-mode` (en-US)
리페인트 (Repaint)
==============

**리페인트(Repaint)** 는 대화형 사이트의 업데이트와 같이 UI 변경으로 인한 시각적 업데이트를 표시하기 위해 브라우저가 웹 페이지를 다시 그릴 때 발생합니다. 리페인트는 일반적으로 브라우저가 웹 페이지의 특정 부분의 위치와 기하학적 구조를 다시 계산하는 리플로우 후에 발생합니다.

같이 보기
-----

* 리플로우
* dev.to의 브라우저의 리플로우 및 리페인트 이해하기 (2020)
IPv4
====

IPv4는 인터넷기반 통신 프로토콜의 네 번째 버전이며, 널리 보급된 첫 번째 버전입니다.

1981년에 처음 공식화된, IPv4는 ARPAnet의 초기 개발 작업에 그 뿌리를 두고 있습니다. IPv4는 패킷 교환 링크 계층 네트워크(ethernet)에서 사용되는 무연결 프로토콜입니다. IPv6은 IPv4의 보안 문제 및 주소 필드의 제한 때문에 IPv4를 점진적으로 대체하고 있습니다(버전 번호 5는 1979년에 실험적인 인터넷 스트림 프로토콜에 할당되었는데, IPv5라고 불린 적은 없습니다).

같이 보기
-----

* 위키피디아의 IPv4
페이로드 본문 (Payload body)
======================

HTTP 메시지 **페이로드 본문(payload body)** 은 `전송 인코딩`이 적용되기 이전에 HTTP 메시지 본문(있는 경우)으로 전송되는 데이터의 '정보'('페이로드') 부분입니다. 전송 인코딩을 사용하지 않으면, '페이로드 본문(payload body)'와 '메시지 본문(message body)'은 동일합니다!

예를 들어, 이 응답의 메시지 본문에는 페이로드 본문인 "Mozilla Developer Network"만 포함되어 있습니다.


```http
HTTP/1.1 200 OK
Content-Type: text/plain

Mozilla Developer Network
```


대조적으로, 아래 응답은 '전송 인코딩'을 사용하여 페이로드 본문을 청크로 인코딩합니다. 전송된 페이로드 본문(정보)은 여전히 Mozilla Developer Network이지만, 메시지 본문에는 청크를 구분하기 위한 추가 데이터가 포함되어 있습니다.


```http
HTTP/1.1 200 OK
Content-Type: text/plain
Transfer-Encoding: chunked

7\r\n
Mozilla\r\n
9\r\n
Developer\r\n
7\r\n
Network\r\n
0\r\n
\r\n
```


자세한 정보를 보려면 RFC 7230, section 3.3: Message Body와 RFC 7230, section 3.3.1: Transfer-Encoding을 참조하세요.
Code splitting (코드분할)
=====================

**코드분할**은 코드를 번들된 코드 혹은 컴포넌트로 분리하는 것입니다. 이렇게하면 필요에 따라 특정한 컴포넌트만 로딩하거나, 병렬로 로딩할 수 있습니다.

애플리케이션 복잡해지고 유지 관리에 의해, CSS와 JavaScript 파일이나 번들이 커지며, 특히 포함하고 있는 서드파티 라이브러리 개수, 용량이 클수록 커집니다. 큰 파일을 다운로드하지 않도록, 스크립트를 작게 여러 파일로 분할할 수 있습니다. 그러면 화면 로딩할 때 필요한 기능은 바로 다운로드할 수 있으며, 추가 스크립트는 화면이나 애플리케이션 상호 작용시에 지연 로딩을 통해 기능 향상할 수 있습니다. 코드 총량은 같지만(아마 파일 숫자나 용량은 늘어납니다), 초기 로딩에 필요한 코드는 적어집니다.

코드분할은 Webpack이나Browserify 같이 번들러에서 지원하는 기능으로 런타임에 동적으로 로딩하는 여러 번들을 만들 수 있습니다.

같이 보기
-----

* 번들링(Bundling)
* 지연 로딩
* HTTP/2
* 트리 쉐이킹(Tree shaking)
MitM
====

\*\*중간자 공격(manipulator-in-the-middle attack, MitM)\*\*은 두 시스템 간의 통신을 가로챕니다. 예를 들어, Wi-Fi 라우터가 피해를 입을 수 있습니다.

실제 우편과 비교하면, 서로에게 편지를 쓰는 경우에, 우편배달원은 우리가 보내는 각 편지를 가로챌 수 있습니다. 우편 배달원은 편지를 열고, 읽고, 결국 수정하고, 편지를 다시 포장한 다음, 편지를 보내려고 했던 사람에게 보냅니다. 통신 채널 중간에 조작을 한 대상이 있다는 사실을 알지 못할 것입니다. 우편 배달원은 송신자와 수신자 모두에게 보이지 않습니다.

실제 메일과 온라인 통신에서, MITM 공격은 방어하기 어렵습니다. 몇 가지 팁이 있습니다.

* 인증서 경고를 그냥 무시하지 마세요. 피싱 서버나 사기꾼 서버에 접속했을 수도 있습니다.
* 공용 Wi-Fi 네트워크에서 HTTPS 암호화가 없는 민감한 사이트는 신뢰할 수 없습니다.
* 로그인하기 전에 주소 표시줄에서 HTTPS를 확인하고 암호화가 제대로 되어 있는지 확인하세요.
같이 보기
-----

* OWASP: 중간자 공격
* PortSwigger: 최신 중간자 공격 뉴스
* 위키백과: 중간자 공격
임시 활성화 (Transient activation)
=============================

**임시 활성화(Transient activation)** (또는 '임시 사용자 활성화')는 사용자가 최근에 버튼을 눌렀거나, 마우스를 움직였거나, 메뉴를 사용했거나, 다른 사용자 상호작용을 수행했음을 나타내는 창 상태입니다.

 이 상태는 때때로 웹 API가 사용자 상호 작용에 의해 트리거되는 경우에만 작동할 수 있도록 하는 메커니즘으로 사용됩니다.
 예를 들어, 스크립트는 '일시적 활성화'가 필요한 팝업을 임의로 시작할 수 없습니다. 이 팝업은 UI 요소의 이벤트 핸들러에서 트리거 되어야 합니다.

'일시적 활성화'가 필요한 API의 예는 사용자 활성화로 제한되는 기능을 참조하세요.

현재 창의 임시 활성화 상태에 프로그래밍 방식으로 접근하려면 `UserActivation.isActive` (en-US) 속성을 참조하세요.

**참고:** 임시 활성화는 시간 초과 후 만료되며(추가 상호 작용으로 갱신되지 않은 경우) 일부 API에서 '사용'될 수도 있습니다. 처음 설정된 후에 재설정되지 않는 사용자 활성화에 대해서는 고정 활성화를 참조하세요.

같이 보기
-----

* HTML Living Standard > Transient activation
* Sticky activation
* `UserActivation.isActive` (en-US)
Operator
========

구두점이나 알파벳-숫자 문자로 이루어진 예약된 **구문**은 내장된 기능을 수행하는 것을 말합니다. 예를 들어, JavaScript에서 더하기 연산자("+")는 숫자를 더하고 문자열을 연결하며, "not" 연산자("!")는 표현식을 부정하여, 예를 들어 `true` 문이 `false`를 반환하도록 만듭니다.

같이 보기
-----

* 위키백과의 Operator (computer programming)
* JavaScript 연산자
undefined
=========

**`undefined`** 는 원시 값으로, 선언한 후 값을 할당하지 않은 변수 혹은 값이 주어지지 않은 인수에 자동으로 할당됩니다.

예제
--


```js
let x; // 값을 할당하지 않고 변수 선언

console.log(`x's value is ${x}`); // "x's value is undefined" 출력
```

같이 보기
-----

* 위키백과의 Undefined 값
* JavaScript 자료형과 자료 구조
검색 엔진 (Search engine)
=====================

검색 엔진은 월드 와이드 웹에서 정보를 수집하여 특정 정보를 찾는 사용자에게 제공하는 소프트웨어 시스템입니다.

검색 엔진은 아래와 같은 프로세스를 수행합니다.

* **웹 크롤링:** 사이트 내에서 그리고 한 사이트에서 다른 사이트로 웹페이지의 하이퍼링크를 탐색해 웹사이트를 검색합니다. 웹사이트 소유자는 `robots.txt`라는 파일에 '로봇 제외' 정보를 정의하여, 검색 엔진의 '웹 크롤러' 또는 '스파이더'가 사이트 영역에 접근하지 못하도록 제외할 수 있습니다.
* **인덱싱:** 키워드 및 기타 정보를 크롤링된 특정 웹페이지와 연결합니다. 이를 통해 사용자는 관련 페이지를 최대한 빨리 찾을 수 있습니다.
* **검색:** 검색 엔진에 대한 키워드 및 기타 명령으로 구성된 쿼리를 기반으로 관련 웹 페이지를 찾습니다. 검색 엔진은 쿼리와 일치하는 페이지의 URL 을 찾고 관련성을 기준으로 순위를 정합니다. 그런 다음 순위에 따라 결과를 사용자에게 제시합니다.

가장 인기있는 검색엔진은 Google입니다. 다른 인기 검색 엔진으로는 Yahoo!, Bing, Baidu 및 AOL이 있습니다.

같이 보기
-----

* 위키백과의 웹 검색 엔진
* Webopedia의 검색 엔진
* How Stuff Works의 인터넷 검색 엔진은 어떻게 동작하나요
Bitwise flags
=============

**비트 플래그**는 일반적으로 간단한 숫자 값으로 이루어진 변수 집합으로, 메서드 또는 다른 코드 구조의 특정 사용 또는 기능을 활성화하거나 비활성화하는 데 사용될 수 있습니다. 비트 수준에서 작동하기 때문에 이 작업을 빠르고 효율적으로 수행할 수 있습니다. 동일한 그룹의 관련 플래그에는 일반적으로 단일 값(예. 16진수)에서 서로 다른 비트 위치를 나타내는 보색 값이 부여되므로 여러 플래그 설정을 단일 값으로 나타낼 수 있습니다.

`GPUBuffer.usage` (en-US) 속성을 조회하면, 단일 10진수가 반환됩니다. 이 단일 10진수는 다양한 사용 플래그에 대한 다양한 10진수 값의 합계입니다. 위의 예제로 돌아가서, 이전에 지정한 사용법으로 생성된 `GPUBuffer`에 대해 `GPUBuffer.usage`를 조회하면 다음과 같은 결과가 반환됩니다.


```js
usage: GPUBufferUsage.COPY\_SRC | GPUBufferUsage.MAP\_WRITE;
```


이러한 값은 동일한 네임스페이스 내에 정의되며, 각 값은 16진수 값을 갖습니다.

| 사용 플래그 | 16진수 표현 | 10진수 변환값 |
| --- | --- | --- |
| `GPUBufferUsage.MAP_READ` | 0x0001 | 1 |
| `GPUBufferUsage.MAP_WRITE` | 0x0002 | 2 |
| `GPUBufferUsage.COPY_SRC` | 0x0004 | 4 |
| `GPUBufferUsage.COPY_DST` | 0x0008 | 8 |
| `GPUBufferUsage.INDEX` | 0x0010 | 16 |
| `GPUBufferUsage.VERTEX` | 0x0020 | 32 |
| `GPUBufferUsage.UNIFORM` | 0x0040 | 64 |
| `GPUBufferUsage.STORAGE` | 0x0080 | 128 |
| `GPUBufferUsage.INDIRECT` | 0x0100 | 256 |
| `GPUBufferUsage.QUERY_RESOLVE` | 0x0200 | 512 |

`GPUBuffer.usage` (en-US) 속성을 쿼리하면, 단일 10진수가 반환됩니다. 이 단일 10진수는 다양한 사용 플래그에 대한 다양한 10진수 값의 합계입니다. 위의 예제로 돌아가서, 이전에 지정한 사용법으로 생성된 `GPUBuffer`에 대해 `GPUBuffer.usage`를 조회하면 다음과 같은 결과가 반환됩니다.

* `GPUBufferUsage.COPY_SRC`의 십진수에 해당하는 4
* `GPUBufferUsage.MAP_WRITE`의 10진수에 해당하는 2를 추가합니다.
* 6과 같습니다.

다양한 플래그에 대해 선택된 값으로 인해, 각 값 조합은 고유하므로, 프로그램은 단일 값에서 어떤 플래그가 설정되었는지 한눈에 알 수 있습니다. 또는, 비트 및 연산자를 사용하여 결합된 값에 어떤 플래그가 설정되어 있는지 쉽게 테스트할 수 있습니다.


```js
if (buffer.usage & GPUBufferUsage.MAP\_WRITE) {
  // 버퍼에 MAP\_WRITE 사용이 있습니다.
}
```

같이 보기
-----

* 비트별 플래그가 아름다운 이유
* 위키백과의 비트별 연산
OpenGL
======

**오픈 그래픽 라이브러리(Open Graphics Library, OpenGL)** 는 2D 및 3D 벡터 그래픽을 렌더링하기 위한 교차 언어, 다중 플랫폼 응용 프로그래밍 인터페이스(API)입니다. API는 일반적으로 하드웨어 가속 렌더링을 하기 위해, 그래픽 처리 장치(GPU)와 상호작용하는 데 사용됩니다.

같이 보기
-----

* 위키백과의 OpenGL
* OpenGL
플렉스박스
=====

**플렉스박스**(Flexbox)는 요소를 단일 차원(행 또는 열)에 배치하는 레이아웃 모델인 CSS Flexible Box Layout Module을 부를 때 흔히 사용하는 이름입니다.

명세는 플렉스박스를 사용자 인터페이스 디자인을 위한 레이아웃 모델로 설명하고 있습니다. 플렉스박스의 주요 기능은 플렉스 레이아웃 내의 각 항목이 커지거나 작아질 수 있다는 점입니다. 여백은 항목에 포함할 수도 있고, 각 항목의 사이에 분배할 수도 있습니다.

또한 플렉스박스는 항목의 "주축" 및 "교차축" 정렬을 가능케 하여 다수의 항목에 대한 정렬 및 크기의 높은 수준의 통제를 제공합니다.

같이 보기
-----

### 속성 참고서

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

* CSS Flexible Box Layout Module 레벨 1 명세
* CSS Flexbox Guide:
    + Flexbox의 기본 개념
    + flexbox와 다른 레이아웃 메소드와의 관계 (en-US)
    + flex container 내 항목 배열
    + flex items 순서 정리 (en-US)
    + 주축을 따라 플렉스 항목의 비율 제어하기 (en-US)
    + 플렉스 항목 래핑 마스터하기 (en-US)
    + flexbox의 일반적인 사용 사례
구문분석기 (Parser)
==============

**구문분석기(Parser)** 는 소스 코드 파일을 구문분석하는 컴파일러 또는 인터프리터의 모듈입니다.

보다 일반적으로, 텍스트를 구문 분석하고 해당 내용을 다른 표현으로 변환하는 소프트웨어입니다.

같이 보기
-----

* 위키백과의 Parser
로케일 (Locale)
============

\*\*로케일(Locale)\*\*는 사용자 인터페이스에 대한 언어 또는 국가 기반 기본 설정 집합입니다.

프로그램은 호스트 시스템의 언어에서 로케일 설정을 가져옵니다. 무엇보다도, 로케일은 해당 지역의 프로토콜에 따른 종이 형식, 통화, 날짜 형식 및 숫자를 나타냅니다.

같이 보기
-----

* 위키백과의 로케일
PAC
===

**프록시 자동 구성 파일 (Proxy Auto-Configuration file, PAC file)** 은 요청(HTTP, HTTPS 및 FTP 포함)이 대상으로 직접 이동해야 하는지 또는 프록시 서버를 통해 전달되어야 하는지를 결정하기 위해 브라우저에서 사용되는 `FindProxyForURL()` 함수가 포함된 파일입니다.


```js
function FindProxyForURL(url, host) {
  // …
}

ret = FindProxyForURL(url, host);
```


이러한 사용 방법과 새 프록시 생성 방법에 대한 자세한 내용은 프록시 자동 구성 (PAC) 파일 (en-US)을 참조하세요.

같이 보기
-----

* 위키백과의 PAC
* MDN의 프록시 자동 구성 파일 (en-US)
단순 객체 접근 프로토콜 (Simple Object Access Protocol, SOAP)
===================================================

**단순 객체 접근 프로토콜 (Simple Object Access Protocol, SOAP)** 은 XML 형식으로 데이터를 전송하기 위한 프로토콜입니다.

같이 보기
-----

* 위키백과의 SOAP
* 명세서
헤더
==

**HTTP 헤더**는 요청이나 응답에 관해서 부가적인 정보를 전달하는 HTTP 요청 또는 응답 필드입니다. 예를 들어, 요청 메시지는 헤더를 사용하여 선호하는 미디어 형식을 나타낼 수 있는 반면, 응답은 헤더를 사용하여 반환된 본문의 미디어 형식을 나타낼 수 있습니다. 헤더는 대소문자를 구분하지 않으며, 줄의 처음에서 시작하여 바로 뒤에 `':'`과 헤더에 의존성이 있는 값이 따라옵니다. 값은 다음 CR 또는 메시지의 마지막에서 끝납니다.

HTTP 및 Fetch 명세는 다음을 포함하여 여러 header 종류를 나타냅니다.

* Request header: 가져올 리소스 또는 클라이언트 자체에 대한 상세 정보를 포함하는 헤더입니다.
* Response header: 위치나 서버 자체(이름, 버전, ...)와 같은 응답에 대한 부가적인 정보를 갖는 헤더입니다.
* Representation header: 메시지 본문 리소스에 대한 메타데이터 (e.g. 인코딩, 미디어 유형 등).
* Fetch metadata request header: 메시지 본문의 리소스에 대한 메타데이터가 포함된 헤더(e.g. 인코딩, 미디어 유형 등).

하나의 헤더를 갖는 기본 요청입니다.


```http
GET /example.html HTTP/1.1
Host: example.com
```


리다이렉트는 필수 헤더를 갖습니다(`Location` (en-US)):


```http
302 Found
Location: /NewPage.html
```


대표적인 헤더의 집합:


```http
304 Not Modified
Access-Control-Allow-Origin: \*
Age: 2318192
Cache-Control: public, max-age=315360000
Connection: keep-alive
Date: Mon, 18 Jul 2016 16:06:00 GMT
Server: Apache
Vary: Accept-Encoding
Via: 1.1 3dc30c7222755f86e824b93feb8b5b8c.cloudfront.net (CloudFront)
X-Amz-Cf-Id: TOl0FEm6uI4fgLdrKJx0Vao5hpkKGZULYN2TWD2gAWLtr7vlNjTvZw==
X-Backend-Server: developer6.webapp.scl3.mozilla.com
X-Cache: Hit from cloudfront
X-Cache-Info: cached
```


**참고:** 이전 버전의 명세는 다음을 참조합니다.

* General header: 요청과 응답 모두에 적용되지만 결국 본문에서 전송되는 데이터와 관련이 없는 헤더입니다.
* Entity header: 콘텐츠 길이 또는 MIME 유형과 같은 엔터티 본문에 대한 추가 정보를 포함하는 헤더(이것은 현재 Representation metadata 헤더라고 하는 것의 상위 집합)입니다.

같이 보기
-----

* 모든 HTTP headers 목록
* HTTP 명세의 headers 구문
* 용어 사전
    + HTTP header
    + Request header
    + Response header
    + Representation header
    + Fetch metadata request header
    + Forbidden header name
    + Forbidden response header name
    + CORS-safelisted request header
    + CORS-safelisted response header
FTP
===

**FTP** (File Transfer Protocol)는 인터넷을 통해 한 호스트에서 다른 호스트로 파일을 전송하기 위한 안전하지 않은 프로토콜입니다.

 수년 동안 파일을 전송하는 사실상의 표준 방법이었지만, 본질적으로 안전하지 않았기 때문에,
 더 이상 많은 호스팅 계정에서 지원하지 않습니다. 대신 SFTP(안전하고 암호화된 FTP 버전) 또는 SSH를 통한 Rsync와 같이 파일 전송을 위한 다른 보안 방법을 사용해야 합니다.

같이 보기
-----

* FTP를 통한 파일 업로드 초보자 가이드
* 위키피디아의 FTP
CRLF
====

CR과 LF는 텍스트 파일에서 줄 바꿈을 표시하는 데 사용할 수 있는 제어 문자 또는 바이트코드입니다.

* CR = **캐리지 리턴** (`\r`, 16진수로 `0x0D`, 10진수로 13)은 다음 줄로 이동하지 않고 커서를 줄의 시작부분으로 이동합니다.
* LF = **라인 피드** (`\n`, 16진수로 `0x0A`, 10진수로 10)는 줄의 시작 부분으로 돌아가지 않고 커서를 다음 줄로 이동합니다.

LF가 뒤에 오는 CR (CRLF, `\r\n`, 또는 `0x0D0A`)은 커서를 다음 줄로 이동한 다음, 다음 줄의 시작 부분으로 이동합니다.

같이 보기
-----

* 위키백과의 개행
* 위키백과의 캐리지 리턴
암호화 해시 함수 (Cryptographic hash function)
=======================================

종종 '다이제스트 함수 (digest function)'라 불리는, 암호화 해시 함수는 임의의 크기를 가지는 메시지를 다이제스트라고 하는 고정 크기의 메시지로 변환하는 암호학적 기본 요소입니다. 암호화 해시 함수는 인증, 디지털 서명 및 메시지 인증 코드에 사용됩니다.

암호화에 사용하려면, 해시 함수에 다음과 같은 특성이 있어야 합니다.

* 게산이 빠릅니다 (자주 생성되기 때문입니다).
* 되돌릴 수 없습니다 (각 다이제스트는 매우 많은 수의 메시지에서 나올 수 있으며, 무차별 대입 공격만이 특정 다이제스트에 연결되는 메시지를 생성할 수 있습니다)
* 변조가 방지되어야 합니다 (메시지를 변경하면 다이제스트가 달라집니다)
* 충돌이 방지되어야 합니다 (동일한 다이제스트를 생성하는 두 개의 다른 메시지를 찾는 것은 불가능해야 합니다)

MD5 및 SHA-1와 같은 암호화 해시 함수는 충돌 저항성을 크게 감소시키는 공격이 발견되어 손상된 것으로 생각됩니다.

같이 보기
-----

* 위키백과의 암호화 해시 함수
* MDN 웹 문서 용어사전
    + 대칭키 암호화
Property
========

**속성**이라는 용어는 문맥에 따라 여러 가지 의미를 가질 수 있습니다. 아래를 참조해주세요.

Property (CSS)
**CSS 특성**은 연관된 값이 어떻게 브라우저가 요소를 표시하는지 한 측면을 정의하는 특성(색상처럼)입니다.
Property (JavaScript)
**JavaScript 속성**은 키와 값을 연결하는 객체의 구성원입니다. JavaScript 객체는 속성 모음을 저장하는 데이터 구조입니다.
ISO
===

\*\*국제 표준화 기구(International Organization for Standardization, ISO)\*\*는 각 주요 산업 분야의 기업을 조정하는 통일된 기준을 개발하는 글로벌 협회입니다.

같이 보기
-----

* 공식 웹사이트
World Wide Web
==============

흔히 **WWW**, **W3**, **Web** 불리는 *World Wide Web*은 인터넷을 통해 접근 가능한 공용 웹페이지의 상호연결 시스템입니다. 웹은 인터넷과 다르며, 인터넷을 기반으로 한 수많은 응용 프로그램 중 하나입니다.

팀 버너스리가 제안한 구조를 바탕으로 훗날 World Wide Web으로 알려진 기술이 만들어 졌습니다. 그는 1990년에 CERN 물리학 연구소에서 자신의 컴퓨터에 최초의 웹 서버, 웹 브라우저, 웹페이지를 만들었습니다. 1991년에, alt.hypertext 뉴스 그룹에 이 소식을 알렸고, 이것이 웹이 세상에 공식적으로 모습을 드러낸 첫 순간이었다.

오늘날 우리가 "웹"이라고 알고 있는 시스템은 다양한 구성요소로 이루어져 있습니다.

* **HTTP** 프로토콜이 서버와 클라이언트 간의 데이터 전송을 관리합니다.
* 웹 요소에 접근하기 위해 클라이언트는 **URL**(unifrom resource location)이라는 유일한 보편 식별자를 제공하거나, 또는 URI(uniform resource identifier)(공식적으로는 Universal Document Identifier (UDI)라고 부릅니다)를 제공해야 합니다.
* **HTML** (hypertext markup language)은 웹 문서를 작성하는 데 가장 많이 쓰이는 형식입니다.

웹의 개념은 하이퍼링크로 링크되고 연결된 문서를 보면 잘 알 수 있는데, 웹의 정체성은 연결된 문서들의 집합으로서 정의됩니다.

웹이 발명되고 얼마 지나지 않아, 팀 버너스리는 웹의 발전과 표준화를 위해 W3C (World Wide Web Consortium)을 설립했습니다. 이 콘소시엄은 웹에 관심 있는 핵심 그룹으로 구성되어 있는데, 예를 들면 웹 브라우저 개발자, 정부 기관, 연구소, 대학들이 참가하고 있습니다. 이들은 웹에 대한 교육과 전파에도 힘쓰고 있습니다.

같이 보기
-----

* 웹 배우기
* 위키백과의 World Wide Web
* W3C 웹사이트
스타일시트 (Stylesheet)
==================

**스타일시트(stylesheet)** 는 웹페이지나 문서의 레이아웃과 디자인을 제어하는 데 사용되는 CSS 규칙 집합입니다. '내부' 스타일시트는 웹 문서의 `<head>` 내부에 있는 `<style>` 요소 안에 배치됩니다. '외부' 스타일시트는 문서 head 태그의 `<link>` 요소 내부에 있는 파일을 참조하여 문서에 적용되는 별도의 `.css` 파일 내에 배치됩니다.

외부 스타일시트를 사용하면 각 페이지의 CSS를 반복할 필요 없이, 한 곳에서 여러 페이지의 스타일을 제어할 수 있으므로 일반적으로 자주 사용되는 방법입니다.

같이 보기
-----

* CSS 첫 걸음
* 위키백과의 스타일시트
함수 (function)
=============

**함수(function)** 는 다른 코드에서 또는 자신에 의해 호출되거나 함수 레퍼런스를 저장한 변수에 의해 호출될 수 있는 코드 조각입니다. 함수가 호출될 때, 함수의 입력으로 인수 가 전달되고 함수는 선택적으로 출력값을 반환할 수 있습니다. 또한 JavaScript에서 함수는 객체이기도 합니다.

함수명은 함수 선언문 또는 함수 표현식의 일부로써 선언된 식별자입니다. 함수 이름의 범위는 함수 이름의 선언식 또는 표현식인지에 따라 결정됩니다.

### 여러 함수 형식들

**익명 함수**는 함수명이 없는 함수입니다. 함수 표현식만 이름이 없을 수 있으며, 함수 선언식에는 반드시 이름이 있어야 합니다.


```js
// 함수 표현식으로 만든 익명 함수
(function () {});

// 화살표 표기법으로 만든 익명 함수
() => {};
```


다음 용어는 ECMAScript 언어 명세에서 사용되지 않으며, 다양한 함수를 나타내는 데 사용되는 전문 용어입니다.

**이름있는 함수**는 함수명을 갖는 함수입니다.


```js
// 함수 선언식
function foo() {}

// 이름이 있는 함수 표현식
(function bar() {});

// 화살표 표기법
const baz = () => {};
```


**내부 함수**는 다른 함수 내부에서 정의된 함수입니다(아래 예에서는 `square`). **외부 함수**는 함수를 포함하고 있는 함수입니다(아래 예에서는 `addSquares`).


```js
function addSquares(a, b) {
  function square(x) {
    return x \* x;
  }
  return square(a) + square(b);
}

// 화살표 함수
const addSquares2 = (a, b) => {
  const square = (x) => x \* x;
  return square(a) + square(b);
};
```


**재귀호출 함수**는 자기 자신을 호출하는 함수입니다. 재귀호출을 참조하세요.


```js
function loop(x) {
  if (x >= 10) return;
  loop(x + 1);
}

// 화살표 함수
const loop2 = (x) => {
  if (x >= 10) return;
  loop(x + 1);
};
```


**즉시 실행 함수 표현식** (IIFE)은 브라우저 컴파일러에 함수가 로드된 후 직접 호출되는 함수입니다. IIFE는 함수 선언의 끝에 추가로 붙은 왼쪽과 오른쪽 괄호를 통해 식별할 수 있습니다.

익명 여부와 무관하게 함수 표현식은 즉시 호출할 수 있습니다.


```js
(function foo() {
  console.log("Hello Foo");
})();

(function food() {
  console.log("Hello Food");
})();

(() => console.log("hello world"))();
```


IIFE가 함수 "표현식"이어야 하기 때문에, 선언된 함수는 이 방법으로 즉시 호출할 수 없습니다.


```js
function foo() {
  console.log('Hello Foo');
}();
```


IIFE에 대해 더 많은 설명이 필요하다면, 위키피디아의 즉시 실행 함수 표현식(Immediately Invoked Function Expression)을 확인해주세요.

같이 보기
-----

* 함수
* 화살표 함수
CSS 픽셀 (CSS pixel)
==================

**CSS 픽셀**이라는 용어는 절대 길이 'px'의 CSS 단위와 동의어입니다. 이는 정확히 1 CSS 인치('in')의 1/96으로 표준적으로 정의됩니다.

같이 보기
-----

* MDN Hacks 블로그의 CSS 길이 설명
유즈넷 (Usenet)
============

유즈넷(Usenet)은 각 게시물이 여러 서버에 복제되는 인터넷 토론 시스템입니다. 과거의 인터넷 포럼과 마찬가지로, 유즈넷은 게시판 시스템처럼 동작했습니다.

같이 보기
-----

* 위키백과의 Usenet
텍셀 (Texel)
==========

3D 그래픽에서, **텍셀(texel)** 은 텍스처 내의 단일 픽셀입니다. '텍스처'는 3D 렌더링 이미지 내의 각형 표면에 표시되는 이미지입니다. 이미지가 픽셀 모음으로 특성을 가지고 있는 것과 유사하게, 텍스처는 텍셀 모음으로 특성을 가집니다.

래스터 이미지 파일의 픽셀은 색상 데이터와 때로는 불투명도 데이터를 포함하는 일련의 비트로, 컴퓨터 모니터와 같은 출력 장치의 픽셀 표시에 매핑됩니다. 픽셀이 텍스처 리소스로 사용되는 이미지에 속하는 경우 '텍스처 픽셀' 또는 줄여서 '텍셀'이라고 합니다. 화면 픽셀에 직접 매핑하는 대신, 텍셀의 데이터는 모델링되는 3D 객체의 좌표 공간 위치에 매핑됩니다. 텍스처는 색상과 깊이, 반사율과 같은 기타 표면 품질을 전달하는 데 사용할 수 있습니다. 여러 텍스처를 겹쳐서 복잡한 표면 오버레이를 만들 수 있습니다.

적절한 텍셀을 다각형의 해당 점에 매핑하는 프로세스를 **텍스처 매핑** 이라고 합니다. 텍스처 매핑은 표시할 3D 이미지를 렌더링하는 프로세스의 한 단계입니다. 소스 텍셀 그리드와 대상 픽셀 그리드가 정렬되지 않으면, 추가 **텍스처 필터링** 이 적용되어 결과 텍스처 매핑 픽셀(텍스처 '확대' 또는 '축소')을 매끄럽게 만듭니다. 렌더링 프로세스의 최종 출력은 모델 주위에 텍스처가 '둘러싸여진' 3D 모델의 평평한 2D의 투영한 형태입니다.

렌더 파이프라인 중, 텍스처 매핑은 일반적으로 장면을 조명하기 전에 수행됩니다. 그러나, WebGL에선 조명이 텍스처 매핑 프로세스의 일부로 수행됩니다.

같이 보기
-----

* 위키백과의 텍셀 (그래픽스)
* 위키백과의 텍스처 매핑
* 위키백과의 텍스처 필터링
* WebGL에서 텍스처 사용하기
* WebGL에서의 조명
* WebGL에서 텍스처 애니메이션
애플리케이션 컨텍스트 (Application Context)
=================================

**애플리케이션 컨텍스트**는 매니페스트가 적용된 최상위 탐색 컨텍스트입니다.

사용자 에이전트가 딥 링크로 이동하라는 요청을 받은 결과로 애플리케이션 컨텍스트가 생성된 경우, 사용자 에이전트는 대체가 활성화된 딥 링크로 즉시 이동해야 합니다. 그렇지 않으면, 애플리케이션 컨텍스트가 생성될 때 사용자 에이전트는 교체가 활성화된 시작 URL로 즉시 이동해야 합니다.

시작 URL이 반드시 start\_url 멤버의 값일 필요는 없다는 점에 유의하세요. 애플리케이션이 홈 화면에 추가되거나 북마크에 추가될 때 사용자 또는 사용자 에이전트가 이를 변경할 수 있습니다.

같이 보기
-----

* 프로그레스브 웹 앱 (PWA)
* scope (en-US)
왕복 시간 (Round Trip Time, RTT)
============================

**왕복 시간 (Round Trip Time, RTT)** 은 데이터 패킷이 대상으로 전송되는 데 걸리는 시간과 해당 패킷에 대한 승인이 원본에서 다시 수신되는 데 걸리는 시간을 더한 것입니다. 네트워크와 서버 간의 RTT는 `ping` 명령을 사용하여 확인할 수 있습니다.


```bash
ping example.com
```


그러면 아래와 같이 출력됩니다.
```

PING example.com (216.58.194.174): 56 data bytes
64 bytes from 216.58.194.174: icmp_seq=0 ttl=55 time=25.050 ms
64 bytes from 216.58.194.174: icmp_seq=1 ttl=55 time=23.781 ms
64 bytes from 216.58.194.174: icmp_seq=2 ttl=55 time=24.287 ms
64 bytes from 216.58.194.174: icmp_seq=3 ttl=55 time=34.904 ms
64 bytes from 216.58.194.174: icmp_seq=4 ttl=55 time=26.119 ms
--- google.com ping statistics ---
5 packets transmitted, 5 packets received, 0.0% packet loss
round-trip min/avg/max/stddev = 23.781/26.828/34.904/4.114 ms
```


위의 예제에서, 평균 왕복 시간은 마지막 줄에 26.8ms로 표시됩니다.

같이 보기
-----

* 첫 번째 바이트까지의 시간 (Time to First Byte, TTFB)
* 지연 시간(Latency)
CalDAV
======

CalDAV (WebDAV에 대한 달력 확장)은 IETF에 의해 표준화된 프로토콜이며 서버에서 달력 데이터에 원격으로 접근하는 데 사용됩니다.

같이 보기
-----

* 위키백과의 CalDAV
* RFC 4791: WebDAV(CalDAV)에 대한 달력 확장
* RFC 6638: CalDAV 확장 예약
CMS
===

컨텐츠 관리 시스템 (Content Management System, CMS)는 사용자가 텍스트와 삽입된 이미지, 비디오, 오디오 및 대화형 코드까지 다양한 종류의 컨텐츠를 게시, 구성, 변경 또는 제거할 수 있게 해주는 소프트웨어입니다.

같이 보기
-----

* 위키백과의 컨텐츠 관리 시스템
브라우저
====

**웹 브라우저(Web browser)** 혹은 **브라우저** 는 웹에서 페이지를 검색하고 표시하며 사용자가 하이퍼링크를 통해 추가 페이지에 접근할 수 있도록 하는 프로그램입니다. 브라우저는 사용자 에이전트의 가장 친숙한 유형입니다.

같이 보기
-----

* Wikipedia의 웹 브라우저
* user agent (용어 사전)
* `User-agent` (en-US) (HTTP Header)
* 브라우저 다운로드
    + Mozilla Firefox
    + Google Chrome
    + Microsoft Edge
    + Opera Browser
XML
===

XML(eXtensible Markup Language)은 W3C에서 지정한 범용 마크업 언어입니다. 정보 기술(IT) 산업에서는 데이터 기술 언어로서 XML을 기반으로 한 많은 언어를 사용하고 있습니다.

XML 태그는 HTML 태그와 유사하지만 사용자가 자신의 태그를 정의할 수 있기 때문에 XML이 훨씬 더 유연합니다. 이런 특성 때문에 XML은 메타 언어처럼 작동합니다. 즉, RSS와 같은 다른 언어를 정의하는 데 사용할 수 있습니다. 또한 HTML은 프레젠테이션 언어인 반면 XML은 데이터 기술 언어입니다. 이는 XML이 웹보다 훨씬 더 광범위한 응용 프로그램을 가지고 있음을 의미합니다. 예를 들어 웹 서비스는 XML을 사용하여 요청과 응답을 교환할 수 있습니다.

같이 보기
-----

* XML 소개
HTTP/3
======

**HTTP/3**는 HTTP/2 다음 HTTP 네트워크 프로토콜입니다.

HTTP/3의 요점은 TCP 대신, QUIC이라는 새로운 UDP 프로토콜을 사용하는 것입니다.

같이 보기
-----

* MDN의 HTTP 설명
* 위키피디아의 HTTP/3
* 용어 사전
    + HTTP
    + HTTP 2
    + Latency
재귀 (Recursion)
==============

자기 자신을 호출하는 함수의 행위인 재귀는 더 작은 하위 문제를 초함하는 문제를 해결하는 데 사용됩니다. 재귀 함수는 기본 사례(재귀 종료) 또는 재귀 사례(재귀 재개)의 두 가지 입력을 받을 수 있습니다.

예제
--

### 재귀 함수는 조건이 충족될 때까지 자신을 호출합니다

아래 Python 코드는 숫자를 가져와 인쇄한 다음 숫자 값 -1을 사용하여 자신을 다시 호출하는 함수를 정의합니다. 숫자가 0이 될 때까지 계속 진행되며, 0이 되면 중지됩니다.


```py
def recurse(x):
   if x > 0:
       print(x)
       recurse(x - 1)

recurse(10)
```


출력은 아래와 같습니다.

 10
 9
 8
 7
 6
 5
 4
 3
 2
 1

### 재귀는 스택 크기에 따라 제한됩니다

아래 코드는 코드가 실행되는 JavaScript 런타임에서 사용할 수 있는 호출 스택의 최대 크기를 반환하는 함수를 정의합니다.


```js
const getMaxCallStackSize = (i) => {
  try {
    return getMaxCallStackSize(++i);
  } catch {
    return i;
  }
};

console.log(getMaxCallStackSize(0));
```

### 일반적인 사용 예제


```js
const factorial = (n) => {
  if (n === 0) {
    return 1;
  } else {
    return n \* factorial(n - 1);
  }
};
console.log(factorial(10));
// 3628800
```



```js
const fibonacci = (n) => (n <= 2 ? 1 : fibonacci(n - 1) + fibonacci(n - 2));
console.log(fibonacci(10));
// 55
```



```js
const reduce = (fn, acc, [cur, ...rest]) =>
  cur === undefined ? acc : reduce(fn, fn(acc, cur), rest);
console.log(reduce((a, b) => a + b, 0, [1, 2, 3, 4, 5, 6, 7, 8, 9]));
// 45
```

같이 보기
-----

* 위키백과의 재귀 (컴퓨터 과학)
* JavaScript의 재귀에 대한 자세한 내용