-
- 「私は牧場の達人です。」と言っている牛。牛は整形済みテキストで表現されている。
-
-
-```
-
-- [MDN "WCAG を理解する ― ガイドライン 1.1 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content)
-- [H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/H86.html)
-
## 仕様書
{{Specifications}}
@@ -132,4 +157,5 @@ body {
## 関連情報
- CSS: {{Cssxref('white-space')}}, {{Cssxref('word-break')}}
+- [HTML エンティティ](/ja/docs/Glossary/Entity)
- 関連する要素: {{HTMLElement("code")}}
diff --git a/files/ko/web/api/history/pushstate/index.md b/files/ko/web/api/history/pushstate/index.md
index b5a0681c7b3409..b537b977cab1f4 100644
--- a/files/ko/web/api/history/pushstate/index.md
+++ b/files/ko/web/api/history/pushstate/index.md
@@ -1,57 +1,82 @@
---
-title: History.pushState()
+title: "History: pushState() 메서드"
slug: Web/API/History/pushState
+l10n:
+ sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18
---
{{APIRef("DOM")}}
-[HTML](/ko/docs/Web/HTML) 문서에서, **`history.pushState()`** 메서드는 브라우저의 세션 기록 스택에 상태를 추가합니다.
+[HTML](/ko/docs/Web/HTML) 문서에서, **`history.pushState()`** 메서드는 브라우저의 세션 기록 스택에 항목을 추가합니다.
+
+이 메서드는 {{glossary("asynchronous", "비동기")}}로 동작합니다. 네비게이션이 언제 완료되었는지 결정하기 위해 {{domxref("Window/popstate_event", "popstate")}} 이벤트에 대한 수신기를 추가합니다. 이때 `state` 매개변수를 사용할 수 있습니다.
## 구문
-```js
-history.pushState(state, title[, url]);
+```js-nolint
+pushState(state, unused)
+pushState(state, unused, url)
```
### 매개변수
- `state`
- - : 새로운 세션 기록 항목에 연결할 상태 객체. 사용자가 새로운 상태로 이동할 때마다 {{event("popstate")}} 이벤트가 발생하는데, 이 때 이벤트 객체의 `state` 속성에 해당 상태의 복제본이 담겨 있습니다.
- 상태 객체는 직렬화 가능한 객체라면 모두 가능합니다.
-- `title`
- - : [지금은 대부분의 브라우저가 `title` 매개변수를 무시하지만](https://github.com/whatwg/html/issues/2174), 미래에 쓰일 수도 있습니다. 빈 문자열을 지정하면 나중의 변경사항에도 안전할 것입니다. 아니면, 상태에 대한 짧은 제목을 제공할 수도 있습니다.
+ - : `state` 객체는 `pushState()`에 의해 생성되어 새로운 기록 항목과 관련된 JavaScript 객체입니다. 사용자가 새로운 `state`로 이동할 때마다 {{domxref("Window/popstate_event", "popstate")}} 이벤트가 발생되고 이벤트 `state` 속성은 기록 항목의 `state` 객체 복사본을 포함합니다.
+
+ `state` 객체는 직렬화될 수 있는 모든 것일 수 있습니다. Firefox는 사용자가 브라우저를 다시 시작한 후 복원될 수 있도록 사용자의 디스크에 `state` 객체를 저장하기 때문에, `state` 객체의 직렬화된 표현에 16MiB의 크기 제한을 적용합니다. 이보다 더 큰 직렬화된 표현 `state` 객체를 `pushState()`에 전달하면 메서드는 예외를 발생시킵니다. 이보다 더 많은 공간이 필요하다면 {{domxref("Window.sessionStorage", "sessionStorage")}} 혹은 {{domxref("Window.localStorage", "localStorage")}}를 사용하는 것이 좋습니다.
+
+- `unused`
+
+ - : 이 매개변수는 역사적인 이유로 존재해서 생략할 수 없습니다. 빈 문자열을 전달하는 것이 나중에 메서드가 변경될 경우에도 안전합니다.
+
- `url` {{optional_inline}}
- - : 새로운 세션 기록 항목의 URL. `pushState()` 호출 이후에 브라우저는 주어진 URL로 탐색하지 않습니다. 그러나 이후, 예컨대 브라우저를 재시작할 경우 탐색을 시도할 수도 있습니다. 상대 URL을 지정할 수 있으며, 이 땐 현재 URL을 기준으로 사용합니다. 새로운 URL은 현재 URL과 같은 {{glossary("origin", "출처")}}를 가져야 하며, 그렇지 않을 경우 예외가 발생합니다. 지정하지 않은 경우 문서의 현재 URL을 사용합니다.
+ - : 새로운 기록 항목의 URL입니다. 브라우저는 `pushState()` 호출 후에는 이 URL을 로드하려고 시도하지 않습니다. 하지만, 예를 들어 사용자가 브라우저를 다시 시작한 후에는 나중에 URL을 로드하려고 시도할 수 있습니다. 새로운 URL은 절대 경로일 필요가 없습니다. 상대 경로인 경우 현재 URL을 기준으로 해결됩니다. 새로운 URL은 현재 URL과 같은 {{glossary("origin", "출처")}}여야 합니다. 그렇지 않으면, `pushState()`는 예외를 발생시킵니다. 이 매개변수가 지정되지 않으면, 문서의 현재 URL로 설정됩니다.
-## 설명
+### 반환 값
+
+없음 ({{jsxref("undefined")}}).
-어떤 면에선 `pushState()`와 `window.location = "#foo"`가 비슷합니다. 둘 다 새로운 세션 기록 항목을 생성하고 활성화하기 때문입니다. 그러나 `pushState()`에는 몇 가지 장점이 있습니다.
+## 설명
-- 새로운 URL은 같은 출처에 한해서 아무 URL이나 가능합니다. 반면 {{domxref("window.location")}} 설정은 해시만 수정해야 같은 문서에 머무릅니다.
-- 원할 경우 URL을 바꾸지 않을 수도 있습니다. 그러나 `window.location = "#foo"`는 현재 해시가 `#foo`가 아닐 때만 새로운 기록 항목을 생성합니다.
-- `pushState()`는 임의의 데이터를 세션 기록 항목에 연결할 수 있습니다. 해시 기반 방식에서는 필요한 모든 데이터를 인코딩 해 짧은 문자열로 만들어야 합니다.
+어떤 의미에서 `pushState()`를 호출하는 것은 `window.location = "#foo"`를 설정하는 것과 유사합니다. 둘 다 현재 문서와 연결된 다른 기록 항목을 생성하고 활성화합니다. 그러나 `pushState()`에는 몇 가지 이점이 있습니다.
-다만 `pushState()`는 이전 URL과 신규 URL의 해시가 다르더라도 절대 {{event("hashchange")}} 이벤트를 유발하지 않습니다.
+- 새로운 URL은 현재 URL과 같은 출처에서 모든 URL이 될 수 있습니다. 반면, {{domxref("window.location")}}을 설정하는 것은 오직 해시를 수정하는 경우에만 동일한 문서를 유지할 수 있습니다.
+- 페이지의 URL 변경은 선택 사항입니다. 반면, `window.location = "#foo";`를 설정하는 것은 현재 해시가 `#foo`가 아닌 경우에만 새로운 기록 항목을 생성합니다.
+- 임의 데이터를 새로운 기록 항목과 연결할 수 있습니다. 해시 기반 접근에서는 모든 관련 데이터를 짧은 문자열로 인코딩할 필요가 있습니다.
-HTML 외의 문서에서는 이름공간 URI가 `null`인 요소를 생성합니다.
+새로운 URL이 오래된 URL과 오직 해시만 다를지라도 `pushState()`는 {{domxref("Window/hashchange_event", "hashchange")}} 이벤트를 발생시키지 않습니다.
## 예제
-다음 코드는 주어진 상태, 제목, URL을 사용해 새로운 세션 기록을 생성합니다.
+다음 코드는 상태와 url를 설정하는 새로운 브라우저 기록 항목을 생성합니다.
+
+### JavaScript
```js
-const state = { 'page_id': 1, 'user_id': 5 }
-const title = ''
-const url = 'hello-world.html'
+const state = { page_id: 1, user_id: 5 };
+const url = "hello-world.html";
+
+history.pushState(state, "", url);
+```
-history.pushState(state, title, url)
+### 쿼리 매개변수 변경
+
+```js
+const url = new URL(location);
+url.searchParams.set("foo", "bar");
+history.pushState({}, "", url);
```
-## 명세
+## 명세서
{{Specifications}}
## 브라우저 호환성
{{Compat}}
+
+## 같이 보기
+
+- [Working with the History API](/ko/docs/Web/API/History_API/Working_with_the_History_API)
+- [Window: popstate event](/ko/docs/Web/API/Window/popstate_event)
diff --git a/files/ko/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md b/files/ko/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md
new file mode 100644
index 00000000000000..6cb0aa2b8846bd
--- /dev/null
+++ b/files/ko/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md
@@ -0,0 +1,41 @@
+---
+title: "Reason: CORS header 'Access-Control-Allow-Origin' does not match 'xyz'"
+slug: Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin
+page-type: http-cors-error
+---
+
+{{HTTPSidebar}}
+
+## 원인
+
+```plain
+Reason: CORS header 'Access-Control-Allow-Origin' does not match 'xyz'
+```
+
+## 무엇이 문제인가요?
+
+요청의 오리진이 헤더의 {{HTTPHeader("Access-Control-Allow-Origin")}}에서 허용하고 있는 오리진의 내용과 일치하지 않습니다. 이 오류는 두 개 이상의 `Access-Control-Allow-Origin` 헤더를 응답에 포함하였을 때도 발생할 수 있습니다.
+
+사용자의 제어 하에 작동하는 서비스에서 CORS 요청을 사용하는 경우, `Access-Control-Allow-Origin` 헤더에 사용자의 오리진이 포함되어 있는지 확인합니다. 또 하나의 헤더만이 응답에 포함되어 있는지, 응답에 하나의 오리진만 포함되어 있는지 확인합니다.
+
+예제로 Apache에서는 서버 설정 시 아래의 명령어를 추가합니다. (서버 설정은 ``, ``, ``, 또는 `` 섹션 내부에 존재합니다.)
+설정은 일반적으로 `.conf` 파일(`httpd.conf`와 `apache.conf`가 일반적인 이름)이나 `.htaccess` 파일에서 찾을 수 있습니다.
+
+> **경고:** HTTPS 또는 HTTP 프로토콜에서 반드시 origin 항목을 포함하여야 합니다.
+
+```
+Header set Access-Control-Allow-Origin 'origin'
+```
+
+Ngix에서는 아래 명령어를 이용하여 헤더를 설정할 수 있습니다.
+
+```
+add_header 'Access-Control-Allow-Origin' 'origin'
+```
+
+## 같이 보기
+
+- [CORS 에러](/ko/docs/Web/HTTP/CORS/Errors)
+- 용어 사전: {{Glossary("CORS")}}
+- [CORS 소개](/ko/docs/Web/HTTP/CORS)
+- [CORS 사용: 내 서버에 CORS를 추가하고 싶다면](https://enable-cors.org/server.html)
diff --git a/files/ko/web/javascript/reference/global_objects/array/with/index.md b/files/ko/web/javascript/reference/global_objects/array/with/index.md
new file mode 100644
index 00000000000000..54c845eaeb0c31
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/with/index.md
@@ -0,0 +1,102 @@
+---
+title: Array.prototype.with()
+slug: Web/JavaScript/Reference/Global_Objects/Array/with
+l10n:
+ sourceCommit: 6bd17cb9cbc2d11163617b9f71706e93fdd743c8
+---
+
+{{JSRef}}
+
+{{jsxref("Array")}} 인스턴스의 **`with()`** 메서드는 주어진 인덱스의 값을 변경하기 위해 [대괄호 표기법](/ko/docs/Web/JavaScript/Reference/Operators/Property_accessors#bracket_notation)을 사용하는 것의 [복사](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#copying_methods_and_mutating_methods) 버전입니다. 이 함수는 지정된 인덱스의 요소가 지정된 값으로 대체된 새 배열을 반환합니다.
+
+## 구문
+
+```js-nolint
+array.with(index, value)
+```
+
+### 매개변수
+
+- `index`
+ - : 배열을 변경할 0 기반 인덱스이며 [정수로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#integer_conversion)되는 값입니다.
+ - 음수 인덱스는 배열의 끝부터 역산합니다 — `index < 0`인 경우 `index + array.length`가 사용됩니다.
+ - 정규화 후 인덱스가 범위를 벗어나면, {{jsxref("RangeError")}}가 발생합니다.
+- `value`
+ - : 주어진 인덱스에 할당할 값입니다.
+
+### 반환 값
+
+`index`의 요소 값이 `value`로 대체된 새로운 배열.
+
+### 예외
+
+- {{jsxref("RangeError")}}
+ - : `index > array.length` 혹은 `index < -array.length` 일때 발생합니다.
+
+## 설명
+
+`with()` 메서드는 배열에서 주어진 인덱스의 값을 변경하여, 주어진 인덱스에 있는 요소가 주어진 값으로 대체된 새 배열을 반환합니다. 원래 배열은 수정되지 않습니다. 이를 통해 조작을 수행하는 동안 배열 메서드를 연속으로 이어서 호출 할 수 있습니다.
+
+`with()` 메서드는 [희소 배열](/ko/docs/Web/JavaScript/Guide/Indexed_collections#희소배열)을 생성하지 않습니다. 만약 원래 배열이 희소 배열인 경우 빈 슬롯은 새로운 배열에서 `undefined`으로 대체됩니다.
+
+`with()` 메서드는 [제네릭](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#generic_array_methods) 메서드입니다. 이 메서드는 `this` 값에 `length` 속성과 정수 키 속성 만을 필요로 합니다.
+
+## 예제
+
+### 하나의 요소만 변경한채로 새로운 배열을 만들기
+
+```js
+const arr = [1, 2, 3, 4, 5];
+console.log(arr.with(2, 6)); // [1, 2, 6, 4, 5]
+console.log(arr); // [1, 2, 3, 4, 5]
+```
+
+### 배열 메서드 연속하여 연결하기
+
+`with()` 메서드를 사용하면 배열의 단일 요소를 업데이트한 후 다른 배열 메서드를 적용할 수 있습니다.
+
+```js
+const arr = [1, 2, 3, 4, 5];
+console.log(arr.with(2, 6).map((x) => x ** 2)); // [1, 4, 36, 16, 25]
+```
+
+### 희소 배열에서 with() 사용하기
+
+`with()` 메서드는 언제나 밀집 배열을 생성합니다.
+
+```js
+const arr = [1, , 3, 4, , 6];
+console.log(arr.with(0, 2)); // [2, undefined, 3, 4, undefined, 6]
+```
+
+### 배열이 아닌 객체에서 with() 호출하기
+
+`with()` 메서드는 `this`의 `length` 속성을 읽습니다. 그리고 `this`의 정수 키 속성을 읽어서 새 배열에 쓰고,
+`value`는 주어진 `index`에 씁니다.
+
+```js
+const arrayLike = {
+ length: 3,
+ unrelated: "foo",
+ 0: 5,
+ 2: 4,
+};
+console.log(Array.prototype.with.call(arrayLike, 0, 1));
+// [ 1, undefined, 4 ]
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [Polyfill of `Array.prototype.with` in `core-js`](https://github.com/zloirock/core-js#change-array-by-copy)
+- {{jsxref("Array.prototype.toReversed()")}}
+- {{jsxref("Array.prototype.toSorted()")}}
+- {{jsxref("Array.prototype.toSpliced()")}}
+- {{jsxref("TypedArray.prototype.with()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/symbol/for/index.md b/files/ko/web/javascript/reference/global_objects/symbol/for/index.md
index 7ecc0456f86783..cc0178e6e4aa9a 100644
--- a/files/ko/web/javascript/reference/global_objects/symbol/for/index.md
+++ b/files/ko/web/javascript/reference/global_objects/symbol/for/index.md
@@ -1,21 +1,24 @@
---
title: Symbol.for()
slug: Web/JavaScript/Reference/Global_Objects/Symbol/for
+l10n:
+ sourceCommit: f3df52530f974e26dd3b14f9e8d42061826dea20
---
{{JSRef}}
-**`Symbol.for(key)`** 메서드는 주어진 키를 사용해 런타임 범위의 심볼 레지스트리에서 존재하는 심볼을 찾고, 존재할 경우 이를 반환합니다. 존재하지 않는 경우에는 해당 키를 사용해 전역 심볼 레지스트리에 새로운 심볼을 생성합니다.
+**`Symbol.for(key)`** 메서드는 주어진 키를 사용해 런타임 범위의 심볼 레지스트리에서 존재하는 심볼을 찾고,
+존재할 경우 이를 반환합니다. 존재하지 않는 경우에는 해당 키를 사용해 전역 심볼 레지스트리에 새로운 심볼을 생성합니다.
{{EmbedInteractiveExample("pages/js/symbol-for.html")}}
## 구문
-```js
-Symbol.for(key);
+```js-nolint
+Symbol.for(key)
```
-### 파라미터
+### 매개변수
- `key`
- : 문자열, 필수. 심볼에 대한 키(심볼을 설명하기 위해서도 사용됨).
@@ -26,16 +29,10 @@ Symbol.for(key);
## 설명
-`Symbol()`과 대조적으로, `Symbol.for()` 함수는 전역 심볼 레지스트리 목록에서 사용 가능한 심볼을 생성합니다. `Symbol.for()`는 호출할 때마다 새로운 심볼을 생성하지는 않으며 레지스트리에서 주어진 `key`를 갖는 심볼이 이미 존재하는지를 먼저 확인합니다. 존재하는 경우 해당하는 심볼이 반환됩니다. 주어진 키를 갖는 심볼이 존재하지 않는 경우, `Symbol.for()`는 새로운 전역 심볼을 생성합니다.
-
-### 전역 심볼 레지스트리
-
-전역 심볼 레지스트리는 다음 레코드 구조를 갖는 목록이며 비어있는 상태로 초기화됩니다.
-
-| 필드명 | 값 |
-| ---------- | --------------------------------------- |
-| [[key]] | 심볼을 구분하는데 사용되는 문자열 키. |
-| [[symbol]] | 전역으로 저장되는 심볼. |
+`Symbol()`과 대조적으로, `Symbol.for()` 함수는 전역 심볼 레지스트리 목록에서 사용 가능한 심볼을 생성합니다.
+`Symbol.for()`는 호출할 때마다 새로운 심볼을 생성하지는 않으며 레지스트리에서 주어진 `key`를 갖는 심볼이
+이미 존재하는지를 먼저 확인합니다. 존재하는 경우 해당하는 심볼이 반환됩니다.
+주어진 키를 갖는 심볼이 존재하지 않는 경우, `Symbol.for()`는 새로운 전역 심볼을 생성합니다.
## 예제
diff --git a/files/ko/web/javascript/reference/global_objects/symbol/toprimitive/index.md b/files/ko/web/javascript/reference/global_objects/symbol/toprimitive/index.md
new file mode 100644
index 00000000000000..a319ebfb78174d
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/symbol/toprimitive/index.md
@@ -0,0 +1,76 @@
+---
+title: Symbol.toPrimitive
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive
+l10n:
+ sourceCommit: 427e8d03276b4915c08c5f0541452fb1c830c295
+---
+
+{{JSRef}}
+
+**`Symbol.toPrimitive`** 정적 데이터 속성은 [잘 알려진 심볼](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol#잘_알려진_심볼) `@@toPrimitive`를 나타냅니다.
+모든 [타입 강제 변환](/ko/docs/Web/JavaScript/Data_structures#type_coercion) 알고리즘은 객체에서 이 심볼을 찾아서 선호하는 유형을 허용하고 객체의 원시 표현을 반환하는 메서드를 찾은 다음 객체의 `valueOf()` 및 `toString()` 메서드를 다시 사용합니다.
+
+{{EmbedInteractiveExample("pages/js/symbol-toprimitive.html")}}
+
+## 값
+
+잘 알려진 심볼 `@@toPrimitive`.
+
+{{js_property_attributes(0, 0, 0)}}
+
+## 설명
+
+함수 값으로 사용되는 `Symbol.toPrimitive` 속성의 도움으로 객체를 원시 값으로 변환할 수 있습니다.
+함수는 결과로 나온 원시 값의 선호 유형을 지정하는 문자열 인수 `hint`와 함께 호출됩니다. `hint` 인수는 `"number"` `"string"`, `"default"`중 하나일 수 있습니다.
+
+`"number"` 힌트는 [숫자 강제](/ko/docs/Web/JavaScript/Data_structures#numeric_coercion) 알고리즘에서 사용됩니다. `"string"` 힌트는 [문자열 강제](/ko/docs/Web/JavaScript/Reference/Global_Objects/String#string_coercion) 알고리즘에서 사용됩니다. `"default"` 힌트는 [원시형 강제](/ko/docs/Web/JavaScript/Data_structures#primitive_coercion) 알고리즘에서 사용됩니다. `hint`는 [`Symbol.prototype[@@toPrimitive]()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive)와 같이 선호 사항정도로만 작용하며, 구현은 이를 무시할 수 있습니다. 언어에서는 `hint`와 결과 유형 간의 정렬을 강제하지 않지만, `[@@toPrimitive]()`는 원시형을 반환해야 하며, 그렇지 않으면 {{jsxref("TypeError")}}가 발생합니다.
+
+`@@toPrimitive` 속성이 없는 객체는 `valueOf()` 및 `toString()` 메서드를 다른 순서로 호출하여 원시형으로 변환되며, 이에 대한 자세한 설명은 [타입 강제](/ko/docs/Web/JavaScript/Data_structures#type_coercion) 섹션에서 확인할 수 있습니다.
+`@@toPrimitive`를 사용하면 윈시형 변환 절차를 완전히 제어할 수 있습니다. 예를 들어, [`Date.prototype[@@toPrimitive]`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive)는 `"default"`를 `"string"`으로 취급하여 `valueOf()` 대신 `toString()`을 호출합니다.
+[`Symbol.prototype[@@toPrimitive]`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive)는 힌트를 무시하고 항상 심볼을 반환하므로 문자열 컨텍스트에서도 {{jsxref("Symbol.prototype.toString()")}}이 호출되지 않으며, `Symbol` 객체는 항상 [`String()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/String/String)을 통해 명시적으로 문자열로 변환해야 합니다.
+
+## 예제
+
+### 객체에서 변환된 원시값 수정하기
+
+다음 예제에서는 `Symbol.toPrimitive` 속성이 객체에서 변환된 원시값을 수정하는 방법을 설명합니다.
+
+```js
+// Symbol.toPrimitive 속성이 없는 객체.
+const obj1 = {};
+console.log(+obj1); // NaN
+console.log(`${obj1}`); // "[object Object]"
+console.log(obj1 + ""); // "[object Object]"
+
+// Symbol.toPrimitive 속성이 있는 객체.
+const obj2 = {
+ [Symbol.toPrimitive](hint) {
+ if (hint === "number") {
+ return 10;
+ }
+ if (hint === "string") {
+ return "hello";
+ }
+ return true;
+ },
+};
+console.log(+obj2); // 10 — hint is "number"
+console.log(`${obj2}`); // "hello" — hint is "string"
+console.log(obj2 + ""); // "true" — hint is "default"
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [Polyfill of `Symbol.toPrimitive` in `core-js`](https://github.com/zloirock/core-js#ecmascript-symbol)
+- [`Date.prototype[@@toPrimitive]()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive)
+- [`Symbol.prototype[@@toPrimitive]()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive)
+- {{jsxref("Object.prototype.toString()")}}
+- {{jsxref("Object.prototype.valueOf()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/symbol/tostring/index.md b/files/ko/web/javascript/reference/global_objects/symbol/tostring/index.md
new file mode 100644
index 00000000000000..c176f859a3526e
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/symbol/tostring/index.md
@@ -0,0 +1,72 @@
+---
+title: Symbol.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/toString
+l10n:
+ sourceCommit: f3df52530f974e26dd3b14f9e8d42061826dea20
+---
+
+{{JSRef}}
+
+**`toString()`** 메서드는 지정된 심볼 값을 나타내는 문자열을 반환합니다.
+
+{{EmbedInteractiveExample("pages/js/symbol-prototype-tostring.html")}}
+
+## 구문
+
+```js-nolint
+toString()
+```
+
+### 반환 값
+
+지정된 심볼 값을 나타내는 문자열.
+
+## 설명
+
+{{jsxref("Symbol")}} 객체는 {{jsxref("Object")}}의 `toString` 메서드를 재정의하며,
+{{jsxref("Object.prototype.toString()")}}을 상속하지 않습니다.
+`Symbol` 값의 경우 `toString` 메서드는 `"Symbol(description)"` 형식의 설명 문자열을 반환하며,
+여기서 `description`은 심볼의 [설명](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/description)입니다.
+
+`toString()` 메서드는 `this` 값이 `Symbol` 원시 값 또는 래퍼 객체여야 합니다. 이 외의 `this` 값에 대해서는 심볼 값으로 강제 변환하지 않고 {{jsxref("TypeError")}}를 던집니다.
+
+`Symbol`에는 [`[@@toPrimitive]()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive) 메서드가 있기 때문에 `Symbol` 객체를 [문자열로 강제 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/String#string_coercion)할 때 이 메서드가 항상 `toString()`보다 우선합니다.
+그러나 `Symbol.prototype[@@toPrimitive]()`는 심볼 원시 값을 반환하고 심볼 원시 값은 문자열로 암시적으로 변환될 때 {{jsxref("TypeError")}}가 발생하기 때문에 언어에서 `toString()` 메서드는 절대 암시적으로 호출되지 않습니다.
+심볼을 문자열화하려면 해당 심볼의 `toString()` 메서드를 명시적으로 호출하거나 [`String()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/String/String#using_string_to_stringify_a_symbol) 함수를 사용해야 합니다.
+
+## 예제
+
+### toString() 사용하기
+
+```js
+Symbol("desc").toString(); // "Symbol(desc)"
+
+// 잘 알려진 심볼
+Symbol.iterator.toString(); // "Symbol(Symbol.iterator)"
+
+// 글로벌 심볼
+Symbol.for("foo").toString(); // "Symbol(foo)"
+```
+
+### 암시적 toString() 호출
+
+JavaScript가 심볼 래퍼 객체에서 [`[@@toPrimitive]()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive) 대신 `toString()`을 암시적으로 호출하도록 하는 유일한 방법은 `@@toPrimitive` 메서드를 먼저 [삭제](/ko/docs/Web/JavaScript/Reference/Operators/delete) 처리하는 방법 뿐 입니다.
+
+> **주의:** 실제로 이 작업을 수행하지 마세요. 정확히 무엇을 하고 있는지 알지 못하면 기본 제공 객체를 변경하지 마세요.
+
+```js
+delete Symbol.prototype[Symbol.toPrimitive];
+console.log(`${Object(Symbol("foo"))}`); // "Symbol(foo)"
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("Object.prototype.toString()")}}
diff --git a/files/ko/web/media/formats/video_codecs/index.md b/files/ko/web/media/formats/video_codecs/index.md
index 0654d8c0346156..d2aa94314ba030 100644
--- a/files/ko/web/media/formats/video_codecs/index.md
+++ b/files/ko/web/media/formats/video_codecs/index.md
@@ -22,16 +22,16 @@ original_slug: Web/Media/Formats/비디오코덱
| 코덱 이름 (축약어) | 전체 코덱 이름 | 지원하는 컨테이너 |
| -------------------------------------------------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| [AV1](/ko/docs/Web/Media/Formats/Video_codecs#AV1) | AOMedia Video 1 | [MP4](/ko/docs/Web/Media/Formats/Containers#MP4), [WebM](/ko/docs/Web/Media/Formats/Containers#WebM) |
-| [AVC (H.264)]() | Advanced Video Coding | [3GP](/ko/docs/Web/Media/Formats/Containers#3GP), [MP4](/ko/docs/Web/Media/Formats/Containers#MP4), [WebM](/ko/docs/Web/Media/Formats/Containers#WebM) |
-| [H.263](/ko/docs/Web/Media/Formats/Video_codecs#H.263) | H.263 Video | [3GP](/ko/docs/Web/Media/Formats/Containers#3GP) |
-| [HEVC (H.265)](#HEVC) | High Efficiency Video Coding | [MP4](/ko/docs/Web/Media/Formats/Containers#MP4) |
+| [AV1](#av1) | AOMedia Video 1 | [MP4](/ko/docs/Web/Media/Formats/Containers#MP4), [WebM](/ko/docs/Web/Media/Formats/Containers#WebM) |
+| [AVC (H.264)](#avc_h.264) | Advanced Video Coding | [3GP](/ko/docs/Web/Media/Formats/Containers#3GP), [MP4](/ko/docs/Web/Media/Formats/Containers#MP4), [WebM](/ko/docs/Web/Media/Formats/Containers#WebM) |
+| [H.263](#h.263) | H.263 Video | [3GP](/ko/docs/Web/Media/Formats/Containers#3GP) |
+| [HEVC (H.265)](#hevc_h.265) | High Efficiency Video Coding | [MP4](/ko/docs/Web/Media/Formats/Containers#MP4) |
| [MP4V-ES](#mp4v-es) | MPEG-4 Video Elemental Stream | [3GP](/ko/docs/Web/Media/Formats/Containers#3GP), [MP4](/ko/docs/Web/Media/Formats/Containers#MP4) |
-| [MPEG-1](#mpeg-1) | MPEG-1 Part 2 Visual | [MPEG](/ko/docs/Web/Media/Formats/Containers#MPEGMPEG-2), [QuickTime](/ko/docs/Web/Media/Formats/Containers#QuickTime) |
-| [MPEG-2](#mpeg-2) | MPEG-2 Part 2 Visual | [MP4](/ko/docs/Web/Media/Formats/Containers#MP4), [MPEG](/ko/docs/Web/Media/Formats/Containers#MPEGMPEG-2), [QuickTime](/ko/docs/Web/Media/Formats/Containers#QuickTime) |
-| [Theora](/ko/docs/Web/Media/Formats/Video_codecs#Theora) | Theora | [Ogg](/ko/docs/Web/Media/Formats/Containers#Ogg) |
-| [VP8](/ko/docs/Web/Media/Formats/Video_codecs#VP8) | Video Processor 8 | [3GP](/ko/docs/Web/Media/Formats/Containers#3GP), [Ogg](/ko/docs/Web/Media/Formats/Containers#Ogg), [WebM](/ko/docs/Web/Media/Formats/Containers#WebM) |
-| [VP9](/ko/docs/Web/Media/Formats/Video_codecs#VP9) | Video Processor 9 | [MP4](/ko/docs/Web/Media/Formats/Containers#MP4), [Ogg](/ko/docs/Web/Media/Formats/Containers#Ogg), [WebM](/ko/docs/Web/Media/Formats/Containers#WebM) |
+| [MPEG-1](#mpeg-1_part_2_video) | MPEG-1 Part 2 Visual | [MPEG](/ko/docs/Web/Media/Formats/Containers#MPEGMPEG-2), [QuickTime](/ko/docs/Web/Media/Formats/Containers#QuickTime) |
+| [MPEG-2](#mpeg-2_part_2_video) | MPEG-2 Part 2 Visual | [MP4](/ko/docs/Web/Media/Formats/Containers#MP4), [MPEG](/ko/docs/Web/Media/Formats/Containers#MPEGMPEG-2), [QuickTime](/ko/docs/Web/Media/Formats/Containers#QuickTime) |
+| [Theora](#theora) | Theora | [Ogg](/ko/docs/Web/Media/Formats/Containers#Ogg) |
+| [VP8](#vp8) | Video Processor 8 | [3GP](/ko/docs/Web/Media/Formats/Containers#3GP), [Ogg](/ko/docs/Web/Media/Formats/Containers#Ogg), [WebM](/ko/docs/Web/Media/Formats/Containers#WebM) |
+| [VP9](#vp9) | Video Processor 9 | [MP4](/ko/docs/Web/Media/Formats/Containers#MP4), [Ogg](/ko/docs/Web/Media/Formats/Containers#Ogg), [WebM](/ko/docs/Web/Media/Formats/Containers#WebM) |
## 인코딩 관여 요소
@@ -288,7 +288,7 @@ original_slug: Web/Media/Formats/비디오코덱
### AV1
-**AOMedia Video 1** (**AV1**) 코덱은 [Alliance for Open Media](https://aomedia.org/) 기관이 인터넷 비디오를 위해 개발한 오픈 포맷입니다. [VP9](#vp9), [H.265/HEVC](#hevc) 보다 압축율이 높으며, [AVC]()보다 50% 이상 압축율이 높습니다. AV1은 완전한 로열티 프리이며 {{HTMLElement("video")}} 엘리먼트와 [WebRTC](/ko/docs/Web/API/WebRTC_API)에서 사용하기 위해 설계하였습니다.
+**AOMedia Video 1** (**AV1**) 코덱은 [Alliance for Open Media](https://aomedia.org/) 기관이 인터넷 비디오를 위해 개발한 오픈 포맷입니다. [VP9](#vp9), [H.265/HEVC](#hevc_h.265) 보다 압축율이 높으며, [AVC](#avc_h.264)보다 50% 이상 압축율이 높습니다. AV1은 완전한 로열티 프리이며 {{HTMLElement("video")}} 엘리먼트와 [WebRTC](/ko/docs/Web/API/WebRTC_API)에서 사용하기 위해 설계하였습니다.
AV1은 현재 세 프로파일을 제공하며:**main**, **high**, **professional** 다양한 색 깊이와 크로마 서브샘플링을 지원합니다. 또한 **레벨** 역시 정의하여 각 레벨은 비디오 속성의 범위를 제한하고 있습니다. 비디오 속성에는 프레임 면적, 픽셀간 이미지 영역, 출력 및 디코딩 속도, 평균/최대 비트 레이트, 인코딩/디코딩 시 사용하는 타일 개수와 항목 등이 있습니다.
@@ -559,7 +559,7 @@ AVC는 유료 포맷이지만 무수한 특허들이 개입한 여러 단체에
Safari
-
AVC/H.265 지원
+
AVC / H.264 지원
4
12
@@ -686,7 +686,7 @@ H.263는 Telenor, Fujitsu, Motorola, Samsung, Hitachi, Polycom, Qualcomm 등 수
Safari
-
H.263 support
+
H.263 지원
No
No
@@ -742,7 +742,7 @@ H.263는 Telenor, Fujitsu, Motorola, Samsung, Hitachi, Polycom, Qualcomm 등 수
### HEVC (H.265)
-**[High Efficiency Video Coding](http://hevc.info/)** (**HVEC**) 코덱은 ITU의 **H.265** 및 MPEG-H Part 2 (MPEG-4 후속 작업으로 개발 진행 중). HEVC는 현대 프로세서의 특정점을 십분 활용하여 소프트웨어가 (8K 비디오를 포함한) 초고해상도 비디오 인코딩/디코딩을 효율적으로 할 수 있도록 설계하였습니다. 이론적으로 HEVC는 [AVC](#avc)와 유사한 품질을 유지하면서 절반 크기로 압축할 수 있습니다.
+**[High Efficiency Video Coding](http://hevc.info/)** (**HEVC**) 코덱은 ITU의 **H.265** 및 MPEG-H Part 2 (MPEG-4 후속 작업으로 개발 진행 중). HEVC는 현대 프로세서의 특정점을 십분 활용하여 소프트웨어가 (8K 비디오를 포함한) 초고해상도 비디오 인코딩/디코딩을 효율적으로 할 수 있도록 설계하였습니다. 이론적으로 HEVC는 [AVC](#avc_h.264)와 유사한 품질을 유지하면서 절반 크기로 압축할 수 있습니다.
예를들어 각 코딩 트리 유닛(CTU, 이전 세대 코덱의 매크로블록과 유사) 샘플의 휘도 값 트리와 색차 값 트리, 필요한 문법 요소로 구성되어 있습니다. 이는 멀티 코어 환경을 쉽게 활용할 수 있게 합니다.
@@ -861,17 +861,11 @@ HEVC는 상용 포맷이며 여러 특허로 보호받고 있습니다. [MPEG LA
@@ -1105,7 +1099,7 @@ HEVC는 상용 포맷이며 여러 특허로 보호받고 있습니다. [MPEG LA
Safari
-
MPEG-1 support
+
MPEG-1 지원
No
No
No
@@ -1275,7 +1269,7 @@ MPEG-2는 서로 다른 스펙을 가진 여러 프로파일이 있습니다.
Safari
-
MPEG-2 support
+
MPEG-2 지원
No
No
No
@@ -1399,7 +1393,7 @@ Theora의 단점 중 하나는 오직 8 bit 컬러 모드만을 지원하여 컬
Safari
-
Theora support
+
Theora 지원
3
Yes[2]
@@ -1447,7 +1441,7 @@ Theora의 단점 중 하나는 오직 8 bit 컬러 모드만을 지원하여 컬
### VP8
-**Video Processor 8** (**VP8**) 코덱은 최초 On2 Technologies가 개발했습니다. Google은 On2 인수 후, VP8 관련된 특허와 무관하게 완전한 오픈 로열티-프리 라이선스로 출시했습니다. 압축률과 품질의 면에서 VP8은 [AVC](#avc)에 견줄만 합니다.
+**Video Processor 8** (**VP8**) 코덱은 최초 On2 Technologies가 개발했습니다. Google은 On2 인수 후, VP8 관련된 특허와 무관하게 완전한 오픈 로열티-프리 라이선스로 출시했습니다. 압축률과 품질의 면에서 VP8은 [AVC](#avc_h.264)에 견줄만 합니다.
브라우저가 지원한다면 V8에서 알파 채널을 쓸 수 있으며 비디오 뒤의 백그라운드 이미지를 알파 채널 픽셀과 겹쳐 볼 수도 있습니다.
@@ -1503,7 +1497,7 @@ HTML 콘텐츠로써 특히 [WebM](/ko/docs/Web/Media/Formats/Containers#WebM)
Safari
-
VP8 support
+
VP8 지원
25
14[1]
@@ -1727,7 +1721,7 @@ Safari 지원이 빠져있지만 WebM 컨테이너를 쓸 수 있고 Safari 사
```
-2. **[MP4](/ko/docs/Web/Media/Formats/Containers#MP4)** 컨테이너에 비디오 코덱은 **[AVC](#avc)** (**H.264**) 오디오 코덱은 **[AAC](/ko/docs/Web/Media/Formats/Audio_codecs#AAC)** 를 사용합니다. MP4 컨테이너에 AVC, AAC 조합은 모든 주요 브라우저에서 폭넓게 지원하는 조합이며 대부분의 유즈케이스에서 좋은 품질을 보여주기 때문입니다. 하지만 라이선스 요구사항에 대해 컴플라이언스 이슈는 없는 지 확인이 필요하죠.
+2. **[MP4](/ko/docs/Web/Media/Formats/Containers#MP4)** 컨테이너에 비디오 코덱은 **[AVC](#avc_h.264)** (**H.264**) 오디오 코덱은 **[AAC](/ko/docs/Web/Media/Formats/Audio_codecs#AAC)** 를 사용합니다. MP4 컨테이너에 AVC, AAC 조합은 모든 주요 브라우저에서 폭넓게 지원하는 조합이며 대부분의 유즈케이스에서 좋은 품질을 보여주기 때문입니다. 하지만 라이선스 요구사항에 대해 컴플라이언스 이슈는 없는 지 확인이 필요하죠.
```html