recursal/MDN huggingface dataset:
빈 요소
====

**빈 요소**는 자식 노드(예, 중첩 요소 또는 텍스트 노드)를 **가질 수 없는** 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)
=========================

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

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

TTFB = responseStart - navigationStart
```

같이 보기
-----

* 일반적인 HTTP 세션
* PerformanceResourceTiming (en-US)
* PerformanceTiming (en-US)
프리 렌더 (Prerender)
=================

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

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


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


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

같이 보기
-----

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

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

같이 보기
-----

* 위키백과의 라디오 인터페이스 계층
Firefox 운영체제 (Firefox OS)
=========================

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

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

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

같이 보기
-----

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

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

같이 보기
-----

* Wikipedia의 IPv6
사전 측정 (Advance measure)
=======================

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

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

같이 보기
-----

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

**요청 헤더**는 서버가 응답을 맞춤화할 수 있도록 요청 컨텍스트에 대한 정보를 제공하기 위해 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)
======================

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

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

같이 보기
-----

* 벡터 이미지
OWASP
=====

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

같이 보기
-----

* 공식 웹사이트
특성
==

**특성**(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)
====================

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

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

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

같이 보기
-----

* Axel Rauschmayer의 책 "JS 살펴보기: 모듈"의 "번들링 과정에서 죽은 코드 제거의 이점"
* 웹팩으로 트리세이킹 구현하기
스크린 리더 (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)
==================

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

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

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

같이 보기
-----

* 위키백과의 Polymorphism
프록시 서버
======

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

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

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

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

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

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

같이 보기
-----

* Latency 이해하기
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
=========

**캐시 가능(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
===========

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

같이 보기
-----

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

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

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

같이 보기
-----

* 위키백과의 버전 관리
특권 (Privileged)
===============

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

같이 보기
-----

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

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

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

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

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

기술적

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

콘텐츠 작성

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

인기도

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

더 알아보기
------

### 일반 지식

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

* Google Webmasters 학습 문서
정보 아키텍처 (Information architecture)
==================================

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

같이 보기
-----

* 위키백과의 정보 아키텍처
문서 지시문 (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
==========

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
========

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

같이 보기
-----

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

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

같이 보기
-----

* 위키백과의 텔넷
인라인 요소
======

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)
============================

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

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

같이 보기
-----

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

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

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

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

같이 보기
-----

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

교차 출처 리소스 공유 사전 요청은 본격적인 교차 출처 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
=======

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

같이 보기
-----

* .arpa
* TCP
* 위키백과의 ARPANET
지배자 (Dominator)
===============

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

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

같이 보기
-----

* 위키백과의 지배자
* 지배자
* 가비지 컬렉션
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)
===========================

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

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

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

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

같이 보기
-----

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

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

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

예를 들어:

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

### 일반적인 지식

* 서버의 소개
* Wikipedia의 Server (computing)
프리페치 (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)
=========================

전송 제어 프로토콜(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)
=============

후디니(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
==

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

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

같이 보기
-----

* 위키백과의 User experience