Merge branch 'main' into content-sync-ko

files/ko/web/javascript/reference/global_objects/arraybuffer/arraybuffer/index.md

@@ -1,43 +1,73 @@
 ---
 title: ArrayBuffer() 생성자
 slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/ArrayBuffer
+l10n:
+  sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a
 ---
 
 {{JSRef}}
 
 **`ArrayBuffer()`** 생성자는 {{jsxref("ArrayBuffer")}} 객체를 생성합니다.
 
-{{EmbedInteractiveExample("pages/js/arraybuffer-constructor.html")}}
+{{EmbedInteractiveExample("pages/js/arraybuffer-constructor.html", "shorter")}}
 
 ## 구문
 
-```js
-new ArrayBuffer(length);
+```js-nolint
+new ArrayBuffer(length)
+new ArrayBuffer(length, options)
 ```
 
+> **참고:** `ArrayBuffer()`는 오직 [`new`](/ko/docs/Web/JavaScript/Reference/Operators/new)로만 생성할 수 있습니다. `new` 없이 호출을 시도하면 {{jsxref("TypeError")}} 예외가 발생합니다.
+
 ### 매개변수
 
 - `length`
   - : 생성할 `ArrayBuffer`의 바이트 크기.
+- `length`
+  - : 생성할 배열 버퍼의 바이트 단위의 크기.
+- `options` {{optional_inline}}
+  - : 다음 속성을 포함하는 객체.
+    - `maxByteLength` {{optional_inline}}
+      - : 배열 버퍼가 크기를 재조정할 수 있는 바이트 단위 최대 크기.
 
 ### 반환 값
 
 지정한 크기를 가진 새로운 `ArrayBuffer` 객체. 내용은 모두 0으로 초기화됩니다.
 
+지정된 크기의 새 `ArrayBuffer` 객체입니다. `maxByteLength` 속성이 명시되어 있을 경우 이 값으로 {{jsxref("ArrayBuffer/maxByteLength", "maxByteLength")}} 속성이 설정됩니다. 그 내용은 0으로 초기화됩니다.
+
 ### 예외
 
-`length`가 {{jsxref("Number.MAX_SAFE_INTEGER")}}보다 크거나, 음수면 {{jsxref("RangeError")}}.
+- {{jsxref("RangeError")}}
+  - : 다음 중 한 가지 경우에 발생합니다.
+    - `length` 혹은 `maxByteLength`가 {{jsxref("Number.MAX_SAFE_INTEGER")}} (≥ 2<sup>53</sup>)보다 크거나 음수일 경우
+    - `length`가 `maxByteLength`보다 클 경우.
 
 ## 예제
 
-아래 예제 코드는 8바이트 버퍼를 생성한 후 {{jsxref("Int32Array")}} 뷰로 그 버퍼를 참조합니다.
+### ArrayBuffer 생성하기
+
+이 예제에서는 버퍼를 참조하는 {{jsxref("Int32Array")}} 뷰를 사용하여 8바이트 버퍼를 만듭니다.
+
+```js
+const buffer = new ArrayBuffer(8);
+const view = new Int32Array(buffer);
+```
+
+### 크기 조절이 가능한 ArrayBuffer 생성하기
+
+이 예제에서는 최대 16바이트까지 크기를 조정할 수 있는 8바이트 버퍼를 생성한 다음 {{jsxref("ArrayBuffer/resize", "resize()")}} 이를 12바이트로 조정합니다.
 
 ```js
-var buffer = new ArrayBuffer(8);
-var view = new Int32Array(buffer);
+const buffer = new ArrayBuffer(8, { maxByteLength: 16 });
+
+buffer.resize(12);
 ```
 
-## 명세
+> **참고:** `maxByteLength`는 사용 사례에 맞게 가능한 가장 작은 값으로 설정하는 것이 좋습니다. 메모리 부족 오류의 위험을 줄이려면 `1073741824`(1GB)를 초과하지 않아야 합니다.
+
+## 명세서
 
 {{Specifications}}
 
@@ -47,5 +77,6 @@ var view = new Int32Array(buffer);
 
 ## 같이 보기
 
-- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Typed_arrays)
+- [`core-js`에서의 `ArrayBuffer` 폴리필](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
+- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Typed_arrays) 안내서
 - {{jsxref("SharedArrayBuffer")}}

files/ko/web/javascript/reference/global_objects/arraybuffer/symbol.species/index.md

@@ -1,16 +1,15 @@
 ---
-title: ArrayBuffer[@@species]
+title: ArrayBuffer[Symbol.species]
 slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/Symbol.species
-original_slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species
 l10n:
-  sourceCommit: bf81c9ed7de8cfd94cf1fc7f77e23b987f753a8b
+  sourceCommit: 6fbdb78c1362fae31fbd545f4b2d9c51987a6bca
 ---
 
 {{JSRef}}
 
-**`ArrayBuffer[@@species]`** 정적 접근자 속성은 배열 버퍼 메서드에서 반환 값을 생성하는데 사용되는 생성자를 반환합니다.
+**`ArrayBuffer[Symbol.species]`** 정적 접근자 속성은 배열 버퍼 메서드에서 반환 값을 생성하는데 사용되는 생성자를 반환합니다.
 
-> **경고:** `@@species` 존재는 임의의 코드가 실행될 수 있게하며 보안 취약점이 발생할 수 있습니다. 또한 어떠한 최적화를 훨씬 어렵게 만들 수 있습니다. 엔진 구현자들은 [이 기능을 제거할지 여부를 검토 중](https://github.com/tc39/proposal-rm-builtin-subclassing) 입니다. 가능하면 이 기능에 의존하지 마시기 바랍니다.
+> **경고:** `Symbol.species` 존재는 임의의 코드가 실행될 수 있게하며 보안 취약점이 발생할 수 있습니다. 또한 어떠한 최적화를 훨씬 어렵게 만들 수 있습니다. 엔진 구현자들은 [이 기능을 제거할지 여부를 검토 중](https://github.com/tc39/proposal-rm-builtin-subclassing) 입니다. 가능하면 이 기능에 의존하지 마시기 바랍니다.
 
 ## 구문
 
@@ -20,11 +19,11 @@ ArrayBuffer[Symbol.species]
 
 ### 반환 값
 
-`get @@species`이 호출된 생성자(`this`)의 값입니다. 반환 값은 새 배열 버퍼를 생성하는 배열 버퍼 메서드에서 반환 값을 구성하는 데 사용됩니다.
+`get [Symbol.species]`이 호출된 생성자(`this`)의 값입니다. 반환 값은 새 배열 버퍼를 생성하는 배열 버퍼 메서드에서 반환 값을 구성하는 데 사용됩니다.
 
 ## 설명
 
-`@@species` 접근자 속성은 `ArrayBuffer` 객체를 생성하기 위한 기본 생성자를 반환합니다. 하위 클래스 생성자는 생성자 할당을 변경하기 위해 재정의 할 수 있습니다. 기본 구현은 기본적으로 아래와 같습니다.
+`Symbol.species` 접근자 속성은 `ArrayBuffer` 객체를 생성하기 위한 기본 생성자를 반환합니다. 하위 클래스 생성자는 생성자 할당을 변경하기 위해 재정의 할 수 있습니다. 기본 구현은 기본적으로 아래와 같습니다.
 
 ```js
 // 예시를 위한 가상의 구현
@@ -35,20 +34,20 @@ class ArrayBuffer {
 }
 ```
 
-이 다형성 구현으로 인해 파생된 하위 클래스의 `@@species`은 기본적으로 생성자 자체도 반환합니다.
+이 다형성 구현으로 인해 파생된 하위 클래스의 `Symbol.species`은 기본적으로 생성자 자체도 반환합니다.
 
 ```js
 class SubArrayBuffer extends ArrayBuffer {}
 SubArrayBuffer[Symbol.species] === SubArrayBuffer; // true
 ```
 
-기존 객체를 변경하지 않고 새 배열 버퍼 인스턴스를 반환하는 배열 버퍼 메서드를 호출할 때(예를 들어 [`slice()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice)) 객체의 `constructor[@@species]`에 접근하게 됩니다. 반환된 생성자는 배열 버퍼 메서드의 반환값을 구성하는 데 사용됩니다.
+기존 객체를 변경하지 않고 새 배열 버퍼 인스턴스를 반환하는 배열 버퍼 메서드를 호출할 때(예를 들어 [`slice()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice)) 객체의 `constructor[Symbol.species]`에 접근하게 됩니다. 반환된 생성자는 배열 버퍼 메서드의 반환값을 구성하는 데 사용됩니다.
 
 ## 예제
 
 ### 일반적인 객체에서의 Species
 
-`@@species` 속성은 기본 생성자 함수, 즉 `ArrayBuffer`의 `ArrayBuffer` 생성자를 반환합니다.
+`Symbol.species` 속성은 기본 생성자 함수, 즉 `ArrayBuffer`의 `ArrayBuffer` 생성자를 반환합니다.
 
 ```js
 ArrayBuffer[Symbol.species]; // function ArrayBuffer()

files/ko/web/javascript/reference/global_objects/dataview/setfloat16/index.md

@@ -0,0 +1,64 @@
+---
+title: DataView.prototype.setFloat16()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/setFloat16
+l10n:
+  sourceCommit: fb442649a7e91a177a582a3e9c6e1a95a9e8dda5
+---
+
+{{JSRef}}
+
+{{jsxref("DataView")}} 인스턴스의 **`setFloat16()`** 메서드는 숫자를 받아 이 `DataView`의 지정된 바이트 오프셋의 2 바이트의 공간에 16비트 실수로 저장합니다. 정렬 제약 조건은 없으며, 범위 내의 모든 오프셋에서 멀티바이트 값을 저장할 수 있습니다.
+
+{{EmbedInteractiveExample("pages/js/dataview-setfloat16.html")}}
+
+## 구문
+
+```js-nolint
+setFloat16(byteOffset, value)
+setFloat16(byteOffset, value, littleEndian)
+```
+
+### 매개변수
+
+- `byteOffset`
+  - : 데이터를 저장할 데이터 뷰의 시작점으로부터의 바이트 단위의 오프셋.
+- `value`
+  - : 저장할 값. 어떻게 값이 바이트로 인코딩되는지는 [값 인코딩 및 정규화](/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#value_encoding_and_normalization)를 보시기 바랍니다.
+- `littleEndian` {{optional_inline}}
+  - : {{Glossary("Endianness", "리틀 엔디언 혹은 빅 엔디언")}} 형식으로 데이터를 저장할지 여부를 나타냅니다. `false` 혹은 `undefined`이라면 빅 엔디언 값으로 저장합니다.
+
+### 반환 값
+
+{{jsxref("undefined")}}.
+
+### 예외
+
+- {{jsxref("RangeError")}}
+  - : `byteOffset`이 뷰의 끝을 넘어서 저장되어 있는 경우 발생합니다.
+
+## 예제
+
+### setFloat16() 사용하기
+
+```js
+const buffer = new ArrayBuffer(10);
+const dataview = new DataView(buffer);
+dataview.setFloat16(0, 3);
+dataview.getFloat16(1); // 0
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [`core-js`에서의 `DataView.prototype.setFloat16` 안내서](https://github.com/zloirock/core-js#float16-methods)
+- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Guide/Typed_arrays) 안내서
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("Float16Array")}}

files/zh-cn/games/anatomy/index.md

@@ -37,7 +37,8 @@ window.main = () => {
 main(); // 开始循环
 ```
 
-> **备注：** 在这里讨论的每个 `main()` 方法中，在执行循环内容之前，我们会递归调用一个新的 `requestAnimationFrame`，这不是随意的，它被认为是最佳实践。如果你的当前帧错过了它的垂直同步窗口的周期，你也在下一个帧通过 `requestAnimationFrame` 尽早的调用 `main()`，从而确保浏览器能够及时地执行。
+> [!NOTE]
+> 在这里讨论的每个 `main()` 方法中，在执行循环内容之前，我们会递归调用一个新的 `requestAnimationFrame`，这不是随意的，它被认为是最佳实践。如果你的当前帧错过了它的垂直同步窗口的周期，你也在下一个帧通过 `requestAnimationFrame` 尽早的调用 `main()`，从而确保浏览器能够及时地执行。
 
 上面的代码块有两个语句。第一个语句创建一个名为 `main()` 中的全局变量的函数。这个函数做一些工作，也告诉浏览器在下一帧通过 `window.requestAnimationFrame()` 调用本身。第二个语句调用第一个语句中定义的 `main()` 函数。因为 `main()`中在第二个语句中被调用一次，而每次调用都将自身又放置到下一个帧的执行队列中，因此 `main()` 的调用与你的帧率同步。
 
@@ -73,7 +74,8 @@ main(); // 开始循环
 
 当浏览器遇到这个 IIFE 时，它将定义你的主循环，并立即将其加入下一个帧的更新队列中。`main`（或 `main()` 方法）不会被附加到任何对象，在应用程序的其他地方仍是一个有效的未使用的名称，仍可以自由地定义为其他的东西。
 
-> **备注：** 在实践中，更常见的终止下一个 `requestAnimationFrame()` 方式是使用 if 语句，而不是调用`cancelAnimationFrame()`。
+> [!NOTE]
+> 在实践中，更常见的终止下一个 `requestAnimationFrame()` 方式是使用 if 语句，而不是调用`cancelAnimationFrame()`。
 
 对于第二个问题，要终止循环，你需要调用 `window.cancelAnimationFrame()` 来取消 `main()` 的调用。该方法需要传入你最后一次调用 `requestAnimationFrame()` 时返回的 ID。让我们假设你的游戏的函数和变量是建立在你称为 MyGame 的名称空间上。扩展我们的最后一个例子，主循环现在看起来是这样的：
 
@@ -122,7 +124,8 @@ window.cancelAnimationFrame(MyGame.stopMain);
 
 当我们讨论预算时，许多网络浏览器都有一个称为高分辨率时间的工具。{{jsxref("Date")}} 对象不再是计时事件的识别方法，因为它非常不精确，可以由系统时钟进行修改。另一方面，高分辨率的时间计算自 `navigationStart`（当上一个文档被卸载时）的毫秒数。这个值以小数的精度返回，精确到千分之一毫秒。它被称为{{ domxref("DOMHighResTimeStamp") }}，但是，无论出于什么目的和目的，都认为它是一个浮点数。
 
-> **备注：** 系统（硬件或软件）不能达到微秒精度，可以提供毫秒精度的最小值然而，如果他们能够做到这一点，他们就应该提供 0.001 毫秒的准确性。
+> [!NOTE]
+> 系统（硬件或软件）不能达到微秒精度，可以提供毫秒精度的最小值然而，如果他们能够做到这一点，他们就应该提供 0.001 毫秒的准确性。
 
 这个值本身并不太有用，因为它与一个相当无趣的事件相关，但它可以从另一个时间戳中减去，以便准确准确地确定这两个点之间的时间间隔。要获得这些时间戳中的一个，你可以调用 `window.performance.now()` 并将结果存储为一个变量。
 
@@ -161,7 +164,8 @@ var tNow = window.performance.now();
 
 你将需要对你的主循环作出艰难的决定：如何模拟准确的时间进度。如果你想要控制每一帧，那么你需要确定你的游戏更新和绘制的频率，你甚至可能希望以不同的速率进行更新和绘制。你还需要考虑如果用户的系统无法跟上工作负载，那么你还需考虑如何优雅降级，以保证性能。让我们首先假定你会在每次绘制时，同时处理用户的输入，并更新游戏状态。我们稍后再细讲。
 
-> **备注：** 改变主循环如何处理时间是非常困难的，在进行主循环之前，请仔细考虑你的需求。
+> [!NOTE]
+> 改变主循环如何处理时间是非常困难的，在进行主循环之前，请仔细考虑你的需求。
 
 ### 大多数浏览器游戏应该是什么样的
 
@@ -227,7 +231,8 @@ var tNow = window.performance.now();
 
 单独的更新和绘图方法可能如下面的示例。为了演示，该示例基于第三个项目符号，只是不使用 Web Workers 进行可读性（而且我们诚实地说可写性）。
 
-> **警告：** 这个例子，具体来说，需要进行技术审查。
+> [!WARNING]
+> 这个例子，具体来说，需要进行技术审查。
 
 <!-- prettier-ignore-start -->
 ```js

files/zh-cn/games/index.md

@@ -13,7 +13,8 @@ slug: Games
 
 我们同样提供了参考部分，因此你可以轻易地找到有关游戏开发所有常用的 API。
 
-> **备注：** 在创建一个网页游戏之前你至少需要掌握几种核心的 web 技术，例如 HTML、CSS 和 Javascript。你可以在[学习区](/zh-CN/docs/Learn)开始这些基础知识的学习。
+> [!NOTE]
+> 在创建一个网页游戏之前你至少需要掌握几种核心的 web 技术，例如 HTML、CSS 和 Javascript。你可以在[学习区](/zh-CN/docs/Learn)开始这些基础知识的学习。
 
 ## 将本地游戏移植到 web
 

files/zh-cn/games/publishing_games/game_distribution/index.md

@@ -65,7 +65,8 @@ HTML5 本身是多平台的，所以你只需要写一种代码就可以适配
 
 让我们看看针对不同平台和操作系统的市场/商店有哪些可用选项。
 
-> **备注：** 这些是最流行的发行平台，但这并不是说这些是唯一的选择。你也可以尝试找到一个对口的平台，并直接向那些对你的游戏感兴趣的观众推广你的游戏。在这里，你的创造力至关重要。
+> [!NOTE]
+> 这些是最流行的发行平台，但这并不是说这些是唯一的选择。你也可以尝试找到一个对口的平台，并直接向那些对你的游戏感兴趣的观众推广你的游戏。在这里，你的创造力至关重要。
 
 ### 网络商店
 

files/zh-cn/games/techniques/2d_collision_detection/index.md

@@ -50,7 +50,9 @@ rect2.bind("EnterFrame", function () {
 
 {{ EmbedLiveSample('轴对齐包围盒', '700', '300') }}
 
-> **备注：** [另一个不使用 Canvas 或外部库的示例](https://jsfiddle.net/jlr7245/217jrozd/3/)。
+> [!NOTE]
+>
+> [另一个不使用 Canvas 或外部库的示例](https://jsfiddle.net/jlr7245/217jrozd/3/)。
 
 ## 圆形碰撞
 
@@ -122,7 +124,9 @@ circle2.bind("EnterFrame", function () {
 
 {{ EmbedLiveSample('圆形碰撞', '700', '300') }}
 
-> **备注：** [另一个不使用 Canvas 或外部库的示例](https://jsfiddle.net/jlr7245/teb4znk0/20/)
+> [!NOTE]
+>
+> [另一个不使用 Canvas 或外部库的示例](https://jsfiddle.net/jlr7245/teb4znk0/20/)
 
 ## 分离轴定理
 

files/zh-cn/games/techniques/3d_collision_detection/index.md

@@ -19,7 +19,8 @@ l10n:
 
 ![旋转线结动画显示虚拟矩形框随着线结的旋转而收缩和扩大。盒子不旋转。](rotating_knot.gif)
 
-> **备注：** 参考[使用 Three.js 的包围体](/zh-CN/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js)，以了解该技术的实际实现。
+> [!NOTE]
+> 参考[使用 Three.js 的包围体](/zh-CN/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js)，以了解该技术的实际实现。
 
 ### 点与 AABB
 
@@ -98,7 +99,8 @@ function isPointInsideSphere(point, sphere) {
 }
 ```
 
-> **备注：** 上面的代码有一个平方根，计算开销可能很大。一种简单的优化是将平方距离与平方半径进行比较，以避免这种情况，所以优化后的不等式涉及 `distanceSqr < sphere.radius * sphere.radius`。
+> [!NOTE]
+> 上面的代码有一个平方根，计算开销可能很大。一种简单的优化是将平方距离与平方半径进行比较，以避免这种情况，所以优化后的不等式涉及 `distanceSqr < sphere.radius * sphere.radius`。
 
 ### 球体与球体
 

files/zh-cn/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md

@@ -7,7 +7,8 @@ slug: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js
 
 游戏中一个典型的 3D 场景 (最简单的那种) 包含标准的物品比如在坐标轴中的形状，一个实际可看到他们的摄像机，灯光和材质让其看起来不错，动画使其生动等等。 **Three.js**, 和其他 3D 库一样，提供内置的 helper 函数来帮助你尽可能快地实现通用的 3D 功能 . 在这篇文章我们会带你了解使用 Three 的基本知识，包含设置开发者环境，必要的 HTML 结构，Three.js 对象基础，以及如何创建一个基本的 demo.
 
-> **备注：** 我们选择 Three.js 因为它是最流行的[WebGL](/zh-CN/docs/Web/API/WebGL_API) 库之一，并且很容易上手。我们不会介绍任何其他更好的 WebGL 库，你可以自由选择其他库做尝试，比如 [CopperLicht](http://www.ambiera.com/copperlicht/index.html), [GLGE](http://www.glge.org/), [OSG.js](http://osgjs.org/), [O3D](https://code.google.com/p/o3d/), 或者其他你喜欢的库。
+> [!NOTE]
+> 我们选择 Three.js 因为它是最流行的[WebGL](/zh-CN/docs/Web/API/WebGL_API) 库之一，并且很容易上手。我们不会介绍任何其他更好的 WebGL 库，你可以自由选择其他库做尝试，比如 [CopperLicht](http://www.ambiera.com/copperlicht/index.html), [GLGE](http://www.glge.org/), [OSG.js](http://osgjs.org/), [O3D](https://code.google.com/p/o3d/), 或者其他你喜欢的库。
 
 ## 环境设置
 
@@ -99,7 +100,8 @@ There are other types of camera available (Cube, Orthographic), but the simplest
 
 You should experiment with these values and see how they change what you see in the scene.
 
-> **备注：** The distance values (e.g. for the camera z position) are unitless, and can basically be anything you deem suitable for your scene — milimeters, meters, feet, or miles — it's up to you.
+> [!NOTE]
+> The distance values (e.g. for the camera z position) are unitless, and can basically be anything you deem suitable for your scene — milimeters, meters, feet, or miles — it's up to you.
 
 ## Rendering the scene