recursal/MDN huggingface dataset:
비동기(Asynchronous)
=================

**비동기**라는 용어는 둘 이상의 객체 또는 이벤트가 동시에 **존재하지 않거나 발생하지 않는 경우**(또는 이전 객체 또는 이벤트가 완료될 때까지 기다리지 않고 발생하는 여러 관련 작업)를 말합니다. 컴퓨팅에서 "비동기"라는 단어는 두 가지 주요 맥락에서 사용됩니다.

네트워크와 통신

비동기 통신은 둘 이상의 통신자 사이에서 메시지를 교환하는 방법으로 메시지를 받음과 동시에 처리할 필요 없이, 각자 처리할 수 있는 적절한 때에 메시지를 받고 처리하는 방식입니다. 또한, 문제가 발생하더라도 수신자가 따로 수정을 요청하거나 문제를 처리할 것이라는 가정하에 별도의 승인 없이 메시지를 보낼 수 있습니다.

이메일은 비동기 통신의 예시입니다. 발신자가 메일을 보내면 수신자는 받은 즉시 메일을 확인하지 않고 적당한 때에 메일을 읽고 답장을 보냅니다. 또한, 양쪽 모두 상대방의 시간에 맞출 필요 없이 아무 때나 메일을 주고받을 수 있습니다.

소프트웨어가 비동기적으로 통신한다면 프로그램은 서버와 같은 다른 프로그램에 정보를 요청하고 응답을 기다리면서 다른 작업을 할 수 있습니다. AJAX (en-US)(또는 ajax)라는 "비동기적인 JavaScript와 XML" 프로그래밍 기법이 있습니다(요즘에는 XML 보다 JSON을 더 많이 사용하긴 합니다). 이 기법은 서버에 HTTP를 사용하여 상대적으로 적은 양의 데이터를 요청하고, 결과를 사용 가능할 때에만 반환하는 메커니즘입니다.

소프트웨어 설계

비동기 소프트웨어 설계는 작업이 완료되는 걸 프로그램이 기다릴 필요 없이 기존의 작업과 함께 처리되도록 요청할 수 있게 코드를 작성하여 그 개념을 확장합니다. 보조 작업이 완료되면 기존 작업에 알림을 보내 작업을 완료시키고, 결과가 있는 경우에는 그 결과를 사용할 수 있음을 알립니다.

비동기 소프트웨어를 구현하는 여러 프로그래밍 기법이 있습니다. 이에 대한 소개는 비동기 JavaScript에서 볼 수 있습니다.

같이 보기
-----

* 서버에서 데이터 가져오기 (en-US) (Learning Area)
* Synchronous
AJAX
====

AJAX (Asynchronous JavaScript와 XML)는 XMLHttpRequest 기술을 사용해 복잡하고 동적인 웹페이지를 구성하는 프로그래밍 방식입니다.

AJAX는 전체 페이지가 다시 로드되지 않고 HTML 페이지 일부 DOM만 업데이트하는 좀 더 복잡한 웹페이지를 만들 수 있게 해줍니다. 또한 AJAX를 사용하면 웹페이지 일부가 리로드 되는 동안에도 코드가 계속 실행되어, 비동기식으로 작업할 수 있습니다. (동기적으로 움직이는 코드와 비교하자면 웹페이지가 로딩이 끝날 때 까지 당신의 코드는 움직이지 않습니다).

### 같이 보기

* Ajax (en-US)
* `XMLHttpRequest` 객체
* `Fetch API`
* 위키피디아 AJAX
* Synchronous vs. Asynchronous Communications (2014)
PNG
===

**PNG**(Portable Network Graphics)는 무손실 데이터 압축을 지원하는 그래픽 파일 형식입니다.

같이 보기
-----

* 위키백과의 PNG
SDK
===

**소프트웨어 개발 키트 (Software Development Kit, SDK)** 는 개발자가 특정 프레임워크, 운영 체제 또는 기타 플랫폼 전용 소프트웨어를 만드는 데 사용할 수 있는 통합 도구 모음입니다. SDK에는 아래와 같은 부분들이 포함됩니다.

* 편집기
* 컴파일러
* 디버거
* 프로그램을 만드는 플랫폼과 사용되는 플랫폼이 다른 경우 쓰이는 에뮬레이터 또는 시뮬레이터
* 배포용 프로그램을 테스트하고 패키징하는 데 도움이 되는 도구입니다.

SDK는 일반적으로 소프트웨어 플랫폼 소유자가 플랫폼 기반으로 하는 개발자를 지원하기 위해 제공합니다. 예를 들어, Google은 Android 앱 개발자를 위해 Android SDK를 제공합니다.

여러 측면에서, 최신 웹 브라우저에 내장된 개발자 도구는 웹 개발자에게 유사한 기능을 제공합니다.
서비스 거부 (Denial of Service)
==========================

서비스 거부 (Denial of Service, DoS)는 일반적으로 서버에 요청이 너무 많아, 사용가능한 서버 리소스를 소모하는 네트워크 공격 범주입니다. 그러면 서버가 느려지거나 인증된 사용자가 사용할 수 없게 됩니다.

더 많은 정보는 DoS 공격을 참조하세요.
유효 최상위 도메인 (eTLD)
=================

**eTLD**라는 용어는 "유효 최상위 도메인"을 의미하며 단일 조직이 등록할 수 있는 도메인입니다.

최상위 도메인 (TLD)은 도메인 네임에서 마지막 점 다음에 오는 부분입니다. 예를 들어, `crookedtimber.org`의 최상위 도메인은 `org`입니다.

단일 조직에서는 최상위 도메인 바로 아래의 도메인만 등록할 수 있다고 가정합니다. 그러면 다음 도메인이 모두 동일한 조직에 속해 있다는 것을 알 수 있습니다.
```

    xyz.org
abc.xyz.org
def.xyz.org
```


그러나 많은 등록 기관이 최상위 수준보다 낮은 수준에서 도메인을 등록하도록 허용하기 때문에, 이는 일반적인 규칙으로 운용되지 않습니다. 예를 들어, `sussex.ac.uk` 및 `aber.ac.uk`가 서로 다른 조직의 소유라는 것을 의미합니다.

이것은 등록기관의 정책에 따른 문제이므로, 특정 도메인 이름 접미사(예,`ac.uk`)가 공개적으로 등록 가능한지 여부를 알고리즘적으로 판단하는 것을 불가능합니다. 공용 접미사 목록은 조직이 이름을 직접 등록할 수 있는 모든 접미사 목록입니다. 즉, eTLD 목록입니다.

관련된 개념 **eTLD+1**은 eTLD와 도메인 이름의 다음 부분을 의미합니다. eTLD는 등록 가능하기 때문에, 동일한 eTLD+1을 가진 모든 도메인은 동일한 조직이 소유합니다.

예를 들어, 아래는 모두 eTLD+1 도메인입니다.

* crookedtimber.org
* theguardian.com
* sussex.ac.uk
* aber.ac.uk

이것은 각 도메인 아래의 모든 도메인이 동일한 조직에 속함을 의미합니다. 예를 들어,
```

 film.theguardian.com
music.theguardian.com
```


```
      news.sussex.ac.uk
      blog.sussex.ac.uk
admissions.sussex.ac.uk
```

같이 보기
-----

* 공용 접미사 목록
CardDAV
=======

**CardDAV** (vCard WebDAV에 대한 vCard 확장)는 IETF에서 표준화한 프로토콜로, 서버를 통해 연락처 정보를 원격으로 접근하거나 공유하는 데 사용됩니다.

같이 보기
-----

* 위키백과의 CardDAV
* RFC 6352: 웹 분산 작성 및 관리를 위한 vCard 확장 (WebDAV)
웹 어셈블리 (WebAssembly)
====================

**웹 어셈블리(Wasm, WebAssembly)** 는 성능에서 이득을 보거나 웹 페이지에 새로운 기능을 제공하기 위해 최신 웹 브라우저에서 실행할 수 있는 개방형 바이너리 프로그래밍 형식입니다.

같이 보기
-----

* 위키백과의 웹어셈블리
* 공식 웹사이트
* MDN의 웹어셈블리
왼쪽에서 오른쪽으로 읽는 특성 (Left To Right, LTR)
=====================================

\*\*왼쪽에서 오른쪽으로 읽는 특성 (Left To Right, LTR)\*\*은 텍스트가 왼쪽에서 오른쪽으로 작성되어 있다는 것을 나타내는 locale 속성입니다. 예를 들어, `en-US` locale 속성 (미국 영어의 경우) 왼쪽에서 오른쪽으로 지정합니다.

대부분의 서양 언어와, 전세계의 많은 언어는 LTR로 작성됩니다.

LTR의 반대인, RTL (오른쪽에서 왼쪽으로 읽는 특성)은 아랍어 (`ar`) 및 히브리어 (`he`)를 포함한 다른 언어들에서 사용됩니다.

같이 보기
-----

* MDN 웹 문서 용어 사전
    + locale
    + Localization
    + LTR
    + RTL
* HTML 전역 속성
    + dir
    + lang
* CSS
    + `:dir` (en-US)
    + `direction` (en-US)
    + `unicode-bidi` (en-US)
    + `writing-mode` (en-US)
확장 (Expando)
============

확장 속성은 JavaScript를 사용하여 DOM 노드에 추가된 속성입니다. 여기서 해당 속성은 object의 DOM 명세서의 일부가 아닙니다.


```js
window.document.foo = 5; // foo는 확장속성입니다.
```


이 용어는 배열에 추가된 숫자가 아닌 이름이 있는 속성과 같이, 객체의 원래 의도를 고려하지 않고 객체에 추가된 속성에 적용될 수도 있습니다.
Boolean attribute (ARIA)
========================

ARIA의 **불리언 속성**은 열거 목록에 `true` 또는 `false`를 포함하는 열거 속성입니다.

ARIA에서, 불리언은 `"true"` 및 `"false"` 문자열 형식으로만 제공됩니다.

같이 보기
-----

* 동작의 세부 정보와 ARIA 불리언 속성의 예를 포함하는 열거형
Boolean (JavaScript)
====================

JavaScript에서의 **불리언**은 `true` 또는 `false`일 수 있는 원시 값입니다.

`Boolean` 객체는 불리언 원시 값의 wrapper 객체입니다.

같이 보기
-----

* JavaScript 전역 객체
* JavaScript 데이터 타입과 자료구조
Boolean attribute (HTML)
========================

HTML의 **불리언 속성** 은 `true` 또는 `false`일 수 있는 속성입니다.

불리언 속성이 있으면 `true`이고, 없으면 `false`라는 점에 유의하세요.

다음은 HTML의 불리언 속성 `checked`의 예입니다.


```html
<!-- 초기 렌더링 시, 아래 checkbox들이 체크된 상태로 표시됩니다. -->
<input type="checkbox" checked />
<input type="checkbox" checked="" />
<input type="checkbox" checked="true" />
<input type="checkbox" checked="false" />
<input type="checkbox" checked="any value" />

<!-- 아래 checkbox들는 체크된 상태로 표시되지 않습니다. -->
<input type="checkbox" />
```

같이 보기
-----

* 열거 속성
미디어 (Media) (CSS)
=================

종속 스타일 시트 (Cascading Style Sheets,CSS)의 맥락에서, \*\*미디어(media)\*\*라는 용어는 렌더링 엔진에 의해 문서가 그려질 대상을 나타냅니다.

일반적으로, 미디어는 화면이지만, 프린터, 점자 디스플레이 또는 다른 종류의 장치일 수도 있습니다.

CSS는 미디어 **타입**(예, 스크린 또는 인쇄 등 두 가지를 들 수 있음) 또는 미디어 **기능**(예, 너비, 해상도 또는 기타 값)에 따라 문서 스타일을 조정할 수 있거나 심지어 다른 스타일을 제공할 수 있는 여러 기능을 제공합니다.

같이 보기
-----

* 미디어 쿼리 사용하기
* 미디어 쿼리
* `@media` at-rule: 미디어 쿼리 결과를 바탕으로, 스타일시트의 일부를 조건부로 적용할 수 있습니다.
* `Window.matchMedia()`: 미디어 쿼리에 대해 시청 장치 테스트
미디어 (Media) (시청각 자료, Audio-visual presentation)
===============================================

**미디어(media)** (더 정확히는 **멀티미디어(multimedia)**)라는 용어는 오디오, 비디오 또는 음악, 녹음된 연설, 영화, TV 프로그램 또는 일정 기간 동안 제공되는 기타 모든 형태의 콘텐츠와 같은 시청각 결합 자료를 말합니다.

보다 광범위하게, 미디어에는 사진이나 기타 정지 이미지와 같은 움직임이 없는 이미지가 포함될 수 있습니다.

미디어 콘텐츠는 다양한 방식으로 기록, 재생, 제공될 수 있으며 상호 작용도 가능합니다.

같이 보기
-----

* 위키백과의 멀티미디어
* 웹 미디어 기술: 웹 콘텐츠에서 미디어를 사용할 수 있는 모든 방법에 대한 안내서
* MDN 학습 범위 :멀티미디어 및 임베딩
* HTML 문서에서 미디어를 보여주는 데 사용되는 `<audio>` (en-US) 및 `<video>` 요소
Block (scripting)
=================

JavaScript에서, 블록문은 중괄호("{}")로 묶인 statements문의 집합입니다. 예를 들어, `if (condition)` 블록 뒤에 블록으로 감싼 실행 코드들을 배치하여, 인터프리터가 조건이 참이면, 블록 안에서 코드를 실행해야 함을 나타낼 수 있습니다. 조건이 거짓이면 전체 블록을 건너뜁니다.

같이 보기
-----

* JavaScript block 문
블록 (CSS)
========

웹페이지의 **블록**은 HTML 요소로 새 줄에 표시됩니다. 즉, 가로 쓰기 모드에 속한 선행 요소 아래나 ("블록 수준 요소"로 통용되는) 후속 요소 위에 표시됩니다. 예를 들면, `<p>`는 기본적으로 블록 수준 요소지만, `<a>`는 "인라인 요소"이다. 당신의 HTML 소스에서 여러 링크를 상대 요소 옆에 위치시킬 수 있고, 그것들을 렌더링 된 출력 형태로 상대 요소와 동일 선상에 놓는다.

`display` (en-US) 속성을 사용하면 요소가 (여러 다양한 옵션 중) 인라인으로 표시되는지 아니면 블록으로 표시되는지를 변경할 수 있으며, **블록** 역시 포지셔닝 체계의 영향과 `position` 속성 사용의 영향을 받습니다.

같이 보기
-----

* 시각적 서식 모델
Property (JavaScript)
=====================

**JavaScript 속성**은 키와 값을 연결하는 객체의 구성원입니다. JavaScript 객체는 속성 모음을 저장하는 데이터 구조입니다.

속성은 다음 부분으로 구성됩니다.

* 문자열이나 Symbol인 "키" 또는 "이름".
* 임의의 JavaScript 값이 될 수 있는 "값". 함수를 값으로 가지는 속성은 메서드라고 할 수 있습니다.
* 속성을 읽고 쓰는 방법을 지정하는 일부 "속성". 속성은 `configurable`, `enumerable`, 그리고 `writable` 속성을 가질 수 있습니다.

접근자 속성에는 실제 "값"이 없습니다. 값은 값을 읽을 때 호출되는 하나 (getter), 그리고 값을 설정할 때 호출되는 하나 (setter)로 한 쌍의 함수를 통해 간접적으로 표현됩니다. 그러나 접근자 속성은 표면적으로는 일반적인 데이터 속성처럼 동작하는데, getter와 setter 함수가 자동으로 호출되고 숨겨져 있기 때문입니다.

속성값 (getter와 setter를 포함하는) 그리고 속성은 "속성 설명자"로 불리는 데이터 레코드에 저장됩니다. `Object.getOwnPropertyDescriptor()`와 `Object.defineProperty()` 같은 많은 메서드는 속성 설명자와 함께 동작합니다.

"속성" 이라는 용어 자체는 모든 JavaScript 값과 일치하는 것은 아닙니다. 이것은 추상적인 개념입니다. 예를 들어, 아래와 같은 코드를 따릅니다.


```js
const obj = {
  a: 1,
  b() {},
};
```


`obj` 객체는 두 개의 속성을 가집니다. 첫 번째는 키인 `"a"`와 값인 `1`을 가집니다. 두 번째는 메서드 구문을 사용하여 키인 `"b"`와 값으로 함수를 가집니다. `"a"` – `1`, `"b"` – `function` 조합은 객체의 속성입니다.

클래스 속성 맥락은 각 인스턴스가 소유하는 "인스턴스 속성"과 클래스가 소유하고 모든 인스턴스에 공통 데이터를 보유하는 "정적 속성"으로 나눌 수 있습니다. 상속 맥락에서 속성은 객체 자체가 소유하는 "고유 속성"과 객체의 프로토타입 체인에 있는 객체가 소유하는 "상속 속성"으로 나눌 수 있습니다.

읽기와 쓰기 속성에 대한 더 많은 정보는 객체로 작업하기를 참조하세요.

같이 보기
-----

* 속성 (프로그래밍) on Wikipedia
* 객체 지향 JavaScript 소개
* 객체 속성
* 속성의 열거 가능성 및 소유권 (en-US)
Property (CSS)
==============

**CSS 특성**은 연관된 값이 어떻게 브라우저가 요소를 표시하는지 한 측면을 정의하는 특성(색상처럼)입니다.

아래는 CSS 규칙의 예시입니다.


```css
/\* "div"는 모든 나누는 요소를 나타내는 선택자입니다 \*/
/\* 문서 내에서 해당 규칙에 따라 스타일이 지정됩니다 \*/
div {
  /\* 값이 "black"인 속성 "color"는 다음을 나타냅니다\*/
  /\* 텍스트 색상은 검은색이 될 것입니다\*/
  color: black;

  /\* 값이 "white"인 속성 "background-color"은 다음을 나타냅니다\*/
  /\* 배경 색상 요소는 하얀색이 될 것입니다\*/
  background-color: white;
}
```

같이 보기
-----

* CSS 배우기
* MDN에서 CSS 참조
* CSS 작업 그룹의 현재 작업
노드 (networking)
===============

네트워크에서, **노드** 는 네트워크의 연결 지점입니다. 물리적 네트워크에서 노드는 일반적으로 컴퓨터나 라우터와 같은 장치입니다.

같이 보기
-----

* 위키백과의 노드
노드 (DOM)
========

DOM 맥락에서는, **노드(node)** 는 노드 트리의 단일 지점입니다. 노드가 되는 요소는 문서 자체, 요소, 텍스트, 주석 등입니다.

같이 보기
-----

* WHATWG 명세의 노드 트리
* 노드 (en-US) 객체
기준 (호환성)
========

**Baseline**은 널리 지원되는 웹 플랫폼 기능을 식별합니다. 웹 개발자는 기본 기능이 최신 브라우저에서 작동할 것으로 기대할 수 있습니다.

기본 기능(API, CSS 속성 집합, JavaScript 구문 등)은 잘 알려진 여러 브라우저(Chrome, Edge, Firefox 및 Safari)의 현재 버전 이전에 적어도 하나의 버전에서 일관되게 작동하는 것으로 알려져 있습니다.

배지
--

🟢 녹색 Baseline 배지가 표시되면, 해당 기능이 브라우저의 최신 및 이전 주요 배포판에서 작동할 것이라고 신뢰할 수 있습니다.

🟡 기능이 아직 Baseline이 아니다라는 것을 나타내는 노란색 배지가 표시되면, 해당 기능을 사용하기 전에 사이트 사용자를 대상으로 추가 조사 및 테스트를 수행하거나 해당 기능이 Baseline이 될 때까지 기다리세요.

추가 고려사항
-------

Baseline은 지원을 위한 안내서이며, 모든 상황을 다루지는 않습니다. 사이트가 브라우저의 장기 지원 배포판, 이전 장치나 브라우저 배포판, Baseline 보고서에 포함되지 않는 브라우저에서 작동해야 하는 경우, 자체적으로 조사하거나 테스트해야 할 수도 있습니다. Baseline이 환경을 지원하지 않는 경우, 기능을 적용하기 전에 MDN에서 브라우저 호환성 표를 읽거나, caniuse.com을 참고해보는 것이 좋습니다.

기여하기
----

 Baseline은 W3C WebDX 커뮤니티 그룹의 커뮤니티 활동이며, MDN의 오픈 소스 브라우저 호환성 데이터를 사용합니다.
 질문 또는 피드백이 있거나, Baseline 상태 보고서에서 다루는 기능을 갱신하고 확장하는 데 도움을 주고 싶다면, web-platform-dx/feature-set로 이동해 참여하세요.

같이 보기
-----

* 크로스 브라우저 테스팅 (en-US)
* web-platform-dx/feature-set 레포지토리
* W3C WebDX 커뮤니티 그룹
* mdn/browser-compat-data 레포지토리
기준선 (타이포그래피)
============

**기준선**은 유럽 및 서아시아 타이포그래피에서 글꼴의 문자가 놓이는 가상의 선을 의미하는 용어입니다.

같이 보기
-----

* 위키백과의 기준선 on Wikipedia
* CSS 상자 정렬 (en-US) on MDN
디지털 가입자 회선 (Digital Subscriber Line, DSL)
=========================================

**디지털 가입자 회선**은 전화선을 통해 유선 데이터 전송을 보내는 광대역 인터넷 연결 유형입니다.

 다운로드 속도와 업로드 속도가 동일할 필요는 없습니다. 이러한 경우, 회선은 '비대칭'이라고 하며 ADSL이라는 약어가 사용됩니다.
 케이블, 광섬유 또는 전화 접속 연결과 비교됩니다.

같이 보기
-----

* 위키백과의 디지털 가입자 회선
도메인 특화 언어 (Domain-Specific Language, DSL)
=========================================

\*\*도메인 특화 언어 (DSL)\*\*은 응용 프로그램 도메인 내의 특정 문제를 해결하도록 설계된, 제한된 범위의 컴퓨터 언어 유형입니다.

도메인 전반에 걸쳐 다양한 문제를 해결하도록 설계된 '일반 목적 언어(GPL)'과 DSL를 비교해보세요.

같이 보기
-----

* 위키백과의 도메인 특화 언어
* martinfowler.com DSL 안내서
Signature (functions)
=====================

**함수 시그니처**(*타입* 시그니처, *메소드* 시그니처)는 functions 그리고 methods의 입력과 출력을 정의합니다.

시그니처는 다음을 포함합니다:

* parameters와 그들의 types
* 반환값과 타입
* 던져지거나 콜백으로 반환되는 exceptions
* object-oriented 프로그램에서 메소드의 접근 권한에 대한 정보 (`public`, `static`, 혹은 `prototype`와 같은 키워드들).
In depth
--------

### Signatures in JavaScript

JavaScript는 *약한 타입* 혹은 *동적* 언어입니다. 이것은 여러분이 변수의 타입을 미리 선언하지 않아도 됨을 의미합니다. 타입은 프로그램이 실행되는 동안 자동으로 결정됩니다. 하지만 JavaScript에서의 시그니처는 여전히 여러분에게 메소드에 대한 몇 가지 정보를 제공해줄 수 있습니다:


```js
MyObject.prototype.myFunction(value);
```


* 메소드는 `MyObject`라 불리는 object에 장착되어 있습니다.
* 메소드는 `MyObject`의 `prototype`에 장착되어 있습니다. (따라서 이 메소드는 instance method (en-US) 입니다.) 반대의 경우는 static method입니다.
* 메소드의 이름은 `myFunction`입니다.
* 메소드는 하나의 인자를 받고, 그것의 이름은 `value` 입니다.
### Signatures in Java

Java는 VM수준에서 메서드와 클래스를 식벽하는데 시그니처가 사용됩니다. Java 코드를 싱행하기 위해서는 변수의 타입을 선언해야 합니다. Java는 강한 타입이며, 컴파일 시간에 parameters의 type의 정확성을 검사합니다.


```java
public static void main(String[] args)
```


* The `public` keyword is an access modifier and indicates that this method can be called by any object.
* The `static` keyword indicates that this method is a class method as opposed to being an instance method.
* The `void` keyword indicates that this method has no return value.
* The name of the method is `main`.
* The method accepts one parameter of type String Array. It is named `args.`
`Learn more`
------------

### `General knowledge`

* Type signature on Wikipedia
안전함 (HTTP 메서드)
==============

 HTTP 메서드가 서버의 상태를 바꾸지 않으면 그 메서드가 **안전**하다고 말합니다. 다른 말로 하면, 읽기
 작업만 수행하는 메서드는 안전합니다. 흔히 쓰이는 HTTP 메서드 중에서는 `GET`, `HEAD`,
 `OPTIONS`가 안전합니다. 모든 안전한 메서드는 멱등성 또한
 갖지만, 모든 멱등성을 지닌 메서드가 안전한 것은 아닙니다. 예컨대 `PUT`과 `DELETE`는 둘
 다 멱등성을 가졌지만 안전하지는 않은 메서드입니다.

 그러나, 안전한 메서드가 읽기 전용의 의미를 내포하긴 하지만, 서버가 요청 정보와 통계 등을 기록함으로써 자신의 상태에
 변경을 가하는 것도 가능합니다. 안전함의 중요점은 그 메서드를 호출해도 클라이언트가 서버의 상태 변화를 직접 요청하는
 것이 아니므로 서버에 불필요한 부하를 주지 않을 것이란 점입니다. 즉 브라우저 입장에서는, 안전한 메서드라면 서버에 해를
 끼치지 않을 것임을 알 수 있기 때문에 자유롭게 호출할 수 있습니다. 이런 점을 활용해서 브라우저가 별다른 위험 없이도
 프리페칭과 같은 동작을 수행할 수 있는 것입니다. 웹 크롤러 역시 안전한 메서드의 호출에 의존합니다.

 안전한 메서드가 정적 파일만 제공해야 할 필요는 없으며, 요청에 대해 응답을 필요에 따라 생성하는 것도 가능합니다. 다만
 생성 과정은 안전해야 하므로, 다른 이커머스 웹 사이트에 주문을 넣는 것과 같이 외부 이펙트를 유발하는 것은 안됩니다.

 메서드의 안전함을 준수하는 것은 온전히 서버 어플리케이션의 책임으로, Apache, Nginx, IIS 등 웹 서버 스스로는 안전함을
 강제하지 못합니다. 서버 어플리케이션은 특히 `GET` 요청을 받았을 때 자신의 상태가 바뀌지 않도록 해야 합니다.

다음은 서버 상태를 바꾸지 않는, 안전한 메서드의 호출입니다.
```

    GET /pageX.html HTTP/1.1
```


다음은 서버 상태를 바꿀 수도 있는, 안전하지 않은 메서드의 호출입니다.
```

    POST /pageX.html HTTP/1.1
```


마지막으로 멱등성을 가졌지만 안전하지는 않은 메서드의 호출입니다.
```

    DELETE /idX/delete HTTP/1.1
```

더 알아보기
------

### 일반 지식

* HTTP 명세에서 안전함의 정의.
### 기술 지식

* 일반적으로 쓰이는 안전한 메서드: `GET`, `HEAD`, `OPTIONS`
* 일반적으로 쓰이는 안전하지 않은 메서드: `PUT`, `DELETE`, `POST`
CSS를 이용한 HTML 스타일링 익히기
======================

CSS(Cascading Stylesheets – 종속형 스타일시트)는 HTML을 익힌 후 가장 먼저 배워야할 웹기술입니다. HTML이 콘텐츠의 구조와 의미를 정의하는 반면 CSS는 스타일과 레이아웃을 지정합니다. 예를 들어, CSS를 사용하면 콘텐츠의 글꼴, 색상, 크기 및 간격을 변경하거나, 여러 개의 열로 분할하거나, 애니메이션이나 기타 장식 효과를 추가할 수 있습니다.

학습 경로
-----

CSS에 도전하기 전에 HTML의 기초를 익혀야 합니다. 먼저 HTML 소개를 진행하면서 다음을 익히시는게 좋습니다.

* CSS 소개부터 시작하는 CSS
* 고급 HTML 주제
* JavaScript 및 웹페이지에 동적 기능을 추가하는 법

HTML의 기본 원리를 이해하고 나면, HTML과 CSS 사이를 왕복하며 동시에 학습하는걸 추천드립니다. HTML은 CSS를 활용할 때 훨씬 흥미롭고 재미있으며, HTML을 모르고는 CSS를 제대로 배울 수 없기 때문입니다.

이 주제를 시작하기 전에, 컴퓨터의 사용법과 웹을 둘러보는 일이 익숙해야 합니다. 기본 소프트웨어 설치하기에서 설명하는 기본적인 작업 환경을 갖춰야 하고, 파일 다루기에서 설명하는 파일 생성 및 관리도 이해해야 합니다. 두 안내서 모두 처음 시작하는 분을 위한 Web과 함께 시작하기의 일부분이죠.

본 주제를 시작하기 전에 Web과 함께 시작하기를 먼저 해보시는게 좋겠습니다. 그러나 CSS 기초 글에서 다루는걸 여기 CSS 소개에서 훨씬 상세하게 다루므로 필수는 아닙니다.

구성
--

아래는 추천 순서로 정렬한 본 주제의 구성입니다. 첫 항목부터 시작하세요.

CSS 소개

CSS 작동 원리에 대한 기초로, 선택자와 속성, CSS 규칙을 쓰는 법, HTML에 적용하기, 길이나 색상 등 단위를 특정하는 법, 종속과 상속, 박스 모델의 기초, CSS 디버그 등을 다룹니다.

텍스트 스타일링

여기서 글꼴, 굵기 및 기울임꼴, 줄과 문자 간격, 그림자 및 기타 텍스트 기능 설정을 비롯한 텍스트 스타일링 기본 사항을 살펴 봅니다. 페이지에 맞춤 글꼴을 적용하거나 목록 및 링크에 스타일을 적용할 수도 있습니다.

박스 스타일링

다음으로 웹페이지 레이아웃을 위한 기본 단계 중 하나인 박스 스타일링을 살펴 봅니다. 먼저 박스 모델을 다시 요약하여 설명한 후, 내부 여백(padding), 테두리(borders) 및 외부 여백(margins)을 설정하거나 사용자 지정 배경색, 이미지 및 기타 기능을 설정하고, 박스에 그림자나 필터와 같은 멋진 기능을 설정하는 등 상자 레이아웃을 제어하는 법을 알아봅니다.

CSS 레이아웃

이 시점에서 이미 CSS 기초, 텍스트 스타일링 및 콘텐트가 포함된 박스의 스타일링 및 조작을 살펴보았습니다. 이제는 박스를 뷰포트(viewport) 또는 다른 박스와 관련하여 올바른 위치에 배치하는 방법을 살펴볼 시간입니다. 필요한 사전 요구 사항을 포함하여, CSS 레이아웃, 디스플레이(display) 속성의 다양한 설정, 플로트(float) 및 위치 지정(positioning)과 관련된 기존 레이아웃 방식과 더불어 유동적 박스(flexbox) 같은 새롭고 놀라운 레이아웃 도구를 깊게 살펴봅니다.

반응형 디자인 (TBD)

요즘은 다양한 장치로 웹을 탐색하기 때문에 반응형 웹 디자인 (en-US)(RWD; Responsive Web Design)은 핵심적인 웹 개발 기술이 되었습니다. 이 모듈에서는 반응형 웹 디자인의 기본 원칙과 도구들을 다루며, 화면 너비, 방향, 해상도와 같은 장치 특성에 따라 다른 CSS를 적용하는 방법을 설명합니다. 그리고 이런 특성에 따라 다양한 비디오와 이미지를 제공할 수 있게 하는 기술을 탐구합니다.

CSS로 일상적인 문제 해결하기
-----------------

CSS를 사용하여 일반적인 문제 해결하기는 웹페이지를 만들 때의 매우 흔한 문제들을 CSS를 사용해 해결하는 방법을 살펴보는 섹션들의 링크를 제공합니다.

시작부터 가장 많이 하게 되는 일은 HTML 요소들(elements)의 색상과 배경색을 지정하고, 크기나 모양 또는 위치를 변경하고, 테두리(borders)를 정의하고 추가하는 일입니다. 하지만 일단 CSS의 기초에 대해 확실하게 이해만 하면 못하는 일이 거의 없게 됩니다. CSS 학습의 장점 중 하나는 잘 모르는 것에 대해서도 일단 기초만 익혀두면 무엇을 할 수 있고 무엇을 할 수 없는지를 꽤 정확하게 느낄 수 있다는 것입니다!

더 알아보기
------

MDN의 CSS

MDN의 CSS 문서 목록에 대한 주 진입 지점입니다. CSS 언어의 모든 기능에 대한 자세한 참조 문서 목록을 찾을 수 있습니다. 혹시 속성(property)이 가질 수 있는 모든 값(values)에 대한 정보가 필요한가요? 그렇다면 이곳으로 이동하세요.
JavaScript - 동적인 클라이언트 사이드 스크립트 언어
==================================

JavaScript 는 웹 페이지의 복잡한 것들을 구현할 수 있는 프로그래밍 언어입니다. 웹페이지는 단순히 변하지 않고 정적인 정보들만 보여주는 것 이상의 일을 합니다. 시간의 흐름에 따라 업데이트 되는 콘텐츠, 동적인 지도와 움직이는 2D/3D 그래픽, 또는 스크롤 가능한 비디오 쥬크박스들과 여러 가지들을 보여줍니다. 여러분은 '아마도 JavaScript가 그 일들을 하고 있겠구나'라고 생각하실 수 있습니다.

**참고:** **프런트엔드 개발자가 되길 희망하나요?**

우리는 모든 필수 정보를 포함하는 과정을 구성했습니다. 목표를 향해 노력할 일만 남았습니다.

**시작하기**

전제 조건
-----

JavaScript 는 HTML 이나 CSS 와 같은 관련 기술들보다 배우기가 더 어렵습니다. JavaScript 에 입문하기 전에, 적어도 아래의 두가지 기술을 먼저 배우고, 아마도 다른 것들도 배우는 것이 좋습니다. 다음 과정들을 통해 시작하세요.

* Web과 함께 시작하기
* HTML 소개
* CSS 소개

다른 프로그래밍 언어를 배웠던 경험이 있다면 도움이 될 수도 있습니다.

JavaScript 의 기본적인 것들이 익숙해진 이후에, 여러분은 더 고급 주제들을 배울 준비가 되어 있어야 합니다. 예를 들면 다음과 같습니다.

* JavaScript 심화, JavaScript 안내서
* 웹 APIs 참조문서
과정
--

이 주제에는 다음 과정들이 제안된 순서대로 포함되어 있습니다.

JavaScript 첫걸음

JavaScript 과정에서, JavaScript를 이용해 첫번째 경험을 쌓기 이전에 "JavaScript 는 무엇인가요?", "어떻게 생겼나요?", 그리고 "그것으로 무엇을 할 수 있죠?" 와 같은 질문에 대답 할 수 있어야 합니다. 그 이후에, 변수, 문자열, 숫자 그리고 배열과 같은 JavaScript 의 기능에 대해 살펴봅시다.

JavaScript 구성 요소

이 과정에서는, 조건문, 반복문, 함수, 그리고 이벤트와 같이 일반적으로 쓰이며 괄호로 감싸여진 형태인 JavaScript 의 핵심적인 기본 기능들을 살펴볼 것입니다. 여러분은 이미 이것들에 대해 이미 보셨겟지만, 그저 지나쳤을 것이니, 우리는 이것에 대해 자세히 살펴볼 것입니다.

JavaScript 객체 소개

JavaScript 에서는 문자열과 배열같은 핵심적인 JavaScript 기능부터 JavaScript 보다 위에 작성된 브라우저의 API 까지 거의 대부분이 객체입니다. 심지어 관련 함수와 변수들을 효율적인 패키지로 캡슐화하기 위해 객체를 만들 수도 있습니다. 여러분이 언어에 대한 이해도를 높이고 효율적으로 코드를 작성하기 위해서라면 JavaScript 의 객체 지향적인 특성을 이해하는 것이 중요합니다. 따라서 우리는 이 과정을 통해 여러분을 도와드릴 것입니다. 여기에서는 객체 이론과 문법에 대해 설명하고 어떻게 객체를 만들고, JSON 데이터가 무엇이고 어떻게 작동하는지에 대해 설명합니다.

비동기적 JavaScript

이 부분에서 우리는 Javascript의 비동기적 실행이 왜 중요한지, 서버에서 리소스를 가져올 때와 같은 시간 지연을 유발하는 동작들을 어떻게 효과적으로 다룰지 등에 대해 살펴봅니다.

Client-side web APIs

클라이언트측의 웹사이트나 응용프로그램을 위해 JavaScript 를 작성하는 경우, 여러분은 브라우저와 운영체제 또는 다른 웹사이트의 데이터를 위한 API를 사용하기 전에 이상한 길에 빠지지 않을 겁니다. 이번 과정에서는 API 가 무엇인지, 그리고 개발 도중 자주 접하게 될 가장 보편적인 API들을 사용하는 방법에 대해 알아 볼 것입니다.

일반적인 JavaScript 문제 해결
---------------------

JavaScript 를 이용한 보편적인 문제 해결 은 웹페이지를 만들 때 발생하는 일반적인 문제들을 JavaScript 로 해결하는 방법에 대한 링크들을 제공합니다.

관련 항목
-----

JavaScript on MDN

JavaScript 의 핵심적인 문서입니다. 여기서 JavaScript 언어의 모든 측면에 대해 넓은 참조 문서들과 JavaScript 경험자들을 위한 심화 튜토리얼들을 찾을 수 있습니다.

JavaScript 배우기

Web 개발자 지망생을 위한 훌륭한 자료 — 짧은 강좌와 대화형 테스트, 자동화된 평가로 지도하는 인터랙티브 환경에서 JavaScript를 배웁니다. 처음 40개 강좌는 무료이며, 한번의 작은 금액 지불로 전체코스를 수강할 수 있습니다.

EXLskills의 JavaScript 기초

EXLskills의 오픈소스 코스로 JavaScript를 무료로 배우세요 JS로 어플리케이션 제작을 시작하는데 필요한 모든 것을 배울수 있습니다.

Coding math

프로그래머가 되기 위해 이해해야 하는 수학을 가르치는 훌륭한 비디오 튜토리얼 시리즈 by Keith Peters.
Server-side website programming
===============================

The **동적 웹사이트 서버-사이드 프로그래밍** 에 대한 주제는 동적 웹사이트를 생성하는 방법을 보여주는 과목(module) 시리즈이다. (Dynamic Websites: HTTP 요구(requests)에 응답하여 요구에 맞는 정보를 전달하는 웹사이트) 각 과목들은 서버-사이드 프로그래밍의 포괄적인 소개를 제공한다. 기본적인 어플리케이션들을 생성하기 위한 Django (Python) 와Express (Node.js/JavaScript) 같은 웹 프레임워크를 사용하는 방법에 대한 초보자 레벨(beginner level)의 가이드도 포함한다.

대부분의 주요 웹사이트들은 요구에 따라 동적으로 다른 데이터들을 보여주기 위해 여러 종류의 서버-사이드 기술을 사용한다. 예를 들어, Amazon에서 이용가능한 물품들이 얼마나 많을까? 그리고 Facebok에 얼마나 많은 게시글이 있을까? 를 상상해보자. 완전히 다른 static pages(정적 페이지)를 사용하여 이런 것들을 보여주는 것은 완전히 비효율적이다, 그래서 대신에 그런 정적인 템플릿(HTML, CSS, JavaScript 를 사용하여 구성된 템플릿)을 보여준 다음, 필요할 때마다, 템플릿 안에 보이는 데이터들을 동적으로 업데이트한다. 예) 당신이 Amazon에서 다른 물품을 보고 싶어할 때 물품만 다른 것으로 업데이트한다.

현대의 웹 개발에서는, 서버-사이드 개발에 대해 배우는 것을 매우 추천한다.

Learning pathway(학습 경로)
-----------------------

서버-사이드 프로그래밍을 시작하는 것은 보통 클라이언트-사이드(Client-side) 개발보다 더 쉽다. 왜냐하면, 동적 웹사이트는 비슷한 작업들을 많이 수행하는 경향이 있기 때문이다. (데이터베이스에서 데이터를 검색하고 페이지에 보여주는 것, 유저가 입력한 데이터가 유효한 지 확인하고 데이터 베이스에 저장하는 것, 로그인한 유저의 권환을 체크하는 것 등) 그리고 이런 작업들과 다른 일반적인 웹 서버 기능을 쉽게 해주는 웹 프레임워크가 있기 때문이다.

기본적인 프로그래밍 개념에 대한 지식 (또는 특정한 프로그래밍 언어에 대한 지식) 은 유용하나, 필수는 아니다. 비슷하게, 클라이언트-사이드 코딩에 대한 전문지식이 요구되지 않는다, 그러나 기본적인 지식은 클라이언트-사이드 웹 "프론트 엔드(Front End)"를 생성하는 개발자와 일 하는데 도움이 될 것이다.

"웹을 작동하는 방법"을 이해할 필요가 있다. 다음 주제들을 먼저 읽는 것을 추천한다.

* What is a web server(웹서버는 무엇인가)
* What software do I need to build a website?(웹사이트를 만들기 위해 필요한 소프트웨어는 무엇인가)
* How do you upload files to a web server?(웹 서버에 파일을 업로드하는 방법은 무엇인가)

이런 기본적인 이해를 통해, 이 섹션의 과목들을 공부할 준비가 될 것이다.

Modules(과목)
-----------

이번 주제에는 다음의 과목들을 포함하고 있다. 우선 첫번째 과목을 시작해야한다. 그 후에 두 개의 과목들 중 하나를 선택해 나아가야한다. 두 개의 과목은 가장 대중적인 서버-사이드 언어와 그에 맞는 적절한 웹 프레임워크를 사용하는 방법을 보여준다.

Server-side website programming first steps(서버-사이드 웹사이트 프로그래밍의 첫 단계)

이 과목은 서버 기술 문외한을 위한 서버-사이드 웹사이트 프로그래밍에 대한 정보를 제공한다. 또한, 서버-사이드 프로그래밍에 대한 근본적인 질문에 대한 답을 포함하고 있다. (그 질문은 서버가 무엇인지, 클라이언트-프로그래밍과 어떻게 다른 지, 서버가 왜 그렇게 유용한 지에 대한 것이다.) 그리고 몇몇의 더 대중적인 서버-사이드 웹 프레임워크에 대한 개요와 당신의 사이트에 가장 적합한 것을 선택하는 방법에 대한 가이드도 있다. 마지막으로, 웹 서버 보안에 대한 기본적인 섹션도 제공한다.

Django Web Framework (Python)

Django는 매우 대중적이고 Python으로 쓰여진 매우 중요한 서버-사이드 웹 프레임워크이다. 이 과목은 Django가 좋은 웹 서버 프레임워크인 이유, 개발 환경을 구축하는 방법, 그리고 Django로 일반적인 업무를 수행하는 방법을 설명해준다.

Express Web Framework (Node.js/JavaScript)

Express는 JavaScript로 쓰여진 대중적인 웹 프레임워크이며, node.js 런 타임 환경에서 호스트된다. 이 과목은 이 프레임 워크의 주요 장점, 개발 환경을 구축하는 법, 일반적인 웹 개발과 배치(deployment) 작업을 수행하는 법에 대해 설명해준다.

다른 주제
-----

Node server without framework(프레임워크 없는 노드 서버)

이 글은 프레임워크를 사용하고 싶지 않는 사람들을 위해, 순수한 Node.js로 구성된 단순한 정적 파일 서버를 제공한다.
Web과 함께 시작하기
============

*Web과 함께 시작하기* 는 여러분에게 웹 개발의 실질적인 측면을 소개하는 간결한 시리즈입니다. 여러분은 간단한 웹페이지를 만들 때 필요한 도구를 설치하고 여러분의 코드를 게시할 것입니다.

당신의 첫 번째 웹사이트 줄거리
-----------------

전문적인 웹사이트를 생성하기 위해서는 매우 많은 작업이 필요합니다. 그러니 웹 개발이 처음이라면, 처음은 작게 시작해보세요. 지금 당장 Facebook을 만들 수는 없지만, 자신만의 간단한 온라인 웹사이트를 만드는 건 그리 어렵지 않으니 여기부터 시작하겠습니다.

가이드
---

아래 열거된 문서들을 통해 여러분은 아무것도 없는 상태에서 첫 번째 웹 페이지를 온라인 상태로 만들 수 있습니다. 여행을 시작합시다!

기본 소프트웨어 설치

웹사이트 제작을 위한 도구는 아주 많습니다. 이제 막 시작한다면 수도 없이 많은 코드 편집기와 프레임워크, 테스트 도구 때문에 혼란스러울 겁니다. 이 문서에서는 기본적인 웹 개발을 시작하는 데 필요한 소프트웨어를 어떻게 설치할 수 있는지 차근차근 알려드립니다.

웹사이트는 어떻게 보일까요?

여러분의 웹사이트를 위한 코드 작성을 하기 전에, 먼저 계획을 세워야 합니다. 어떤 정보들을 보여줄것인가요? 어떤 글꼴이나 색상을 사용할 것인가요? 여기서 우리는 여러분이 사이트의 내용이나 디자인을 계획하기 위한 간단한 방법을 제공할 것입니다.

파일 다루기

웹사이트는 많은 파일(문자, 코드, 스타일시트, 미디어, 등등)로 이루어져 있습니다. 웹사이트를 만들 때, 여러분은 합리적인 구조로 여러 파일을 모으고 상호 작용이 가능한지 확인해야 합니다. 이 문서에서는 여러분의 웹사이트를 위해 합리적인 파일 구조를 설정하는 방법과 여러분이 알아야 할 문제들을 설명해줄 것입니다.

HTML 기본

HTML(Hypertext Markup Language)은 여러분의 웹 콘텐츠를 구조화하고, 의미와 의도를 주기 위해 사용되는 코드입니다. 예를 들면, 내 콘텐츠가 문단의 집합인지, 또는 목차(•)의 리스트인지. 페이지에 이미지를 넣어야 하는지, 데이터 테이블이 필요한지. 이 문서는 여러분을 난처하지 않게 하면서 HTML에 익숙해질 수 있는 충분한 정보를 제공할 것입니다.

CSS 기본

CSS(Cascading Style Sheets)는 여러분의 웹사이트를 디자인할 때 사용하는 코드입니다. 예를 들어, 글자 색을 검정으로 할 것인가요, 빨간색으로 할 것인가요? 콘텐츠는 화면 어디에 있어야 하나요? 웹사이트를 꾸미려면 어떤 배경 이미지나 색을 사용하실 건가요? 이 문서에서 시작하는데 필요한 모든 것들을 안내해드립니다.

JavaScript 기본

JavaScript는 여러분이 상호 기능을 웹사이트에 추가할 때 사용하는 프로그래밍 언어입니다. 예를 들면 게임, 버튼이 눌리거나 폼에 정보가 입력되었을 때 발생하는 것, 동적인 스타일 효과, 애니메이션 등이 있습니다. 이 문서는 여러분께 이 흥미로운 언어로 가능한 것들에 대한 것과 어떻게 시작할 수 있는지에 대한 아이디어를 제공할 것입니다.

여러분의 코드 공개

웹사이트를 위한 코드 작성과 파일 구성을 마쳤다면, 사람들이 찾아볼 수 있도록 이 모든 것을 온라인에 둘 필요가 있습니다. 이 문서에서는 여러분이 간단한 예제 코드를 적은 노력으로 온라인 시키는 방법을 설명할 것입니다.

웹의 동작 방식

여러분이 가장 선호하는 웹사이트에 접근할 때, 여러분이 모르는 많은 복잡한 것들이 눈에 띄지 않는 곳에서 발생합니다. 이 문서에서는 여러분이 컴퓨터로 웹페이지를 볼 때 발생하는 것들에 대해 간단하게 설명을 할 것입니다.

같이 보기
-----

* Web Demystified: 웹 개발을 처음 시작하는 분을 위해 웹 기초를 설명하는 뛰어난 비디오 시리즈입니다. Jérémie Patonnier께서 제작하셨습니다.
* The web and web standards (en-US): 이 글은 웹에 대한 유용한 배경지식을 알려줍니다. 웹이 어떻게 생겨났는지, 웹의 표준 기술이 무엇인지, 어떻게 함께 작동하는지, 왜 "웹 개발자"가 직업으로 삼기 좋은지, 그리고 이 과정을 통해 어떤 모범 사례를 배울 수 있는지 알 수 있습니다.