` with a `contentEditable` attribute. That attribute allows us to focus on it and edit.
```html run
@@ -65,7 +65,7 @@ observer.observe(elem, {
```
-Now if we change the text inside `
`, we'll get a single mutation:
+If we run this code in the browser, then focus on the given `
` and change the text inside `
edit `, `console.log` will show one mutation:
```js
mutationRecords = [{
@@ -76,7 +76,7 @@ mutationRecords = [{
}];
```
-If we select and remove the `
edit ` altogether, we'll get multiple mutations:
+If we make more complex editing operations, e.g. remove the `
edit `, the mutation event may contain multiple mutation records:
```js
mutationRecords = [{
@@ -101,15 +101,15 @@ So, `MutationObserver` allows to react on any changes within DOM subtree.
When such thing may be useful?
-Imagine the situation when you attach a third-party script that adds useful functionality on the page, but also does something unwanted, e.g. shows ads `
Unwanted ads
`.
+Imagine the situation when you need to add a third-party script that contains useful functionality, but also does something unwanted, e.g. shows ads `
Unwanted ads
`.
Naturally, the third-party script provides no mechanisms to remove it.
-Using `MutationObserver`, we can detect when such element appears in our DOM and remove it. While leaving the useful functionality intact. Surely though, creators of that script won't be happy that you took their useful stuff and removed the ads.
+Using `MutationObserver`, we can detect when the unwanted element appears in our DOM and remove it.
There are other situations when a third-party script adds something into our document, and we'd like to detect, when it happens, to adapt our page, dynamically resize something etc.
-`MutationObserver` can easily handle this.
+`MutationObserver` allows to implement this.
## Usage for architecture
@@ -117,7 +117,7 @@ There are also situations when `MutationObserver` is good from architectural sta
Let's say we're making a website about programming. Naturally, articles and other materials may contain source code snippets.
-Such snippet in HTML markup looks like this:
+Such snippet in an HTML markup looks like this:
```html
...
@@ -128,16 +128,16 @@ Such snippet in HTML markup looks like this:
...
```
-Also we'll use a JavaScript highlighting library on our site, e.g. [Prism.js](https://prismjs.com/). A call to `Prism.highlightElem(pre)` examines the contents of such `pre` elements and adds into them special tags and styles for colored syntax highlighting, similar to what you see in examples here, at this page.
+For better readability and at the same time, to beautify it, we'll be using a JavaScript syntax highlighting library on our site, like [Prism.js](https://prismjs.com/). To get syntax highlighting for above snippet in Prism, `Prism.highlightElem(pre)` is called, which examines the contents of such `pre` elements and adds special tags and styles for colored syntax highlighting into those elements, similar to what you see in examples here, on this page.
-When exactly to run that highlighting method? We can do it on `DOMContentLoaded` event, or at the bottom of the page. At that moment we have DOM ready, can search for elements `pre[class*="language"]` and call `Prism.highlightElem` on them:
+When exactly should we run that highlighting method? Well, we can do it on `DOMContentLoaded` event, or put the script at the bottom of the page. The moment our DOM is ready, we can search for elements `pre[class*="language"]` and call `Prism.highlightElem` on them:
```js
// highlight all code snippets on the page
document.querySelectorAll('pre[class*="language"]').forEach(Prism.highlightElem);
```
-Everything's simple so far, right? There are `
` code snippets in HTML, we highlight them.
+Everything's simple so far, right? We find code snippets in HTML and highlight them.
Now let's go on. Let's say we're going to dynamically fetch materials from a server. We'll study methods for that [later in the tutorial](info:fetch). For now it only matters that we fetch an HTML article from a webserver and display it on demand:
@@ -162,13 +162,13 @@ snippets.forEach(Prism.highlightElem);
*/!*
```
-...But imagine, we have many places in the code where we load contents: articles, quizzes, forum posts. Do we need to put the highlighting call everywhere? That's not very convenient, and also easy to forget.
+...But, imagine if we have many places in the code where we load our content - articles, quizzes, forum posts, etc. Do we need to put the highlighting call everywhere, to highlight the code in content after loading? That's not very convenient.
-And what if the content is loaded by a third-party module? E.g. we have a forum written by someone else, that loads contents dynamically, and we'd like to add syntax highlighting to it. No one likes to patch third-party scripts.
+And what if the content is loaded by a third-party module? For example, we have a forum written by someone else, that loads content dynamically, and we'd like to add syntax highlighting to it. No one likes patching third-party scripts.
Luckily, there's another option.
-We can use `MutationObserver` to automatically detect when code snippets are inserted in the page and highlight them.
+We can use `MutationObserver` to automatically detect when code snippets are inserted into the page and highlight them.
So we'll handle the highlighting functionality in one place, relieving us from the need to integrate it.
@@ -207,13 +207,13 @@ let demoElem = document.getElementById('highlight-demo');
observer.observe(demoElem, {childList: true, subtree: true});
```
-Here's HTML-element and JavaScript that dynamically fills it using `innerHTML`.
+Here, below, there's an HTML-element and JavaScript that dynamically fills it using `innerHTML`.
Please run the previous code (above, observes that element), and then the code below. You'll see how `MutationObserver` detects and highlights the snippet.
-ะะตะผะพ-ัะปะตะผะตะฝั ั id="highlight-demo", ะทะฐ ะบะพัะพััะผ ัะปะตะดะธั ะบะพะด ะฟัะธะผะตัะฐ ะฒััะต.
+A demo-element with id="highlight-demo", run the code above to observe it.
-The code below populates `innerHTML`. Please run the code above first, it will watch and highlight the new content:
+The following code populates its `innerHTML`, that causes the `MutationObserver` to react and highlight its contents:
```js run
let demoElem = document.getElementById('highlight-demo');
@@ -236,26 +236,37 @@ There's a method to stop observing the node:
- `observer.disconnect()` -- stops the observation.
-Another method often used with it:
+When we stop the observing, it might be possible that some changes were not yet processed by the observer. In such cases, we use
-- `mutationRecords = observer.takeRecords()` -- gets a list of unprocessed mutation records, those that happened, but the callback did not handle them.
+- `observer.takeRecords()` -- gets a list of unprocessed mutation records - those that happened, but the callback has not handled them.
+
+These methods can be used together, like this:
```js
-// we'd like to stop tracking changes
+// get a list of unprocessed mutations
+// should be called before disconnecting,
+// if you care about possibly unhandled recent mutations
+let mutationRecords = observer.takeRecords();
+
+// stop tracking changes
observer.disconnect();
+...
+```
-// it might have not yet handled some mutations
-let mutationRecords = observer.takeRecords();
-// process mutationRecords
+
+```smart header="Records returned by `observer.takeRecords()` are removed from the processing queue"
+The callback won't be called for records, returned by `observer.takeRecords()`.
```
-## Garbage collection
+```smart header="Garbage collection interaction"
+Observers use weak references to nodes internally. That is, if a node is removed from the DOM, and becomes unreachable, then it can be garbage collected.
-Observers use weak references to nodes internally. That is: if a node is removed from DOM, and becomes unreachable, then it becomes garbage collected, an observer doesn't prevent that.
+The mere fact that a DOM node is observed doesn't prevent the garbage collection.
+```
## Summary
-`MutationObserver` can react on changes in DOM: attributes, added/removed elements, text content.
+`MutationObserver` can react to changes in DOM - attributes, text content and adding/removing elements.
We can use it to track changes introduced by other parts of our code, as well as to integrate with third-party scripts.
diff --git a/2-ui/99-ui-misc/02-selection-range/article.md b/2-ui/99-ui-misc/02-selection-range/article.md
index d6c8762c1f..b908eb6b4a 100644
--- a/2-ui/99-ui-misc/02-selection-range/article.md
+++ b/2-ui/99-ui-misc/02-selection-range/article.md
@@ -8,7 +8,7 @@ libs:
In this chapter we'll cover selection in the document, as well as selection in form fields, such as ` `.
-JavaScript can do get the existing selection, select/deselect both as a whole or partially, remove the selected part from the document, wrap it into a tag, and so on.
+JavaScript can get the existing selection, select/deselect both as a whole or partially, remove the selected part from the document, wrap it into a tag, and so on.
You can get ready to use recipes at the end, in "Summary" section. But you'll get much more if you read the whole chapter. The underlying `Range` and `Selection` objects are easy to grasp, and then you'll need no recipes to make them do what you want.
@@ -16,7 +16,7 @@ You can get ready to use recipes at the end, in "Summary" section. But you'll ge
The basic concept of selection is [Range](https://dom.spec.whatwg.org/#ranges): basically, a pair of "boundary points": range start and range end.
-Each point represented as a parent DOM node with the relative offset from its start. If the parent node is an element element node, then the offset is a child number, for a text node it's the position in the text. Examples to follow.
+Each point represented as a parent DOM node with the relative offset from its start. If the parent node is an element node, then the offset is a child number, for a text node it's the position in the text. Examples to follow.
Let's select something.
@@ -95,8 +95,8 @@ Let's select `"Example: italic "`. That's two first children of `` (cou
```
-- `range.setStart(p, 0)` -- sets the start at the 0th child of `
` (that's a text node `"Example: "`).
-- `range.setEnd(p, 2)` -- spans the range up to (but not including) 2nd child of `
` (that's a text node `" and "`, but as the end is not included, so the last selected node is ``).
+- `range.setStart(p, 0)` -- sets the start at the 0th child of `
` (that's the text node `"Example: "`).
+- `range.setEnd(p, 2)` -- spans the range up to (but not including) 2nd child of `
` (that's the text node `" and "`, but as the end is not included, so the last selected node is ``).
Here's a more flexible test stand where you try more variants:
@@ -194,9 +194,9 @@ Others:
To manipulate the content within the range:
-- `deleteContents()` - remove range content from the document
-- `extractContents()` - remove range content from the document and return as [DocumentFragment](info:modifying-document#document-fragment)
-- `cloneContents()` - clone range content and return as [DocumentFragment](info:modifying-document#document-fragment)
+- `deleteContents()` -- remove range content from the document
+- `extractContents()` -- remove range content from the document and return as [DocumentFragment](info:modifying-document#document-fragment)
+- `cloneContents()` -- clone range content and return as [DocumentFragment](info:modifying-document#document-fragment)
- `insertNode(node)` -- insert `node` into the document at the beginning of the range
- `surroundContents(node)` -- wrap `node` around range content. For this to work, the range must contain both opening and closing tags for all elements inside it: no partial ranges like `abc`.
@@ -318,8 +318,7 @@ There are events on to keep track of selection:
### Selection tracking demo
-Here's a small demo that shows selection boundaries
-dynamically as it changes:
+Here's a small demo that shows selection boundaries dynamically as it changes:
```html run height=80
Select me: italic and bold
@@ -387,7 +386,7 @@ Also, there are convenience methods to manipulate the selection range directly,
- `setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset)` - replace selection range with the given start `anchorNode/anchorOffset` and end `focusNode/focusOffset`. All content in-between them is selected.
- `selectAllChildren(node)` -- select all children of the `node`.
- `deleteFromDocument()` -- remove selected content from the document.
-- `containsNode(node, allowPartialContainment = false)` -- checks whether the selection contains `node` (partically if the second argument is `true`)
+- `containsNode(node, allowPartialContainment = false)` -- checks whether the selection contains `node` (partially if the second argument is `true`)
So, for many tasks we can call `Selection` methods, no need to access the underlying `Range` object.
@@ -428,7 +427,7 @@ Form elements, such as `input` and `textarea` provide [special API for selection
Properties:
- `input.selectionStart` -- position of selection start (writeable),
-- `input.selectionEnd` -- position of selection start (writeable),
+- `input.selectionEnd` -- position of selection end (writeable),
- `input.selectionDirection` -- selection direction, one of: "forward", "backward" or "none" (if e.g. selected with a double mouse click),
Events:
@@ -551,7 +550,7 @@ If nothing is selected, or we use equal `start` and `end` in `setRangeText`, the
We can also insert something "at the cursor" using `setRangeText`.
-Here's an button that inserts `"HELLO"` at the cursor position and puts the cursor immediately after it. If the selection is not empty, then it gets replaced (we can do detect in by comparing `selectionStart!=selectionEnd` and do something else instead):
+Here's a button that inserts `"HELLO"` at the cursor position and puts the cursor immediately after it. If the selection is not empty, then it gets replaced (we can detect it by comparing `selectionStart!=selectionEnd` and do something else instead):
```html run autorun
@@ -583,7 +582,7 @@ To make something unselectable, there are three ways:
This doesn't allow the selection to start at `elem`. But the user may start the selection elsewhere and include `elem` into it.
- Then `elem` will become a part of `document.getSelection()`, so the selection actully happens, but its content is usually ignored in copy-paste.
+ Then `elem` will become a part of `document.getSelection()`, so the selection actually happens, but its content is usually ignored in copy-paste.
2. Prevent default action in `onselectstart` or `mousedown` events.
@@ -621,7 +620,7 @@ The second API is very simple, as it works with text.
The most used recipes are probably:
1. Getting the selection:
- ```js run
+ ```js
let selection = document.getSelection();
let cloned = /* element to clone the selected nodes to */;
@@ -632,8 +631,8 @@ The most used recipes are probably:
cloned.append(selection.getRangeAt(i).cloneContents());
}
```
-2. Setting the selection
- ```js run
+2. Setting the selection:
+ ```js
let selection = document.getSelection();
// directly:
diff --git a/2-ui/99-ui-misc/02-selection-range/range-example-p-0-1.svg b/2-ui/99-ui-misc/02-selection-range/range-example-p-0-1.svg
index 4550c3733c..9ebcffaac4 100644
--- a/2-ui/99-ui-misc/02-selection-range/range-example-p-0-1.svg
+++ b/2-ui/99-ui-misc/02-selection-range/range-example-p-0-1.svg
@@ -1 +1 @@
-0 1 2 3
\ No newline at end of file
+0 1 2 3
\ No newline at end of file
diff --git a/2-ui/99-ui-misc/02-selection-range/range-example-p-1-3.svg b/2-ui/99-ui-misc/02-selection-range/range-example-p-1-3.svg
index dd19679cc4..088c71c208 100644
--- a/2-ui/99-ui-misc/02-selection-range/range-example-p-1-3.svg
+++ b/2-ui/99-ui-misc/02-selection-range/range-example-p-1-3.svg
@@ -1 +1 @@
-0 1 2 3
\ No newline at end of file
+0 1 2 3
\ No newline at end of file
diff --git a/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3-range.svg b/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3-range.svg
index cb21d022c6..f13c6d74a7 100644
--- a/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3-range.svg
+++ b/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3-range.svg
@@ -1 +1 @@
-startContainer (<p>.firstChild) startOffset (=2) commonAncestorContainer (<p>) endContainer (<b>.firstChild) endOffset (=3)
\ No newline at end of file
+startContainer (<p>.firstChild) startOffset (=2) commonAncestorContainer (<p>) endContainer (<b>.firstChild) endOffset (=3)
\ No newline at end of file
diff --git a/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3.svg b/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3.svg
index fd058bebb1..4bf5b00b00 100644
--- a/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3.svg
+++ b/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3.svg
@@ -1 +1 @@
-0 1 2 3
\ No newline at end of file
+0 1 2 3
\ No newline at end of file
diff --git a/2-ui/99-ui-misc/02-selection-range/selection-direction-backward.svg b/2-ui/99-ui-misc/02-selection-range/selection-direction-backward.svg
index a84bdeb552..6399f9d5ee 100644
--- a/2-ui/99-ui-misc/02-selection-range/selection-direction-backward.svg
+++ b/2-ui/99-ui-misc/02-selection-range/selection-direction-backward.svg
@@ -1 +1 @@
-focus anchor
\ No newline at end of file
+focus anchor mouse move direction
\ No newline at end of file
diff --git a/2-ui/99-ui-misc/02-selection-range/selection-direction-forward.svg b/2-ui/99-ui-misc/02-selection-range/selection-direction-forward.svg
index fd7716c5a9..03c6fc5c61 100644
--- a/2-ui/99-ui-misc/02-selection-range/selection-direction-forward.svg
+++ b/2-ui/99-ui-misc/02-selection-range/selection-direction-forward.svg
@@ -1 +1 @@
-anchor focus
\ No newline at end of file
+anchor focus mouse move direction
\ No newline at end of file
diff --git a/2-ui/99-ui-misc/02-selection-range/selection-firefox.svg b/2-ui/99-ui-misc/02-selection-range/selection-firefox.svg
index 8ce5b47c71..050852d3df 100644
--- a/2-ui/99-ui-misc/02-selection-range/selection-firefox.svg
+++ b/2-ui/99-ui-misc/02-selection-range/selection-firefox.svg
@@ -1 +1 @@
-selection
\ No newline at end of file
+selection
\ No newline at end of file
diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index 6240a6b2fe..b106862152 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -1,64 +1,65 @@
-# Event loop: microtasks and macrotasks
+# ์ด๋ฒคํธ ๋ฃจํ์ ๋งคํฌ๋กํ์คํฌ, ๋ง์ดํฌ๋กํ์คํฌ
-Browser JavaScript execution flow, as well as in Node.js, is based on an *event loop*.
+๋ธ๋ผ์ฐ์ ์ธก ์๋ฐ์คํฌ๋ฆฝํธ ์คํ ํ๋ฆ์ Node.js์ ๋ง์ฐฌ๊ฐ์ง๋ก *์ด๋ฒคํธ ๋ฃจํ*์ ๊ธฐ๋ฐํฉ๋๋ค.
-Understanding how event loop works is important for optimizations, and sometimes for the right architecture.
+๋ฐ๋ผ์ ์ด๋ฒคํธ ๋ฃจํ๊ฐ ์ด๋ป๊ฒ ๋์ํ๋์ง ์ ์ดํดํ๊ณ ์์ด์ผ ์ต์ ํ๋ ์ฌ๋ฐ๋ฅธ ์ํคํ
์ฒ ์ค๊ณ๊ฐ ๊ฐ๋ฅํด์ง๋๋ค.
-In this chapter we first cover theoretical details about how things work, and then see practical applications of that knowledge.
+์ด๋ฒ ์ฑํฐ์์ ์ด๋ฒคํธ ๋ฃจํ๊ฐ ์ด๋ป๊ฒ ๋์ํ๋์ง์ ๋ํ ์ด๋ก ๊ณผ ํจ๊ป, ์ด๋ฅผ ์ด๋ป๊ฒ ์ค๋ฌด์ ์ ์ฉํ ์ ์๋์ง์ ๋ํด์ ์์๋ณด๊ฒ ์ต๋๋ค.
-## Event Loop
+## ์ด๋ฒคํธ ๋ฃจํ
-The concept of *event loop* is very simple. There's an endless loop, when JavaScript engine waits for tasks, executes them and then sleeps waiting for more tasks.
+*์ด๋ฒคํธ ๋ฃจํ(event loop)* ์ ์๋ ์์ฃผ ๊ฐ๋จํฉ๋๋ค. ์ด๋ฒคํธ ๋ฃจํ๋ ํ์คํฌ๊ฐ ๋ค์ด์ค๊ธธ ๊ธฐ๋ค๋ ธ๋ค๊ฐ ํ์คํฌ๊ฐ ๋ค์ด์ค๋ฉด ์ด๋ฅผ ์ฒ๋ฆฌํ๊ณ , ์ฒ๋ฆฌํ ํ์คํฌ๊ฐ ์๋ ๊ฒฝ์ฐ์ ์ ๋๋, ๋์์์ด ๋์๊ฐ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ด ๋ฃจํ์
๋๋ค(task๋ '์์
'์ด๋ผ๊ณ ๋ฒ์ญํ ์ ์๋๋ฐ, ๋งคํฌ๋กยท๋ง์ดํฌ๋กํ์คํฌ ๋ฑ์ ์ฉ์ด์ ์ผ์น์ํค๊ธฐ ์ํด 'ํ์คํฌ'๋ผ๊ณ ์์ฐจ ๋ฒ์ญํ์์ต๋๋ค - ์ฎ๊ธด์ด).
-The general algorithm of the engine:
+์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ด ๋์๊ฐ๋ ์๊ณ ๋ฆฌ์ฆ์ ์ผ๋ฐํํ๋ฉด ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
-1. While there are tasks:
- - execute them, starting with the oldest task.
-2. Sleep until a task appears, then go to 1.
+1. ์ฒ๋ฆฌํด์ผ ํ ํ์คํฌ๊ฐ ์๋ ๊ฒฝ์ฐ:
+ - ๋จผ์ ๋ค์ด์จ ํ์คํฌ๋ถํฐ ์์ฐจ์ ์ผ๋ก ์ฒ๋ฆฌํจ
+2. ์ฒ๋ฆฌํด์ผ ํ ํ์คํฌ๊ฐ ์๋ ๊ฒฝ์ฐ:
+ - ์ ๋ค์ด ์๋ค๊ฐ ์๋ก์ด ํ์คํฌ๊ฐ ์ถ๊ฐ๋๋ฉด ๋ค์ 1๋ก ๋์๊ฐ
-That's a formalization for what we see when browsing a page. JavaScript engine does nothing most of the time, only runs if a script/handler/event activates.
+๋ฐ๋ก ์ด ์๊ณ ๋ฆฌ์ฆ์ด ์ฐ๋ฆฌ๊ฐ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ฌ์ฉํด ์ธํฐ๋ท์ ์ํํ ๋ ๋์๊ฐ๋ ์๊ณ ๋ฆฌ์ฆ์
๋๋ค. ์ด๋ ๊ฒ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ๋๋ถ๋ถ์ ์๊ฐ ๋์ ์๋ฌด๋ฐ ์ผ๋ ํ์ง ์๊ณ ์ฌ๊ณ ์๋ค๊ฐ ์คํฌ๋ฆฝํธ๋ ํธ๋ค๋ฌ, ์ด๋ฒคํธ๊ฐ ํ์ฑํ๋ ๋๋ง ๋์๊ฐ๋๋ค.
-Examples of tasks:
+๊ทธ๋ ๋ค๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ํ์ฑํํ๋ ํ์คํฌ์ ๊ณผ์ฐ ์ด๋ค ๊ฒ๋ค์ด ์์๊น์? ๋ํ์ ์ธ ํ์คํฌ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
-- When an external script `
```
-...But we also may want to show something during the task, e.g. a progress bar.
+๊ทธ๋ฐ๋ฐ ๊ฐ๋ฐ์ ํ๋ค ๋ณด๋ฉด ํ๋ก๊ทธ๋ ์ค ๋ฐ ๊ฐ์ด ์์
์ง์ฒ ์ํ๋ฅผ ๋ณด์ฌ์ฃผ๋ ์ธ๋์ผ์ดํฐ(indicator)๋ฅผ ๋ง๋ค์ด์ผ ํ๋ ๊ฒฝ์ฐ๊ฐ ์๊ธฐ๊ณค ํฉ๋๋ค.
-If we split the heavy task into pieces using `setTimeout`, then changes are painted out in-between them.
+์ด๋ด ๋ `setTimeout`์ ์ฌ์ฉํด ํ์คํฌ๋ฅผ ์ฌ๋ฌ ๊ฐ๋ก ์ชผ๊ฐ๋ฉด, ์๋ธ ํ์คํฌ ์ค๊ฐ๋ง๋ค ์ํ ๋ณํ๋ฅผ ๋ณผ ์ ์์ต๋๋ค.
-This looks prettier:
+์์๋ฅผ ์ดํด๋ด
์๋ค.
```html run
@@ -197,7 +198,7 @@ This looks prettier:
function count() {
- // do a piece of the heavy job (*)
+ // ๋ฌด๊ฑฐ์ด ์์
์ ์ชผ๊ฐ ํ ์ด๋ฅผ ์ํ
do {
i++;
progress.innerHTML = i;
@@ -213,40 +214,40 @@ This looks prettier:
```
-Now the `` shows increasing values of `i`, a kind of a progress bar.
+์ด์ ํ๋ก๊ทธ๋ ์ค ๋ฐ์ฒ๋ผ `
`์ `i`๊ฐ ๋ณํ๋ ๊ณผ์ ์ ์ถ๋ ฅํด ์ค ์ ์๊ฒ ๋์์ต๋๋ค.
-## Use case 3: doing something after the event
+## ์ ์ค ์ผ์ด์ค 3: ์ด๋ฒคํธ ์ฒ๋ฆฌ๊ฐ ๋๋ ์ดํ์ ์์
ํ๊ธฐ
-In an event handler we may decide to postpone some actions until the event bubbled up and was handled on all levels. We can do that by wrapping the code in zero delay `setTimeout`.
+์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ๋ง๋ค๋ค ๋ณด๋ฉด ์ด๋ฒคํธ ๋ฒ๋ธ๋ง์ด ๋๋ ๋ชจ๋ DOM ํธ๋ฆฌ ๋ ๋ฒจ์์ ์ด๋ฒคํธ๊ฐ ํธ๋ค๋ง ๋ ๋๊น์ง ํน์ ์ก์
์ ์ฐ๊ธฐ์์ผ์ผ ํ๋ ๊ฒฝ์ฐ๊ฐ ์๊ธฐ๊ณค ํฉ๋๋ค. ์ด๋ด ๋ ์ฐ๊ธฐ์ํฌ ์ก์
๊ด๋ จ ์ฝ๋๋ฅผ ์ง์ฐ ์๊ฐ์ด 0์ธ `setTimeout`์ผ๋ก ๊ฐ์ธ๋ฉด ์ํ๋ ๋์์ ๊ตฌํํ ์ ์์ต๋๋ค.
-In the chapter
we saw an example: custom event `menu-open` is dispatched in `setTimeout`, so that it happens after the "click" event is fully handled.
+์์ ์ฑํฐ์์ ์ปค์คํ
์ด๋ฒคํธ `menu-open`์ `setTimeout` ์์์ ๋์คํจ์นญํ๋ ์์๋ฅผ ์ดํด๋ณธ ๋ฐ ์์ต๋๋ค. ์ด๋ ๊ฒ `setTimeout`์ ์ฌ์ฉํ๋ฉด 'click' ์ด๋ฒคํธ๊ฐ ์์ ํ ํธ๋ค๋ง ๋ ๋ค์์ `menu-open` ์ด๋ฒคํธ๋ฅผ ๋์คํจ์นญ ํ ์ ์์ต๋๋ค.
```js
menu.onclick = function() {
// ...
- // create a custom event with the clicked menu item data
+ // ํด๋ฆญํ ๋ฉ๋ด ๋ด ํญ๋ชฉ ์ ๋ณด๊ฐ ๋ด๊ธด ์ปค์คํ
์ด๋ฒคํธ ์์ฑ
let customEvent = new CustomEvent("menu-open", {
bubbles: true
});
- // dispatch the custom event asynchronously
+ // ๋น๋๊ธฐ๋ก ์ปค์คํ
์ด๋ฒคํธ๋ฅผ ๋์คํจ์นญ
setTimeout(() => menu.dispatchEvent(customEvent));
};
```
-## Macrotasks and Microtasks
+## ๋งคํฌ๋กํ์คํฌ์ ๋ง์ดํฌ๋กํ์คํฌ
-Along with *macrotasks*, described in this chapter, there exist *microtasks*, mentioned in the chapter .
+ํ์คํฌ๋ ์ด๋ฒ ์ฑํฐ์์ ์ค๋ช
ํ *๋งคํฌ๋กํ์คํฌ(macrotask)* ์ ์ฑํฐ์์ ๋ค๋ฃฌ *๋ง์ดํฌ๋กํ์คํฌ(microtask)* ๋ก ๋๋ฉ๋๋ค.
-Microtasks come solely from our code. They are usually created by promises: an execution of `.then/catch/finally` handler becomes a microtask. Microtasks are used "under the cover" of `await` as well, as it's another form of promise handling.
+๋ง์ดํฌ๋กํ์คํฌ๋ ์ฝ๋๋ฅผ ์ฌ์ฉํด์๋ง ๋ง๋ค ์ ์๋๋ฐ, ์ฃผ๋ก ํ๋ผ๋ฏธ์ค๋ฅผ ์ฌ์ฉํด ๋ง๋ญ๋๋ค. ํ๋ผ๋ฏธ์ค์ ํจ๊ป ์ฐ์ด๋ `.then/catch/finally` ํธ๋ค๋ฌ๊ฐ ๋ง์ดํฌ๋กํ์คํฌ๊ฐ ๋์ฃ . ์ฌ๊ธฐ์ ๋ํ์ฌ ๋ง์ดํฌ๋กํ์คํฌ๋ ํ๋ผ๋ฏธ์ค๋ฅผ ํธ๋ค๋งํ๋ ๋ ๋ค๋ฅธ ๋ฌธ๋ฒ์ธ `await`๋ฅผ ์ฌ์ฉํด ๋ง๋ค๊ธฐ๋ ํฉ๋๋ค.
-There's also a special function `queueMicrotask(func)` that queues `func` for execution in the microtask queue.
+์ด ์ธ์๋ ํ์ค API์ธ `queueMicrotask(func)`๋ฅผ ์ฌ์ฉํ๋ฉด ํจ์ `func`๋ฅผ ๋ง์ดํฌ๋กํ์คํฌ ํ์ ๋ฃ์ด ์ฒ๋ฆฌํ ์ ์์ต๋๋ค.
-**Immediately after every *macrotask*, the engine executes all tasks from *microtask* queue, prior to running any other macrotasks or rendering or anything else.**
+**์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ *๋งคํฌ๋กํ์คํฌ ํ๋*๋ฅผ ์ฒ๋ฆฌํ ๋๋ง๋ค ๋ ๋ค๋ฅธ ๋งคํฌ๋กํ์คํฌ๋ ๋ ๋๋ง ์์
์ ํ๊ธฐ ์ ์ ๋ง์ดํฌ๋กํ์คํฌ ํ์ ์์ธ *๋ง์ดํฌ๋กํ์คํฌ ์ ๋ถ*๋ฅผ ์ฒ๋ฆฌํฉ๋๋ค.**
-For instance, take a look:
+์์๋ฅผ ์ดํด๋ด
์๋ค.
```js run
setTimeout(() => alert("timeout"));
@@ -257,23 +258,23 @@ Promise.resolve()
alert("code");
```
-What's going to be the order here?
+์ผ๋ฟ ์ฐฝ์ ์๋ ์์๋๋ก ๋ฌธ์์ด์ด ์ถ๋ ฅ๋ฉ๋๋ค.
-1. `code` shows first, because it's a regular synchronous call.
-2. `promise` shows second, because `.then` passes through the microtask queue, and runs after the current code.
-3. `timeout` shows last, because it's a macrotask.
+1. `code` -- ์ผ๋ฐ์ ์ธ ๋๊ธฐ ํธ์ถ์ด๋ฏ๋ก ๊ฐ์ฅ ๋จผ์ ๋งคํฌ๋กํ์คํฌ ํ์ ๋ค์ด๊ฐ ํ ์คํ๋ฉ๋๋ค.
+2. `promise` -- `.then`์ ๋ง์ดํฌ๋กํ์คํฌ ํ์ ๋ค์ด๊ฐ ์ฒ๋ฆฌ๋๊ธฐ ๋๋ฌธ์, ํ์ฌ ์ฝ๋(`alert("code")`)๊ฐ ์คํ๋๊ณ ๋ ํ์ ์คํ๋ฉ๋๋ค.
+3. `timeout` -- `setTimeout`์์ ์ค์ ํ ์๊ฐ์ด ๋๋ ํ ์ฝ๋ฐฑ ํจ์๋ฅผ ์คํํ๋ ๊ฒ์ ๋งคํฌ๋กํ์คํฌ์ด๊ธฐ ๋๋ฌธ์ ๊ฐ์ฅ ๋ง์ง๋ง์ ์ถ๋ ฅ๋ฉ๋๋ค.
-The richer event loop picture looks like this:
+๋งคํฌ๋กํ์คํฌ์ ๋ง์ดํฌ๋กํ์คํฌ ์ฒ๋ฆฌ ๋ก์ง์ ์ฒจ๊ฐํ๋ฉด ์์์ ์ดํด๋ณธ ๊ทธ๋ฆผ์ ์ข ๋ ๊ณ ๋ํ ํ ์ ์์ต๋๋ค. ๊ทธ๋ฆผ์ ์์์๋ถํฐ ์๋๋ก ๋ด
์๋ค. ๋งคํฌ๋กํ์คํฌ(script, mousemove, setTimeout ๋ฑ) ํ๋๊ฐ ์ฒ๋ฆฌ๋๊ณ ๋ ํ ๋ง์ดํฌ๋กํ์คํฌ ์ ๋ถ(microtasks)๊ฐ ์ฒ๋ฆฌ๋๊ณ ๊ทธ ์ดํ ๋ ๋๋ง์ด ์งํ๋๋ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.

-**All microtasks are completed before any other event handling or rendering or any other macrotask takes place.**
+์ด์ฒ๋ผ ๋ง์ดํฌ๋กํ์คํฌ๋ ๋ค๋ฅธ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ ๋ ๋๋ง ์์
, ํน์ ๋ค๋ฅธ ๋งคํฌ๋กํ์คํฌ๊ฐ ์คํ๋๊ธฐ ์ ์ ์ฒ๋ฆฌ๋ฉ๋๋ค.
-That's important, as it guarantees that the application environment is basically the same (no mouse coordinate changes, no new network data, etc) between microtasks.
+์ด๋ฐ ์ฒ๋ฆฌ์์๊ฐ ์์ฃผ ์ค์ํ ์ด์ ๋ (๋ง์ฐ์ค ์ขํ ๋ณ๊ฒฝ์ด๋ ๋คํธ์ํฌ ํต์ ์ ์ํ ๋ฐ์ดํฐ ๋ณ๊ฒฝ ๊ฐ์ด ์ ํ๋ฆฌ์ผ์ด์
ํ๊ฒฝ์ ๋ณํ๋ฅผ ์ฃผ๋ ์์
์ ์ํฅ์ ๋ฐ์ง ์๊ณ ) ๋ชจ๋ ๋ง์ดํฌ๋กํ์คํฌ๋ฅผ ๋์ผํ ํ๊ฒฝ์์ ์ฒ๋ฆฌํ ์ ์๊ธฐ ๋๋ฌธ์
๋๋ค.
-If we'd like to execute a function asynchronously (after the current code), but before changes are rendered or new events handled, we can schedule it with `queueMicrotask`.
+๊ทธ๋ฐ๋ฐ ๊ฐ๋ฐ์ ํ๋ค ๋ณด๋ฉด ์ง์ ๋ง๋ ํจ์๋ฅผ ํ์ฌ ์ฝ๋ ์คํ์ด ๋๋ ํ, ์๋ก์ด ์ด๋ฒคํธ ํธ๋ค๋ฌ๊ฐ ์ฒ๋ฆฌ๋๊ธฐ ์ ์ด๋ฉด์ ๋ ๋๋ง์ด ์คํ๋๊ธฐ ์ ์ ๋น๋๊ธฐ์ ์ผ๋ก ์คํํด์ผ ํ๋ ๊ฒฝ์ฐ๊ฐ ์๊ธฐ๊ณค ํฉ๋๋ค. ์ด๋ด ๋ `queueMicrotask`๋ฅผ ์ฌ์ฉํด ์ปค์คํ
ํจ์๋ฅผ ์ค์ผ์ค๋งํ๋ฉด ๋ฉ๋๋ค.
-Here's an example with "counting progress bar", similar to the one shown previously, but `queueMicrotask` is used instead of `setTimeout`. You can see that it renders at the very end. Just like the synchronous code:
+์์ ์ดํด๋ณธ 'ํ๋ก๊ทธ๋ ์ค ๋ฐ' ์์์์ `setTimeout` ๋์ `queueMicrotask`๋ฅผ ์ฌ์ฉํด ํจ์ `count`๋ฅผ ์ฌ์ค์ผ์ค๋งํด ๋ณด์์ต๋๋ค. ์์๋ฅผ ์คํํ๋ฉด ๋๊ธฐ ์ฝ๋์ฒ๋ผ ์นด์ดํ
์ด ๋ค ๋๋ฌ์ ๋ ์ซ์๊ฐ ๋ ๋๋ง ๋๋ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.
```html run
@@ -283,7 +284,7 @@ Here's an example with "counting progress bar", similar to the one shown previou
function count() {
- // do a piece of the heavy job (*)
+ // ๋ฌด๊ฑฐ์ด ์์
์ ์ชผ๊ฐ ํ ์ด๋ฅผ ์ํ
do {
i++;
progress.innerHTML = i;
@@ -301,39 +302,39 @@ Here's an example with "counting progress bar", similar to the one shown previou
```
-## Summary
+## ์์ฝ
-The more detailed algorithm of the event loop (though still simplified compare to the [specification](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model)):
+์ด๋ฒคํธ ๋ฃจํ ์๊ณ ๋ฆฌ์ฆ์ ์์ฝํ๋ฉด ๋ค์๊ณผ ๊ฐ์ต๋๋ค(์์ธํ ์ฌํญ์ [๋ช
์ธ์](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model)์์ ํ์ธํ ์ ์์ต๋๋ค).
-1. Dequeue and run the oldest task from the *macrotask* queue (e.g. "script").
-2. Execute all *microtasks*:
- - While the microtask queue is not empty:
- - Dequeue and run the oldest microtask.
-3. Render changes if any.
-4. If the macrotask queue is empty, wait till a macrotask appears.
-5. Go to step 1.
+1. *๋งคํฌ๋กํ์คํฌ* ํ์์ ๊ฐ์ฅ ์ค๋๋ ํ์คํฌ๋ฅผ ๊บผ๋ด ์คํํฉ๋๋ค(์: ์คํฌ๋ฆฝํธ๋ฅผ ์คํ).
+2. ๋ชจ๋ *๋ง์ดํฌ๋กํ์คํฌ*๋ฅผ ์คํํฉ๋๋ค.
+ - ์ด ์์
์ ๋ง์ดํฌ๋กํ์คํฌ ํ๊ฐ ๋น ๋๊น์ง ์ด์ด์ง๊ณ
+ - ํ์คํฌ๋ ์ค๋๋ ์์๋๋ก ์ฒ๋ฆฌ๋ฉ๋๋ค.
+3. ๋ ๋๋งํ ๊ฒ์ด ์์ผ๋ฉด ์ฒ๋ฆฌํฉ๋๋ค.
+4. ๋งคํฌ๋กํ์คํฌ ํ๊ฐ ๋น์ด์์ผ๋ฉด ์๋ก์ด ๋งคํฌ๋กํ์คํฌ๊ฐ ๋ํ๋ ๋๊น์ง ๊ธฐ๋ค๋ฆฝ๋๋ค.
+5. 1๋ฒ์ผ๋ก ๋์๊ฐ๋๋ค.
-To schedule a new *macrotask*:
-- Use zero delayed `setTimeout(f)`.
+์๋ก์ด *๋งคํฌ๋กํ์คํฌ*๋ฅผ ์ค์ผ์ค๋งํ๋ ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
+- ์ง์ฐ์๊ฐ์ด 0์ธ `setTimeout(f)` ์ฌ์ฉํ๊ธฐ
-That may be used to split a big calculation-heavy task into pieces, for the browser to be able to react on user events and show progress between them.
+์ด ๋ฐฉ๋ฒ์ ์ฌ์ฉํ๋ฉด ๊ณ์ฐ์ด ๋ณต์กํ ํฐ ํ์คํฌ ํ๋๋ฅผ ์ฌ๋ฌ ๊ฐ๋ก ์ชผ๊ฐค ์ ์์ต๋๋ค. ํ์คํฌ๋ฅผ ์ฌ๋ฌ ๊ฐ๋ก ์ชผ๊ฐ๋ฉด ํ์คํฌ ์ค๊ฐ์ค๊ฐ ์ฌ์ฉ์ ์ด๋ฒคํธ์ ๋ฐ์ํ ์ ์๊ณ , ์์
์ง์ฒ ์ํ๋ฅผ ํ๋ฉด์ ํ์ํด์ค ์๋ ์์ต๋๋ค.
-Also, used in event handlers to schedule an action after the event is fully handled (bubbling done).
+์ง์ฐ์๊ฐ์ด 0์ธ `setTimeout`์ ์ด๋ฒคํธ๊ฐ ์์ ํ ์ฒ๋ฆฌ๋๊ณ ๋ ํ(๋ฒ๋ธ๋ง์ด ๋๋ ํ)์ ํน์ ์์
์ ์ํํ๋๋ก ์ค์ผ์ค๋งํ ๋๋ ์ฌ์ฉ๋ฉ๋๋ค.
-To schedule a new *microtask*
-- Use `queueMicrotask(f)`.
-- Also promise handlers go through the microtask queue.
+์๋ก์ด *๋ง์ดํฌ๋กํ์คํฌ*๋ฅผ ์ค์ผ์ค๋งํ๋ ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
+- `queueMicrotask(f)` ์ฌ์ฉํ๊ธฐ
+- ์ด์ธ์๋ ํ๋ผ๋ฏธ์ค ํธ๋ค๋ฌ๋ ๋ง์ดํฌ๋กํ์คํฌ ํ์ ๋ค์ด๊ฐ ์ฒ๋ฆฌ๋ฉ๋๋ค.
-There's no UI or network event handling between microtasks: they run immediately one after another.
+๋ง์ดํฌ๋กํ์คํฌ ์ ์ฒด๊ฐ ์ฒ๋ฆฌ๋๋ ๋์์๋ UI ๋ณํ๋ ๋คํธ์ํฌ ์ด๋ฒคํธ ํธ๋ค๋ง์ด ์ผ์ด๋์ง ์์ต๋๋ค. ๋ ๋๋ง์ด๋ ๋คํธ์ํฌ ์์ฒญ ๋ฑ์ ์์
๋ค์ ๋ง์ดํฌ๋กํ์คํฌ ์ ๋ถ๊ฐ ์ฒ๋ฆฌ๋๊ณ ๋ ์งํ ์ฒ๋ฆฌ๋ฉ๋๋ค.
-So one may want to `queueMicrotask` to execute a function asynchronously, but within the environment state.
+์ด๋ฐ ์ฒ๋ฆฌ ์์ ๋๋ถ์ `queueMicrotask`๋ฅผ ์ฌ์ฉํด ํจ์๋ฅผ ๋น๋๊ธฐ์ ์ผ๋ก ์ฒ๋ฆฌํ ๋ ์ ํ๋ฆฌ์ผ์ด์
์ํ์ ์ผ๊ด์ฑ์ด ๋ณด์ฅ๋ฉ๋๋ค.
-```smart header="Web Workers"
-For long heavy calculations that shouldn't block the event loop, we can use [Web Workers](https://html.spec.whatwg.org/multipage/workers.html).
+```smart header="์น ์์ปค"
+์ด๋ฒคํธ ๋ฃจํ๋ฅผ ๋ง์ ์ฐ๋ ค๊ฐ ์๋ ๋ฌด๊ฑฐ์ด ์ฐ์ฐ์ [์น ์์ปค(Web Worker)](https://html.spec.whatwg.org/multipage/workers.html)๋ฅผ ์ฌ์ฉํด ์ฒ๋ฆฌํ ์ ์์ต๋๋ค.
-That's a way to run code in another, parallel thread.
+์น ์์ปค๋ฅผ ์ฌ์ฉํ๋ฉด ๋ณ๋์ ๋ฐฑ๊ทธ๋ผ์ด๋ ์ค๋ ๋์์ ์ฝ๋๋ฅผ ๋ณ๋ ฌ์ ์ผ๋ก ์คํํ ์ ์์ต๋๋ค.
-Web Workers can exchange messages with the main process, but they have their own variables, and their own event loop.
+๋ฉ์ธ ์ค๋ ๋์ ๋ฉ์์ง๋ฅผ ๊ตํํ ์ ์๊ธด ํ์ง๋ง ์น ์์ปค์ ๋ฉ์ธ ์ค๋ ๋์ ์ฐ๊ด ์๋ ๊ณ ์ ํ ๋ณ์๋ค๊ณผ ์์ฒด ์ด๋ฒคํธ ๋ฃจํ๊ฐ ์์ต๋๋ค.
-Web Workers do not have access to DOM, so they are useful, mainly, for calculations, to use multiplle CPU cores simultaneously.
+์น ์์ปค๋ DOM์ ์ ๊ทผํ ์ ์๊ธฐ ๋๋ฌธ์ ์ฌ๋ฌ CPU ์ฝ์ด๋ฅผ ๋์์ ์ฌ์ฉํด์ผ ํ๋ ์ฐ์ฐ์ ์ฃผ๋ก ์ฌ์ฉํฉ๋๋ค.
```
diff --git a/2-ui/99-ui-misc/03-event-loop/eventLoop-full.svg b/2-ui/99-ui-misc/03-event-loop/eventLoop-full.svg
index 044bab6f34..593cbab9b3 100644
--- a/2-ui/99-ui-misc/03-event-loop/eventLoop-full.svg
+++ b/2-ui/99-ui-misc/03-event-loop/eventLoop-full.svg
@@ -1 +1 @@
-... mousemove event loop microtasks render microtasks render script setTimeout
\ No newline at end of file
+... mousemove event loop render microtasks render microtasks script setTimeout
\ No newline at end of file
diff --git a/2-ui/99-ui-misc/03-event-loop/eventLoop.svg b/2-ui/99-ui-misc/03-event-loop/eventLoop.svg
index 57f5188ce9..ffe1976641 100644
--- a/2-ui/99-ui-misc/03-event-loop/eventLoop.svg
+++ b/2-ui/99-ui-misc/03-event-loop/eventLoop.svg
@@ -1 +1 @@
-... mousemove script event loop macrotask queue setTimeout
\ No newline at end of file
+... mousemove script event loop macrotask queue setTimeout
\ No newline at end of file
diff --git a/2-ui/99-ui-misc/index.md b/2-ui/99-ui-misc/index.md
index 79cd72fe7c..5c8602892b 100644
--- a/2-ui/99-ui-misc/index.md
+++ b/2-ui/99-ui-misc/index.md
@@ -1,2 +1,2 @@
-# Miscellaneous
+# ๊ธฐํ
diff --git a/2-ui/index.md b/2-ui/index.md
index d94378cf3f..70ef4a5ef6 100644
--- a/2-ui/index.md
+++ b/2-ui/index.md
@@ -1,3 +1,3 @@
-# Browser: Document, Events, Interfaces
+# ๋ธ๋ผ์ฐ์ : ๋ฌธ์, ์ด๋ฒคํธ, ์ธํฐํ์ด์ค
-Learning how to manage the browser page: add elements, manipulate their size and position, dynamically create interfaces and interact with the visitor.
+ํํธ2์์ ๋ธ๋ผ์ฐ์ ๋ด ํ์ด์ง๋ฅผ ๋ค๋ฃจ๋ ๋ฐฉ๋ฒ์ ๋ํด ํ์ตํฉ๋๋ค. ์์ ์ถ๊ฐ, ์์์ ์ฌ์ด์ฆ์ ์์น๋ฅผ ์กฐ์ ํ๋ ๋ฐฉ๋ฒ์ ๋น๋กฏํ์ฌ ๋์ ์ผ๋ก ์ธํฐํ์ด์ค๋ฅผ ์์ฑํ๋ ๋ฐฉ๋ฒ, ์ธํฐํ์ด์ค๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ฌ์ฉ์์ ์ํธ์์ฉ ํ๋ ๋ฐฉ๋ฒ ๋ฑ์ ๋ํด ํ์ตํ ์์ ์
๋๋ค.
diff --git a/3-frames-and-windows/01-popup-windows/article.md b/3-frames-and-windows/01-popup-windows/article.md
index 3be07258e2..7540b03045 100644
--- a/3-frames-and-windows/01-popup-windows/article.md
+++ b/3-frames-and-windows/01-popup-windows/article.md
@@ -7,7 +7,7 @@ Basically, you just run:
window.open('https://javascript.info/')
```
-...And it will open a new window with given URL. Most modern browsers are configured to open new tabs instead of separate windows.
+...And it will open a new window with given URL. Most modern browsers are configured to open url in new tabs instead of separate windows.
Popups exist from really ancient times. The initial idea was to show another content without closing the main window. As of now, there are other ways to do that: we can load content dynamically with [fetch](info:fetch) and show it in a dynamically generated ``. So, popups is not something we use everyday.
@@ -15,7 +15,7 @@ Also, popups are tricky on mobile devices, that don't show multiple windows simu
Still, there are tasks where popups are still used, e.g. for OAuth authorization (login with Google/Facebook/...), because:
-1. A popup is a separate window with its own independent JavaScript environment. So opening a popup with a third-party non-trusted site is safe.
+1. A popup is a separate window which has its own independent JavaScript environment. So opening a popup from a third-party, non-trusted site is safe.
2. It's very easy to open a popup.
3. A popup can navigate (change URL) and send messages to the opener window.
@@ -69,7 +69,7 @@ name
: A name of the new window. Each window has a `window.name`, and here we can specify which window to use for the popup. If there's already a window with such name -- the given URL opens in it, otherwise a new window is opened.
params
-: The configuration string for the new window. It contains settings, delimited by a comma. There must be no spaces in params, for instance: `width:200,height=100`.
+: The configuration string for the new window. It contains settings, delimited by a comma. There must be no spaces in params, for instance: `width=200,height=100`.
Settings for `params`:
@@ -89,7 +89,7 @@ There is also a number of less supported browser-specific features, which are us
## Example: a minimalistic window
-Let's open a window with minimal set of features just to see which of them browser allows to disable:
+Let's open a window with minimal set of features, just to see which of them browser allows to disable:
```js run
let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
@@ -154,7 +154,7 @@ Windows may freely access content of each other only if they come from the same
Otherwise, e.g. if the main window is from `site.com`, and the popup from `gmail.com`, that's impossible for user safety reasons. For the details, see chapter
.
```
-## Accessing window from popup
+## Accessing window from popup
A popup may access the "opener" window as well using `window.opener` reference. It is `null` for all windows except popups.
@@ -237,21 +237,23 @@ There's also `window.onscroll` event.
## Focus/blur on a window
-Theoretically, there are `window.focus()` and `window.blur()` methods to focus/unfocus on a window. Also there are `focus/blur` events that allow to focus a window and catch the moment when the visitor switches elsewhere.
+Theoretically, there are `window.focus()` and `window.blur()` methods to focus/unfocus on a window. And there are also `focus/blur` events that allow to catch the moment when the visitor focuses on a window and switches elsewhere.
-In the past evil pages abused those. For instance, look at this code:
+Although, in practice they are severely limited, because in the past evil pages abused them.
+
+For instance, look at this code:
```js run
window.onblur = () => window.focus();
```
-When a user attempts to switch out of the window (`blur`), it brings it back to focus. The intention is to "lock" the user within the `window`.
+When a user attempts to switch out of the window (`window.onblur`), it brings the window back into focus. The intention is to "lock" the user within the `window`.
-So, there are limitations that forbid the code like that. There are many limitations to protect the user from ads and evils pages. They depend on the browser.
+So browsers had to introduce many limitations to forbid the code like that and protect the user from ads and evils pages. They depend on the browser.
-For instance, a mobile browser usually ignores that call completely. Also focusing doesn't work when a popup opens in a separate tab rather than a new window.
+For instance, a mobile browser usually ignores `window.focus()` completely. Also focusing doesn't work when a popup opens in a separate tab rather than a new window.
-Still, there are some things that can be done.
+Still, there are some use cases when such calls do work and can be useful.
For instance:
@@ -268,7 +270,7 @@ If we're going to open a popup, a good practice is to inform the user about it.
- Browsers block `open` calls from the code outside of user actions. Usually a notification appears, so that a user may allow them.
- Browsers open a new tab by default, but if sizes are provided, then it'll be a popup window.
- The popup may access the opener window using the `window.opener` property.
-- The main window and the popup can freely read and modify each other if they havee the same origin. Otherwise, they can change location of each other and [exchange messages.
+- The main window and the popup can freely read and modify each other if they have the same origin. Otherwise, they can change location of each other and [exchange messages](info:cross-window-communication).
To close the popup: use `close()` call. Also the user may close them (just like any other windows). The `window.closed` is `true` after that.
diff --git a/3-frames-and-windows/03-cross-window-communication/article.md b/3-frames-and-windows/03-cross-window-communication/article.md
index 0a89521b30..53f5f55fc4 100644
--- a/3-frames-and-windows/03-cross-window-communication/article.md
+++ b/3-frames-and-windows/03-cross-window-communication/article.md
@@ -335,10 +335,6 @@ The full example:
[codetabs src="postmessage" height=120]
-```smart header="There's no delay"
-There's totally no delay between `postMessage` and the `message` event. The event triggers synchronously, faster than `setTimeout(...,0)`.
-```
-
## Summary
To call methods and access the content of another window, we should first have a reference to it.
diff --git a/3-frames-and-windows/03-cross-window-communication/sandbox.view/index.html b/3-frames-and-windows/03-cross-window-communication/sandbox.view/index.html
index 4788306104..46dd7b5cc5 100644
--- a/3-frames-and-windows/03-cross-window-communication/sandbox.view/index.html
+++ b/3-frames-and-windows/03-cross-window-communication/sandbox.view/index.html
@@ -7,7 +7,7 @@
- The iframe below is has sandbox attribute.
+ The iframe below has the sandbox attribute.
diff --git a/3-frames-and-windows/index.md b/3-frames-and-windows/index.md
index eb5069e39e..62a41cc21f 100644
--- a/3-frames-and-windows/index.md
+++ b/3-frames-and-windows/index.md
@@ -1 +1 @@
-# Frames and windows
+๏ปฟ# ํ๋ ์๊ณผ ์๋์ฐ
\ No newline at end of file
diff --git a/4-binary/01-arraybuffer-binary-arrays/01-concat/task.md b/4-binary/01-arraybuffer-binary-arrays/01-concat/task.md
index 6710104b2a..80cdf87aab 100644
--- a/4-binary/01-arraybuffer-binary-arrays/01-concat/task.md
+++ b/4-binary/01-arraybuffer-binary-arrays/01-concat/task.md
@@ -1,4 +1,4 @@
-# Concatenate typed arrays
+# ํ์
์ด ์ง์ ๋ ๋ฐฐ์ด ์ฐ๊ฒฐํ๊ธฐ
-Given an array of `Uint8Array`, write a function `concat(arrays)` that returns a concatenation of them into a single array.
+์ฃผ์ด์ง `Uint8Array`์ ๋ฐฐ์ด์ ํ๋์ ๋ฐฐ์ด๋ก ์ฐ๊ฒฐํ์ฌ ๋ฐํํ๋ ํจ์ `concat(arrays)`๋ฅผ ์์ฑํ์ญ์์ค.
\ No newline at end of file
diff --git a/4-binary/01-arraybuffer-binary-arrays/8bit-integer-256.svg b/4-binary/01-arraybuffer-binary-arrays/8bit-integer-256.svg
index 89ae964071..b697d63043 100644
--- a/4-binary/01-arraybuffer-binary-arrays/8bit-integer-256.svg
+++ b/4-binary/01-arraybuffer-binary-arrays/8bit-integer-256.svg
@@ -1 +1 @@
-8-bit integer 256
\ No newline at end of file
+8-bit integer 256
\ No newline at end of file
diff --git a/4-binary/01-arraybuffer-binary-arrays/8bit-integer-257.svg b/4-binary/01-arraybuffer-binary-arrays/8bit-integer-257.svg
index c7b74cd63c..8e3074fdf3 100644
--- a/4-binary/01-arraybuffer-binary-arrays/8bit-integer-257.svg
+++ b/4-binary/01-arraybuffer-binary-arrays/8bit-integer-257.svg
@@ -1 +1 @@
-8-bit integer 257
\ No newline at end of file
+8-bit integer 257
\ No newline at end of file
diff --git a/4-binary/01-arraybuffer-binary-arrays/arraybuffer-view-buffersource.svg b/4-binary/01-arraybuffer-binary-arrays/arraybuffer-view-buffersource.svg
index 12daeeaec4..b9de47de1e 100644
--- a/4-binary/01-arraybuffer-binary-arrays/arraybuffer-view-buffersource.svg
+++ b/4-binary/01-arraybuffer-binary-arrays/arraybuffer-view-buffersource.svg
@@ -1 +1 @@
-0 2 1 3 4 5 6 7 0 1 2 3 0 1 new ArrayBuffer(16) ArrayBufferView Uint16Array Int16Array Uint8Array Int8Array Uint8ClampedArray Uint32Array Int32Array Float32Array Float64Array DataView get/setUint8(offset) get/setFloat32(offset)... BufferSource 1 0 2 3 4 5 6 7 8 9 10 11 12 13 14 15
\ No newline at end of file
+0 2 1 3 4 5 6 7 0 1 2 3 0 1 new ArrayBuffer(16) ArrayBufferView Uint16Array Int16Array Uint8Array Int8Array Uint8ClampedArray Uint32Array Int32Array Float32Array Float64Array DataView get/setUint8(offset) get/setFloat32(offset)... BufferSource 1 0 2 3 4 5 6 7 8 9 10 11 12 13 14 15
\ No newline at end of file
diff --git a/4-binary/01-arraybuffer-binary-arrays/arraybuffer-views.svg b/4-binary/01-arraybuffer-binary-arrays/arraybuffer-views.svg
index 02160e31e5..b022796ad2 100644
--- a/4-binary/01-arraybuffer-binary-arrays/arraybuffer-views.svg
+++ b/4-binary/01-arraybuffer-binary-arrays/arraybuffer-views.svg
@@ -1 +1 @@
-1 0 0 2 1 3 2 3 4 5 6 7 8 9 10 11 12 13 14 15 4 5 6 7 0 1 2 3 0 1 new ArrayBuffer(16) Uint16Array Uint8Array Uint32Array Float64Array
\ No newline at end of file
+1 0 0 2 1 3 2 3 4 5 6 7 8 9 10 11 12 13 14 15 4 5 6 7 0 1 2 3 0 1 new ArrayBuffer(16) Uint16Array Uint8Array Uint32Array Float64Array
\ No newline at end of file
diff --git a/4-binary/01-arraybuffer-binary-arrays/article.md b/4-binary/01-arraybuffer-binary-arrays/article.md
index b1d0bbb0d0..6e6ea8022f 100644
--- a/4-binary/01-arraybuffer-binary-arrays/article.md
+++ b/4-binary/01-arraybuffer-binary-arrays/article.md
@@ -73,8 +73,11 @@ for(let num of view) {
The common term for all these views (`Uint8Array`, `Uint32Array`, etc) is [TypedArray](https://tc39.github.io/ecma262/#sec-typedarray-objects). They share the same set of methods and properities.
-They are much more like regular arrays: have indexes and iterable.
+Please note, there's no constructor called `TypedArray`, it's just a common "umbrella" term to represent one of views over `ArrayBuffer`: `Int8Array`, `Uint8Array` and so on, the full list will soon follow.
+When you see something like `new TypedArray`, it means any of `new Int8Array`, `new Uint8Array`, etc.
+
+Typed array behave like regular arrays: have indexes and iterable.
A typed array constructor (be it `Int8Array` or `Float64Array`, doesn't matter) behaves differently depending on argument types.
@@ -232,7 +235,7 @@ let dataView = new DataView(buffer);
// get 8-bit number at offset 0
alert( dataView.getUint8(0) ); // 255
-// now get 16-bit number at offset 0, it consists of 2 bytes, together iterpreted as 65535
+// now get 16-bit number at offset 0, it consists of 2 bytes, together interpreted as 65535
alert( dataView.getUint16(0) ); // 65535 (biggest 16-bit unsigned int)
// get 32-bit number at offset 0
@@ -241,7 +244,7 @@ alert( dataView.getUint32(0) ); // 4294967295 (biggest 32-bit unsigned int)
dataView.setUint32(0, 0); // set 4-byte number to zero, thus setting all bytes to 0
```
-`DataView` is great when we store mixed-format data in the same buffer. E.g we store a sequence of pairs (16-bit integer, 32-bit float). Then `DataView` allows to access them easily.
+`DataView` is great when we store mixed-format data in the same buffer. For example, when we store a sequence of pairs (16-bit integer, 32-bit float), `DataView` allows to access them easily.
## Summary
diff --git a/4-binary/02-text-decoder/article.md b/4-binary/02-text-decoder/article.md
index d9f5e8fa55..619eb9d2d3 100644
--- a/4-binary/02-text-decoder/article.md
+++ b/4-binary/02-text-decoder/article.md
@@ -1,30 +1,30 @@
-# TextDecoder and TextEncoder
+# ํ
์คํธ ๋์ฝ๋์ ํ
์คํธ ์ธ์ฝ๋
-What if the binary data is actually a string? For instance, we received a file with textual data.
+์ด์ง ๋ฐ์ดํฐ๊ฐ ๋ฌธ์์ด์ด๋ผ๋ฉด ์ด๋จ์ง ์๊ฐํด๋ด
์๋ค. ์๋ฅผ ๋ค์ด ํ
์คํธ ๋ฐ์ดํฐ๊ฐ ์๋ ํ์ผ์ ๋ฐ์๋ค๊ณ ๊ฐ์ ํ๊ฒ ์ต๋๋ค.
-The build-in [TextDecoder](https://encoding.spec.whatwg.org/#interface-textdecoder) object allows to read the value into an actual JavaScript string, given the buffer and the encoding.
+๋ด์ฅ ๊ฐ์ฒด, [TextDecoder](https://encoding.spec.whatwg.org/#interface-textdecoder)๋ ์ฃผ์ด์ง ๋ฒํผ์ ์ธ์ฝ๋ฉ์ผ๋ก ๊ฐ์ ์ค์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ์์ด๋ก ์ฝ์ ์ ์๊ฒ ํด์ค๋๋ค.
-We first need to create it:
+์ฒซ ๋ฒ์งธ๋ก ๊ฐ์ฒด๋ฅผ ์์ฑํฉ๋๋ค.
```js
let decoder = new TextDecoder([label], [options]);
```
-- **`label`** -- the encoding, `utf-8` by default, but `big5`, `windows-1251` and many other are also supported.
-- **`options`** -- optional object:
- - **`fatal`** -- boolean, if `true` then throw an exception for invalid (non-decodable) characters, otherwise (default) replace them with character `\uFFFD`.
- - **`ignoreBOM`** -- boolean, if `true` then ignore BOM (an optional byte-order unicode mark), rarely needed.
+- **`label`** -- ๊ธฐ๋ณธ์ ์ธ ์ธ์ฝ๋ฉ ๋ฐฉ์์ `utf-8`์ด์ง๋ง `big5`, `windows-1251` ๋ฐ ๋ค๋ฅธ ์ธ์ฝ๋ฉ ๋ฐฉ์๋ ์ง์๋ฉ๋๋ค.
+- **`options`** -- ์ ํ ํญ๋ชฉ์
๋๋ค.
+ - **`fatal`** -- ๋ถ๋ฆฐ ๊ฐ. `true`์ธ ๊ฒฝ์ฐ, ์๋ชป๋ ๊ธ์(๋์ฝ๋ฉ ๋ถ๊ฐ๋ฅํ ๊ธ์)๋ฅผ ๋์์ผ๋ก ์์ธ๋ฅผ ๋์ง๋๋ค. `false(๊ธฐ๋ณธ๊ฐ)`์ธ ๊ฒฝ์ฐ, ๊ธ์๋ฅผ `\uFFFD`๋ก ๋์ฒดํฉ๋๋ค.
+ - **`ignoreBOM`** -- ๋ถ๋ฆฐ ๊ฐ์ด `true`์ธ ๊ฒฝ์ฐ ์ฌ์ฉ๋์ง ์๋ ๋ฐ์ดํธ ์์ ํ์(Byte Order Mark, BOM)์ ๋ฌด์ํฉ๋๋ค.
-...And then decode:
+๊ทธ๋ฐ ๋ค์ ์์ฑํ๋ ๊ฐ์ฒด๋ฅผ ๋์ฝ๋ฉํฉ๋๋ค.
```js
let str = decoder.decode([input], [options]);
```
-- **`input`** -- `BufferSource` to decode.
-- **`options`** -- optional object:
- - **`stream`** -- true for decoding streams, when `decoder` is called repeatedly with incoming chunks of data. In that case a multi-byte character may occasionally split between chunks. This options tells `TextDecoder` to memorize "unfinished" characters and decode them when the next chunk comes.
+- **`input`** -- ๋์ฝ๋ฉํ `BufferSource`๋ฅผ ์
๋ ฅํฉ๋๋ค.
+- **`options`** -- ์ ํ ํญ๋ชฉ์
๋๋ค.
+ - **`stream`** -- ๋ง์ ์์ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์๋ค์ฌ `decoder`๋ฅผ ๋ฐ๋ณต์ ์ผ๋ก ํธ์ถํ ๋๋ decoding์ด ๋ฐ๋ณต์ ์ผ๋ก ์คํ๋ฉ๋๋ค. ์ด๋ฐ ๊ฒฝ์ฐ ๋ฉํฐ ๋ฐ์ดํธ ๋ฌธ์๊ฐ ๋ง์ ๋ฐ์ดํฐ๋ก ๋ถํ ๋ ์ ์์ต๋๋ค. ์ด ์ต์
์ ๋ฐ์ดํฐ ๋ถํ ์ ๋ฐฉ์งํ๊ธฐ ์ํด `TextDecoder`์ "unfinished" ๋ฌธ์๋ฅผ ์
๋ ฅ์ํค๊ณ ๋ค์ ๋ฐ์ดํฐ๊ฐ ์ค๋ฉด ๋์ฝ๋ฉํ๋๋ก ์ง์ํฉ๋๋ค.
-For instance:
+์์:
```js run
let uint8Array = new Uint8Array([72, 101, 108, 108, 111]);
@@ -39,34 +39,34 @@ let uint8Array = new Uint8Array([228, 189, 160, 229, 165, 189]);
alert( new TextDecoder().decode(uint8Array) ); // ไฝ ๅฅฝ
```
-We can decode a part of the buffer by creating a subarray view for it:
+๋ฒํผ์ ํ์ ๋ฐฐ์ด ๋ทฐ๋ฅผ ์์ฑํ์ฌ ๋ฒํผ์ ์ผ๋ถ๋ฅผ ๋์ฝ๋ฉ ํ ์ ์์ต๋๋ค.
```js run
let uint8Array = new Uint8Array([0, 72, 101, 108, 108, 111, 0]);
-// the string is in the middle
-// create a new view over it, without copying anything
+// ๋ฌธ์์ด์ ๋ํ๋ด๋ ๋ฐฐ์ด์ ์์๋ ์ค๊ฐ์ ์กด์ฌํฉ๋๋ค.
+// ๋ฐฐ์ด์ ๋ณต์ฌ ์์ด ๋ฌธ์์ด์ ์ถ๋ ฅํ ์ ์์ต๋๋ค.
let binaryString = uint8Array.subarray(1, -1);
alert( new TextDecoder().decode(binaryString) ); // Hello
```
-## TextEncoder
+## ํ
์คํธ ์ธ์ฝ๋
-[TextEncoder](https://encoding.spec.whatwg.org/#interface-textencoder) does the reverse thing -- converts a string into bytes.
+[TextEncoder](https://encoding.spec.whatwg.org/#interface-textencoder)๋ ๋ฐ๋๋ก ๋ฌธ์์ด์ ๋ฐ์ดํธ๋ก ๋ณํํฉ๋๋ค.
-The syntax is:
+๋ฌธ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
-```js run
+```js
let encoder = new TextEncoder();
```
-The only encoding it supports is "utf-8".
+`TextEncoder`๋ ์ธ์ฝ๋ฉ ์ 'utf-8'๋ง ์ง์ํฉ๋๋ค.
-It has two methods:
-- **`encode(str)`** -- returns `Uint8Array` from a string.
-- **`encodeInto(str, destination)`** -- encodes `str` into `destination` that must be `Uint8Array`.
+2๊ฐ์ง ๋ฉ์๋๊ฐ ์์ต๋๋ค.
+- **`encode(str)`** -- `Uint8Array`์ ๋ฌธ์์ด์ ๋ฐํํฉ๋๋ค.
+- **`encodeInto(str, destination)`** -- `Uint8Array` ๊ตฌ์กฐ ํํ๋ก ๋ฌธ์์ด `str`๋ฅผ `destination`์ ์ธ์ฝ๋ฉํฉ๋๋ค.
```js run
let encoder = new TextEncoder();
diff --git a/4-binary/03-blob/article.md b/4-binary/03-blob/article.md
index 062e1834bc..84cf6f1cca 100644
--- a/4-binary/03-blob/article.md
+++ b/4-binary/03-blob/article.md
@@ -97,7 +97,7 @@ That's what the value of `link.href` looks like:
blob:https://javascript.info/1e67e00e-860d-40a5-89ae-6ab0cbee6273
```
-The browser for each URL generated by `URL.createObjectURL` stores an the URL -> `Blob` mapping internally. So such URLs are short, but allow to access the `Blob`.
+For each URL generated by `URL.createObjectURL` the browser stores a URL -> `Blob` mapping internally. So such URLs are short, but allow to access the `Blob`.
A generated URL (and hence the link with it) is only valid within the current document, while it's open. And it allows to reference the `Blob` in ` `, ``, basically any other object that expects an url.
diff --git a/4-binary/03-blob/blob.svg b/4-binary/03-blob/blob.svg
index b1cf6fcc8e..8f42454516 100644
--- a/4-binary/03-blob/blob.svg
+++ b/4-binary/03-blob/blob.svg
@@ -1 +1 @@
-image/png blob1 blob2 str buffer ... type Blob blobParts + =
\ No newline at end of file
+image/png blob1 blob2 str buffer ... type Blob blobParts + =
\ No newline at end of file
diff --git a/4-binary/04-file/article.md b/4-binary/04-file/article.md
index 43c0ca5837..20878b6508 100644
--- a/4-binary/04-file/article.md
+++ b/4-binary/04-file/article.md
@@ -61,8 +61,8 @@ The main methods:
The choice of `read*` method depends on which format we prefer, how we're going to use the data.
-- `readAsArrayBuffer` - for binary files, to do low-level binary operations. For high-level operations, like slicing, `File` inherits from `Blob`, so we can call them directly, without reading.
-- `readAsText` - for text files, when we'd like to get a string.
+- `readAsArrayBuffer` -- for binary files, to do low-level binary operations. For high-level operations, like slicing, `File` inherits from `Blob`, so we can call them directly, without reading.
+- `readAsText` -- for text files, when we'd like to get a string.
- `readAsDataURL` -- when we'd like to use this data in `src` for `img` or another tag. There's an alternative to reading a file for that, as discussed in chapter : `URL.createObjectURL(file)`.
As the reading proceeds, there are events:
diff --git a/4-binary/index.md b/4-binary/index.md
index 2b0c5dc825..b06a12a1a3 100644
--- a/4-binary/index.md
+++ b/4-binary/index.md
@@ -1,3 +1,3 @@
-# Binary data, files
+# ์ด์ง ๋ฐ์ดํฐ์ ํ์ผ
-Working with binary data and files in JavaScript.
+์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ด์ง ๋ฐ์ดํฐ์ ํ์ผ์ ๋ค๋ฃจ๋ ๋ฐฉ๋ฒ์ ๋ํด ์์๋ด
์๋ค.
diff --git a/5-network/01-fetch/01-fetch-users/_js.view/source.js b/5-network/01-fetch/01-fetch-users/_js.view/source.js
index 0c62e7bb57..6944125fdb 100644
--- a/5-network/01-fetch/01-fetch-users/_js.view/source.js
+++ b/5-network/01-fetch/01-fetch-users/_js.view/source.js
@@ -1,4 +1,4 @@
async function getUsers(names) {
- /* your code */
+ /* ์ฌ๊ธฐ์ ์ฝ๋๋ฅผ ์์ฑํ์ธ์. */
}
diff --git a/5-network/01-fetch/01-fetch-users/_js.view/test.js b/5-network/01-fetch/01-fetch-users/_js.view/test.js
index 95eaf876e0..e826d0e980 100644
--- a/5-network/01-fetch/01-fetch-users/_js.view/test.js
+++ b/5-network/01-fetch/01-fetch-users/_js.view/test.js
@@ -1,9 +1,9 @@
describe("getUsers", function() {
- it("gets users from GitHub", async function() {
- let users = await getUsers(['iliakan', 'remy', 'no.such.users']);
- assert.equal(users[0].login, 'iliakan');
- assert.equal(users[1].login, 'remy');
+ it('GitHub์์ ์ฌ์ฉ์ ์ ๋ณด๋ฅผ ์ป์ด์ต๋๋ค.', async function() {
+ let users = await getUsers(["C17AN", "Violet-Bora-Lee", "์ด๋ฐ์ฌ์ฉ์๋์์ต๋๋ค"]);
+ assert.equal(users[0].login, "C17AN");
+ assert.equal(users[1].login, "Violet-Bora-Lee");
assert.equal(users[2], null);
});
diff --git a/5-network/01-fetch/01-fetch-users/solution.md b/5-network/01-fetch/01-fetch-users/solution.md
index b8dfb62a2c..b5b99d2e05 100644
--- a/5-network/01-fetch/01-fetch-users/solution.md
+++ b/5-network/01-fetch/01-fetch-users/solution.md
@@ -1,11 +1,11 @@
-To fetch a user we need: `fetch('https://api.github.com/users/USERNAME')`.
+fetch๋ฅผ ํตํด ์ฌ์ฉ์ ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ค๋ ค๋ฉด `fetch('https://api.github.com/users/์ฌ์ฉ์๋ช
')`๋ฅผ ์ฌ์ฉํด์ผ ํฉ๋๋ค.
-If the response has status `200`, call `.json()` to read the JS object.
+์๋ต ์ํ ์ฝ๋๊ฐ `200`์ด๋ฉด `.json()`์ ํธ์ถํด ๊ฐ์ฒด๋ฅผ ์ฝ์ต๋๋ค.
-Otherwise, if a `fetch` fails, or the response has non-200 status, we just return `null` in the resulting arrray.
+๋ฐ๋ฉด `fetch`๊ฐ ์คํจํ๊ฑฐ๋ ์๋ต ์ํ ์ฝ๋๊ฐ 200์ด ์๋๋ผ๋ฉด `null`์ ๋ฆฌํดํ๊ณ ๋ฐฐ์ด์ ๋ด์์ผ ํฉ๋๋ค.
-So here's the code:
+๋ต์์ ์๋์ ๊ฐ์ต๋๋ค.
```js demo
async function getUsers(names) {
@@ -33,8 +33,8 @@ async function getUsers(names) {
}
```
-Please note: `.then` call is attached directly to `fetch`, so that when we have the response, it doesn't wait for other fetches, but starts to read `.json()` immediately.
+`.then`์ `fetch` ์งํ ํธ์ถ๋๋ฏ๋ก ์๋ต์ด ๋์ฐฉํ๋ฉด ๋ค๋ฅธ fetch๋ฅผ ๊ธฐ๋ค๋ฆฌ๋ ๋์ ๊ณง๋ฐ๋ก `.json()`์ผ๋ก ์๋ต์ ์ฝ๊ธฐ ์์ํ๋ค๋ ๊ฒ์ ๊ธฐ์ตํ์ธ์.
-If we used `await Promise.all(names.map(name => fetch(...)))`, and call `.json()` on the results, then it would wait for all fetches to respond. By adding `.json()` directly to each `fetch`, we ensure that individual fetches start reading data as JSON without waiting for each other.
+`await Promise.all(names.map(name => fetch(...)))`์ ๋ฐํ๊ฐ์ ๋์์ผ๋ก `.json()`์ ํธ์ถํ๋ค๋ฉด ๋ชจ๋ fetch ์๋ต์ด ์๋ฃ๋๊ธฐ ์ ๊น์ง ๊ธฐ๋ค๋ ค์ผ ํฉ๋๋ค. ๋์ ๊ฐ `fetch`๋ง๋ค `.json()`์ ํธ์ถํ๋ฉด ๋ค๋ฅธ fetch ์๋ต์ ๊ธฐ๋ค๋ฆฌ์ง ์์ผ๋ฉด์ JSON ํ์์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์ฝ์ ์ ์์ต๋๋ค.
-That's an example of how low-level Promise API can still be useful even if we mainly use `async/await`.
+์ด ์์ ๋ฅผ ํตํด ๋น๋ก `async-await`์ ์ฃผ๋ก ์ฌ์ฉํ๋๋ผ๋ ์ฌ์ ํ ํ์ ์์ค์ ํ๋ผ๋ฏธ์ค(Promise) API๊ฐ ์ ์ฉํ๊ฒ ์ฌ์ฉ๋ ์ ์์์ ์ ์ ์์ต๋๋ค.
\ No newline at end of file
diff --git a/5-network/01-fetch/01-fetch-users/task.md b/5-network/01-fetch/01-fetch-users/task.md
index 4605b49550..5cde3e2c53 100644
--- a/5-network/01-fetch/01-fetch-users/task.md
+++ b/5-network/01-fetch/01-fetch-users/task.md
@@ -1,13 +1,13 @@
-# Fetch users from GitHub
+# fetch๋ฅผ ์ฌ์ฉํด Github์์ ์ฌ์ฉ์ ์ ๋ณด ๊ฐ์ ธ์ค๊ธฐ
-Create an async function `getUsers(names)`, that gets an array of GitHub logins, fetches the users from GitHub and returns an array of GitHub users.
+GitHub ์ฌ์ฉ์ ์ด๋ฆ์ด ๋ด๊ธด ๋ฐฐ์ด์ ์ธ์๋ก ๋ฐ๋ ๋น๋๊ธฐ ํจ์ `getUsers(names)`๋ฅผ ๋ง๋ ํ, GitHub์์ fetchํ ์ฌ์ฉ์ ์ ๋ณด๋ค์ด ๋ด๊ธด ๋ฐฐ์ด์ ๋ฐํํ๋ ํจ์๋ฅผ ๋ง๋ค์ด ๋ณด์ธ์.
-The GitHub url with user information for the given `USERNAME` is: `https://api.github.com/users/USERNAME`.
+`์ฌ์ฉ์๋ช
`์ ํด๋นํ๋ ์ฌ์ฉ์ ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ค๋ ค๋ฉด GitHub API `https://api.github.com/users/์ฌ์ฉ์๋ช
`์ ์์ฒญ์ ๋ณด๋ด๋ฉด ๋ฉ๋๋ค.
-There's a test example in the sandbox.
+์๋๋ฐ์ค์ ํ
์คํธ ์ฝ๋๊ฐ ์ค๋น๋์ด ์์ต๋๋ค.
-Important details:
+์๋ ์กฐ๊ฑด๋ค์ ์ง์ผ ๊ณผ์ ๋ฅผ ์์ํด ๋ณด์ธ์.
-1. There should be one `fetch` request per user.
-2. Requests shouldn't wait for each other. So that the data arrives as soon as possible.
-3. If any request fails, or if there's no such user, the function should return `null` in the resulting array.
+1. ์ฌ์ฉ์๋น `fetch` ์์ฒญ์ ํ ๋ฒ๋ง ์ํํด์ผ ํฉ๋๋ค.
+2. ๋ฐ์ดํฐ๊ฐ ์ต๋ํ ์ผ์ฐ ๋์ฐฉํ ์ ์๋๋ก ๊ฐ ์์ฒญ์ ๋ค๋ฅธ ์์ฒญ์ ๊ฒฐ๊ณผ๋ฅผ ๊ธฐ๋ค๋ ค์๋ ์ ๋ฉ๋๋ค.
+3. ์์ฒญ์ ์คํจํ๊ฑฐ๋ ์กด์ฌํ์ง ์๋ ์ฌ์ฉ์์ ๋ํ ์์ฒญ์ ๋ณด๋๋ค๋ฉด `null`์ ๋ฆฌํดํ๊ณ ๋ฐฐ์ด ์์์ ๋ด์์ผ ํฉ๋๋ค.
diff --git a/5-network/01-fetch/article.md b/5-network/01-fetch/article.md
index 1170042e0f..3f6f3a9d49 100644
--- a/5-network/01-fetch/article.md
+++ b/5-network/01-fetch/article.md
@@ -1,87 +1,87 @@
-# Fetch
+# fetch
-JavaScript can send network requests to the server and load new information whenever is needed.
+์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ๋ฉด ํ์ํ ๋ ์๋ฒ์ ๋คํธ์ํฌ ์์ฒญ์ ๋ณด๋ด๊ณ ์๋ก์ด ์ ๋ณด๋ฅผ ๋ฐ์์ค๋ ์ผ์ ํ ์ ์์ต๋๋ค.
-For example, we can use a network request to:
+๋คํธ์ํฌ ์์ฒญ์ ๋ค์๊ณผ ๊ฐ์ ๊ฒฝ์ฐ์ ์ด๋ค์ง๋๋ค.
-- Submit an order,
-- Load user information,
-- Receive latest updates from the server,
-- ...etc.
+- ์ฃผ๋ฌธ ์ ์ก
+- ์ฌ์ฉ์ ์ ๋ณด ์ฝ๊ธฐ
+- ์๋ฒ์์ ์ต์ ๋ณ๊ฒฝ๋ถ ๊ฐ์ ธ์ค๊ธฐ
+- ๋ฑ๋ฑ
-...And all of that without reloading the page!
+๊ทธ๋ฐ๋ฐ ์ด ๋ชจ๋ ๊ฒ๋ค์ ํ์ด์ง ์๋ก ๊ณ ์นจ ์์ด๋ ๊ฐ๋ฅํฉ๋๋ค.
-There's an umbrella term "AJAX" (abbreviated A synchronous J avaScript A nd X ML) for network requests from JavaScript. We don't have to use XML though: the term comes from old times, that's why that word is there. You may have heard that term already.
+AJAX(A synchronous J avaScript A nd X ML, ๋น๋๊ธฐ์ JavaScript์ XML)๋ผ๋ ์ฉ์ด๋ฅผ ๋ค์ด๋ณด์ ๋ถ์ด ์์ผ์ค ๊ฒ๋๋ค. AJAX๋ ์๋ฒ์์ ์ถ๊ฐ ์ ๋ณด๋ฅผ ๋น๋๊ธฐ์ ์ผ๋ก ๊ฐ์ ธ์ฌ ์ ์๊ฒ ํด์ฃผ๋ ํฌ๊ด์ ์ธ ๊ธฐ์ ์ ๋ํ๋ด๋ ์ฉ์ด๋ก, ๋ง๋ค์ด์ง ์ง ์ค๋๋์์ต๋๋ค. AJAX์ XML์ด ํฌํจ๋ ์ด์ ๊ฐ ๋ฐ๋ก ์ด ๋๋ฌธ์ด์ฃ .
-There are multiple ways to send a network request and get information from the server.
+AJAX ์ด์ธ์๋ ์๋ฒ์ ๋คํธ์ํฌ ์์ฒญ์ ๋ณด๋ด๊ณ ์ ๋ณด๋ฅผ ๋ฐ์์ฌ ์ ์๋ ๋ฐฉ๋ฒ์ ๋ค์ํฉ๋๋ค.
-The `fetch()` method is modern and versatile, so we'll start with it. It's not supported by old browsers (can be polyfilled), but very well supported among the modern ones.
+๊ทธ์ค ์ด๋ฒ ์ฑํฐ์์ ๋ชจ๋ํ๊ณ ๋ค์ฌ๋ค๋ฅํ `fetch()` ๋ฉ์๋์ ๋ํด ์๊ฐํด๋๋ฆฌ๋ ค ํฉ๋๋ค. `fetch()`๋ ๊ตฌ์ ๋ธ๋ผ์ฐ์ ์์ ์ง์ํ์ง ์์ง๋ง(ํด๋ฆฌํ์ ์ฐ๋ฉด ์ฌ์ฉ ๊ฐ๋ฅ) ๋๋ถ๋ถ์ ๋ชจ๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์ง์ํฉ๋๋ค.
-The basic syntax is:
+`fetch()` ๊ธฐ๋ณธ ๋ฌธ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
```js
let promise = fetch(url, [options])
```
-- **`url`** -- the URL to access.
-- **`options`** -- optional parameters: method, headers etc.
+- **`url`** -- ์ ๊ทผํ๊ณ ์ ํ๋ URL
+- **`options`** -- ์ ํ ๋งค๊ฐ๋ณ์, method๋ header ๋ฑ์ ์ง์ ํ ์ ์์
-Without `options`, that is a simple GET request, downloading the contents of the `url`.
+`options`์ ์๋ฌด๊ฒ๋ ๋๊ธฐ์ง ์์ผ๋ฉด ์์ฒญ์ `GET` ๋ฉ์๋๋ก ์งํ๋์ด `url`๋ก๋ถํฐ ์ฝํ
์ธ ๊ฐ ๋ค์ด๋ก๋ ๋ฉ๋๋ค.
-The browser starts the request right away and returns a promise that the calling code should use to get the result.
+`fetch()`๋ฅผ ํธ์ถํ๋ฉด ๋ธ๋ผ์ฐ์ ๋ ๋คํธ์ํฌ ์์ฒญ์ ๋ณด๋ด๊ณ ํ๋ผ๋ฏธ์ค๊ฐ ๋ฐํ๋ฉ๋๋ค. ๋ฐํ๋๋ ํ๋ผ๋ฏธ์ค๋ `fetch()`๋ฅผ ํธ์ถํ๋ ์ฝ๋์์ ์ฌ์ฉ๋ฉ๋๋ค.
-Getting a response is usually a two-stage process.
+์๋ต์ ๋๊ฐ ๋ ๋จ๊ณ๋ฅผ ๊ฑฐ์ณ ์งํ๋ฉ๋๋ค.
-**First, the `promise`, returned by `fetch`, resolves with an object of the built-in [Response](https://fetch.spec.whatwg.org/#response-class) class as soon as the server responds with headers.**
+**๋จผ์ , ์๋ฒ์์ ์๋ต ํค๋๋ฅผ ๋ฐ์๋ง์ `fetch` ํธ์ถ ์ ๋ฐํ๋ฐ์ `promise`๊ฐ ๋ด์ฅ ํด๋์ค [Response](https://fetch.spec.whatwg.org/#response-class)์ ์ธ์คํด์ค์ ํจ๊ป ์ดํ ์ํ๊ฐ ๋ฉ๋๋ค.**
-At this stage we can check HTTP status, to see whether it is successful or not, check headers, but don't have the body yet.
+์ด ๋จ๊ณ๋ ์์ง ๋ณธ๋ฌธ(body)์ด ๋์ฐฉํ๊ธฐ ์ ์ด์ง๋ง, ๊ฐ๋ฐ์๋ ์๋ต ํค๋๋ฅผ ๋ณด๊ณ ์์ฒญ์ด ์ฑ๊ณต์ ์ผ๋ก ์ฒ๋ฆฌ๋์๋์ง ์๋์ง๋ฅผ ํ์ธํ ์ ์์ต๋๋ค.
-The promise rejects if the `fetch` was unable to make HTTP-request, e.g. network problems, or there's no such site. Abnormal HTTP-statuses, such as 404 or 500 do not cause an error.
+๋คํธ์ํฌ ๋ฌธ์ ๋ ์กด์ฌํ์ง ์๋ ์ฌ์ดํธ์ ์ ์ํ๋ ค๋ ๊ฒฝ์ฐ๊ฐ์ด HTTP ์์ฒญ์ ๋ณด๋ผ ์ ์๋ ์ํ์์ ํ๋ผ๋ฏธ์ค๋ ๊ฑฐ๋ถ์ํ๊ฐ ๋ฉ๋๋ค.
-We can see HTTP-status in response properties:
+HTTP ์ํ๋ ์๋ต ํ๋กํผํฐ๋ฅผ ์ฌ์ฉํด ํ์ธํ ์ ์์ต๋๋ค.
-- **`status`** -- HTTP status code, e.g. 200.
-- **`ok`** -- boolean, `true` if the HTTP status code is 200-299.
+- **`status`** -- HTTP ์ํ ์ฝ๋(์: 200)
+- **`ok`** -- ๋ถ๋ฆฐ ๊ฐ. HTTP ์ํ ์ฝ๋๊ฐ 200๊ณผ 299 ์ฌ์ด์ผ ๊ฒฝ์ฐ `true`
-For example:
+์์:
```js
let response = await fetch(url);
-if (response.ok) { // if HTTP-status is 200-299
- // get the response body (the method explained below)
+if (response.ok) { // HTTP ์ํ ์ฝ๋๊ฐ 200~299์ผ ๊ฒฝ์ฐ
+ // ์๋ต ๋ชฌ๋ฌธ์ ๋ฐ์ต๋๋ค(๊ด๋ จ ๋ฉ์๋๋ ์๋์์ ์ค๋ช
).
let json = await response.json();
} else {
alert("HTTP-Error: " + response.status);
}
```
-**Second, to get the response body, we need to use an additional method call.**
+**๋ ๋ฒ์งธ ๋จ๊ณ์์ ์ถ๊ฐ ๋ฉ์๋๋ฅผ ํธ์ถํด ์๋ต ๋ณธ๋ฌธ์ ๋ฐ์ต๋๋ค.**
-`Response` provides multiple promise-based methods to access the body in various formats:
+`response` ์๋ ํ๋ผ๋ฏธ์ค๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ๋ ๋ค์ํ ๋ฉ์๋๊ฐ ์์ต๋๋ค. ์ด ๋ฉ์๋๋ค์ ์ฌ์ฉํ๋ฉด ๋ค์ํ ํํ์ ์๋ต ๋ณธ๋ฌธ์ ์ฒ๋ฆฌํ ์ ์์ต๋๋ค.
-- **`response.text()`** -- read the response and return as text,
-- **`response.json()`** -- parse the response as JSON,
-- **`response.formData()`** -- return the response as `FormData` object (explained in the [next chapter](info:formdata)),
-- **`response.blob()`** -- return the response as [Blob](info:blob) (binary data with type),
-- **`response.arrayBuffer()`** -- return the response as [ArrayBuffer](info:arraybuffer-binary-arrays) (low-level representaion of binary data),
-- additionally, `response.body` is a [ReadableStream](https://streams.spec.whatwg.org/#rs-class) object, it allows to read the body chunk-by-chunk, we'll see an example later.
+- **`response.text()`** -- ์๋ต์ ์ฝ๊ณ ํ
์คํธ๋ฅผ ๋ฐํํฉ๋๋ค,
+- **`response.json()`** -- ์๋ต์ JSON ํํ๋ก ํ์ฑํฉ๋๋ค,
+- **`response.formData()`** -- ์๋ต์ `FormData` ๊ฐ์ฒด ํํ๋ก ๋ฐํํฉ๋๋ค. `FormData`์ ๋ํ ์์ธํ ๋ด์ฉ์ [๋ค์ ์ฑํฐ](info:formdata)์์ ๋ค๋ฃจ๊ฒ ์ต๋๋ค.
+- **`response.blob()`** -- ์๋ต์ [Blob](info:blob)(ํ์
์ด ์๋ ๋ฐ์ด๋๋ฆฌ ๋ฐ์ดํฐ) ํํ๋ก ๋ฐํํฉ๋๋ค.
+- **`response.arrayBuffer()`** -- ์๋ต์ [ArrayBuffer](info:arraybuffer-binary-arrays)(๋ฐ์ด๋๋ฆฌ ๋ฐ์ดํฐ๋ฅผ ๋ก์ฐ ๋ ๋ฒจ ํ์์ผ๋ก ํํํ ๊ฒ) ํํ๋ก ๋ฐํํฉ๋๋ค.
+- ์ด ์ธ์๋ `response.body`๊ฐ ์๋๋ฐ, [ReadableStream](https://streams.spec.whatwg.org/#rs-class) ๊ฐ์ฒด์ธ `response.body`๋ฅผ ์ฌ์ฉํ๋ฉด ์๋ต ๋ณธ๋ฌธ์ ์ฒญํฌ ๋จ์๋ก ์ฝ์ ์ ์์ต๋๋ค. ์์ธํ ์ฉ๋ก๋ ๊ณง ์ดํด๋ณด๊ฒ ์ต๋๋ค.
-For instance, let's get a JSON-object with latest commits from GitHub:
+์ง๊ธ๊น์ง ๋ฐฐ์ด ๋ด์ฉ์ ํ ๋๋ก GitHub์์ ๋ง์ง๋ง ์ปค๋ฐ์ JSON ๊ฐ์ฒด ํํ๋ก ๋ฐ์๋ด
์๋ค.
```js run async
-let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
+let url = 'https://api.github.com/repos/javascript-tutorial/ko.javascript.info/commits';
let response = await fetch(url);
*!*
-let commits = await response.json(); // read response body and parse as JSON
+let commits = await response.json(); // ์๋ต ๋ณธ๋ฌธ์ ์ฝ๊ณ JSON ํํ๋ก ํ์ฑํจ
*/!*
alert(commits[0].author.login);
```
-Or, the same without `await`, using pure promises syntax:
+์ ์์๋ฅผ `await` ์์ด ํ๋ผ๋ฏธ์ค๋ง ์ฌ์ฉํ๋ฉด ๋ค์๊ณผ ๊ฐ์ด ๋ฐ๊ฟ ์ ์์ต๋๋ค.
```js run
fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
@@ -89,70 +89,71 @@ fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commi
.then(commits => alert(commits[0].author.login));
```
-To get the reponse text, `await response.text()` instead of `.json()`:
+์๋ต์ ํ
์คํธ ํํ๋ก ์ป์ผ๋ ค๋ฉด `.json()` ๋์ `await response.text()`๋ฅผ ์ฌ์ฉํ๋ฉด ๋ฉ๋๋ค.
```js run async
let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');
-let text = await response.text(); // read response body as text
+let text = await response.text(); // ์๋ต ๋ณธ๋ฌธ์ ํ
์คํธ ํํ๋ก ์ฝ์ต๋๋ค.
alert(text.slice(0, 80) + '...');
```
-As a show-case for reading in binary format, let's fetch and show a logo image of ["fetch" specification](https://fetch.spec.whatwg.org) (see chapter [Blob](info:blob) for details about operations on `Blob`):
+์ด๋ฒ์ `fetch`๋ฅผ ์ฌ์ฉํด [fetch ๋ช
์ธ์](https://fetch.spec.whatwg.org) ์ฐ์ธก ์๋จ์ ์๋ ๋ก๊ณ (๋ฐ์ด๋๋ฆฌ ๋ฐ์ดํฐ)๋ฅผ ๊ฐ์ ธ์ ๋ณด๊ฒ ์ต๋๋ค. ์ฐธ๊ณ ๋ก `Blob`์ ๋ํ ์์ธํ ๋ด์ฉ์ [๋งํฌ](info:blob)์์ ์ดํด๋ณผ ์ ์์ต๋๋ค.
```js async run
let response = await fetch('/article/fetch/logo-fetch.svg');
*!*
-let blob = await response.blob(); // download as Blob object
+let blob = await response.blob(); // ์๋ต์ Blob ๊ฐ์ฒด ํํ๋ก ๋ค์ด๋ก๋๋ฐ์ต๋๋ค.
*/!*
-// create for it
+// ๋ค์ด๋ก๋๋ฐ์ Blob์ ๋ด์ ๋ฅผ ๋ง๋ญ๋๋ค.
let img = document.createElement('img');
img.style = 'position:fixed;top:10px;left:10px;width:100px';
document.body.append(img);
-// show it
+// ์ด๋ฏธ์ง๋ฅผ ํ๋ฉด์ ๋ณด์ฌ์ค๋๋ค.
img.src = URL.createObjectURL(blob);
-setTimeout(() => { // hide after three seconds
+setTimeout(() => { // 3์ด ํ ์ด๋ฏธ์ง๋ฅผ ์จ๊น๋๋ค.
img.remove();
URL.revokeObjectURL(img.src);
}, 3000);
```
````warn
-We can choose only one body-reading method.
+๋ณธ๋ฌธ์ ์ฝ์ ๋ ์ฌ์ฉ๋๋ ๋ฉ์๋๋ ๋ฑ ํ๋๋ง ์ฌ์ฉํ ์ ์์ต๋๋ค.
-If we've already got the response with `response.text()`, then `response.json()` won't work, as the body content has already been processed.
+`response.text()`๋ฅผ ์ฌ์ฉํด ์๋ต์ ์ป์๋ค๋ฉด ๋ณธ๋ฌธ์ ์ฝํ
์ธ ๋ ๋ชจ๋ ์ฒ๋ฆฌ ๋ ์ํ์ด๊ธฐ ๋๋ฌธ์ `response.json()`์ ๋์ํ์ง ์์ต๋๋ค.
```js
-let text = await response.text(); // response body consumed
-let parsed = await response.json(); // fails (already consumed)
+let text = await response.text(); // ์๋ต ๋ณธ๋ฌธ์ด ์๋น๋ฉ๋๋ค.
+let parsed = await response.json(); // ์คํจ
+```
````
-## Response headers
+## ์๋ต ํค๋
-The response headers are available in a Map-like headers object in `response.headers`.
+์๋ต ํค๋๋ `response.headers`์ ๋งต๊ณผ ์ ์ฌํ ํํ๋ก ์ ์ฅ๋ฉ๋๋ค.
-It's not exactly a Map, but it has similar methods to get individual headers by name or iterate over them:
+๋งต์ ์๋๋๋ค. ํ์ง๋ง ๋งต๊ณผ ์ ์ฌํ ๋ฉ์๋๋ฅผ ์ง์ํ์ฃ . ์ด ๋ฉ์๋๋ค์ ์ฌ์ฉํ๋ฉด ํค๋ ์ผ๋ถ๋ง ์ถ์ถํ๊ฑฐ๋ ํค๋ ์ ์ฒด๋ฅผ ์ํํ ์ ์์ต๋๋ค.
```js run async
let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');
-// get one header
+// ํค๋ ์ผ๋ถ๋ฅผ ์ถ์ถ
alert(response.headers.get('Content-Type')); // application/json; charset=utf-8
-// iterate over all headers
+// ํค๋ ์ ์ฒด๋ฅผ ์ํ
for (let [key, value] of response.headers) {
alert(`${key} = ${value}`);
}
```
-## Request headers
+## ์์ฒญ ํค๋
-To set a request header in `fetch`, we can use the `headers` option. It has an object with outgoing headers, like this:
+`headers` ์ต์
์ ์ฌ์ฉํ๋ฉด `fetch`์ ์์ฒญ ํค๋๋ฅผ ์ค์ ํ ์ ์์ต๋๋ค. `headers`์ ์๋์ ๊ฐ์ด ๋ค์ํ ํค๋ ์ ๋ณด๊ฐ ๋ด๊ธด ๊ฐ์ฒด๋ฅผ ๋๊ธฐ๊ฒ ๋ฉ๋๋ค.
```js
let response = fetch(protectedUrl, {
@@ -162,7 +163,7 @@ let response = fetch(protectedUrl, {
});
```
-...But there's a list of [forbidden HTTP headers](https://fetch.spec.whatwg.org/#forbidden-header-name) that we can't set:
+๊ทธ๋ฐ๋ฐ `headers`๋ฅผ ์ฌ์ฉํด ์ค์ ํ ์ ์๋ ํค๋๋ ์์ต๋๋ค. ๊ธ์ง๋ ํค๋ ์ ์ฒด ๋ชฉ๋ก์ [๋งํฌ](https://fetch.spec.whatwg.org/#forbidden-header-name)์์ ํ์ธํ ์ ์์ต๋๋ค.
- `Accept-Charset`, `Accept-Encoding`
- `Access-Control-Request-Headers`
@@ -185,22 +186,22 @@ let response = fetch(protectedUrl, {
- `Proxy-*`
- `Sec-*`
-These headers ensure proper and safe HTTP, so they are controlled exclusively by the browser.
+์ด๋ฐ ์ ์ฝ์ HTTP๋ฅผ ๋ชฉ์ ์ ๋ง๊ณ ์์ ํ๊ฒ ์ฌ์ฉํ ์ ์๋๋ก ํ๋ ค๊ณ ๋ง๋ค์ด์ก์ต๋๋ค. ๊ธ์ง ๋ชฉ๋ก์ ์๋ ํค๋๋ ๋ธ๋ผ์ฐ์ ๋ง ๋ฐฐํ์ ์ผ๋ก ์ค์ , ๊ด๋ฆฌํ ์ ์์ต๋๋ค.
-## POST requests
+## POST ์์ฒญ
-To make a `POST` request, or a request with another method, we need to use `fetch` options:
+`GET` ์ด์ธ์ ์์ฒญ์ ๋ณด๋ด๋ ค๋ฉด ์ถ๊ฐ ์ต์
์ ์ฌ์ฉํด์ผ ํฉ๋๋ค.
-- **`method`** -- HTTP-method, e.g. `POST`,
-- **`body`** -- the request body, one of:
- - a string (e.g. JSON-encoded),
- - `FormData` object, to submit the data as `form/multipart`,
- - `Blob`/`BufferSource` to send binary data,
- - [URLSearchParams](info:url), to submit the data in `x-www-form-urlencoded` encoding, rarely used.
+- **`method`** -- HTTP ๋ฉ์๋(์: `POST`)
+- **`body`** -- ์์ฒญ ๋ณธ๋ฌธ์ผ๋ก ๋ค์ ํญ๋ชฉ ์ค ํ๋์ด์ด์ผ ํฉ๋๋ค.
+ - ๋ฌธ์์ด(์: JSON ๋ฌธ์์ด)
+ - `FormData`๊ฐ์ฒด -- `form/multipart` ํํ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ์กํ๊ธฐ ์ํด ์ฐ์
๋๋ค.
+ - `Blob`๋ `BufferSource` -- ๋ฐ์ด๋๋ฆฌ ๋ฐ์ดํฐ ์ ์ก์ ์ํด ์ฐ์
๋๋ค.
+ - [URLSearchParams](info:url) -- ๋ฐ์ดํฐ๋ฅผ `x-www-form-urlencoded` ํํ๋ก ๋ณด๋ด๊ธฐ ์ํด ์ฐ์ด๋๋ฐ, ์์ฆ์ ์ ์ฌ์ฉํ์ง ์์ต๋๋ค.
-The JSON format is used most of the time.
+๋๋ถ๋ถ์ JSON์ ์์ฒญ ๋ณธ๋ฌธ์ ์ค์ด ๋ณด๋ด๊ฒ ๋ฉ๋๋ค.
-For example, this code submits `user` object as JSON:
+`user` ๊ฐ์ฒด๋ฅผ ๋ณธ๋ฌธ์ ์ค์ด ๋ณด๋ด๋ ์์๋ฅผ ์ดํด๋ด
์๋ค.
```js run async
let user = {
@@ -222,21 +223,21 @@ let result = await response.json();
alert(result.message);
```
-Please note, if the request `body` is a string, then `Content-Type` header is set to `text/plain;charset=UTF-8` by default.
+`POST` ์์ฒญ์ ๋ณด๋ผ ๋ ์ฃผ์ํ ์ ์ ์์ฒญ `๋ณธ๋ฌธ`์ด ๋ฌธ์์ด์ผ ๋ `Content-Type` ํค๋๊ฐ `text/plain;charset=UTF-8`๋ก ๊ธฐ๋ณธ ์ค์ ๋๋ค๋ ์ ์
๋๋ค.
-But, as we're going to send JSON, we use `headers` option to send `application/json` instead, the correct `Content-Type` for JSON-encoded data.
+ํ์ง๋ง ์ ์์์์ JSON์ ์ ์กํ๊ณ ์๊ธฐ ๋๋ฌธ์ `headers`์ ์ ๋๋ก ๋ `Content-Type`์ธ `application/json`์ ์ค์ ํด ์ฃผ์์ต๋๋ค.
-## Sending an image
+## ์ด๋ฏธ์ง ์ ์กํ๊ธฐ
-We can also submit binary data with `fetch` using `Blob` or `BufferSource` objects.
+`Blob`์ด๋ `BufferSource` ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ๋ฉด `fetch`๋ก ๋ฐ์ด๋๋ฆฌ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ ์ ์์ต๋๋ค.
-In this example, there's a `` where we can draw by moving a mouse over it. A click on the "submit" button sends the image to server:
+์์๋ฅผ ์ดํด๋ด
์๋ค. ``์ ๋ง์ฐ์ค๋ฅผ ์์ง์ฌ ์ด๋ฏธ์ง๋ฅผ ๋ง๋ค๊ณ '์ ์ก' ๋ฒํผ์ ๋๋ฌ ์ด๋ฏธ์ง๋ฅผ ์๋ฒ์ ์ ์กํด๋ณด๊ฒ ์ต๋๋ค.
```html run autorun height="90"
-
+
```
-In this example, the server code is not presented, as it's beyound our scope. The server accepts the POST request and replies "User saved".
+์์ฒญ์ ๋ฐ์ ์ฒ๋ฆฌํ๋ ์๋ฒ ์ธก ์ฝ๋๋ ํํ ๋ฆฌ์ผ ๋ฒ์๋ฅผ ๋์ด์์ ์ถ๊ฐํ์ง ์์๋๋ฐ, ์๋ฒ๋ POST ์์ฒญ์ ๋ฐ์ '์ ์ฅ ์ฑ๊ณต'์ด๋ผ๋ ์๋ต์ ๋ณด๋ด์ค๋ค๊ณ ์ ๋๋ง ์๊ณ ๊ณ์๋ฉด ๋ฉ๋๋ค.
-## FormData Methods
+## FormData ๋ฉ์๋
-We can modify fields in `FormData` with methods:
+`FormData`์ ์ํ๋ ํ๋๋ ์๋์ ๊ฐ์ ๋ฉ์๋๋ก ์์ ํ ์ ์์ต๋๋ค.
-- `formData.append(name, value)` - add a form field with the given `name` and `value`,
-- `formData.append(name, blob, fileName)` - add a field as if it were ` `, the third argument `fileName` sets file name (not form field name), as it it were a name of the file in user's filesystem,
-- `formData.delete(name)` - remove the field with the given `name`,
-- `formData.get(name)` - get the value of the field with the given `name`,
-- `formData.has(name)` - if there exists a field with the given `name`, returns `true`, otherwise `false`
+- `formData.append(name, value)` - `name`๊ณผ `value`๋ฅผ ๊ฐ์ง ํผ ํ๋๋ฅผ ์ถ๊ฐ
+- `formData.append(name, blob, fileName)` - ` `ํํ์ ํ๋๋ฅผ ์ถ๊ฐ. ์ธ ๋ฒ์งธ ์ธ์ `fileName`์ (ํ๋ ์ด๋ฆ์ด ์๋๊ณ ) ์ฌ์ฉ์๊ฐ ํด๋น ์ด๋ฆ์ ๊ฐ์ง ํ์ผ์ ํผ์ ์ถ๊ฐํ ๊ฒ์ฒ๋ผ ์ค์ ํด์ค
+- `formData.delete(name)` - `name`์ ํด๋นํ๋ ํ๋๋ฅผ ์ญ์
+- `formData.get(name)` - `name`์ ํด๋นํ๋ ํ๋์ ๊ฐ์ ๊ฐ์ ธ์ด
+- `formData.has(name)` - `name`์ ํด๋นํ๋ ํ๋๊ฐ ์์ผ๋ฉด `true`๋ฅผ, ๊ทธ๋ ์ง ์์ผ๋ฉด `false`๋ฅผ ๋ฐํ
-A form is technically allowed to have many fields with the same `name`, so multiple calls to `append` add more same-named fields.
+ํผ์ ์ด๋ฆ(`name`)์ด ๊ฐ์ ํ๋ ์ฌ๋ฌ ๊ฐ๋ฅผ ํ์ฉํ๊ธฐ ๋๋ฌธ์ `append` ๋ฉ์๋๋ฅผ ์ฌ๋ฌ ๋ฒ ํธ์ถํด ์ด๋ฆ์ด ๊ฐ์ ํ๋๋ฅผ ๊ณ์ ์ถ๊ฐํด๋ ๋ฌธ์ ๊ฐ ์์ต๋๋ค.
-There's also method `set`, with the same syntax as `append`. The difference is that `.set` removes all fields with the given `name`, and then appends a new field. So it makes sure there's only field with such `name`, the rest is just like `append`:
+`append` ๋ฉ์๋ ์ด์ธ์ ํ๋ ์ถ๊ฐ ์ ์ฌ์ฉํ ์ ์๋ ๋ฉ์๋๋ก `set`๋ ์์ต๋๋ค. `set`์ด `append` ๋ฉ์๋์ ๋ค๋ฅธ ์ ์ `set`์ `name`๊ณผ ๋์ผํ ์ด๋ฆ์ ๊ฐ์ง ํ๋๋ฅผ ๋ชจ๋ ์ ๊ฑฐํ๊ณ ์๋ก์ด ํ๋ ํ๋๋ฅผ ์ถ๊ฐํ๋ค๋ ๋ฐ ์์ต๋๋ค. ๋ฐ๋ผ์ `set` ๋ฉ์๋๋ฅผ ์ฐ๋ฉด `name`์ ๊ฐ์ง ํ๋๊ฐ ๋จ ํ ๊ฐ๋ง ์๊ฒ๋ ๋ณด์ฅํ ์ ์์ต๋๋ค. ์ด ์ธ์ ๋ค๋ฅธ ๊ธฐ๋ฅ์ `append` ๋ฉ์๋์ ๋์ผํฉ๋๋ค.
-- `formData.set(name, value)`,
-- `formData.set(name, blob, fileName)`.
+- `formData.set(name, value)`
+- `formData.set(name, blob, fileName)`
-Also we can iterate over formData fields using `for..of` loop:
+์ฐธ๊ณ ๋ก ํผ ๋ฐ์ดํฐ ํ๋์ ๋ฐ๋ณต ์์
์ ํ ๋ `for..of` ๋ฃจํ๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.
```js run
let formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
-// List key/value pairs
+// key/value ์์ด ๋ด๊ธด ๋ฆฌ์คํธ
for(let [name, value] of formData) {
- alert(`${name} = ${value}`); // key1=value1, then key2=value2
+ alert(`${name} = ${value}`); // key1 = value1, then key2 = value2
}
```
-## Sending a form with a file
+## ํ์ผ์ด ์๋ ํผ ์ ์กํ๊ธฐ
-The form is always sent as `Content-Type: form/multipart`, this encoding allows to send files. So, ` ` fields are sent also, similar to a usual form submission.
+ํผ์ ์ ์กํ ๋ HTTP ๋ฉ์์ง์ `Content-Type` ์์ฑ์ ํญ์ `multipart/form-data`์ด๊ณ ๋ฉ์์ง๋ ์ธ์ฝ๋ฉ๋์ด ์ ์ก๋ฉ๋๋ค. ํ์ผ์ด ์๋ ํผ๋ ๋น์ฐํ ์ด ๊ท์น์ ๋ฐ๋ฅด๊ธฐ ๋๋ฌธ์ ` `๋ก ์ง์ ํ ํ๋ ์ญ์ ์ผ๋ฐ ํผ์ ์ ์กํ ๋์ ์ ์ฌํ๊ฒ ์ ์ก๋ฉ๋๋ค.
-Here's an example with such form:
+ํ์ผ์ด ์๋ ํผ ์์๋ฅผ ์ดํด๋ด
์๋ค.
```html run autorun
@@ -110,21 +110,21 @@ Here's an example with such form:
```
-## Sending a form with Blob data
+## Blob ๋ฐ์ดํฐ๊ฐ ์๋ ํผ ์ ์กํ๊ธฐ
-As we've seen in the chapter , it's easy to send dynamically generated binary data e.g. an image, as `Blob`. We can supply it directly as `fetch` parameter `body`.
+ ์ฑํฐ์์ ์ดํด๋ณธ ๋ฐ์ ๊ฐ์ด ์ด๋ฏธ์ง ๊ฐ์ ๋์ ์ผ๋ก ์์ฑ๋ ๋ฐ์ด๋๋ฆฌ ํ์ผ์ `Blob` ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํด ์ฝ๊ฒ ์ ์กํ ์ ์์ต๋๋ค. ์ด๋ `Blob` ๊ฐ์ฒด๋ `fetch` ๋ฉ์๋์ `body` ๋งค๊ฐ๋ณ์์ ๋ฐ๋ก ๋๊ฒจ์ค ์ ์์ฃ .
-In practice though, it's often convenient to send an image not separately, but as a part of the form, with additional fields, such as "name" and other metadata.
+๊ทธ๋ฐ๋ฐ ์ค์ ์ฝ๋ฉ์ ํ๋ค ๋ณด๋ฉด ์ด๋ฏธ์ง๋ฅผ ๋ณ๋๋ก ๋๊ฒจ์ฃผ๋ ๊ฒ๋ณด๋ค ํผ์ ํ๋๋ฅผ ์ถ๊ฐํ๊ณ ์ฌ๊ธฐ์ ์ด๋ฏธ์ง '์ด๋ฆ' ๋ฑ์ ๋ฉํ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ด ์ค์ด ๋๊ฒจ์ฃผ๋ ๊ฒ ์ข ๋ ํธ๋ฆฌํฉ๋๋ค.
-Also, servers are usually more suited to accept multipart-encoded forms, rather than raw binary data.
+์๋ฒ ์
์ฅ์์๋ ์์ ๋ฐ์ด๋๋ฆฌ ๋ฐ์ดํฐ๋ฅผ ๋ฐ๋ ๊ฒ๋ณด๋ค multipart-encoded ํผ์ ๋ฐ๋ ๊ฒ ์ข ๋ ์ ํฉํ์ฃ .
-This example submits an image from ``, along with some other fields, as a form, using `FormData`:
+์๋๋ ``๋ฅผ ์ฌ์ฉํด ๋ง๋ ์ด๋ฏธ์ง๋ฅผ `FormData`๋ฅผ ์ฌ์ฉํด ํผ ํํ๋ก ๋ค๋ฅธ ์ถ๊ฐ ํ๋์ ํจ๊ป ์ ์กํ๋ ์์์
๋๋ค.
```html run autorun height="90"
-
+
```
-There are 4 properties to describe CSS transitions:
+CSS ํธ๋์ง์
์ ์ฌ์ฉ๋๋ ํ๋กํผํฐ๋ ๋ค ๊ฐ์ง์
๋๋ค.
- `transition-property`
- `transition-duration`
- `transition-timing-function`
- `transition-delay`
-We'll cover them in a moment, for now let's note that the common `transition` property allows to declare them together in the order: `property duration timing-function delay`, and also animate multiple properties at once.
+๊ฐ ํ๋กํผํฐ์ ๋ํด์๋ ์ ์ ํ์ ๋ค๋ฃฐ ์์ ์
๋๋ค. ์ง๊ธ์ `transition`์ด๋ผ๋ ๊ณตํต ํ๋กํผํฐ๋ฅผ ์ฌ์ฉํด ์ด ๋ค ํ๋กํผํฐ๋ฅผ ํ ๋ฒ์ ์ ์ธํ ์ ์๋ค๋ ์ฌ์ค ์ ๋๋ง ์์๋ก์๋ค. `transition` ํ๋กํผํฐ์ ๊ฐ์ ๋ฃ์ด์ฃผ๋ฉด ์ด ๊ฐ์ `property`, `duration`, `timing-function`, `delay` ํ๋กํผํฐ์ ๊ฐ๊ฐ ํ ๋น๋๊ณ , ์ ๋๋ฉ์ด์
ํจ๊ณผ๋ ํ ๋ฒ์ ์ ์ฉ๋ฉ๋๋ค.
-For instance, this button animates both `color` and `font-size`:
+์๋์ ๊ฐ์ด `transition` ํ๋กํผํฐ๋ฅผ ์ ์ํ๋ฉด `font-size`๋ 3์ด ๋์, `color`๋ 2์ด ๋์ ๋ณํํ๋ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.
```html run height=80 autorun no-beautify
-Click me
+ํด๋ฆญ
```
-There are many articles about `@keyframes` and a [detailed specification](https://drafts.csswg.org/css-animations/).
+`@keyframes`์ ๋ค๋ฃจ๋ ๊ธ์ด๋ [๋ช
์ธ์](https://drafts.csswg.org/css-animations/)๋ฅผ ์ฝ์ผ๋ฉด ๋ ๋ง์ ์ ๋ณด๋ฅผ ์ฐพ์ ์ ์์ผ๋ ์ฐธ๊ณ ํด๋ณด์๊ธฐ ๋ฐ๋๋๋ค.
-Probably you won't need `@keyframes` often, unless everything is in the constant move on your sites.
+์ฐธ๊ณ ๋ก ์ฌ์ดํธ์ ์๋ ํน์ ์์๋ฅผ ๊ณ์ ์ ์ ์ธ ํํ๋ก ์์ง์ด์ง ์๋ ํ์ `@keyframes`๋ฅผ ์ธ ์ผ์ ๋ง์ง ์์ ๊ฒ๋๋ค.
-## Summary
+## ์์ฝ
-CSS animations allow to smoothly (or not) animate changes of one or multiple CSS properties.
+CSS ์ ๋๋ฉ์ด์
์ ์ฌ์ฉํ๋ฉด ํ๋ ๋๋ ์ฌ๋ฌ CSS ํ๋กํผํฐ๋ฅผ ๋ถ๋๋ฝ๊ฒ(๋ถ๋๋ฝ์ง ์๊ฒ๋ ๊ฐ๋ฅ) ๋ณํ์ํฌ ์ ์์ต๋๋ค.
-They are good for most animation tasks. We're also able to use JavaScript for animations, the next chapter is devoted to that.
+CSS ์ ๋๋ฉ์ด์
์ ์ ํ์ด ํ์ํ ๋๋ค์์ ๊ฒฝ์ฐ์ ํฐ ๋์์ ์ค๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํด๋ ์ ํ ํจ๊ณผ๋ฅผ ์ค ์ ์๊ธด ํ๋ฐ ์ด์ ๋ํด์ ๋ค์ ์ฑํฐ์์ ๋ค๋ฃฐ ์์ ์
๋๋ค.
-Limitations of CSS animations compared to JavaScript animations:
+์ฐธ๊ณ ๋ก CSS ์ ๋๋ฉ์ด์
์ ์๋ฐ์คํฌ๋ฆฝํธ ์ ๋๋ฉ์ด์
๊ณผ ๋น๊ตํด ๋ค์๊ณผ ๊ฐ์ ์ฅ๋จ์ ์ด ์์ต๋๋ค.
```compare plus="CSS animations" minus="JavaScript animations"
-+ Simple things done simply.
-+ Fast and lightweight for CPU.
-- JavaScript animations are flexible. They can implement any animation logic, like an "explosion" of an element.
-- Not just property changes. We can create new elements in JavaScript for purposes of animation.
++ ๊ฐ๋จํ ์ ๋๋ฉ์ด์
์ ๊ฐ๋จํ ์ํํจ
++ ๋น ๋ฅด๊ณ CPU๋ฅผ ๋ง์ด ์๋ชจํ์ง ์์
+- ์๋ฐ์คํฌ๋ฆฝํธ ์ ๋๋ฉ์ด์
๋ณด๋ค ๋ ์ ์ฐํจ. ์์์ 'ํญ๋ฐ' ๊ฐ์ ํน์ํ ์ ๋๋ฉ์ด์
๋ก์ง์ ๊ตฌํํ ์ ์์
+- ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ๋ฉด ํ๋กํผํฐ์ ๋ณํ๋ฟ๋ง ์๋๋ผ, ์ ๋๋ฉ์ด์
์ ํ์ํ ์๋ก์ด ์์๋ฅผ ๋ง๋ค ์ ์๋๋ฐ, CSS๋ง์ผ๋ก๋ ๋ถ๊ฐ๋ฅํจ
```
-The majority of animations can be implemented using CSS as described in this chapter. And `transitionend` event allows to run JavaScript after the animation, so it integrates fine with the code.
+์ฌ์ค ๋๋ถ๋ถ์ ์ ๋๋ฉ์ด์
์ ์ด๋ฒ ์ฑํฐ์ ์ค๋ช
ํ CSS ํ๋กํผํฐ๋ฅผ ์ฌ์ฉํด ๊ตฌํํ ์ ์์ต๋๋ค. ์ฌ๊ธฐ์ ๋ํ์ฌ `transitionend` ์ด๋ฒคํธ๋ฅผ ์ฌ์ฉํด ์ ๋๋ฉ์ด์
์ด ๋๋ ํ์ ์คํ์ํฌ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ์ง์ ํ ์๋ ์์ฃ .
-But in the next chapter we'll do some JavaScript animations to cover more complex cases.
+ํ์ง๋ง ์ข ๋ ๋ณต์กํ ์ผ์ด์ค๋ฅผ ๋ค๋ฃจ๋ ค๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ ์ ๋๋ฉ์ด์
์ ์์์ผ ํ๋ฏ๋ก ๋ค์ ์ฑํฐ์์ ์ด๋ฅผ ๋ค๋ค๋ณด๊ฒ ์ต๋๋ค.
diff --git a/7-animation/2-css-animations/bezier-linear.svg b/7-animation/2-css-animations/bezier-linear.svg
index 34949d61e0..0c2e970f29 100644
--- a/7-animation/2-css-animations/bezier-linear.svg
+++ b/7-animation/2-css-animations/bezier-linear.svg
@@ -1 +1 @@
-1 2
\ No newline at end of file
+1 2
\ No newline at end of file
diff --git a/7-animation/2-css-animations/bezier-train-over.svg b/7-animation/2-css-animations/bezier-train-over.svg
index ff5501c43a..d12d092259 100644
--- a/7-animation/2-css-animations/bezier-train-over.svg
+++ b/7-animation/2-css-animations/bezier-train-over.svg
@@ -1 +1 @@
-(1,1) (0,0) (0,1) (1,0) 1 2 4 3
\ No newline at end of file
+(1,1) (0,0) (0,1) (1,0) 1 2 4 3
\ No newline at end of file
diff --git a/7-animation/2-css-animations/digits-negative-delay.view/index.html b/7-animation/2-css-animations/digits-negative-delay.view/index.html
index dbeefaae2c..4671d61782 100644
--- a/7-animation/2-css-animations/digits-negative-delay.view/index.html
+++ b/7-animation/2-css-animations/digits-negative-delay.view/index.html
@@ -8,7 +8,7 @@
- Click below to animate:
+ ์๋ ์ซ์๋ฅผ ํด๋ฆญํ์ธ์.
diff --git a/7-animation/2-css-animations/digits.view/index.html b/7-animation/2-css-animations/digits.view/index.html
index a156d8189e..dfb7155624 100644
--- a/7-animation/2-css-animations/digits.view/index.html
+++ b/7-animation/2-css-animations/digits.view/index.html
@@ -8,7 +8,7 @@
- Click below to animate:
+ ์๋ ์ซ์๋ฅผ ํด๋ฆญํ์ธ์.
diff --git a/7-animation/2-css-animations/ease-in-out.svg b/7-animation/2-css-animations/ease-in-out.svg
index 29ef69a113..d5c8809d81 100644
--- a/7-animation/2-css-animations/ease-in-out.svg
+++ b/7-animation/2-css-animations/ease-in-out.svg
@@ -1 +1 @@
-1 2 3 4
\ No newline at end of file
+1 2 3 4
\ No newline at end of file
diff --git a/7-animation/2-css-animations/ease-in.svg b/7-animation/2-css-animations/ease-in.svg
index 0e8b797ab5..38c98ecbc1 100644
--- a/7-animation/2-css-animations/ease-in.svg
+++ b/7-animation/2-css-animations/ease-in.svg
@@ -1 +1 @@
-1 2 3 4
\ No newline at end of file
+1 2 3 4
\ No newline at end of file
diff --git a/7-animation/2-css-animations/ease-out.svg b/7-animation/2-css-animations/ease-out.svg
index c283728706..9d22eeafd5 100644
--- a/7-animation/2-css-animations/ease-out.svg
+++ b/7-animation/2-css-animations/ease-out.svg
@@ -1 +1 @@
-1 2 3 4
\ No newline at end of file
+1 2 3 4
\ No newline at end of file
diff --git a/7-animation/2-css-animations/ease.svg b/7-animation/2-css-animations/ease.svg
index a3a1feecdb..8f9d41fe83 100644
--- a/7-animation/2-css-animations/ease.svg
+++ b/7-animation/2-css-animations/ease.svg
@@ -1 +1 @@
-1 2 3 4
\ No newline at end of file
+1 2 3 4
\ No newline at end of file
diff --git a/7-animation/2-css-animations/step-end.view/index.html b/7-animation/2-css-animations/step-end.view/index.html
index 2c8df72758..5398e1d44f 100644
--- a/7-animation/2-css-animations/step-end.view/index.html
+++ b/7-animation/2-css-animations/step-end.view/index.html
@@ -8,7 +8,7 @@
- Click below to animate:
+ ์๋ ์ซ์๋ฅผ ํด๋ฆญํ์ธ์.
diff --git a/7-animation/2-css-animations/step.view/index.html b/7-animation/2-css-animations/step.view/index.html
index 2c8df72758..5398e1d44f 100644
--- a/7-animation/2-css-animations/step.view/index.html
+++ b/7-animation/2-css-animations/step.view/index.html
@@ -8,7 +8,7 @@
- Click below to animate:
+ ์๋ ์ซ์๋ฅผ ํด๋ฆญํ์ธ์.
diff --git a/7-animation/2-css-animations/train-curve.svg b/7-animation/2-css-animations/train-curve.svg
index f152359906..298dacd4c3 100644
--- a/7-animation/2-css-animations/train-curve.svg
+++ b/7-animation/2-css-animations/train-curve.svg
@@ -1 +1 @@
-1 2 4 3
\ No newline at end of file
+1 2 4 3
\ No newline at end of file
diff --git a/7-animation/3-js-animation/back.svg b/7-animation/3-js-animation/back.svg
index 836a72cc56..fcef09ad75 100644
--- a/7-animation/3-js-animation/back.svg
+++ b/7-animation/3-js-animation/back.svg
@@ -1 +1 @@
-0 1 1
\ No newline at end of file
+0 1 1
\ No newline at end of file
diff --git a/7-animation/3-js-animation/bezier-linear.svg b/7-animation/3-js-animation/bezier-linear.svg
index 34949d61e0..0c2e970f29 100644
--- a/7-animation/3-js-animation/bezier-linear.svg
+++ b/7-animation/3-js-animation/bezier-linear.svg
@@ -1 +1 @@
-1 2
\ No newline at end of file
+1 2
\ No newline at end of file
diff --git a/7-animation/3-js-animation/bounce-inout.svg b/7-animation/3-js-animation/bounce-inout.svg
index 7274d715d7..363633abd4 100644
--- a/7-animation/3-js-animation/bounce-inout.svg
+++ b/7-animation/3-js-animation/bounce-inout.svg
@@ -1 +1 @@
-0 1 1
\ No newline at end of file
+0 1 1
\ No newline at end of file
diff --git a/7-animation/3-js-animation/circ-ease.svg b/7-animation/3-js-animation/circ-ease.svg
index cf2ed8d9e3..a7db9abcf7 100644
--- a/7-animation/3-js-animation/circ-ease.svg
+++ b/7-animation/3-js-animation/circ-ease.svg
@@ -1 +1 @@
-0 1 1
\ No newline at end of file
+0 1 1
\ No newline at end of file
diff --git a/7-animation/3-js-animation/circ.svg b/7-animation/3-js-animation/circ.svg
index 1c2beade46..3595dd6248 100644
--- a/7-animation/3-js-animation/circ.svg
+++ b/7-animation/3-js-animation/circ.svg
@@ -1 +1 @@
-0 1 1
\ No newline at end of file
+0 1 1
\ No newline at end of file
diff --git a/7-animation/3-js-animation/elastic.svg b/7-animation/3-js-animation/elastic.svg
index 851da406bb..17f04ccde7 100644
--- a/7-animation/3-js-animation/elastic.svg
+++ b/7-animation/3-js-animation/elastic.svg
@@ -1 +1 @@
-0 1 1
\ No newline at end of file
+0 1 1
\ No newline at end of file
diff --git a/7-animation/3-js-animation/linear.svg b/7-animation/3-js-animation/linear.svg
index 7a5bd71a38..daa753f0c2 100644
--- a/7-animation/3-js-animation/linear.svg
+++ b/7-animation/3-js-animation/linear.svg
@@ -1 +1 @@
-0 1 1
\ No newline at end of file
+0 1 1
\ No newline at end of file
diff --git a/7-animation/3-js-animation/quad.svg b/7-animation/3-js-animation/quad.svg
index e9bc6ac99b..25a4d00053 100644
--- a/7-animation/3-js-animation/quad.svg
+++ b/7-animation/3-js-animation/quad.svg
@@ -1 +1 @@
-0 1 1
\ No newline at end of file
+0 1 1
\ No newline at end of file
diff --git a/7-animation/3-js-animation/quint.svg b/7-animation/3-js-animation/quint.svg
index ad8ece285f..c879ef9318 100644
--- a/7-animation/3-js-animation/quint.svg
+++ b/7-animation/3-js-animation/quint.svg
@@ -1 +1 @@
-0 1 1
\ No newline at end of file
+0 1 1
\ No newline at end of file
diff --git a/7-animation/index.md b/7-animation/index.md
index 37bc847adb..220b29599d 100644
--- a/7-animation/index.md
+++ b/7-animation/index.md
@@ -1,3 +1,3 @@
-# Animation
+# ์ ๋๋ฉ์ด์
-CSS and JavaScript animations.
+CSS์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํด ์ ๋๋ฉ์ด์
์ ๋ง๋๋ ๋ฐฉ๋ฒ์ ํ์ตํฉ๋๋ค.
diff --git a/8-web-components/1-webcomponents-intro/article.md b/8-web-components/1-webcomponents-intro/article.md
index 3279cb1333..37a5d71565 100644
--- a/8-web-components/1-webcomponents-intro/article.md
+++ b/8-web-components/1-webcomponents-intro/article.md
@@ -1,76 +1,76 @@
-# From the orbital height
+# ๊ถค๋์ ๋์ด์์
-This section describes a set of modern standards for "web components".
+์ด ์น์
์์๋ '์น ์ปดํฌ๋ํธ(Web components)'์ ๋ํ ์ต์ ํ์ค ์งํฉ์ ์ค๋ช
ํฉ๋๋ค.
-As of now, these standards are under development. Some features are well-supported and integrated into the modern HTML/DOM standard, while others are yet in draft stage. You can try examples in any browser, Google Chrome is probably the most up to date with these features. Guess, that's because Google fellows are behind many of the related specifications.
+ํ์ฌ๋ก์ ์ด ํ์ค ๊ท๊ฒฉ์ ๊ฐ๋ฐ ์ค์
๋๋ค. ์ผ๋ถ ๊ธฐ๋ฅ์ ์ ์ง์๋๊ณ ์ต์ HTML/DOM ํ์ค๊ท๊ฒฉ์ ํตํฉ๋์ด ์์ผ๋ฉฐ ์ผ๋ถ ๊ธฐ๋ฅ์ ์์ง ์ด์ ๋จ๊ณ์ ์์ต๋๋ค. ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์์ ์์ ๋ฅผ ์๋ํ ์ ์์ผ๋ฉฐ, Google Chrome์ด ์ด๋ฌํ ๊ธฐ๋ฅ์ ๊ฐ์ถ ์ต์ ๋ฒ์ ์ผ ๊ฒ์
๋๋ค. Google ๋๋ฃ๋ค์ด ๋ง์ ๊ด๋ จ ์ฌํญ์ ๋ฐ๋ฅธ๋ค๋ ๊ฒ์ด ๊ทธ ์ด์ ์
๋๋ค.
-## What's common between...
+## ๊ตญ์ ์ฐ์ฃผ์ ๊ฑฐ์ฅ๊ณผ ์น ์ปดํฌ๋ํธ(Web components) ์ฌ์ด์ ๊ณตํต์
-The whole component idea is nothing new. It's used in many frameworks and elsewhere.
+์ ์ฒด ์ปดํฌ๋ํธ์ ๋ํ ์์ด๋์ด๋ ์๋ก์ด ๊ฒ์ด ์๋๋๋ค. ์ด๋ฏธ ๋ง์ ํ๋ ์์ํฌ์ ๊ทธ ๋ฐ์ ๋ค๋ฅธ ๊ณณ์์ ์ฌ์ฉ๋๊ณ ์์ต๋๋ค.
-Before we move to implementation details, take a look at this great achievement of humanity:
+๊ตฌํ ์ธ๋ถ์ฌํญ์ผ๋ก ๋ค์ด๊ฐ๊ธฐ์ ์์ ์ธ๋ฅ์ ์๋ํ ์
์ ์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.

-That's the International Space Station (ISS).
+๊ตญ์ ์ฐ์ฃผ์ ๊ฑฐ์ฅ์ ๋ชจ์ต์
๋๋ค(ISS).
-And this is how it's made inside (approximately):
+๊ตญ์ ์ฐ์ฃผ์ ๊ฑฐ์ฅ์ ๋๋ต์ ์ธ ๋ด๋ถ ๊ตฌ์ฑ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.

-The International Space Station:
-- Consists of many components.
-- Each component, in its turn, has many smaller details inside.
-- The components are very complex, much more complicated than most websites.
-- Components are developed internationally, by teams from different countries, speaking different languages.
+๊ตญ์ ์ฐ์ฃผ์ ๊ฑฐ์ฅ์ ๋ํ ์ค๋ช
์
๋๋ค.
+- ๋ง์ ๋ถํ์ผ๋ก ์ด๋ฃจ์ด์ ธ ์์ต๋๋ค.
+- ๊ฐ ๋ถํ์ ๊ทธ ์์ ๋ ์๊ณ ๋ง์ ๋ถํ์ด ์์ต๋๋ค.
+- ๋ถํ๋ค์ ๋งค์ฐ ๋ณต์กํ๋ฐ, ๋๋ถ๋ถ์ ์น์ฌ์ดํธ ๋ณด๋ค ํจ์ฌ ๋ณต์กํฉ๋๋ค.
+- ๋ถํ์ ์๋ก ๋ค๋ฅธ ๊ตญ๊ฐ๋ค์ ํ์ด ๋ค๋ฅธ ์ธ์ด๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ๋ฐํฉ๋๋ค.
-...And this thing flies, keeps humans alive in space!
+๊ทธ๋ฆฌ๊ณ ์ฐ์ฃผ์ ๊ฑฐ์ฅ์ ์ธ๊ฐ์ด ์ฐ์ฃผ์์ ๋ ๊ณ , ์ด์์์ ์ ์๊ฒ ํด์ค๋๋ค.
-How such complex devices are created?
+์ด๋ป๊ฒ ์ด๋ ๊ฒ ๋ณต์กํ ์ฅ์น๊ฐ ๋ง๋ค์ด์ก์๊น์?
-Which principles we could borrow to make our development same-level reliable and scalable? Or, at least, close to it.
+๊ฐ๋ฐ์ ์์ ์ ์ด๊ณ ํ์ฅ ๊ฐ๋ฅํ ์์ค์ผ๋ก ๋ง๋ค๊ธฐ ์ํด ๋๋ ๊ทธ์ ๊ฐ๊น๊ฒ ๋ง๋ค๊ธฐ ์ํด ์ด๋ค ์์น์ ๋น๋ ค์ฌ ์ ์์๊น์?
-## Component architecture
+## ์ปดํฌ๋ํธ ์ํคํ
์ฒ
-The well known rule for developing complex software is: don't make complex software.
+๋ณต์กํ ์ํํธ์จ์ด ๊ฐ๋ฐ์ ๋ํ ์ ์๋ ค์ง ๊ท์น์ ๋ฐ๋ก ๋ณต์กํ ์ํํธ์จ์ด๋ฅผ ๋ง๋ค์ง ์๋ ๊ฒ์
๋๋ค.
-If something becomes complex -- split it into simpler parts and connect in the most obvious way.
+์ํํธ์จ์ด๊ฐ ๋ณต์กํด์ง๋ค๋ฉด ๋ ๊ฐ๋จํ ๋ถ๋ถ๋ค๋ก ๋๋๊ณ ๊ฐ์ฅ ํ์คํ ๋ฐฉ๋ฒ์ผ๋ก ์ฐ๊ฒฐํ์ธ์.
-**A good architect is the one who can make the complex simple.**
+**์ข์ ์ํคํ
ํธ๋ ๋ณต์กํ ๊ฒ์ ๊ฐ๋จํ๊ฒ ๋ง๋ค ์ ์๋ ์ฌ๋์
๋๋ค.**
-We can split user interface into visual components: each of them has own place on the page, can "do" a well-described task, and is separate from the others.
+์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ์๊ฐ์ ์ปดํฌ๋ํธ๋ค๋ก ๋๋ ์ ์์ต๋๋ค. ๊ฐ ์ปดํฌ๋ํธ๋ ๋ค๋ฅธ ์ปดํฌ๋ํธ์๋ ๋ณ๊ฐ๋ก ํ์ด์ง์์ ๊ณ ์ ํ ์์น๋ฅผ ์ฐจ์งํ๊ณ ์์ธํ ์ค๋ช
๋ ์์
์ '์ํ'ํ ์ ์์ต๋๋ค.
-Let's take a look at a website, for example Twitter.
+์น ์ฌ์ดํธ์ ์๋ก ํธ์ํฐ๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
-It naturally splits into components:
+์์ฐ์ค๋ฝ๊ฒ ์ปดํฌ๋ํธ๋ค๋ก ๋๋๋ ๊ฒ์ ๋ณผ ์ ์์ต๋๋ค.

-1. Top navigation.
-2. User info.
-3. Follow suggestions.
-4. Submit form.
-5. (and also 6, 7) -- messages.
+1. ์๋จ ๋ด๋น๊ฒ์ด์
+2. ์ฌ์ฉ์ ์ ๋ณด
+3. ์ถ์ฒ ํ๋ก์ฐ
+4. ๊ธ์ฐ๊ธฐ ์์
+5. ๋ฉ์์ง๋ค(6, 7 ํฌํจ)
-Components may have subcomponents, e.g. messages may be parts of a higher-level "message list" component. A clickable user picture itself may be a component, and so on.
+์ปดํฌ๋ํธ์๋ ํ์ ์ปดํฌ๋ํธ๊ฐ ์์ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด ๋ฉ์์ง๋ ์์ '๋ฉ์์ง ๋ชฉ๋ก' ์ปดํฌ๋ํธ์ ์ผ๋ถ์ผ ์ ์์ต๋๋ค. ํด๋ฆญ ๊ฐ๋ฅํ ์ฌ์ฉ์ ์ฌ์ง ์์ฒด๋ ์ปดํฌ๋ํธ ๋ฑ์ผ ์ ์์ต๋๋ค.
-How do we decide, what is a component? That comes from intuition, experience and common sense. Usually it's a separate visual entity that we can describe in terms of what it does and how it interacts with the page. In the case above, the page has blocks, each of them plays its own role, it's logical to make these components.
+๋ฌด์์ด ์ปดํฌ๋ํธ์ธ์ง ์ด๋ป๊ฒ ๊ฒฐ์ ํ๊ฒ ์ต๋๊น? ๊ทธ๊ฒ์ ์ง๊ด, ๊ฒฝํ ๋ฐ ์์์์ ๋น๋กฏ๋ฉ๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ์ปดํฌ๋ํธ๋ ๊ธฐ๋ฅ๊ณผ ํ์ด์ง์ ์ํธ ์์ฉ ๋ฐฉ์์ผ๋ก ์ค๋ช
ํ ์ ์๋ ๋ณ๋์ ์๊ฐ์ ๊ฐ์ฒด์
๋๋ค. ์์ ๊ฒฝ์ฐ ํ์ด์ง์๋ ๋ธ๋ก์ด ์์ผ๋ฉฐ ๊ฐ ๋ธ๋ก์ ๊ณ ์ ํ ์ญํ ์ ์ํํ๊ธฐ์ ์ด๋ฌํ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋๋ ๊ฒ์ด ๋
ผ๋ฆฌ์ ์
๋๋ค.
-A component has:
-- Its own JavaScript class.
-- DOM structure, managed solely by its class, outside code doesn't access it ("encapsulation" principle).
-- CSS styles, applied to the component.
-- API: events, class methods etc, to interact with other components.
+์ปดํฌ๋ํธ๊ฐ ๊ฐ์ถฐ์ผ ํ ๊ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
+- ๊ณ ์ ํ ์๋ฐ์คํฌ๋ฆฝํธ ํด๋์ค
+- ์ธ๋ถ์ฝ๋๊ฐ ์ ๊ทผํ ์ ์์ผ๋ฉฐ ํด๋น ํด๋์ค์์๋ง ๊ด๋ฆฌ๋๋ DOM ๊ตฌ์กฐ('์บก์ํ' ์์น)
+- ๊ตฌ์ฑ์์์ ์ ์ฉ๋๋ CSS ์คํ์ผ
+- ๋ค๋ฅธ ๊ตฌ์ฑ์์์ ์ํธ์์ฉํ๊ธฐ ์ํ ์ด๋ฒคํธ, ํด๋์ค, ๋ฉ์๋ ๋ฑ์ ์ผ์ปซ๋ API
-Once again, the whole "component" thing is nothing special.
+๋ค์ ํ๋ฒ ๋งํ์ง๋ง, ์ ์ฒด '์ปดํฌ๋ํธ'๋ ํน๋ณํ ๊ฒ์ด ์๋๋๋ค.
-There exist many frameworks and development methodologies to build them, each with its own bells and whistles. Usually, special CSS classes and conventions are used to provide "component feel" -- CSS scoping and DOM encapsulation.
+์ปดํฌ๋ํธ๋ฅผ ๊ตฌ์ถํ๊ธฐ ์ํ ๋ง์ ํ๋ ์์ํฌ์ ๊ฐ๋ฐ ๋ฐฉ๋ฒ๋ก ์ด ์กด์ฌํ๋๋ฐ, ๊ฐ๊ฐ์ ํน์ํ ๊ธฐ๋ฅ์ด ์์ต๋๋ค. ์ผ๋ฐ์ ์ผ๋ก CSS ๋ฒ์์ง์ ๊ณผ DOM ์บก์ํ์ ๊ฐ์ '์ปดํฌ๋ํธ ๋๋'์ ์ ๊ณตํ๊ธฐ ์ํด ํน์ CSS ํด๋์ค ๋ฐ ๊ท์น์ด ์ฌ์ฉ๋ฉ๋๋ค.
-"Web components" provide built-in browser capabilities for that, so we don't have to emulate them any more.
+'์น ์ปดํฌ๋ํธ(Web components)'๋ ํน์ CSS ํด๋์ค ๋ฐ ๊ท์น์ ์ํด ๋ด์ฅ๋ ๋ธ๋ผ์ฐ์ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ฏ๋ก ๋ ๋ชจ๋ฐฉํ ํ์๊ฐ ์์ต๋๋ค.
-- [Custom elements](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements) -- to define custom HTML elements.
-- [Shadow DOM](https://dom.spec.whatwg.org/#shadow-trees) -- to create an internal DOM for the component, hidden from the others.
-- [CSS Scoping](https://drafts.csswg.org/css-scoping/) -- to declare styles that only apply inside the Shadow DOM of the component.
-- [Event retargeting](https://dom.spec.whatwg.org/#retarget) and other minor stuff to make custom components better fit the development.
+- [Custom elements](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements) -- ์ฌ์ฉ์ ์ ์ HTML ์์๋ฅผ ์ ์ํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.
+- [Shadow DOM](https://dom.spec.whatwg.org/#shadow-trees) -- ๋ค๋ฅธ ์ปดํฌ๋ํธ์ ๋ํด ์จ๊ฒจ์ ธ ์๋ ๋ด๋ถ DOM์ ์์ฑํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.
+- [CSS Scoping](https://drafts.csswg.org/css-scoping/) -- ์ปดํฌ๋ํธ์ Shadow DOM ๋ด๋ถ์๋ง ์ ์ฉ๋๋ ์คํ์ผ์ ์ ์ธํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.
+- [Event retargeting](https://dom.spec.whatwg.org/#retarget)๊ณผ ์ฌ์ฉ์ ์ ์ ์ปดํฌ๋ํธ๋ฅผ ๊ฐ๋ฐ ํ๊ฒฝ์ ๋์ฑ ์ ํฉํ๊ฒ ๋ง๋๋ ๋ค๋ฅธ ์ฌ์ํ ๊ฒ๋ค๋ ์์ต๋๋ค.
-In the next chapter we'll go into details of "Custom Elements" -- the fundamental and well-supported feature of web components, good on its own.
+๋ค์ ์ฑํฐ์์๋ ์น ์ปดํฌ๋ํธ(Web components)์ ๊ธฐ๋ณธ์ ์ด๊ณ ์ ์ง์๋๋ ๊ธฐ๋ฅ์ธ '์ปค์คํ
์๋ฆฌ๋จผํธ'์ ๋ํด ์์ธํ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
diff --git a/8-web-components/1-webcomponents-intro/web-components-twitter.svg b/8-web-components/1-webcomponents-intro/web-components-twitter.svg
index 534e629b9d..9d3b0b00b3 100644
--- a/8-web-components/1-webcomponents-intro/web-components-twitter.svg
+++ b/8-web-components/1-webcomponents-intro/web-components-twitter.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/8-web-components/2-custom-elements/1-live-timer/solution.md b/8-web-components/2-custom-elements/1-live-timer/solution.md
index a9eacc8803..6a426d0e00 100644
--- a/8-web-components/2-custom-elements/1-live-timer/solution.md
+++ b/8-web-components/2-custom-elements/1-live-timer/solution.md
@@ -1,4 +1,4 @@
-Please note:
-1. We clear `setInterval` timer when the element is removed from the document. That's important, otherwise it continues ticking even if not needed any more. And the browser can't clear the memory from this element and referenced by it.
-2. We can access current date as `elem.date` property. All class methods and properties are naturally element methods and properties.
+๋ ๊ฐ์ง ์ฐธ๊ณ ์ฌํญ์ด ์์ต๋๋ค.
+1. ์์๊ฐ ๋ฌธ์์์ ์ ๊ฑฐ๋๋ฉด `setInterval` ํ์ด๋จธ๋ ์ง์๋๋ค. ๊ทธ๋ฌ์ง ์์ผ๋ฉด ๋ ํ์ํ์ง ์๋๋ผ๋ ๊ณ์ tick ํ๋ฏ๋ก ํ์ด๋จธ๋ฅผ ์ง์ฐ๋ ๊ฒ์ ์ค์ํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ `setInterval` ํ์ด๋จธ๋ฅผ ์ง์ฐ์ง ์์ผ๋ฉด ๋ธ๋ผ์ฐ์ ๋ ์์์ ๋ฉ๋ชจ๋ฆฌ์ ์์์ ์ํด ์ฐธ์กฐ๋ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ์ง์ฐ๊ณ ์ฐธ์กฐํ ์ ์์ต๋๋ค.
+2. ํ์ฌ ๋ ์ง๋ `elem.date` ํ๋กํผํฐ๋ก ์ ๊ทผํ ์ ์์ต๋๋ค. ๋น์ฐํ ๋ชจ๋ ํด๋์ค ๋ฉ์๋์ ํ๋กํผํฐ๋ ์์ ๋ฉ์๋์ ํ๋กํผํฐ์
๋๋ค.
diff --git a/8-web-components/2-custom-elements/1-live-timer/task.md b/8-web-components/2-custom-elements/1-live-timer/task.md
index 1feb7490ab..3d2c25e5e3 100644
--- a/8-web-components/2-custom-elements/1-live-timer/task.md
+++ b/8-web-components/2-custom-elements/1-live-timer/task.md
@@ -1,14 +1,14 @@
-# Live timer element
+# ๋ผ์ด๋ธ ํ์ด๋จธ ์์
-We already have `` element to show a nicely formatted time.
+์ ๊ตฌ์ฑ๋ ์๊ฐ์ ํ์ํ๋ `` ์์๊ฐ ์ด๋ฏธ ์์ต๋๋ค.
-Create `` element to show the current time:
-1. It should use `` internally, not duplicate its functionality.
-2. Ticks (updates) every second.
-3. For every tick, a custom event named `tick` should be generated, with the current date in `event.detail` (see chapter ).
+ํ์ฌ ์๊ฐ์ ํ๊ธฐํ๊ธฐ ์ํด ``์์๋ฅผ ์์ฑํ์ธ์.
+1. ๋ด๋ถ์ ์ผ๋ก ``๋ฅผ ์ฌ์ฉํด์ผ ํ๋ฉฐ ``์ ๊ธฐ๋ฅ์ ๋๊ฐ์ด ์ฌ์ฉํ์ง ์์์ผ ํฉ๋๋ค.
+2. ๋งค์ด tick์ ์
๋ฐ์ดํธํ์ญ์์ค.
+3. ๋ชจ๋ tick์ ๋ํด `event.detail`์ ํ์ฌ ๋ ์ง์ ํจ๊ป `tick`์ด๋ผ๋ ์ด๋ฆ์ ๊ฐ์ง ์ฌ์ฉ์ ์ ์ ์ด๋ฒคํธ๊ฐ ์์ฑ๋์ด์ผ ํฉ๋๋ค(์ฑํฐ ์ฐธ์กฐ).
-Usage:
+์ฌ์ฉ๋ฒ:
```html
@@ -18,6 +18,6 @@ Usage:
```
-Demo:
+๋ฐ๋ชจ:
[iframe src="solution" height=40]
diff --git a/8-web-components/2-custom-elements/article.md b/8-web-components/2-custom-elements/article.md
index 4437319141..702ff90739 100644
--- a/8-web-components/2-custom-elements/article.md
+++ b/8-web-components/2-custom-elements/article.md
@@ -397,4 +397,4 @@ Custom elements can be of two types:
/* */
```
-Custom elements are well-supported among browsers. Edge is a bit behind, but there's a polyfill .
+Custom elements are well-supported among browsers. Edge is a bit behind, but there's a polyfill .
diff --git a/8-web-components/5-slots-composition/article.md b/8-web-components/5-slots-composition/article.md
index 78f23fbb42..66b89a71eb 100644
--- a/8-web-components/5-slots-composition/article.md
+++ b/8-web-components/5-slots-composition/article.md
@@ -103,11 +103,11 @@ The result is called "flattened" DOM:
...But the flattened DOM exists only for rendering and event-handling purposes. It's kind of "virtual". That's how things are shown. But the nodes in the document are actually not moved around!
-That can be easily checked if we run `querySelector`: nodes are still at their places.
+That can be easily checked if we run `querySelectorAll`: nodes are still at their places.
```js
// light DOM nodes are still at the same place, under ``
-alert( document.querySelector('user-card span').length ); // 2
+alert( document.querySelectorAll('user-card span').length ); // 2
```
So, the flattened DOM is derived from shadow DOM by inserting slots. The browser renders it and uses for style inheritance, event propagation (more about that later). But JavaScript still sees the document "as is", before flattening.
diff --git a/8-web-components/5-slots-composition/shadow-dom-user-card.svg b/8-web-components/5-slots-composition/shadow-dom-user-card.svg
index 93acf3fdd2..6b420a0cd5 100644
--- a/8-web-components/5-slots-composition/shadow-dom-user-card.svg
+++ b/8-web-components/5-slots-composition/shadow-dom-user-card.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/8-web-components/6-shadow-dom-style/article.md b/8-web-components/6-shadow-dom-style/article.md
index 2be81fbb21..83a6962fa1 100644
--- a/8-web-components/6-shadow-dom-style/article.md
+++ b/8-web-components/6-shadow-dom-style/article.md
@@ -259,7 +259,6 @@ For example, in shadow DOM we can use `--user-card-field-color` CSS variable to
Name:
Birthday:
-
```
Then, we can declare this property in the outer document for ``:
diff --git a/8-web-components/index.md b/8-web-components/index.md
index f572ed3d41..bc2faa2c5d 100644
--- a/8-web-components/index.md
+++ b/8-web-components/index.md
@@ -1,3 +1,3 @@
-# Web components
+# ์น ์ปดํฌ๋ํธ
Web components is a set of standards to make self-contained components: custom HTML-elements with their own properties and methods, encapsulated DOM and styles.
diff --git a/9-regular-expressions/01-regexp-introduction/article.md b/9-regular-expressions/01-regexp-introduction/article.md
index 4b060f5d06..5175cca2df 100644
--- a/9-regular-expressions/01-regexp-introduction/article.md
+++ b/9-regular-expressions/01-regexp-introduction/article.md
@@ -1,161 +1,161 @@
# ํจํด๊ณผ ํ๋๊ทธ
-Regular expressions is a powerful way to search and replace in text.
+์ ๊ท ํํ์(regular expression)์ ๋ฌธ์ ๊ฒ์๊ณผ ๊ต์ฒด์ ์ฌ์ฉ๋๋ ํจํด์ผ๋ก ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
-In JavaScript, they are available as [RegExp](mdn:js/RegExp) object, and also integrated in methods of strings.
+์๋ฐ์คํฌ๋ฆฝํธ์์ [RegExp](mdn:js/RegExp) ๊ฐ์ฒด์ ๋ฌธ์์ด ๋ฉ์๋๋ฅผ ์กฐํฉํด ์ ๊ทํํ์์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
## ์ ๊ท ํํ์
-์ ๊ท ํํ์("regexp" ๋๋ ๊ทธ๋ฅ "reg"๋ผ๊ณ ๋ ํฉ๋๋ค)์ *ํจํด*๊ณผ ์ ํ์ ์ธ *ํ๋๊ทธ*๋ก ๊ตฌ์ฑ๋ฉ๋๋ค
+์ ๊ท ํํ์('regexp' ๋๋ 'reg'๋ผ๊ณ ์ค์ฌ์ ์ฌ์ฉ)์ *ํจํด(pattern)* ๊ณผ ์ ํ์ ์ผ๋ก ์ฌ์ฉํ ์ ์๋ *ํ๋๊ทธ(flag)* ๋ก ๊ตฌ์ฑ๋ฉ๋๋ค.
-์ ๊ท์ ๊ฐ์ฒด๋ฅผ ๋ง๋๋ ๋ฐ์๋ ๋ ๊ฐ์ง ๋ฌธ๋ฒ์ด ์์ต๋๋ค.
+์ ๊ท์ ๊ฐ์ฒด๋ฅผ ๋ง๋ค ๋ ๋ ๊ฐ์ง ๋ฌธ๋ฒ์ด ์ฌ์ฉ๋ฉ๋๋ค.
-๊ธด ๋ฌธ๋ฒ์
๋๋ค.
+'๊ธด' ๋ฌธ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
```js
regexp = new RegExp("pattern", "flags");
```
-๊ทธ๋ฆฌ๊ณ ์งง๊ฒ๋, ์ฌ๋์ ``/ "`๋ฅผ ์ฌ์ฉํฉ๋๋ค.
+'์งง์' ๋ฌธ๋ฒ์ ์ฌ๋์(๋น๊ธ) `"/"`๋ฅผ ์ฌ์ฉํฉ๋๋ค.
```js
-regexp = /pattern/; // ํ๋๊ทธ ์์
-regexp = /pattern/gmi; // ํ๋๊ทธ g, m, i๊ฐ ์๋ ๊ฒฝ์ฐ (๊ณง ๋ค๋ฃฐ ์์ )
+regexp = /pattern/; // ํ๋๊ทธ๊ฐ ์์
+regexp = /pattern/gmi; // ํ๋๊ทธ g, m, i๊ฐ ์์(๊ฐ ํ๋๊ทธ์ ๋ํด์ ๊ณง ๋ค๋ฃฐ ์์ )
```
-์ฌ๋์``/ "`๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ ๊ท ํํ์์ ์์ฑํ๊ณ ์๋ค๋ ๊ฒ์ ์๋ ค์ค๋๋ค. ๋ฌธ์์ด์ ๋ฐ์ดํ๋ฅผ ์ฐ๋ ๊ฒ๊ณผ ๋์ผํ ์ญํ ์ ํฉ๋๋ค.
+์ฌ๋์ `"/"`๋ ์๋ฐ์คํฌ๋ฆฝํธ์๊ฒ ์ ๊ท ํํ์์ ์์ฑํ๊ณ ์๋ค๋ ๊ฒ์ ์๋ ค์ค๋๋ค. ๋ฌธ์์ด์ ๋ฐ์ดํ๋ฅผ ์ฐ๋ ๊ฒ๊ณผ ๋์ผํ ์ญํ ์ ํ์ฃ .
-In both cases `regexp` becomes an object of the built-in `RegExp` class.
+์งง์ ๋ฌธ๋ฒ์ ์ฌ์ฉํ๋ ๊ธด ๋ฌธ๋ฒ์ ์ฌ์ฉํ๋ ์๊ด ์์ด ์ ์์์์์ `regexp`๋ ๋ด์ฅ ํด๋์ค `RegExp`์ ์ธ์คํด์ค๊ฐ ๋ฉ๋๋ค.
-The main difference between these two syntaxes is that slashes `pattern:/.../` do not allow to insert expressions (like strings with `${...}`). They are fully static.
+๋ ๋ฌธ๋ฒ์ ์ค์ํ ์ฐจ์ด์ ์ `/.../`๋ฅผ ์ฌ์ฉํ๋ฉด ๋ฌธ์์ด ํ
ํ๋ฆฟ ๋ฆฌํฐ๋ด์์ `${...}`๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ฒ๋ผ ์ค๊ฐ์ ํํ์์ ๋ฃ์ ์ ์๋ค๋ ์ ์
๋๋ค. ์ฌ๋์๋ฅผ ์ฌ์ฉํ ๋ฐฉ๋ฒ์ ์์ ํ ์ ์ ์
๋๋ค.
-Slashes are used when we know the regular expression at the code writing time -- and that's the most common situation. While `new RegExp` is used when we need to create a regexp "on the fly", from a dynamically generated string, for instance:
+์ฌ๋์๋ฅผ ์ฌ์ฉํ ์งง์ ๋ฌธ๋ฒ์ ์ฝ๋๋ฅผ ์์ฑํ๋ ์์ ์ ํจํด์ ์๊ณ ์์ ๋ ์ฌ์ฉํฉ๋๋ค. ์๋ง ๋๋ค์๊ฐ ์ด๋ฐ ๊ฒฝ์ฐ์ ์ํ ๊ฒ๋๋ค. ๋ฐ๋ฉด `new RegExp`๋ฅผ ์ฌ์ฉํ ๊ธด ๋ฌธ๋ฒ์ '์ํฉ์ ๋ฐ๋ผ' ๋์ ์ผ๋ก ์์ฑ๋ ๋ฌธ์์ด์ ๊ฐ์ง๊ณ ์ ๊ท ํํ์์ ๋ง๋ค์ด์ผ ํ ๋ ์ฃผ๋ก ์ฌ์ฉํฉ๋๋ค. ๊ด๋ จ ์์๋ฅผ ์ดํด๋ด
์๋ค.
```js
-let tag = prompt("What tag do you want to find?", "h2");
+let tag = prompt("์ด๋ค ํ๊ทธ๋ฅผ ์ฐพ๊ณ ์ถ๋์?", "h2");
-let regexp = new RegExp(`<${tag}>`); // same as // if answered "h2" in the prompt above
+let regexp = new RegExp(`<${tag}>`); // ํ๋กฌํํธ์์ "h2"๋ผ๊ณ ๋๋ตํ ๊ฒฝ์ฐ, //์ ๋์ผํ ์ญํ ์ ํฉ๋๋ค.
```
## ํ๋๊ทธ
-์ ๊ท ํํ์์๋ ๊ฒ์์ ์ํฅ์ ์ฃผ๋ ํ๋๊ทธ๊ฐ ์์ ์ ์์ต๋๋ค.
+์ ๊ท ํํ์์ ๊ฒ์์ ์ํฅ์ ์ฃผ๋ ํ๋๊ทธ๋ฅผ ์ ํ์ ์ผ๋ก ๋ถ์ผ ์ ์์ต๋๋ค.
-์๋ฐ์คํฌ๋ฆฝํธ์๋ ๋ฑ 6๊ฐ๊ฐ ์์ต๋๋ค.
+์๋ฐ์คํฌ๋ฆฝํธ๋ 6๊ฐ์ ํ๋๊ทธ๋ฅผ ์ง์ํฉ๋๋ค.
`pattern:i`
-: ์ด ํ๋๊ทธ๋ฅผ ์ฌ์ฉํ๋ฉด ๋์๋ฌธ์ ๊ตฌ๋ถ ์์ด ๊ฒ์ํฉ๋๋ค. `A`์ `a`๋ ์ฐจ์ด๊ฐ ์์ต๋๋ค(์๋ ์ ์ฐธ์กฐ).
+: i ํ๋๊ทธ๊ฐ ๋ถ์ผ๋ฉด ๋ยท์๋ฌธ์ ๊ตฌ๋ถ ์์ด ๊ฒ์ํฉ๋๋ค. ๋ฐ๋ผ์ `A`์ `a`์ ์ฐจ์ด๊ฐ ์์ต๋๋ค(์๋ ์์ ์ฐธ์กฐ).
`pattern:g`
-: ์ด ํ๋๊ทธ๋ฅผ ์ฌ์ฉํ๋ฉด ์ผ์นํ๋ ์ฒ์ ํญ๋ชฉ ๋ฟ๋ง ์๋๋ผ ์ผ์นํ๋ ๋ชจ๋ ํญ๋ชฉ์ ๊ฒ์ํฉ๋๋ค.
+: g ํ๋๊ทธ๊ฐ ๋ถ์ผ๋ฉด ํจํด๊ณผ ์ผ์นํ๋ ๋ชจ๋ ๊ฒ๋ค์ ์ฐพ์ต๋๋ค. g ํ๋๊ทธ๊ฐ ์์ผ๋ฉด ํจํด๊ณผ ์ผ์นํ๋ ์ฒซ ๋ฒ์งธ ๊ฒฐ๊ณผ๋ง ๋ฐํ๋ฉ๋๋ค.
`pattern:m`
-: ๋ค์ค ํ ๋ชจ๋( ์ฑํฐ ์ฐธ์กฐ)
+: ๋ค์ค ํ ๋ชจ๋(multiline mode)๋ฅผ ํ์ฑํํฉ๋๋ค. ์์ธํ ๋ด์ฉ์ ์์ ๋ค๋ฃฐ ์์ ์
๋๋ค.
`pattern:s`
-: "dotall" ๋ชจ๋๋ฅผ ํ์ฑํ ์์ผ `pattern:.` ๋ฌธ์๊ฐ ๊ฐํ ๋ฌธ์ `\n`๋ ํฌํจํ๋๋ก ํฉ๋๋ค( ์ฑํฐ ์ฐธ์กฐ).
+: `pattern:.`์ด ๊ฐํ ๋ฌธ์ `\n`๋ ํฌํจํ๋๋ก 'dotall' ๋ชจ๋๋ฅผ ํ์ฑํํฉ๋๋ค. ์์ธํ ๋ด์ฉ์ ์์ ๋ค๋ฃฐ ์์ ์
๋๋ค.
`pattern:u`
-: ์ ๋์ฝ๋๋ฅผ ์๋ฒฝํ๊ฒ ์ง์ํฉ๋๋ค. ์ด ํ๋๊ทธ๋ฅผ ์ฌ์ฉํ๋ฉด surrogate pair๋ฅผ ์ฌ๋ฐ๋ฅด๊ฒ ์ฒ๋ฆฌํ ์ ์์ต๋๋ค. ์์ธํ ๋ด์ฉ์ ์ฑํฐ๋ฅผ ์ฐธ์กฐํ์ธ์.
+: ์ ๋์ฝ๋ ์ ์ฒด๋ฅผ ์ง์ํฉ๋๋ค. ์ด ํ๋๊ทธ๋ฅผ ์ฌ์ฉํ๋ฉด ์๋ก๊ฒ์ดํธ ์(surrogate pair)์ ์ฌ๋ฐ๋ฅด๊ฒ ์ฒ๋ฆฌํ ์ ์์ต๋๋ค. ์์ธํ ๋ด์ฉ์ ์์ ๋ค๋ฃฐ ์์ ์
๋๋ค.
`pattern:y`
-: "Sticky" Mode: searching at the exact position in the text ( ์ฑํฐ ์ฐธ์กฐ)
+: ๋ฌธ์ ๋ด ํน์ ์์น์์ ๊ฒ์์ ์งํํ๋ 'sticky' ๋ชจ๋๋ฅผ ํ์ฑํ ์ํต๋๋ค. ์์ธํ ๋ด์ฉ์ ์์ ๋ค๋ฃฐ ์์ ์
๋๋ค.
```smart header="์์"
-์ฌ๊ธฐ์์ ์์ ๊ตฌ์ฑ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
+์ ๊ท ํํ์์ ์ค๋ช
ํ ๋ ์ฌ์ฉ๋๋ ๋ฐ์ค์ ์์์ ๊ฐ๊ฐ ๋ค์๊ณผ ๊ฐ์ ์์ง์ด ์์ต๋๋ค.
- ์ ๊ทํํ์ -- `pattern:๋นจ๊ฐ`
-- (๊ฒ์ํ ) ๋ฌธ์์ด -- `subject:ํ๋`
-- ๊ฒฐ๊ณผ -- `match:์ด๋ก`
+- ๊ฒ์ํ ๋ฌธ์์ด -- `subject:ํ๋`
+- ๊ฒ์ ๊ฒฐ๊ณผ -- `match:์ด๋ก`
```
-## Searching: str.match
+## str.match๋ก ๊ฒ์ํ๊ธฐ
-As it was said previously, regular expressions are integrated with string methods.
+์์ ์ธ๊ธํ ๋ฐ์ ๊ฐ์ด ์ ๊ท ํํ์์ ๋ฌธ์์ด ๋ฉ์๋์ ์กฐํฉํ์ฌ ์ฌ์ฉํฉ๋๋ค.
-The method `str.match(regexp)` finds all matches of `regexp` in the string `str`.
+`str.match(regexp)`๋ฅผ ํธ์ถํ๋ฉด ๋ฌธ์์ด `str`์์ `regexp`์ ์ผ์นํ๋ ๊ฒ๋ค์ ์ฐพ์๋ด๋ ์์ผ๋ก ๋ง์ด์ฃ .
-It has 3 working modes:
+`str.match`์ ์ธ ๊ฐ์ง ๋ชจ๋๊ฐ ์์ต๋๋ค.
-1. If the regular expression has flag `pattern:g`, it returns an array of all matches:
+1. ์ ๊ท ํํ์์ ํ๋๊ทธ `pattern:g`๊ฐ ๋ถ์ผ๋ฉด ํจํด๊ณผ ์ผ์นํ๋ ๋ชจ๋ ๊ฒ์ ๋ด์ ๋ฐฐ์ด์ ๋ฐํํฉ๋๋ค.
```js run
let str = "We will, we will rock you";
- alert( str.match(/we/gi) ); // We,we (an array of 2 substrings that match)
+ alert( str.match(/we/gi) ); // We,we (ํจํด๊ณผ ์ผ์นํ๋ ๋ถ๋ถ ๋ฌธ์์ด ๋ ๊ฐ๋ฅผ ๋ด์ ๋ฐฐ์ด)
```
- Please note that both `match:We` and `match:we` are found, because flag `pattern:i` makes the regular expression case-insensitive.
+ ๋ยท์๋ฌธ์ ๊ตฌ๋ถ ์์ด ๊ฒ์์ ํ ์ ์๋๋ก ํ๋ ํ๋๊ทธ `pattern:i`๋ฅผ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ `match:We`์ `match:we` ๋ชจ๋๊ฐ ๋ฐํ๋์์ต๋๋ค.
-2. If there's no such flag it returns only the first match in the form of an array, with the full match at index `0` and some additional details in properties:
+2. ํ๋๊ทธ `pattern:g`๊ฐ ๋ถ์ง ์์ ๊ฒฝ์ฐ์ ํจํด์ ๋ง๋ ์ฒซ ๋ฒ์งธ ๋ถ๋ถ ๋ฌธ์์ด๋ง ๋ด์ ๋ฐฐ์ด์ ๋ฐํํฉ๋๋ค. ํด๋น ๋ฌธ์์ด์ ๋ฐฐ์ด ์ธ๋ฑ์ค `0`์ ์ ์ฅ๋๋๋ฐ ์ด ๋ฌธ์์ด์ ํ๋กํผํฐ์ ์์ธํ ์ถ๊ฐ ์ ๋ณด๊ฐ ์ ์ฅ๋ฉ๋๋ค.
```js run
let str = "We will, we will rock you";
- let result = str.match(/we/i); // without flag g
+ let result = str.match(/we/i); // ํ๋๊ทธ g ์์
- alert( result[0] ); // We (1st match)
+ alert( result[0] ); // We (ํจํด์ ์ผ์นํ๋ ์ฒซ ๋ฒ์งธ ๋ถ๋ถ ๋ฌธ์์ด)
alert( result.length ); // 1
// Details:
- alert( result.index ); // 0 (position of the match)
- alert( result.input ); // We will, we will rock you (source string)
+ alert( result.index ); // 0 (๋ถ๋ถ ๋ฌธ์์ด์ ์์น)
+ alert( result.input ); // We will, we will rock you (์๋ณธ ๋ฌธ์์ด)
```
- The array may have other indexes, besides `0` if a part of the regular expression is enclosed in parentheses. We'll cover that in the chapter .
+ ๊ทธ๋ฐ๋ฐ ์ ๊ท ํํ์์ ๊ดํธ๋ก ๋๋ฌ์ผ ๊ฒฝ์ฐ์ ๋ฉ์๋ ํธ์ถ ์ ๋ฐํ๋๋ ๋ฐฐ์ด์ `0` ์ด์ธ์๋ ๋ค๋ฅธ ์ธ๋ฑ์ค๊ฐ ์์ ์ ์์ต๋๋ค. ์์ธํ ๋ด์ฉ์ ์์ ๋ค๋ฃจ๊ฒ ์ต๋๋ค.
-3. And, finally, if there are no matches, `null` is returned (doesn't matter if there's flag `pattern:g` or not).
+3. ํ๋๊ทธ `pattern:g`์ ์ ๋ฌด์ ์๊ด์์ด ํจํด๊ณผ ์ผ์นํ๋ ๋ถ๋ถ ๋ฌธ์์ด์ ์ฐพ์ง ๋ชปํ ๊ฒฝ์ฐ์ `null`์ด ๋ฐํ๋ฉ๋๋ค.
- That's a very important nuance. If there are no matches, we get not an empty array, but `null`. Forgetting about that may lead to errors, e.g.:
+ ์ผ์นํ๋ ๋ถ๋ถ ๋ฌธ์์ด์ด ์๋ ๊ฒฝ์ฐ์ ๋น ๋ฐฐ์ด์ด ์๋ `null`์ ๋ฐํํ๋ค๋ ์ ์ ์์ฃผ ์ค์ํ ์ฐจ์ด์ ์
๋๋ค. ์ด๋ฐ ์ ์ ์๊ณ ์ฝ๋ฉ ํ๋ค ๋ณด๋ฉด ๋ค์๊ณผ ๊ฐ์ด ์๋ฌ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค.
```js run
- let matches = "JavaScript".match(/HTML/); // = null
+ let matches = "JavaScript".match(/HTML/); // matches์ null์ด ์ ์ฅ๋จ
- if (!matches.length) { // Error: Cannot read property 'length' of null
- alert("Error in the line above");
+ if (!matches.length) { // TypeError: Cannot read property 'length' of null
+ alert("๋ฐ๋ก ์์ค์์ ์๋ฌ๊ฐ ๋ฐ์ํฉ๋๋ค.");
}
```
- If we'd like the result to be always an array, we can write it this way:
+ `str.match` ํธ์ถ ๊ฒฐ๊ณผ๊ฐ ํญ์ ๋ฐฐ์ด์ด ๋๊ฒ ํ๋ ค๋ฉด ์๋์ ๊ฐ์ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ๋ฉด ๋ฉ๋๋ค.
```js run
let matches = "JavaScript".match(/HTML/)*!* || []*/!*;
if (!matches.length) {
- alert("No matches"); // now it works
+ alert("์ ๊ท ํํ์๊ณผ ์ผ์นํ๋ ๋ถ๋ถ ๋ฌธ์์ด์ด ์์ต๋๋ค."); // ์ด์ ์๋ฌ์์ด ์ ๋์ํ๋ค์.
}
```
-## Replacing: str.replace
+## str.replace๋ก ์นํํ๊ธฐ
-The method `str.replace(regexp, replacement)` replaces matches with `regexp` in string `str` with `replacement` (all matches, if there's flag `pattern:g`, otherwise only the first one).
+๋ฉ์๋ `str.replace(regexp, replacement)`๋ฅผ ์ฌ์ฉํ๋ฉด `str` ๋ด ๋ถ๋ถ ๋ฌธ์์ด ์ค `regexp`์ ์ผ์นํ๋ ๋ถ๋ถ ๋ฌธ์์ด์ `replacement`๋ก ๊ต์ฒดํ ์ ์์ต๋๋ค. ์ด๋ ํ๋๊ทธ `pattern:g`๊ฐ ์์ผ๋ฉด ๋ชจ๋ ๋ถ๋ถ ๋ฌธ์์ด์ด ๊ต์ฒด๋๊ณ , ๊ทธ๋ ์ง ์์ผ๋ฉด ์ฒซ ๋ฒ์งธ ๋ถ๋ถ ๋ฌธ์์ด๋ง ๊ต์ฒด๋ฉ๋๋ค.
-For instance:
+์์:
```js run
-// no flag g
+// ํ๋๊ทธ g ์์
alert( "We will, we will".replace(/we/i, "I") ); // I will, we will
-// with flag g
+// ํ๋๊ทธ g ์์
alert( "We will, we will".replace(/we/ig, "I") ); // I will, I will
```
-The second argument is the `replacement` string. We can use special character combinations in it to insert fragments of the match:
+์ฌ๊ธฐ์ ๋ ๋ฒ์งธ ์ธ์ `replacement`๋ ๋ฌธ์์ด์ธ๋ฐ, ๋ฌธ์์ด ์์ ๋ค์๊ณผ ๊ฐ์ ํน์ ๋ฌธ์๋ฅผ ๋ฃ์ด์ฃผ๋ฉด ๋
ํนํ ๋ฐฉ์์ผ๋ก ๋ฌธ์์ด์ ๊ต์ฒดํ ์ ์์ต๋๋ค.
-| Symbols | Action in the replacement string |
+| ํน์ ๋ฌธ์ | ๊ต์ฒด ๋ฐฉ์ |
|--------|--------|
-|`$&`|inserts the whole match|
+|`$&`|ํจํด๊ณผ ์ผ์นํ๋ ๋ถ๋ถ ๋ฌธ์์ด|
|$`|inserts a part of the string before the match|
|`$'`|inserts a part of the string after the match|
|`$n`|if `n` is a 1-2 digit number, then it inserts the contents of n-th parentheses, more about it in the chapter |
|`$`|inserts the contents of the parentheses with the given `name`, more about it in the chapter |
|`$$`|inserts character `$` |
-An example with `pattern:$&`:
+`pattern:$&`๋ฅผ ์ฌ์ฉํ ์์๋ฅผ ์ดํด๋ด
์๋ค.
```js run
alert( "I love HTML".replace(/HTML/, "$& and JavaScript") ); // I love HTML and JavaScript
```
-## Testing: regexp.test
+## regexp.test๋ก ์ผ์น ์ฌ๋ถ ํ์ธํ๊ธฐ
-The method `regexp.test(str)` looks for at least one match, if found, returns `true`, otherwise `false`.
+ํจํด๊ณผ ์ผ์นํ๋ ๋ถ๋ถ ๋ฌธ์์ด์ด ํ๋๋ผ๋ ์๋ ๊ฒฝ์ฐ ๋ฉ์๋ `regexp.test(str)`์ ํธ์ถํ๋ฉด `true`๊ฐ, ๊ทธ๋ ์ง ์์ผ๋ฉด `false`๊ฐ ๋ฐํ๋ฉ๋๋ค.
```js run
let str = "I love JavaScript";
@@ -164,14 +164,14 @@ let regexp = /LOVE/i;
alert( regexp.test(str) ); // true
```
-Further in this chapter we'll study more regular expressions, come across many other examples and also meet other methods.
+์ง๊ธ๊น์ง ์ดํด๋ณธ ๋ด์ฉ์ ๊ธฐ๋ณธ์ ๋ถ๊ณผํฉ๋๋ค. ์ด์ ์ด์ด์ง๋ ์ฑํฐ๋ค์์ ๋ ๋ง์ ์ ๊ท ํํ์๊ณผ ์์๋ค, ๋ฉ์๋๋ค์ ์ดํด๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
-Full information about the methods is given in the article .
+๋ฉ์๋๋ค์ ๋ํ ์ ๋ณด๋ ์์ ํ์ธํ ์ ์์ผ๋ ์ฐธ๊ณ ๋ฐ๋๋๋ค.
-## Summary
+## ์์ฝ
-- A regular expression consists of a pattern and optional flags: `pattern:g`, `pattern:i`, `pattern:m`, `pattern:u`, `pattern:s`, `pattern:y`.
-- Without flags and special symbols that we'll study later, the search by a regexp is the same as a substring search.
-- The method `str.match(regexp)` looks for matches: all of them if there's `pattern:g` flag, otherwise only the first one.
-- The method `str.replace(regexp, replacement)` replaces matches with `regexp` by `replacement`: all of them if there's `pattern:g` flag, otherwise only the first one.
-- The method `regexp.test(str)` returns `true` if there's at least one match, otherwise `false`.
+- ์ ๊ท ํํ์์ ํจํด๊ณผ ์ ํ์ ์ผ๋ก ์ฌ์ฉํ ์ ์๋ ํ๋๊ทธ `pattern:g`, `pattern:i`, `pattern:m`, `pattern:u`, `pattern:s`, `pattern:y`๋ก ๊ตฌ์ฑ๋ฉ๋๋ค.
+- ํ๋๊ทธ์ ํน์ ๊ธฐํธ(์ถํ ํ์ต)๊ฐ ์๋ ๊ฒฝ์ฐ์ ์ผ๋ฐ์ ์ธ ๋ถ๋ถ ๋ฌธ์์ด ๊ฒ์๊ณผ ๋์ผํ ๋ฐฉ์์ผ๋ก ๊ฒ์์ด ์งํ๋ฉ๋๋ค.
+- ํ๋๊ทธ `pattern:g`๊ฐ ์๋ ๊ฒฝ์ฐ์ `str.match(regexp)`๋ ํจํด๊ณผ ์ผ์นํ๋ ๋ชจ๋ ๋ถ๋ถ ๋ฌธ์์ด์ ๊ฒ์ํฉ๋๋ค. `pattern:g`๊ฐ ์๋ ๊ฒฝ์ฐ์ ์ฒซ ๋ฒ์งธ ๋ถ๋ถ ๋ฌธ์์ด๋ง ์ฐพ์ต๋๋ค.
+- `str.replace(regexp, replacement)`๋ `regexp`๊ณผ ์ผ์นํ๋ ๋ถ๋ถ ๋ฌธ์์ด์ `replacement`๋ก ๊ต์ฒดํฉ๋๋ค. `pattern:g` ํ๋๊ทธ๊ฐ ์์ผ๋ฉด ๋ถ๋ถ ๋ฌธ์์ด ์ ์ฒด๋ฅผ, ์์ผ๋ฉด ์ฒซ ๋ฒ์งธ ๋ถ๋ถ ๋ฌธ์์ด์ ๊ต์ฒดํฉ๋๋ค.
+- ํจํด๊ณผ ์ผ์นํ๋ ๋ถ๋ถ ๋ฌธ์์ด์ด ํ๋๋ผ๋ ์๋ ๊ฒฝ์ฐ `regexp.test(str)`๋ `true`๋ฅผ ๋ฐํํฉ๋๋ค. ๊ทธ๋ ์ง ์์ผ๋ฉด `false`๊ฐ ๋ฐํ๋ฉ๋๋ค.
diff --git a/9-regular-expressions/02-regexp-character-classes/article.md b/9-regular-expressions/02-regexp-character-classes/article.md
index 5b4258869a..0dae653051 100644
--- a/9-regular-expressions/02-regexp-character-classes/article.md
+++ b/9-regular-expressions/02-regexp-character-classes/article.md
@@ -1,14 +1,14 @@
-# Character classes
+# ๋ฌธ์ ํด๋์ค
-Consider a practical task -- we have a phone number like `"+7(903)-123-45-67"`, and we need to turn it into pure numbers: `79035419441`.
+์ค์ ์
๋ฌด ์ํฉ์ ์๊ฐํด๋ด
์๋ค. `"+7(903)-123-45-67"`๊ฐ์ ์ ํ๋ฒํธ์์ `79035419441`์ฒ๋ผ ์ซ์๋ง ๋จ๊ฒจ์ผ ํฉ๋๋ค.
-To do so, we can find and remove anything that's not a number. Character classes can help with that.
+์ด๋ ๊ฒ ํ๋ ค๋ฉด ์ซ์๊ฐ ์๋ ๋ฌธ์๋ฅผ ๋ชจ๋ ์ฐพ์์ ์ง์ฐ๋ฉด ๋๊ฒ ์ฃ . ์ฌ๊ธฐ์ ๋ฌธ์ ํด๋์ค๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.
-A *character class* is a special notation that matches any symbol from a certain set.
+*๋ฌธ์ ํด๋์ค(character class)* ๋ ํน์ ์งํฉ์ ํฌํจ๋ ๋ชจ๋ ๊ธฐํธ์ ์ผ์นํ๋ ํน๋ณํ ํํ์
๋๋ค.
-For the start, let's explore the "digit" class. It's written as `pattern:\d` and corresponds to "any single digit".
+๊ฐ์ฅ ๋จผ์ ์ซ์ ํด๋์ค๋ถํฐ ์์๋ด
์๋ค. ์ซ์(digit) ํด๋์ค๋ `pattern:\d`๋ผ๊ณ ์ฐ๊ณ '์๋ฌด ์ซ์ ํ๋'์ ๋์ํฉ๋๋ค.
-For instance, the let's find the first digit in the phone number:
+์์์ ๋์จ ์ ํ๋ฒํธ ์์์์ ์ฒซ ๋ฒ์งธ ์ซ์๋ฅผ ์ฐพ์๋ด
์๋ค.
```js run
let str = "+7(903)-123-45-67";
@@ -18,73 +18,73 @@ let regexp = /\d/;
alert( str.match(regexp) ); // 7
```
-Without the flag `pattern:g`, the regular expression only looks for the first match, that is the first digit `pattern:\d`.
+`pattern:g` ํ๋๊ทธ๊ฐ ์์ผ๋ฉด ์ ๊ท ํํ์์ ํจํด๊ณผ ์ผ์นํ๋ ์ฒซ ๋ฌธ์๋ง ์ฐพ์ต๋๋ค. ์ฌ๊ธฐ์๋ `pattern:\d`์ ์ผ์นํ๋ ์ฒซ ๋ฒ์งธ ์ซ์์ด์ฃ .
-Let's add the `pattern:g` flag to find all digits:
+์ด์ `pattern:g` ํ๋๊ทธ๋ฅผ ์ถ๊ฐํด ๋ชจ๋ ์ซ์๋ฅผ ์ฐพ์๋ด
์๋ค.
```js run
let str = "+7(903)-123-45-67";
let regexp = /\d/g;
-alert( str.match(regexp) ); // array of matches: 7,9,0,3,1,2,3,4,5,6,7
+alert( str.match(regexp) ); // ์ผ์นํ๋ ๋ฌธ์์ ๋ฐฐ์ด: 7,9,0,3,1,2,3,4,5,6,7
-// let's make the digits-only phone number of them:
+// ์ด ๋ฐฐ์ด๋ก ์ซ์๋ง ์๋ ์ ํ๋ฒํธ๋ฅผ ๋ง๋ญ์๋ค.
alert( str.match(regexp).join('') ); // 79035419441
```
-That was a character class for digits. There are other character classes as well.
+์ฌ๊ธฐ๊น์ง ์ซ์๋ฅผ ์ฐพ๋ ๋ฌธ์ ํด๋์ค์์ต๋๋ค. ๋ฌผ๋ก ๋ค๋ฅธ ๋ฌธ์ ํด๋์ค๋ ์์ต๋๋ค.
-Most used are:
+์์ฃผ ์ฌ์ฉํ๋ ๋ฌธ์ ํด๋์ค์๋ ๋ค์ ํด๋์ค๊ฐ ์์ต๋๋ค.
-`pattern:\d` ("d" is from "digit")
-: A digit: a character from `0` to `9`.
+`pattern:\d` ('digit(์ซ์)'์ 'd')
+: ์ซ์: `0`์์ `9` ์ฌ์ด์ ๋ฌธ์
-`pattern:\s` ("s" is from "space")
-: A space symbol: includes spaces, tabs `\t`, newlines `\n` and few other rare characters, such as `\v`, `\f` and `\r`.
+`pattern:\s` ('space(๊ณต๋ฐฑ)'์ 's')
+: ์คํ์ด์ค, ํญ(`\t`), ์ค ๋ฐ๊ฟ(`\n`)์ ๋น๋กฏํ์ฌ ์์ฃผ ๋๋ฌผ๊ฒ ์ฐ์ด๋ `\v`, `\f`, `\r` ์ ํฌํจํ๋ ๊ณต๋ฐฑ ๊ธฐํธ
-`pattern:\w` ("w" is from "word")
-: A "wordly" character: either a letter of Latin alphabet or a digit or an underscore `_`. Non-Latin letters (like cyrillic or hindi) do not belong to `pattern:\w`.
+`pattern:\w` ('word(๋จ์ด)'์ 'w')
+: '๋จ์ด์ ๋ค์ด๊ฐ๋' ๋ฌธ์๋ก ๋ผํด ๋ฌธ์๋ ์ซ์, ๋ฐ์ค `_`์ ํฌํจํฉ๋๋ค. ํค๋ฆด ๋ฌธ์๋ ํ๋ ๋ฌธ์๊ฐ์ ๋น ๋ผํด ๋ฌธ์๋ `pattern:\w`์ ํฌํจ๋์ง ์์ต๋๋ค.
-For instance, `pattern:\d\s\w` means a "digit" followed by a "space character" followed by a "wordly character", such as `match:1 a`.
+์๋ฅผ ๋ค์ด `pattern:\d\s\w`๋ `match:1 a`์ฒ๋ผ '์ซ์' ๋ค์ '๊ณต๋ฐฑ ๋ฌธ์' ๋ค์ '๋จ์ด์ ๋ค์ด๊ฐ๋ ๋ฌธ์'๋ฅผ ์๋ฏธํฉ๋๋ค.
-**A regexp may contain both regular symbols and character classes.**
+**์ ๊ท ํํ์์ ์ผ๋ฐ ๊ธฐํธ์ ๋ฌธ์ ํด๋์ค๋ฅผ ๊ฐ์ด ์ฌ์ฉํ ์ ์์ต๋๋ค.**
-For instance, `pattern:CSS\d` matches a string `match:CSS` with a digit after it:
+์์๋ก, `pattern:CSS\d`๋ `match:CSS` ๋ค์ ์ซ์ ํ๋๊ฐ ์๋ ๋ฌธ์์ด๊ณผ ์ผ์นํฉ๋๋ค.
```js run
let str = "Is there CSS4?";
-let regexp = /CSS\d/
+let regexp = /CSS\d/;
alert( str.match(regexp) ); // CSS4
```
-Also we can use many character classes:
+๋ํ ๋ฌธ์ ํด๋์ค๋ฅผ ์ฌ๋ฌ ๊ฐ ์ฌ์ฉํ ์๋ ์์ต๋๋ค.
```js run
alert( "I love HTML5!".match(/\s\w\w\w\w\d/) ); // ' HTML5'
```
-The match (each regexp character class has the corresponding result character):
+์ผ์น ๊ฒฐ๊ณผ(๊ฐ๊ฐ์ ๋ฌธ์ ํด๋์ค์ ๊ธ์ ํ๋์ฉ ์ผ์น):

-## Inverse classes
+## ๋ฐ๋ ํด๋์ค
-For every character class there exists an "inverse class", denoted with the same letter, but uppercased.
+๋ชจ๋ ๋ฌธ์ ํด๋์ค์๋ '๋ฐ๋ ํด๋์ค'๊ฐ ์์ต๋๋ค. ๊ฐ์ ๊ธ์๋ก ํ๊ธฐํ์ง๋ง ๋๋ฌธ์๋ก ์ฌ์ฉํฉ๋๋ค.
-The "inverse" means that it matches all other characters, for instance:
+'๋ฐ๋'๋ ๋ค์ ์์๋ค์ฒ๋ผ ํด๋น ๋ฌธ์๋ฅผ ์ ์ธํ ๋ชจ๋ ๋ฌธ์์ ์ผ์นํ๋ค๋ ๋ป์
๋๋ค.
`pattern:\D`
-: Non-digit: any character except `pattern:\d`, for instance a letter.
+: ์ซ์๊ฐ ์๋ ๋ฌธ์: `pattern:\d`์ ์ผ์นํ์ง ์๋ ์ผ๋ฐ ๊ธ์ ๋ฑ์ ๋ชจ๋ ๋ฌธ์
`pattern:\S`
-: Non-space: any character except `pattern:\s`, for instance a letter.
+: ๊ณต๋ฐฑ์ด ์๋ ๋ฌธ์: `pattern:\s`์ ์ผ์นํ์ง ์๋ ์ผ๋ฐ ๊ธ์ ๋ฑ์ ๋ชจ๋ ๋ฌธ์
`pattern:\W`
-: Non-wordly character: anything but `pattern:\w`, e.g a non-latin letter or a space.
+: ๋จ์ด์ ๋ค์ด๊ฐ์ง ์๋ ๋ฌธ์: `pattern:\w`์ ์ผ์นํ์ง ์๋ ๋น ๋ผํด ๋ฌธ์๋ ๊ณต๋ฐฑ ๋ฑ์ ๋ชจ๋ ๋ฌธ์
-In the beginning of the chapter we saw how to make a number-only phone number from a string like `subject:+7(903)-123-45-67`: find all digits and join them.
+์ด๋ฒ ์ฑํฐ์ ์ฒซ ๋ถ๋ถ์์ `subject:+7(903)-123-45-67`๊ฐ์ ๋ฌธ์์ด์์ ์ซ์๋ฅผ ๋ชจ๋ ์ฐพ์ ํฉ์ณ์ ์ซ์๋ง ๋จ์ ์ ํ๋ฒํธ๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ์ ์์๋ดค์ต๋๋ค.
```js run
let str = "+7(903)-123-45-67";
@@ -92,7 +92,7 @@ let str = "+7(903)-123-45-67";
alert( str.match(/\d/g).join('') ); // 79031234567
```
-An alternative, shorter way is to find non-digits `pattern:\D` and remove them from the string:
+๋ ์งง๊ฒ ํ ์ ์๋ ๋ค๋ฅธ ๋ฐฉ๋ฒ์ `pattern:\D`๋ก ์ซ์๊ฐ ์๋ ๋ฌธ์๋ฅผ ์ฐพ์ ๋ฌธ์์ด์์ ์์ ๋ฒ๋ฆฌ๋ ๊ฒ์
๋๋ค.
```js run
let str = "+7(903)-123-45-67";
@@ -100,104 +100,104 @@ let str = "+7(903)-123-45-67";
alert( str.replace(/\D/g, "") ); // 79031234567
```
-## A dot is "any character"
+## ์ ์ '์๋ฌด ๋ฌธ์'์๋ ์ผ์น
-A dot `pattern:.` is a special character class that matches "any character except a newline".
+์ `pattern:.`์ ์ค ๋ฐ๊ฟ ๋ฌธ์๋ฅผ ์ ์ธํ ๋ชจ๋ ๋ฌธ์์ ์ผ์นํ๋ ํน๋ณํ ๋ฌธ์ ํด๋์ค์
๋๋ค.
-For instance:
+์์:
```js run
alert( "Z".match(/./) ); // Z
```
-Or in the middle of a regexp:
+์ ๊ท ํํ์ ์์์๋ ์ฌ์ฉ ๊ฐ๋ฅํฉ๋๋ค.
```js run
let regexp = /CS.4/;
alert( "CSS4".match(regexp) ); // CSS4
alert( "CS-4".match(regexp) ); // CS-4
-alert( "CS 4".match(regexp) ); // CS 4 (space is also a character)
+alert( "CS 4".match(regexp) ); // CS 4 (๊ณต๋ฐฑ๋ ๋ฌธ์์์.)
```
-Please note that a dot means "any character", but not the "absense of a character". There must be a character to match it:
+์ ์ ์๋ฌด ๋ฌธ์์๋ ์ผ์นํ์ง๋ง '๋ฌธ์์ ๋ถ์ฌ'์ ์ผ์นํ์ง๋ ์์ต๋๋ค. ๋ฐ๋์ ์ผ์นํ๋ ๋ฌธ์๊ฐ ์์ด์ผ ํฉ๋๋ค.
```js run
-alert( "CS4".match(/CS.4/) ); // null, no match because there's no character for the dot
+alert( "CS4".match(/CS.4/) ); // null, ์ ๊ณผ ์ผ์นํ๋ ๋ฌธ์๊ฐ ์๊ธฐ ๋๋ฌธ์ ์ผ์น ๊ฒฐ๊ณผ๊ฐ ์์ต๋๋ค.
```
-### Dot as literally any character with "s" flag
+### 's' ํ๋๊ทธ์ ์ ์ ์ฌ์ฉํด ์ ๋ง๋ก ๋ชจ๋ ๋ฌธ์ ์ฐพ๊ธฐ
-By default, a dot doesn't match the newline character `\n`.
+๊ธฐ๋ณธ์ ์ผ๋ก๋ ์ ์ ์ค ๋ฐ๊ฟ ๋ฌธ์ `\n`์๋ ์ผ์นํ์ง ์์ต๋๋ค.
-For instance, the regexp `pattern:A.B` matches `match:A`, and then `match:B` with any character between them, except a newline `\n`:
+์ฆ, ์ ๊ท ํํ์ `pattern:A.B`๋ `match:A`์ `match:B` ์ฌ์ด์ `\n`์ ์ ์ธํ ์ด๋ค ๋ฌธ์๋ ๋ค์ด๊ฐ ๋ฌธ์์ด๊ณผ ์ผ์นํฉ๋๋ค.
```js run
-alert( "A\nB".match(/A.B/) ); // null (no match)
+alert( "A\nB".match(/A.B/) ); // null (์ผ์นํ์ง ์์)
```
-There are many situations when we'd like a dot to mean literally "any character", newline included.
+์ค์ ๋ก๋ ์ ์ด ์ค ๋ฐ๊ฟ ๋ฌธ์๋ฅผ ํฌํจํ ์ ๋ง๋ก ๋ชจ๋ ๋ฌธ์์ ์ผ์นํด์ผ ํ๋ ์ํฉ์ด ์์ฃผ ์์ต๋๋ค.
-That's what flag `pattern:s` does. If a regexp has it, then a dot `pattern:.` matches literally any character:
+์ด๋ด ๋ ์ฌ์ฉํ๋ ๊ฒ์ด `pattern:s`์
๋๋ค. ์ ๊ท ํํ์์ `pattern:s`๋ฅผ ์ฌ์ฉํ์ ๋ ์ `pattern:.`์ ๋ชจ๋ ๋ฌธ์์ ์ผ์นํฉ๋๋ค.
```js run
-alert( "A\nB".match(/A.B/s) ); // A\nB (match!)
+alert( "A\nB".match(/A.B/s) ); // A\nB (์ผ์น!)
```
-````warn header="Not supported in Firefox, IE, Edge"
-Check for the most recent state of support. At the time of writing it doesn't include Firefox, IE, Edge.
+````warn header="Firefox, IE, Edge์์ ์ง์ํ์ง ์์"
+์์ ์ง์ ์ฌ๋ถ์ ์ต์ ์ํฉ์ ํ์ธํด๋ณด์ธ์. ์ด ๊ธ์ ์์ฑํ๋ ์์ ์ `pattern:s` ํ๋๊ทธ๋ Firefox, IE, Edge์์ ์์ง ์ง์ํ์ง ์์ต๋๋ค.
-Luckily, there's an alternative, that works everywhere. We can use a regexp like `pattern:[\s\S]` to match "any character".
+๋คํํ๋ ์ด๋ ๋ธ๋ผ์ฐ์ ์์๋ ์ธ ์ ์๋ ๋์์ด ์์ต๋๋ค. `pattern:[\s\S]`๊ฐ์ ์ ๊ท ํํ์์ ์ฌ์ฉํด '๋ชจ๋ ๋ฌธ์'์ ์ผ์น์ํฌ ์ ์์ต๋๋ค.
```js run
-alert( "A\nB".match(/A[\s\S]B/) ); // A\nB (match!)
+alert( "A\nB".match(/A[\s\S]B/) ); // A\nB (์ผ์น!)
```
-The pattern `pattern:[\s\S]` literally says: "a space character OR not a space character". In other words, "anything". We could use another pair of complementary classes, such as `pattern:[\d\D]`, that doesn't matter.
+`pattern:[\s\S]` ํจํด์ ๋ฌธ์ ๊ทธ๋๋ก์ ๋ป์ '๊ณต๋ฐฑ ๋ฌธ์ ๋๋ ๊ณต๋ฐฑ ๋ฌธ์๊ฐ ์๋ ๋ฌธ์'์
๋๋ค. ๊ฒฐ๊ตญ์ ๋ชจ๋ ๋ฌธ์๋ผ๋ ๋ป์ด์ฃ . ์ด๋ฐ ์์ผ๋ก ๋ฐ๋๋๋ ํด๋์ค๋ฅผ ๊ฐ์ด ์ฌ์ฉํ๋ ๋ค๋ฅธ ํจํด, ์๋ฅผ ๋ค๋ฉด `pattern:[\d\D]`์ ์ฌ์ฉํ ์๋ ์์ต๋๋ค. ๋๋ ์๋ฌด ๋ฌธ์๋ ์๋ ๊ฒฝ์ฐ๋ฅผ ์ ์ธํ๋ `pattern:[^]`์ ์ฌ์ฉํ ์๋ ์์ต๋๋ค.
-This trick works everywhere. Also we can use it if we don't want to set `pattern:s` flag, in cases when we want a regular "no-newline" dot too in the pattern.
+๊ทธ๋ฆฌ๊ณ ์ด ๊ธฐ์ ์ ์ด์ฉํด ๊ฐ์ ์ ๊ท ํํ์ ์์์ ์ ์ ๋ ๊ฐ์ง ํจํด์ ๋ชจ๋ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ค ๋ฐ๊ฟ ๋ฌธ์๋ฅผ ํฌํจํ์ง ์๋ ์๋์ ์ `pattern:.`๊ณผ ๋ชจ๋ ๋ฌธ์์ ์ผ์นํ๋ `pattern:[\s\S]`๊ฐ์ ํจํด์ ๋์์ ์ฌ์ฉ ๊ฐ๋ฅํฉ๋๋ค.
````
-````warn header="Pay attention to spaces"
-Usually we pay little attention to spaces. For us strings `subject:1-5` and `subject:1 - 5` are nearly identical.
+````warn header="๊ณต๋ฐฑ์ ์ฃผ์ํ์ธ์."
+์ฌ๋์ ๋ณดํต ๊ณต๋ฐฑ์ ํฌ๊ฒ ์์ํ์ง ์์ต๋๋ค. ์ฌ๋์๊ฒ๋ ๋ฌธ์์ด `subject:1-5`๋ `subject:1 - 5`๋ ๊ฑฐ์ ๊ฐ์ผ๋๊น์.
-But if a regexp doesn't take spaces into account, it may fail to work.
+ํ์ง๋ง ์ ๊ท ํํ์์์ ๊ณต๋ฐฑ์ ์ผ๋ํ์ง ์์ผ๋ฉด ์ํ๋ ๊ฒฐ๊ณผ๋ฅผ ์ป์ง ๋ชปํ ์ ์์ต๋๋ค.
-Let's try to find digits separated by a hyphen:
+ํ์ดํ์ผ๋ก ๊ตฌ๋ถ๋ ์ซ์๋ฅผ ์ฐพ์๋ด
์๋ค.
```js run
-alert( "1 - 5".match(/\d-\d/) ); // null, no match!
+alert( "1 - 5".match(/\d-\d/) ); // null, ์ผ์น ๊ฒฐ๊ณผ ์์!
```
-Let's fix it adding spaces into the regexp `pattern:\d - \d`:
+์ ๊ท ํํ์์ ๊ณต๋ฐฑ์ ๋ฃ์ด์ `pattern:\d - \d`๋ก ๋ฐ๊ฟ๋ด
์๋ค.
```js run
-alert( "1 - 5".match(/\d - \d/) ); // 1 - 5, now it works
-// or we can use \s class:
-alert( "1 - 5".match(/\d\s-\s\d/) ); // 1 - 5, also works
+alert( "1 - 5".match(/\d - \d/) ); // 1 - 5, ์ด์ ์ ๋๋ก ๋๋ค์.
+// \s ํด๋์ค๋ฅผ ์ฌ์ฉํด๋ ๋ฉ๋๋ค.
+alert( "1 - 5".match(/\d\s-\s\d/) ); // 1 - 5, ์ด๊ฒ๋ ๋ฉ๋๋ค.
```
-**A space is a character. Equal in importance with any other character.**
+**๊ณต๋ฐฑ ์ญ์ ๋ฌธ์์
๋๋ค. ๋ค๋ฅธ ๋ฌธ์๋งํผ์ด๋ ์ค์ํฉ๋๋ค.**
-We can't add or remove spaces from a regular expression and expect to work the same.
+์ ๊ท ํํ์์ ๊ณต๋ฐฑ์ ์ถ๊ฐํ๊ฑฐ๋ ์ง์ฐ๋ฉด ๋ค๋ฅด๊ฒ ์๋ํฉ๋๋ค.
-In other words, in a regular expression all characters matter, spaces too.
+์ฆ, ์ ๊ท ํํ์์์๋ ๋ชจ๋ ๋ฌธ์๊ฐ ์ค์ํฉ๋๋ค. ๊ณต๋ฐฑ๋ ๋ง์ฐฌ๊ฐ์ง๋ก์.
````
-## Summary
+## ์์ฝ
-There exist following character classes:
+๋ฌธ์ ํด๋์ค์๋ ๋ค์ ํด๋์ค๋ค์ด ์์ต๋๋ค.
-- `pattern:\d` -- digits.
-- `pattern:\D` -- non-digits.
-- `pattern:\s` -- space symbols, tabs, newlines.
-- `pattern:\S` -- all but `pattern:\s`.
-- `pattern:\w` -- Latin letters, digits, underscore `'_'`.
-- `pattern:\W` -- all but `pattern:\w`.
-- `pattern:.` -- any character if with the regexp `'s'` flag, otherwise any except a newline `\n`.
+- `pattern:\d` -- ์ซ์
+- `pattern:\D` -- ์ซ์๊ฐ ์๋ ๋ฌธ์
+- `pattern:\s` -- ์คํ์ด์ค, ํญ, ์ค ๋ฐ๊ฟ ๋ฌธ์
+- `pattern:\S` -- `pattern:\s`๋ฅผ ์ ์ธํ ๋ชจ๋ ๋ฌธ์
+- `pattern:\w` -- ๋ผํด ๋ฌธ์, ์ซ์, ๋ฐ์ค `'_'`
+- `pattern:\W` -- `pattern:\w`๋ฅผ ์ ์ธํ ๋ชจ๋ ๋ฌธ์
+- `pattern:.` -- ์ ๊ท ํํ์ `'s'` ํ๋๊ทธ๊ฐ ์์ผ๋ฉด ๋ชจ๋ ๋ฌธ์, ์์ผ๋ฉด ์ค ๋ฐ๊ฟ `\n`์ ์ ์ธํ ๋ชจ๋ ๋ฌธ์
-...But that's not all!
+ํ์ง๋ง ์ด๊ฒ ์ ๋ถ๊ฐ ์๋๋๋ค!
-Unicode encoding, used by JavaScript for strings, provides many properties for characters, like: which language the letter belongs to (if it's a letter) it is it a punctuation sign, etc.
+์๋ฐ์คํฌ๋ฆฝํธ์์ ๋ฌธ์์ด์ ์ฌ์ฉํ๋ ์ ๋์ฝ๋ ์ธ์ฝ๋ฉ์ ๋ฌธ์์ ์ฌ๋ฌ ํ๋กํผํฐ๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ด๋ค ์ธ์ด์ ์ํ๋ ๊ธ์์ธ์ง ๋๋ ๊ธ์๊ฐ ์๋ ๊ตฌ๋์ ์ธ์ง ์๋ ค์ฃผ๋ ํ๋กํผํฐ์ฒ๋ผ์.
-We can search by these properties as well. That requires flag `pattern:u`, covered in the next article.
+์ด๋ฐ ํ๋กํผํฐ๋ฅผ ๊ธฐ์ค์ผ๋ก ๋ฌธ์๋ฅผ ์ฐพ์ ์๋ ์์ต๋๋ค. `pattern:u` ํ๋๊ทธ๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋๋ฐ์. ๋ค์ ๊ธ์์ ์์๋ณด๋๋ก ํ์ฃ .
diff --git a/9-regular-expressions/02-regexp-character-classes/love-html5-classes.svg b/9-regular-expressions/02-regexp-character-classes/love-html5-classes.svg
index 9c88cc0883..60d31da35f 100644
--- a/9-regular-expressions/02-regexp-character-classes/love-html5-classes.svg
+++ b/9-regular-expressions/02-regexp-character-classes/love-html5-classes.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/9-regular-expressions/03-regexp-unicode/article.md b/9-regular-expressions/03-regexp-unicode/article.md
index 82c00d7dfb..5bc0196bb0 100644
--- a/9-regular-expressions/03-regexp-unicode/article.md
+++ b/9-regular-expressions/03-regexp-unicode/article.md
@@ -1,12 +1,12 @@
-# Unicode: flag "u" and class \p{...}
+# ์ ๋์ฝ๋: 'u' ํ๋๊ทธ์ \p{...} ํด๋์ค
-JavaScript uses [Unicode encoding](https://en.wikipedia.org/wiki/Unicode) for strings. Most characters are encoding with 2 bytes, but that allows to represent at most 65536 characters.
+์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ฌธ์์ด์ [์ ๋์ฝ๋ ์ธ์ฝ๋ฉ](https://en.wikipedia.org/wiki/Unicode)์ ์ฌ์ฉํฉ๋๋ค. ๋๋ถ๋ถ์ ๋ฌธ์๋ 2๋ฐ์ดํธ๋ก ์ธ์ฝ๋ฉ๋์ด์๋๋ฐ 2๋ฐ์ดํธ๋ก๋ ์ต๋ 65,536๊ฐ์ ๊ธ์๋ฐ์ ํํํ ์ ์์ต๋๋ค.
-That range is not big enough to encode all possible characters, that's why some rare characters are encoded with 4 bytes, for instance like `๐ณ` (mathematical X) or `๐` (a smile), some hieroglyphs and so on.
+65,536์๋ ๋ชจ๋ ๊ธ์๋ฅผ ์ธ์ฝ๋ฉํ๊ธฐ์๋ ๋ถ์กฑํ ์ซ์์
๋๋ค. ๊ทธ๋์ ์ผ๋ถ ๋ฌธ์๋ 4๋ฐ์ดํธ๋ก ์ธ์ฝ๋ฉ๋์ด์์ต๋๋ค. ์๋ฅผ ๋ค๋ฉด `๐ณ`(์ํ์์ ์ฌ์ฉํ๋ X)๋ `๐`(์๋ ํ์ ), ์ผ๋ถ ์ํ ๋ฌธ์ ๋ฑ์ด ์์ฃ .
-Here are the unicode values of some characters:
+๋ค์์ ์ผ๋ถ ๋ฌธ์์ ์ ๋์ฝ๋ ๊ฐ์
๋๋ค.
-| Character | Unicode | Bytes count in unicode |
+| ๋ฌธ์ | ์ ๋์ฝ๋ | ์ ๋์ฝ๋์ ๋ฐ์ดํธ ์ |
|------------|---------|--------|
| a | `0x0061` | 2 |
| โ | `0x2248` | 2 |
@@ -14,108 +14,108 @@ Here are the unicode values of some characters:
|๐ด| `0x1d4b4` | 4 |
|๐| `0x1f604` | 4 |
-So characters like `a` and `โ` occupy 2 bytes, while codes for `๐ณ`, `๐ด` and `๐` are longer, they have 4 bytes.
+๋ณด๋ค์ํผ `a`๋ `โ`๊ฐ์ ๋ฌธ์๋ 2๋ฐ์ดํธ๋ฅผ ์ฐจ์งํ๊ณ `๐ณ`, `๐ด`, `๐`๊ฐ์ ๋ฌธ์๋ ์ฝ๋๊ฐ์ด ๋ ๊ธธ๊ณ 4๋ฐ์ดํธ๋ฅผ ์ฐจ์งํฉ๋๋ค.
-Long time ago, when JavaScript language was created, Unicode encoding was simpler: there were no 4-byte characters. So, some language features still handle them incorrectly.
+์ค๋์ ์ ์๋ฐ์คํฌ๋ฆฝํธ ์ธ์ด๊ฐ ํ์ํ์ ๋๋ ์ ๋์ฝ๋ ์ธ์ฝ๋ฉ์ ์ง๊ธ๋ณด๋ค ๋จ์ํ์ต๋๋ค. 4๋ฐ์ดํธ ๋ฌธ์๊ฐ ์์์ฃ . ๊ทธ๋์ ์ผ๋ถ ์ธ์ด ๊ธฐ๋ฅ์ ์์ง๋ ์ด๋ฐ ๋ฌธ์๋ค์ ์ ํํ๊ฒ ๋ค๋ฃจ์ง ๋ชปํฉ๋๋ค.
-For instance, `length` thinks that here are two characters:
+๊ทธ์ค ํ๋๋ก `length`๋ ๋ค์ ๊ฒฝ์ฐ์์ ๋ฌธ์๊ฐ ๋ ๊ฐ ์๋ค๊ณ ๋ด
๋๋ค.
```js run
alert('๐'.length); // 2
alert('๐ณ'.length); // 2
```
-...But we can see that there's only one, right? The point is that `length` treats 4 bytes as two 2-byte characters. That's incorrect, because they must be considered only together (so-called "surrogate pair", you can read about them in the article ).
+ํ์ง๋ง ๋ถ๋ช
๋ฌธ์๋ ํ๋์์์? ์ฌ๊ธฐ์ ์ค์ํ ๊ฒ์ `length`๋ 4๋ฐ์ดํธ ๋ฌธ์๋ฅผ 2๋ฐ์ดํธ ๋ฌธ์ 2๊ฐ๋ก ์ทจ๊ธํ๋ค๋ ๊ฒ์
๋๋ค. 4๋ฐ์ดํธ๋ฅผ ํ๋๋ก ๋ฌถ์ด์ ์ทจ๊ธํด์ผ ํ๋ฏ๋ก ์ฌ๋ฐ๋ฅด์ง ์์ ๊ฒฐ๊ณผ์
๋๋ค.(์ด๋ฐ ๋ฌธ์๋ฅผ '์๋ก๊ฒ์ดํธ ์'์ด๋ผ๊ณ ํฉ๋๋ค. ์์ ์๋ก๊ฒ์ดํธ ์์ ๋ํด ์ฝ์ด๋ณผ ์ ์์ต๋๋ค.)
-By default, regular expressions also treat 4-byte "long characters" as a pair of 2-byte ones. And, as it happens with strings, that may lead to odd results. We'll see that a bit later, in the article .
+๊ธฐ๋ณธ์ ์ผ๋ก๋ ์ ๊ท ํํ์๋ 4๋ฐ์ดํธ์ '๊ธด ๋ฌธ์'๋ฅผ 2๋ฐ์ดํธ ๋ฌธ์ 2๊ฐ๋ก ์ทจ๊ธํฉ๋๋ค. ๋ฌธ์์ด์ ๊ฒฝ์ฐ์ฒ๋ผ ์ด๋ฐ ๋ฐฉ์์ ์๋ชป๋ ๊ฒฐ๊ณผ๋ก ์ด์ด์ง ์ ์์ต๋๋ค. ๋์ค์ ์์ ๋ค์ ์์๋ณผ ๊ฒ์
๋๋ค.
-Unlike strings, regular expressions have flag `pattern:u` that fixes such problems. With such flag, a regexp handles 4-byte characters correctly. And also Unicode property search becomes available, we'll get to it next.
+๋ฌธ์์ด๊ณผ ๋ค๋ฅด๊ฒ ์ ๊ท ํํ์์๋ ์ด๋ฐ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์๋ `pattern:u` ํ๋๊ทธ๊ฐ ์์ต๋๋ค. `pattern:u` ํ๋๊ทธ๋ฅผ ์ฌ์ฉํ๋ฉด ์ ๊ท์์ 4๋ฐ์ดํธ ๋ฌธ์๋ฅผ ์ฌ๋ฐ๋ฅด๊ฒ ์ฒ๋ฆฌํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ ๋์ฝ๋ ํ๋กํผํฐ(Unicode property)๋ฅผ ์ฌ์ฉํ ๊ฒ์์ด ๊ฐ๋ฅํด์ง๋๋ค. ๋ฐ๋ก ์์๋ณด์ฃ .
-## Unicode properties \p{...}
+## ์ ๋์ฝ๋ ํ๋กํผํฐ \p{...}
-```warn header="Not supported in Firefox and Edge"
-Despite being a part of the standard since 2018, unicode proeprties are not supported in Firefox ([bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1361876)) and Edge ([bug](https://github.com/Microsoft/ChakraCore/issues/2969)).
+```warn header="Firefox์ Edge์์ ๋ฏธ์ง์"
+2018๋
๋ถํฐ ํ์ค์ ํฌํจ๋์์ง๋ง Firefox([๋ฒ๊ทธ](https://bugzilla.mozilla.org/show_bug.cgi?id=1361876))์ Edge([๋ฒ๊ทธ](https://github.com/Microsoft/ChakraCore/issues/2969))๋ ์ ๋์ฝ๋ ํ๋กํผํฐ๋ฅผ ์์ง ์ง์ํ์ง ์์ต๋๋ค.
-There's [XRegExp](http://xregexp.com) library that provides "extended" regular expressions with cross-browser support for unicode properties.
+์ ๋์ฝ๋ ํ๋กํผํฐ์ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ ์ง์์ ํฌํจํ ์ ๊ท ํํ์์ 'ํ์ฅ' ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ [XRegExp](http://xregexp.com) ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์์ต๋๋ค.
```
-Every character in Unicode has a lot of properties. They describe what "category" the character belongs to, contain miscellaneous information about it.
+์ ๋์ฝ๋์ ๋ชจ๋ ๋ฌธ์๋ ๋ค์ํ ํ๋กํผํฐ๋ฅผ ๊ฐ์ง๋๋ค. ํ๋กํผํฐ๋ ๋ฌธ์๊ฐ ์ด๋ค '๋ฒ์ฃผ'์ ์ํ๋์ง ์ค๋ช
ํ๊ธฐ๋ ํ๊ณ ๊ทธ ์ธ์๋ ๋ฌธ์์ ์ฌ๋ฌ ๊ฐ์ง ์ ๋ณด๋ฅผ ๋ด๊ณ ์์ต๋๋ค.
-For instance, if a character has `Letter` property, it means that the character belongs to an alphabet (of any language). And `Number` property means that it's a digit: maybe Arabic or Chinese, and so on.
+์๋ฅผ ๋ค์ด ๋ฌธ์์ `Letter` ํ๋กํผํฐ๊ฐ ์๋ค๋ฉด ๊ทธ ๋ฌธ์๋ ์ด๋ ํ ์ธ์ด์ ๊ธ์๋ผ๋ ๋ป์
๋๋ค. `Number` ํ๋กํผํฐ๊ฐ ์๋ค๋ฉด ์๋ผ๋น์ ์ซ์๋ ํ์ ์ซ์๋ ์ซ์๋ผ๋ ๋ป์ด์ฃ .
-We can search for characters with a property, written as `pattern:\p{โฆ}`. To use `pattern:\p{โฆ}`, a regular expression must have flag `pattern:u`.
+`pattern:\p{โฆ}`๋ฅผ ์ฌ์ฉํ๋ฉด ํ๋กํผํฐ๋ฅผ ํตํด ๋ฌธ์๋ฅผ ์ฐพ์ ์ ์์ต๋๋ค. `pattern:\p{โฆ}`๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด์๋ ์ ๊ท ํํ์์ `pattern:u` ํ๋๊ทธ๊ฐ ๋ฐ๋์ ์์ด์ผ ํฉ๋๋ค.
-For instance, `\p{Letter}` denotes a letter in any of language. We can also use `\p{L}`, as `L` is an alias of `Letter`. There are shorter aliases for almost every property.
+์์๋ก `p{Letter}`๋ ์ธ์ด์ ๊ธ์๋ฅผ ํ๊ธฐํ๋ ๋ฐฉ๋ฒ์
๋๋ค. `p{L}`์ ๋์ ์ฌ์ฉํ ์๋ ์์ต๋๋ค. ์ฌ๊ธฐ์ `L`์ `Letter`์ ์ฝ์์
๋๋ค. ๊ฑฐ์ ๋ชจ๋ ํ๋กํผํฐ์ ์ด๋ ๊ฒ ์งง๊ฒ ์ธ ์ ์๋ ์ฝ์๊ฐ ์์ต๋๋ค.
-In the example below three kinds of letters will be found: English, Georgean and Korean.
+์๋ ์์์์๋ ์๋ฌธ์, ์กฐ์ง์ ๋ฌธ์, ํ๊ธ 3์ข
๋ฅ์ ๊ธ์๋ฅผ ๊ฒ์ํฉ๋๋ค.
```js run
let str = "A แ ใฑ";
alert( str.match(/\p{L}/gu) ); // A,แ,ใฑ
-alert( str.match(/\p{L}/g) ); // null (no matches, as there's no flag "u")
+alert( str.match(/\p{L}/g) ); // null ('u' ํ๋๊ทธ๊ฐ ์์ด์ ์ผ์น ๊ฒฐ๊ณผ ์์)
```
-Here's the main character categories and their subcategories:
-
-- Letter `L`:
- - lowercase `Ll`
- - modifier `Lm`,
- - titlecase `Lt`,
- - uppercase `Lu`,
- - other `Lo`.
-- Number `N`:
- - decimal digit `Nd`,
- - letter number `Nl`,
- - other `No`.
-- Punctuation `P`:
- - connector `Pc`,
- - dash `Pd`,
- - initial quote `Pi`,
- - final quote `Pf`,
- - open `Ps`,
- - close `Pe`,
- - other `Po`.
-- Mark `M` (accents etc):
- - spacing combining `Mc`,
- - enclosing `Me`,
- - non-spacing `Mn`.
-- Symbol `S`:
- - currency `Sc`,
- - modifier `Sk`,
- - math `Sm`,
- - other `So`.
-- Separator `Z`:
- - line `Zl`,
- - paragraph `Zp`,
- - space `Zs`.
-- Other `C`:
- - control `Cc`,
- - format `Cf`,
- - not assigned `Cn`,
- -- private use `Co`,
- - surrogate `Cs`.
-
-
-So, e.g. if we need letters in lower case, we can write `pattern:\p{Ll}`, punctuation signs: `pattern:\p{P}` and so on.
-
-There are also other derived categories, like:
-- `Alphabetic` (`Alpha`), includes Letters `L`, plus letter numbers `Nl` (e.g. โ
ซ - a character for the roman number 12), plus some other symbols `Other_Alphabetic` (`OAlpha`).
-- `Hex_Digit` includes hexadecimal digits: `0-9`, `a-f`.
-- ...And so on.
-
-Unicode supports many different properties, their full list would require a lot of space, so here are the references:
-
-- List all properties by a character: .
-- List all characters by a property: .
-- Short aliases for properties: .
-- A full base of Unicode characters in text format, with all properties, is here: .
-
-### Example: hexadecimal numbers
-
-For instance, let's look for hexadecimal numbers, written as `xFF`, where `F` is a hex digit (0..1 or A..F).
-
-A hex digit can be denoted as `pattern:\p{Hex_Digit}`:
+๋ค์์ ์ฃผ์ ๋ฌธ์ ๋ฒ์ฃผ์ ๊ฐ๊ฐ์ ํ์ ๋ฒ์ฃผ ๋ชฉ๋ก์
๋๋ค.
+
+- ๋ฌธ์(Letter) `L`:
+ - ์๋ฌธ์(lowercase) `Ll`
+ - ์กฐ์ (modifier) `Lm`
+ - ๋จ์ด์ ์ฒซ ๊ธ์๋ฅผ ๋๋ฌธ์๋ก(titlecase) `Lt`
+ - ๋๋ฌธ์(uppercase) `Lu`
+ - ๊ธฐํ(other) `Lo`
+- ์ซ์(Number) `N`:
+ - 10์ง์(decimal digit) `Nd`
+ - ๋ฌธ์(letter number) `Nl`
+ - ๊ธฐํ(other) `No`
+- ๋ฌธ์ฅ ๋ถํธ(Punctuation) `P`:
+ - ์ฐ๊ฒฐ์ (connector) `Pc`
+ - ๋์(dash) `Pd`
+ - ์ฒ์ ๋ฐ์ดํ(initial quote) `Pi`
+ - ๋ง์ง๋ง ๋ฐ์ดํ(final quote) `Pf`
+ - ์ด๊ธฐ(open) `Ps`
+ - ๋ซ๊ธฐ(close) `Pe`
+ - ๊ธฐํ(other) `Po`
+- ํ์(Mark) `M` (๊ฐ์ธ ๋ฑ):
+ - ๊ฐ๊ฒฉ ๊ฒฐํฉ(spacing combining) `Mc`
+ - ๋ฌถ์(enclosing) `Me`
+ - ๋น๊ณต๋ฐฑ(non-spacing) `Mn`
+- ๊ธฐํธ(Symbol) `S`:
+ - ํตํ(currency) `Sc`
+ - ์์ (modifier) `Sk`
+ - ์ํ(math) `Sm`
+ - ๊ธฐํ(other) `So`
+- ๊ตฌ๋ถ ๊ธฐํธ(Separator) `Z`:
+ - ์ค(line) `Zl`
+ - ๋จ๋ฝ(paragraph) `Zp`
+ - ๊ณต๋ฐฑ(space) `Zs`
+- ๊ธฐํ(Other) `C`:
+ - ์ ์ด(control) `Cc`
+ - ํ์(format) `Cf`
+ - ํ ๋น๋์ง ์์(not assigned) `Cn`
+ - ์ฌ์ฉ์ ์ง์ (private use) `Co`
+ - ์๋ก๊ฒ์ดํธ(surrogate) `Cs`
+
+
+์๋ฅผ ๋ค์ด ์๋ฌธ์๋ฅผ ์ฐพ์์ผ ํ๋ค๋ฉด `pattern:\p{Ll}`์, ๋ฌธ์ฅ ๋ถํธ๋ฅผ ์ฐพ์์ผ ํ๋ค๋ฉด `pattern:\p{P}`๋ฅผ ์ฌ์ฉํ๋ ์์ผ๋ก ๊ฒ์ํ ์ ์์ต๋๋ค.
+
+๋ํ ๋ค์๊ณผ ๊ฐ์ด ํ์๋ ๋ฒ์ฃผ๋ ์์ต๋๋ค.
+- `Alphabetic`(`Alpha`)๋ Letters `L`์ ๋ก๋ง ์ซ์ โ
ซ๊ฐ์ด ๋ฌธ์๋ก ๋ ์ซ์ `Nl`์ ๋ํด์ `Other_Alphabetic`(`OAlpha`)์ ์ํ ๋ฌธ์๋ค์ ๋ชจ๋ ํฌํจํฉ๋๋ค.
+- `Hex_digit`์ 16์ง์ ์ซ์์ธ `0-9`, `a-f`๋ฅผ ํฌํจํฉ๋๋ค.
+- ์ด๊ฒ ๋ง๊ณ ๋ ๋ ์์ฃ .
+
+์ ๋์ฝ๋๋ ์ ๋ง ๋ค์ํ ํ๋กํผํฐ๋ฅผ ์ง์ํฉ๋๋ค. ๋ชจ๋ ๊ฑธ ๋์ดํ๋ ค๋ฉด ๊ณต๊ฐ์ด ๋๋ฌด ๋ง์ด ํ์ํ๋ ์ฐธ๊ณ ํ ์ ์๋ ๋ฌธ์๋ฅผ ์๋ ค๋๋ฆฝ๋๋ค.
+
+- ๋ฌธ์๋ณ ํ๋กํผํฐ ๋ชฉ๋ก:
+- ํ๋กํผํฐ๋ณ ๋ฌธ์ ๋ชฉ๋ก:
+- ํ๋กํผํฐ๋ณ ์ค์๋ง:
+- ํ
์คํธ ํ์์ผ๋ก ์ ๋ฆฌ๋ ์ ๋์ฝ๋ ๋ฌธ์์ ๊ฐ ๋ฌธ์์ ๋ชจ๋ ํ๋กํผํฐ:
+
+### ์์: 16์ง์
+
+์ค์ ์ฌ๋ก๋ก 16์ง์๋ฅผ ์ฐพ์๋ด
์๋ค. `xFF` ํ์์ผ๋ก ์ฐ๊ณ `F` ์๋ฆฌ์๋ 16์ง์์ ์ซ์(0..1์ด๋ A..F)๊ฐ ๋ค์ด๊ฐ๋๋ค.
+
+16์ง์ ์ซ์๋ `pattern:\p{Hex_Digit}`๋ก ํ๊ธฐํฉ๋๋ค.
```js run
let regexp = /x\p{Hex_Digit}\p{Hex_Digit}/u;
@@ -123,27 +123,27 @@ let regexp = /x\p{Hex_Digit}\p{Hex_Digit}/u;
alert("number: xAF".match(regexp)); // xAF
```
-### Example: Chinese hieroglyphs
+### ์์: ํ์
-Let's look for Chinese hieroglyphs.
+ํ์๋ฅผ ๊ฒ์ํด๋ด
์๋ค.
-There's a unicode property `Script` (a writing system), that may have a value: `Cyrillic`, `Greek`, `Arabic`, `Han` (Chinese) and so on, [here's the full list]("https://en.wikipedia.org/wiki/Script_(Unicode)").
+`Script`(ํ๊ธฐ ์ฒด๊ณ)๋ผ๋ ์ ๋์ฝ๋ ํ๋กํผํฐ๊ฐ ์์ต๋๋ค. `Script`๋ `Cyrillic`(ํค๋ฆด ๋ฌธ์), `Greek`(๊ทธ๋ฆฌ์ค ๋ฌธ์), `Arabic`(์๋ผ๋น์ ๋ฌธ์), `Han`(ํ์) ๋ฑ์ ๊ฐ์ ๊ฐ์ง ์ ์์ต๋๋ค. Script ๊ฐ์ ์ ์ฒด ๋ชฉ๋ก์ [์ฌ๊ธฐ์ ๋ณผ ์ ์์ต๋๋ค](https://en.wikipedia.org/wiki/Script_(Unicode)).
-To look for characters in a given writing system we should use `pattern:Script=`, e.g. for Cyrillic letters: `pattern:\p{sc=Cyrillic}`, for Chinese hieroglyphs: `pattern:\p{sc=Han}`, and so on:
+ํน์ ํ๊ธฐ ์ฒด๊ณ์ ๋ฌธ์๋ฅผ ์ฐพ์ผ๋ ค๋ฉด `pattern:Script=