Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 4 additions & 12 deletions 7-animation/1-bezier-curve/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,13 @@

곡선 자체는 매우 단순하기 때문에 한 번 공을 들여 공부해 두면 벡터 그래픽스나 고급 애니메이션을 다룰 때 도움이 됩니다.

<<<<<<< HEAD
## 조절점
=======
```smart header="Some theory, please"
This article provides a theoretical, but very needed insight into what Bezier curves are, while [the next one](info:css-animations#bezier-curve) shows how we can use them for CSS animations.
```smart header="잠시 이론을 다룹니다"
이 글은 이론 중심이지만 베지어 곡선이 무엇인지에 대한 꼭 필요한 통찰을 다룹니다. CSS 애니메이션에 베지어 곡선을 어떻게 활용할 수 있는지는 [다음 글](info:css-animations#bezier-curve)에서 살펴봅니다.

Please take your time to read and understand the concept, it'll serve you well.
시간을 들여 이 글을 천천히 읽고 개념을 이해해 두면 두고두고 도움이 될 것입니다.
```

## Control points
>>>>>>> upstream/master
## 조절점

[베지어 곡선](https://ko.wikipedia.org/wiki/%EB%B2%A0%EC%A7%80%EC%97%90_%EA%B3%A1%EC%84%A0)은 조절점(control point)을 사용해 정의합니다.

Expand All @@ -41,11 +37,7 @@ Please take your time to read and understand the concept, it'll serve you well.

![](bezier4-e.svg) ![](bezier3-e.svg)

<<<<<<< HEAD
마지막 특성 덕분에 컴퓨터 그래픽스 분야에서 교차 검사(intersection test) 최적화가 가능합니다. 컨벡스 헐이 교차하지 않는다면 곡선 역시 교차하지 않기 때문입니다. 따라서 컨벡스 헐이 교차하는지 검사하면 아주 빠르게 곡선 역시 '교차하지 않는다'는 결론을 도출해 낼 수 있습니다. 위쪽 그림에서 보는 것과 같이 컨벡스 헐은 삼각형, 사각형 같은 상대적으로 단순한 형태를 띠므로 곡선의 교차 여부보다 컨벡스 헐 교차 여부를 검사하는 게 훨씬 쉽습니다.
=======
Because of that last property, in computer graphics it's possible to optimize intersection tests. If convex hulls do not intersect, then curves do not either. So checking for the convex hulls intersection first can give a very fast "no intersection" result. Checking the intersection of convex hulls is much easier, because they are rectangles, triangles and so on (see the picture above), much simpler figures than the curve.
>>>>>>> upstream/master

**조절점을 움직이면 베지어 곡선은 직관적으로 봤을 때 아주 당연한 방식으로 다시 그려집니다.**

Expand Down
10 changes: 2 additions & 8 deletions 8-web-components/1-webcomponents-intro/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,9 @@

그리고 우주정거장은 인간이 우주에서 날고, 살아있을 수 있게 해줍니다.

<<<<<<< HEAD
어떻게 이렇게 복잡한 장치가 만들어졌을까요?
어떻게 이렇게 복잡한 구조물이 만들어졌을까요?

개발을 안정적이고 확장 가능한 수준으로 만들기 위해 또는 그에 가깝게 만들기 위해 어떤 원칙을 빌려올 수 있을까요?
=======
How are such complex devices created?

Which principles could we borrow to make our development same-level reliable and scalable? Or, at least, close to it?
>>>>>>> upstream/master
소프트웨어 개발을 우주정거장처럼 안정적이고 확장 가능한 수준으로, 혹은 그에 가깝게 만들기 위해 우주정거장 개발에 사용된 어떤 원칙을 빌려올 수 있을까요?

## 컴포넌트 아키텍처

Expand Down
10 changes: 1 addition & 9 deletions 9-regular-expressions/01-regexp-introduction/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,7 @@ regexp = /pattern/gmi; // 플래그 g, m, i가 있음(각 플래그에 대해선

두 문법의 중요한 차이점은 `/.../`를 사용하면 문자열 템플릿 리터럴에서 `${...}`를 사용했던 것처럼 중간에 표현식을 넣을 수 없다는 점입니다. 슬래시를 사용한 방법은 완전히 정적입니다.

<<<<<<< HEAD
슬래시를 사용한 짧은 문법은 코드를 작성하는 시점에 패턴을 알고 있을 때 사용합니다. 아마 대다수가 이런 경우에 속할 겁니다. 반면 `new RegExp`를 사용한 긴 문법은 '상황에 따라' 동적으로 생성된 문자열을 가지고 정규 표현식을 만들어야 할 때 주로 사용합니다. 관련 예시를 살펴봅시다.
=======
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 more often used when we need to create a regexp "on the fly" from a dynamically generated string. For instance:
>>>>>>> upstream/master

```js
let tag = prompt("어떤 태그를 찾고 싶나요?", "h2");
Expand All @@ -60,11 +56,7 @@ let regexp = new RegExp(`<${tag}>`); // 프롬프트에서 "h2"라고 대답한
: `pattern:.`이 개행 문자 `\n`도 포함하도록 'dotall' 모드를 활성화합니다. 자세한 내용은 <info:regexp-character-classes>에서 다룰 예정입니다.

`pattern:u`
<<<<<<< HEAD
: 유니코드 전체를 지원합니다. 이 플래그를 사용하면 서로게이트 쌍(surrogate pair)을 올바르게 처리할 수 있습니다. 자세한 내용은 <info:regexp-unicode>에서 다룰 예정입니다.
=======
: Enables full Unicode support. The flag enables correct processing of surrogate pairs. More about that in the chapter <info:regexp-unicode>.
>>>>>>> upstream/master
: 유니코드 전체를 지원합니다. 이 플래그를 사용하면 서로게이트 쌍(surrogate pair)을 올바르게 처리할 수 있습니다. 자세한 내용은 <info:regexp-unicode>에서 다룹니다.

`pattern:y`
: 문자 내 특정 위치에서 검색을 진행하는 'sticky' 모드를 활성화 시킵니다. 자세한 내용은 <info:regexp-sticky>에서 다룰 예정입니다.
Expand Down
37 changes: 7 additions & 30 deletions 9-regular-expressions/02-regexp-character-classes/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,7 @@

가장 먼저 숫자 클래스부터 알아봅시다. 숫자(digit) 클래스는 `pattern:\d`라고 쓰고 '아무 숫자 하나'에 대응합니다.

<<<<<<< HEAD
앞에서 나온 전화번호 예시에서 첫 번째 숫자를 찾아봅시다.
=======
For instance, let's find the first digit in the phone number:
>>>>>>> upstream/master

```js run
let str = "+7(903)-123-45-67";
Expand Down Expand Up @@ -124,11 +120,7 @@ alert( "CS-4".match(regexp) ); // CS-4
alert( "CS 4".match(regexp) ); // CS 4 (공백도 문자예요.)
```

<<<<<<< HEAD
점은 아무 문자에나 일치하지만 '문자의 부재'와 일치하지는 않습니다. 반드시 일치하는 문자가 있어야 합니다.
=======
Please note that a dot means "any character", but not the "absence of a character". There must be a character to match it:
>>>>>>> upstream/master
점은 아무 문자 한 개와 일치하지만 '문자의 부재(없음, 빈자리)'와 일치하지는 않습니다. 반드시 일치하는 문자가 있어야 합니다.

```js run
alert( "CS4".match(/CS.4/) ); // null, 점과 일치하는 문자가 없기 때문에 일치 결과가 없습니다.
Expand All @@ -152,17 +144,10 @@ alert( "A\nB".match(/A.B/) ); // null (일치하지 않음)
alert( "A\nB".match(/A.B/s) ); // A\nB (일치!)
```

<<<<<<< HEAD
````warn header="Firefox, IE, Edge에서 지원하지 않음"
<https://caniuse.com/#search=dotall>에서 지원 여부의 최신 상황을 확인해보세요. 이 글을 작성하는 시점에 `pattern:s` 플래그는 Firefox, IE, Edge에서 아직 지원하지 않습니다.
````warn header="IE에서 지원하지 않음"
`pattern:s` 플래그는 IE에서 지원하지 않습니다.

다행히도 어느 브라우저에서나 쓸 수 있는 대안이 있습니다. `pattern:[\s\S]`같은 정규 표현식을 사용해 '모든 문자'와 일치시킬 수 있습니다.
=======
````warn header="Not supported in IE"
The `pattern:s` flag is not supported in IE.

Luckily, there's an alternative, that works everywhere. We can use a regexp like `pattern:[\s\S]` to match "any character" (this pattern will be covered in the article <info:regexp-character-sets-and-ranges>).
>>>>>>> upstream/master
다행히도 어느 브라우저에서나 쓸 수 있는 대안이 있습니다. `pattern:[\s\S]`같은 정규 표현식을 사용하면 '모든 문자'와 일치시킬 수 있습니다. 참고로 자세한 내용은 <info:regexp-character-sets-and-ranges>에서 다룹니다.

```js run
alert( "A\nB".match(/A[\s\S]B/) ); // A\nB (일치!)
Expand Down Expand Up @@ -194,11 +179,7 @@ alert( "1 - 5".match(/\d\s-\s\d/) ); // 1 - 5, 이것도 됩니다.

**공백 역시 문자입니다. 다른 문자만큼이나 중요합니다.**

<<<<<<< HEAD
정규 표현식에 공백을 추가하거나 지우면 다르게 작동합니다.
=======
We can't add or remove spaces from a regular expression and expect it to work the same.
>>>>>>> upstream/master
정규 표현식에 공백을 추가하거나 지우고 이전과 같은 동작을 기대하면 안됩니다.

즉, 정규 표현식에서는 모든 문자가 중요합니다. 공백도 마찬가지로요.
````
Expand All @@ -217,10 +198,6 @@ We can't add or remove spaces from a regular expression and expect it to work th

하지만 이게 전부가 아닙니다!

<<<<<<< HEAD
자바스크립트에서 문자열에 사용하는 유니코드 인코딩은 문자에 여러 프로퍼티를 제공합니다. 어떤 언어에 속하는 글자인지 또는 글자가 아닌 구두점인지 알려주는 프로퍼티처럼요.
=======
Unicode encoding, used by JavaScript for strings, provides many properties for characters, like: which language the letter belongs to (if it's a letter), is it a punctuation sign, etc.
>>>>>>> upstream/master
자바스크립트에서 문자열에 사용하는 유니코드 인코딩은 문자 관련 여러 프로퍼티를 제공합니다. 어떤 언어에 속하는 문자인지, 이 문자가 구두점인지 알려주는 프로퍼티 등이 제공됩니다.

이런 프로퍼티를 기준으로 문자를 찾을 수도 있습니다. `pattern:u` 플래그를 사용하면 되는데요. 다음 글에서 알아보도록 하죠.
이런 프로퍼티를 사용해 원하는 문자를 찾을 수도 있습니다. `pattern:u` 플래그를 사용하면 되는데, 자세한 내용은 다음 글에서 알아보겠습니다.
28 changes: 0 additions & 28 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@
* 원문에는 없으나 독자의 이해를 돕기 위해 번역자가 추가하는 내용은 문장 중간이나 끝에 `(.....부가설명..... - 옮긴이)` 형태로 부가설명을 추가하도록 합니다.
* '적∙의를 보이는 것∙들'에 대한 내용은 될 수 있으면 사용하지 않습니다.([링크](https://m.blog.naver.com/ojhnews/220840570533))

<<<<<<< HEAD
잘못된 번역, 오타 및 기타 개선사항은 [이슈](https://github.com/javascript-tutorial/ko.javascript.info/issues)로 등록 부탁드립니다.

## 기여자
Expand All @@ -44,30 +43,3 @@
by the Modern JavaScript Tutorial Project Owner, Ilya Kantor(@iliakan)

모던 JavaScript 튜토리얼 한국어 프로젝트 오너, 이보라(@Violet-Bora-Lee)
=======
Something's wrong? A topic is missing? Explain it to people, add it as PR 👏

**You can edit the text in any editor.** The tutorial uses an enhanced "markdown" format, easy to grasp. And if you want to see how it looks on-site, there's a server to run the tutorial locally at <https://github.com/javascript-tutorial/server>.

The list of contributors is available at <https://javascript.info/about#contributors>.

## Structure

Every chapter, article, or task has its folder.

The folder is named like `N-url`, where `N` is a number for the sorting purposes and `URL` is the URL part with the title of the material.

The type of the material is defined by the file inside the folder:

- `index.md` stands for a chapter
- `article.md` stands for an article
- `task.md` stands for a task (solution must be provided in `solution.md` file as well)

Each of these files starts from the `# Main header`.

It's very easy to add something new.

---
Ilya Kantor @iliakan
>>>>>>> upstream/master