diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 0000000000..490051876d
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1 @@
+github: iliakan
diff --git a/.gitignore b/.gitignore
index 6f90fd1907..1a71fb7c82 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,4 @@ sftp-config.json
Thumbs.db
+/svgs
\ No newline at end of file
diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md
index 693d29b18d..8a1e103c28 100644
--- a/1-js/01-getting-started/1-intro/article.md
+++ b/1-js/01-getting-started/1-intro/article.md
@@ -1,6 +1,10 @@
# 자바스크립트란?
+<<<<<<< HEAD
자바스크립트(JavaScript)가 언어로서 지닌 특징에 대해 알아보겠습니다. 이어서 자바스크립트로 무엇을 할 수 있을지, 다른 기술들이 자바스크립트를 어떻게 활용하고 있는지도 이야기해 보겠습니다.
+=======
+Let's see what's so special about JavaScript, what we can achieve with it, and what other technologies play well with it.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
## 정의
@@ -24,26 +28,44 @@
엔진의 종류는 다양한데, 엔진마다 특유의 코드네임이 있습니다. 아래처럼 말이죠.
+<<<<<<< HEAD
- [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- Chrome과 Opera에서 쓰입니다.
- [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- Firefox에서 쓰입니다.
- IE는 버전에 따라 'Trident'나 'Chakra'라 불리는 엔진을 사용합니다. 'ChakraCore'는 Microsoft Edge에 사용되며, 'SquirrelFish'는 Safari에 사용됩니다.
위의 코드네임은 개발 관련 글에서 종종 언급되기 때문에 기억해 두는 것이 좋습니다. 본 튜토리얼에서도 해당 코드네임을 사용할 예정입니다. "X라는 기능은 V8에서만 지원합니다."라는 식으로 말이죠. 이런 문장을 만나면 Chrome과 Opera에서만 이 기능을 지원한다고 이해하시면 됩니다.
+=======
+- [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- in Chrome, Opera and Edge.
+- [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- in Firefox.
+- ...There are other codenames like "Chakra" for IE, "JavaScriptCore", "Nitro" and "SquirrelFish" for Safari, etc.
+
+The terms above are good to remember because they are used in developer articles on the internet. We'll use them too. For instance, if "a feature X is supported by V8", then it probably works in Chrome, Opera and Edge.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```smart header="엔진은 어떻게 동작하나요?"
엔진이 어떻게 동작하는지 이해하려면 상당한 시간을 쏟아부어야 합니다. 하지만 기본 원리는 다음과 같이 간단합니다.
+<<<<<<< HEAD
1. 엔진(브라우저라면 내장 엔진)이 스크립트를 읽습니다(파싱).
2. 읽어 들인 스크립트를 기계어로 전환합니다(컴파일).
3. 기계어로 전환된 코드가 실행됩니다. 기계어로 전환되었기 때문에 실행 속도가 빠릅니다.
+=======
+1. The engine (embedded if it's a browser) reads ("parses") the script.
+2. Then it converts ("compiles") the script to machine code.
+3. And then the machine code runs, pretty fast.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
엔진은 프로세스 각 단계마다 최적화를 진행합니다. 심지어 컴파일이 끝나고 실행 중인 코드를 감시하면서, 이 코드로 흘러가는 데이터를 분석하고, 분석 결과를 토대로 기계어로 전환된 코드를 다시 최적화하기도 합니다. 이런 과정을 거치면 스크립트 실행 속도는 더욱 더 빨라집니다.
```
## 브라우저에서 할 수 있는 일
+<<<<<<< HEAD
모던 자바스크립트는 '안전한' 프로그래밍 언어입니다. 메모리나 CPU 같은 저수준 영역의 조작을 허용하지 않습니다. 애초에 이러한 접근이 필요치 않은 브라우저를 대상으로 만든 언어이기 때문이죠.
+=======
+Modern JavaScript is a "safe" programming language. It does not provide low-level access to memory or the CPU, because it was initially created for browsers which do not require it.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
자바스크립트의 능력은 실행 환경에 상당한 영향을 받습니다. [Node.js](https://wikipedia.org/wiki/Node.js) 환경에선 임의의 파일을 읽거나 쓰고, 네트워크 요청을 수행하는 함수를 지원합니다.
@@ -59,7 +81,11 @@
## 브라우저에서 할 수 없는 일
+<<<<<<< HEAD
브라우저는 보안을 위해 자바스크립트의 기능에 제약을 걸어놓았습니다. 이런 제약은 악성 웹페이지가 개인 정보에 접근하거나 사용자의 데이터를 손상하는 것을 막기 위해 만들어졌습니다.
+=======
+JavaScript's abilities in the browser are limited to protect the user's safety. The aim is to prevent an evil webpage from accessing private information or harming the user's data.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
몇 가지 제약사항을 소개해 드리겠습니다.
@@ -67,6 +93,7 @@
모던 브라우저를 사용하면 파일을 다룰 순 있습니다. 하지만 접근은 제한되어 있습니다. 사용자가 브라우저 창에 파일을 '끌어다 두거나' `` 태그를 통해 파일을 선택할 때와 같이 특정 상황에서만 파일 접근을 허용합니다.
+<<<<<<< HEAD
카메라나 마이크 같은 디바이스와 상호 작용하려면 사용자의 명시적인 허가가 있어야 합니다. 자바스크립트가 활성화된 페이지라도 사용자 몰래 웹 카메라를 작동 시켜 수집한 정보를 [국가안보국(NSA)](https://en.wikipedia.org/wiki/National_Security_Agency)과 같은 곳에 몰래 전송할 수 없습니다.
- 브라우저 내 탭과 창은 대개 서로의 정보를 알 수 없습니다. 그런데 자바스크립트를 사용해 한 창에서 다른 창을 열 때는 예외가 적용됩니다. 하지만 이 경우에도 도메인이나 프로토콜, 포트가 다르다면 페이지에 접근할 수 없습니다.
@@ -78,21 +105,44 @@
브라우저 환경 밖, 예를 들어 서버라면 이러한 제약은 존재하지 않을 것입니다. 다만, 모던 브라우저에선 추가 권한 허가를 요청하는 플러그인이나 익스텐션 설치가 허용됩니다.
+=======
+ There are ways to interact with the camera/microphone and other devices, but they require a user's explicit permission. So a JavaScript-enabled page may not sneakily enable a web-camera, observe the surroundings and send the information to the [NSA](https://en.wikipedia.org/wiki/National_Security_Agency).
+- Different tabs/windows generally do not know about each other. Sometimes they do, for example when one window uses JavaScript to open the other one. But even in this case, JavaScript from one page may not access the other page if they come from different sites (from a different domain, protocol or port).
+
+ This is called the "Same Origin Policy". To work around that, *both pages* must agree for data exchange and must contain special JavaScript code that handles it. We'll cover that in the tutorial.
+
+ This limitation is, again, for the user's safety. A page from `http://anysite.com` which a user has opened must not be able to access another browser tab with the URL `http://gmail.com`, for example, and steal information from there.
+- JavaScript can easily communicate over the net to the server where the current page came from. But its ability to receive data from other sites/domains is crippled. Though possible, it requires explicit agreement (expressed in HTTP headers) from the remote side. Once again, that's a safety limitation.
+
+
+
+Such limitations do not exist if JavaScript is used outside of the browser, for example on a server. Modern browsers also allow plugins/extensions which may ask for extended permissions.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
## 자바스크립트만의 강점
자바스크립트엔 다양한 장점이 있지만 여기선 *세 가지*만 언급해 보도록 하겠습니다.
```compare
+<<<<<<< HEAD
+ HTML/CSS와 완전히 통합할 수 있음
+ 간단한 일은 간단하게 처리할 수 있게 해줌
+ 모든 주요 브라우저에서 지원하고, 기본 언어로 사용됨
+=======
++ Full integration with HTML/CSS.
++ Simple things are done simply.
++ Supported by all major browsers and enabled by default.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```
이 세 가지 모두를 지원하는 브라우저 연관 기술은 자바스크립트뿐입니다.
이런 특징 때문에 자바스크립트는 브라우저 인터페이스를 만들 때 가장 널리 사용되고 있습니다.
+<<<<<<< HEAD
이 외에도 자바스크립트를 이용해 서버나 모바일 앱 등을 만드는 것도 가능합니다.
+=======
+That said, JavaScript can be used to create servers, mobile applications, etc.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
## 자바스크립트 '너머의' 언어들
@@ -100,21 +150,42 @@
프로젝트마다 요구사항이 천차만별이기 때문에 이는 당연한 현상입니다.
+<<<<<<< HEAD
이로 인해 근래엔 브라우저에서 실행 되기 전에 자바스크립트로 *트랜스파일(transpile, 변환)* 할 수 있는 새로운 언어들이 많이 등장했습니다.
+=======
+So, recently a plethora of new languages appeared, which are *transpiled* (converted) to JavaScript before they run in the browser.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
최신 툴을 사용하면 트랜스파일을 빠르고 명확하게 수행할 수 있습니다. 최신도구는 자바스크립트 이외의 언어로 작성한 코드를 '보이지 않는 곳에서' 자바스크립트로 자동 변환해줍니다.
자바스크립트로 트랜스파일이 가능한 언어 몇 가지를 소개해 드리겠습니다.
+<<<<<<< HEAD
- [CoffeeScript](http://coffeescript.org/)는 자바스크립트를 위한 'syntactic sugar'입니다. 짧은 문법을 도입하여 명료하고 이해하기 쉬운 코드를 작성할 수 있습니다. Ruby 개발자들이 좋아합니다.
- [TypeScript](http://www.typescriptlang.org/)는 개발을 단순화 하고 복잡한 시스템을 지원하려는 목적으로 '자료형의 명시화(strict data typing)'에 집중해 만든 언어입니다. Microsoft가 개발하였습니다.
- [Flow](http://flow.org/) 역시 자료형을 강제하는데, TypeScript와는 다른 방식을 사용합니다. Facebook이 개발하였습니다.
- [Dart](https://www.dartlang.org/)는 모바일 앱과 같이 브라우저가 아닌 환경에서 동작하는 고유의 엔진을 가진 독자적 언어입니다. Google이 개발하였습니다.
이 외에도 자바스크립트로 트랜스파일 할 수 있는 언어는 다양합니다. 개발 언어로 이런 언어 중 하나를 택한다고 하더라도 자신이 무엇을 하고 있는지 이해하려면 결국엔 자바스크립트를 알아야 합니다.
+=======
+- [CoffeeScript](https://coffeescript.org/) is "syntactic sugar" for JavaScript. It introduces shorter syntax, allowing us to write clearer and more precise code. Usually, Ruby devs like it.
+- [TypeScript](https://www.typescriptlang.org/) is concentrated on adding "strict data typing" to simplify the development and support of complex systems. It is developed by Microsoft.
+- [Flow](https://flow.org/) also adds data typing, but in a different way. Developed by Facebook.
+- [Dart](https://www.dartlang.org/) is a standalone language that has its own engine that runs in non-browser environments (like mobile apps), but also can be transpiled to JavaScript. Developed by Google.
+- [Brython](https://brython.info/) is a Python transpiler to JavaScript that enables the writing of applications in pure Python without JavaScript.
+- [Kotlin](https://kotlinlang.org/docs/reference/js-overview.html) is a modern, concise and safe programming language that can target the browser or Node.
+
+There are more. Of course, even if we use one of these transpiled languages, we should also know JavaScript to really understand what we're doing.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
## 요약
+<<<<<<< HEAD
- 자바스크립트는 브라우저에서만 쓸 목적으로 고안된 언어이지만, 지금은 다양한 환경에서 쓰이고 있습니다.
- 오늘날 자바스크립트는 브라우저 환경에서 가장 널리 사용되는 언어로 자리매김하였습니다. HTML/CSS와 완전한 통합이 가능합니다.
- 자바스크립트로 '트랜스파일'할 수 있는 언어는 많습니다. 각 언어마다 고유한 기능을 제공하죠. 자바스크립트에 숙달한 뒤에 이 언어들을 살펴볼 것을 추천드립니다.
+=======
+- JavaScript was initially created as a browser-only language, but it is now used in many other environments as well.
+- Today, JavaScript has a unique position as the most widely-adopted browser language, fully integrated with HTML/CSS.
+- There are many languages that get "transpiled" to JavaScript and provide certain features. It is recommended to take a look at them, at least briefly, after mastering JavaScript.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
diff --git a/1-js/01-getting-started/2-manuals-specifications/article.md b/1-js/01-getting-started/2-manuals-specifications/article.md
index 16e0affb2e..532f2c470b 100644
--- a/1-js/01-getting-started/2-manuals-specifications/article.md
+++ b/1-js/01-getting-started/2-manuals-specifications/article.md
@@ -1,7 +1,11 @@
# 매뉴얼과 명세서
+<<<<<<< HEAD
본 *튜토리얼*은 자바스크립트를 기본부터 차근차근 배울 수 있도록 만들어졌습니다. 그런데 어느 정도 자바스크립트가 익숙해지면 튜토리얼 이외의 자료가 필요한 시점이 옵니다.
+=======
+This book is a *tutorial*. It aims to help you gradually learn the language. But once you're familiar with the basics, you'll need other resources.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
## 명세서
@@ -9,14 +13,23 @@
ECMA-262 명세서의 고유한 형식 때문에 명세서를 처음 접하는 사람은 그 내용을 이해하기가 쉽지 않습니다. 자바스크립트에 관한 정보를 얻을 수 있는 가장 신뢰할 만한 자료이긴 하지만 일상적인 참고 자료로는 적합하지 않죠.
+<<<<<<< HEAD
ECMA-262명세서는 새로운 버전이 매년 나옵니다. 공식 버전이 나오기 이전의 최신 초안은 에서 확인할 수 있습니다.
+=======
+A new specification version is released every year. Between these releases, the latest specification draft is at .
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
갓 명세서에 등록된 기능이나 '등록되기 바로 직전'에 있는 기능(스테이지(stage)3 상태의 기능), 제안 목록은 에서 확인할 수 있습니다.
+<<<<<<< HEAD
본 튜토리얼의 [두 번째 대 단원](info:browser-environment)에서 브라우저와 관련된 명세서를 다룰 예정이므로, 만약 브라우저에서 돌아가는 기능을 구현하는 개발자라면 해당 내용을 확인해 보시기 바랍니다.
+=======
+Also, if you're developing for the browser, then there are other specifications covered in the [second part](info:browser-environment) of the tutorial.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
## 매뉴얼
+<<<<<<< HEAD
- Mozilla 재단이 운영하는 **MDN JavaScript Reference**엔 다양한 예제와 정보가 있습니다. 특정 함수나 메서드에 대한 깊이 있는 정보를 얻고 싶다면 이 사이트가 제격입니다.
링크는 다음과 같습니다.
@@ -28,10 +41,28 @@ ECMA-262명세서는 새로운 버전이 매년 나옵니다. 공식 버전이
자바스크립트는 끊임없이 발전하는 언어입니다. 새로운 기능이 정기적으로 추가되죠.
특정 브라우저나 엔진이 내가 사용하려는 기능을 지원하는지 확인할 땐, 아래 두 사이트가 좋습니다.
+=======
+- **MDN (Mozilla) JavaScript Reference** is the main manual with examples and other information. It's great to get in-depth information about individual language functions, methods etc.
+
+ You can find it at .
+
+Although, it's often best to use an internet search instead. Just use "MDN [term]" in the query, e.g. to search for the `parseInt` function.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
- 에선 브라우저가 특정 기능을 지원하는지 (표 형태로) 확인할 수 있습니다. 암호화 관련 기능인 cryptography를 특정 브라우저에서 사용할 수 있는지 아닌지를 보려면 를 확인하면 됩니다.
- 에선 자바스크립트 기능 목록이 있고, 해당 기능을 특정 엔진이 지원하는지 여부를 거대한 표를 통해 보여줍니다.
실제 개발을 하다 보면 위에 언급 드린 자료가 아주 유용할 겁니다. 메서드나 함수 관련 정보, 브라우저 지원 여부 등은 의사결정을 내릴 때 꼭 필요한 정보이기 때문입니다.
-말씀드린 사이트나 이 페이지를 기억해 놓았다가 특정 기능에 대한 상세한 정보가 필요할 때 방문해 보시길 바랍니다.
\ No newline at end of file
+<<<<<<< HEAD
+말씀드린 사이트나 이 페이지를 기억해 놓았다가 특정 기능에 대한 상세한 정보가 필요할 때 방문해 보시길 바랍니다.
+=======
+To see their support among browser-based and other engines, see:
+
+- - per-feature tables of support, e.g. to see which engines support modern cryptography functions: .
+- - a table with language features and engines that support those or don't support.
+
+All these resources are useful in real-life development, as they contain valuable information about language details, their support, etc.
+
+Please remember them (or this page) for the cases when you need in-depth information about a particular feature.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
diff --git a/1-js/01-getting-started/3-code-editors/article.md b/1-js/01-getting-started/3-code-editors/article.md
index e8ee348f0d..5bd04123e9 100644
--- a/1-js/01-getting-started/3-code-editors/article.md
+++ b/1-js/01-getting-started/3-code-editors/article.md
@@ -12,8 +12,13 @@ IDE를 이용하면 수많은 파일로 구성된 프로젝트를 불러오고,
아직 어떤 IDE를 사용할지 결정하지 못했다면, 아래 두 옵션을 고려해 보시길 바랍니다.
+<<<<<<< HEAD
- [Visual Studio Code](https://code.visualstudio.com/) (크로스 플랫폼, 무료)
- [WebStorm](http://www.jetbrains.com/webstorm/) (크로스 플랫폼, 유료)
+=======
+- [Visual Studio Code](https://code.visualstudio.com/) (cross-platform, free).
+- [WebStorm](https://www.jetbrains.com/webstorm/) (cross-platform, paid).
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
Windows 사용자라면 'Visual Studio'라는 IDE를 들어보셨을 겁니다. Visual Studio는 'Visual Studio Code'와는 다릅니다. 'Visual Studio'는 .NET 플랫폼 개발에 쓰이는 유료 에디터로, Windows에서만 사용할 수 있습니다. 자바스크립트도 지원합니다. Visual Studio의 무료 버전인 [Visual Studio Community](https://www.visualstudio.com/vs/community/)도 있으니 참고하시기 바랍니다.
@@ -29,6 +34,7 @@ Windows 사용자라면 'Visual Studio'라는 IDE를 들어보셨을 겁니다.
경량 에디터는 다양한 플러그인을 지원합니다. 디렉터리 레벨 문법 분석기나 자동완성기능 등을 플러그인을 설치해 사용할 수 있습니다. 플러그인을 사용하면 경량 에디터에서도 IDE 못지않게 다양한 기능을 사용할 수 있죠. 요즘엔 경량 에디터와 IDE 사이의 엄격한 구분이 사라져가는 추세입니다.
+<<<<<<< HEAD
추천하는 에디터는 다음과 같습니다.
- [Atom](https://atom.io/) (크로스 플랫폼, 무료)
@@ -36,6 +42,13 @@ Windows 사용자라면 'Visual Studio'라는 IDE를 들어보셨을 겁니다.
- [Sublime Text](http://www.sublimetext.com) (크로스 플랫폼, 셰어웨어)
- [Notepad++](https://notepad-plus-plus.org/) (Windows, 무료)
- [Vim](http://www.vim.org/)이나 [Emacs](https://www.gnu.org/software/emacs/)도 에디터로 사용법만 잘 숙지하면 충분히 에디터 역할을 잘합니다.
+=======
+There are many options, for instance:
+
+- [Sublime Text](https://www.sublimetext.com/) (cross-platform, shareware).
+- [Notepad++](https://notepad-plus-plus.org/) (Windows, free).
+- [Vim](https://www.vim.org/) and [Emacs](https://www.gnu.org/software/emacs/) are also cool if you know how to use them.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
## 논쟁하지 맙시다
@@ -43,4 +56,13 @@ Windows 사용자라면 'Visual Studio'라는 IDE를 들어보셨을 겁니다.
이 외에도 제가 모르는 훌륭한 에디터가 있을 수 있으니 여러분이 가장 좋아하는 것 하나를 택하시면 됩니다.
+<<<<<<< HEAD
여타 툴과 마찬가지로 에디터를 선택하는 것은 프로젝트의 종류, 개발 습관, 개인 성향에 따라 다르므로 이에 관한 논쟁은 지양하도록 합시다.
+=======
+The choice of an editor, like any other tool, is individual and depends on your projects, habits, and personal preferences.
+
+The author's personal opinion:
+
+- I'd use [Visual Studio Code](https://code.visualstudio.com/) if I develop mostly frontend.
+- Otherwise, if it's mostly another language/platform and partially frontend, then consider other editors, such as XCode (Mac), Visual Studio (Windows) or Jetbrains family (Webstorm, PHPStorm, RubyMine etc, depending on the language).
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
diff --git a/1-js/02-first-steps/01-hello-world/article.md b/1-js/02-first-steps/01-hello-world/article.md
index a242ecef2d..9d6fb61b0b 100644
--- a/1-js/02-first-steps/01-hello-world/article.md
+++ b/1-js/02-first-steps/01-hello-world/article.md
@@ -9,7 +9,11 @@
## 'script' 태그
+<<<<<<< HEAD
`
```
+<<<<<<< HEAD
여기서 `/path/to/script.js`는 사이트의 루트에서부터 파일이 위치한 절대 경로를 나타냅니다. 현재 페이지에서의 상대 경로를 사용하는 것도 가능합니다. 같은 폴더 내에 있는 파일인 `"script.js"`를 `src="script.js"`로 참조하는 것처럼 말이죠.
+=======
+Here, `/path/to/script.js` is an absolute path to the script from the site root. One can also provide a relative path from the current page. For instance, `src="script.js"`, just like `src="./script.js"`, would mean a file `"script.js"` in the current folder.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
물론 아래와 같이 URL 전체를 속성으로 사용할 수도 있습니다.
diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md
index 4ea4fd9e21..580c4a125b 100644
--- a/1-js/02-first-steps/02-structure/article.md
+++ b/1-js/02-first-steps/02-structure/article.md
@@ -46,7 +46,11 @@ alert(3 +
+ 2);
```
+<<<<<<< HEAD
세미콜론 자동 삽입이 일어나지 않았기 때문에 `6`이 출력됩니다. 어떤 줄이 `"+"` 로 끝나면, 그 줄은 '불완전한 표현식'이므로 세미콜론이 필요하지 않다는 걸 직감하실 겁니다. 위 코드도 이런 의도로 동작합니다.
+=======
+The code outputs `6` because JavaScript does not insert semicolons here. It is intuitively obvious that if the line ends with a plus `"+"`, then it is an "incomplete expression", so a semicolon there would be incorrect. And in this case, that works as intended.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
**반면, 세미콜론이 정말로 필요하지만 자바스크립트가 이를 추정하지 '못하는' 상황도 존재합니다.**
@@ -56,19 +60,31 @@ alert(3 +
자바스크립트가 세미콜론을 자동으로 삽입해주지 못하는 구체적인 상황은 다음과 같습니다.
```js run
-[1, 2].forEach(alert)
+alert("Hello");
+
+[1, 2].forEach(alert);
```
+<<<<<<< HEAD
지금은 대괄호 `[]`와 `forEach`는 아직 배우지 않았으므로, 깊이 생각하지 말고 코드를 살펴봅시다. 이들에 대해선 추후에 학습할 예정입니다. 코드를 실행하면 결과가 `1`과 `2`가 출력된다는 사실만 기억하세요.
이제 위에서 작성한 코드 앞쪽에 *세미콜론을 붙이지 않은 채* `alert`를 추가해 봅시다.
```js run no-beautify
alert("에러가 발생합니다.")
+=======
+No need to think about the meaning of the brackets `[]` and `forEach` yet. We'll study them later. For now, just remember the result of running the code: it shows `Hello`, then `1`, then `2`.
-[1, 2].forEach(alert)
+Now let's remove the semicolon after the `alert`:
+
+```js run no-beautify
+alert("Hello")
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
+
+[1, 2].forEach(alert);
```
+<<<<<<< HEAD
예제를 실행해 보면 새롭게 추가한 `alert`만 제대로 출력되고 에러가 발생하는 걸 확인할 수 있습니다.
`alert` 끝에 세미콜론을 추가해 다시 실행하면 코드는 잘 작동합니다.
@@ -90,6 +106,23 @@ alert("에러가 발생합니다.")[1, 2].forEach(alert)
```
하지만 원래 이 코드는 단일 문이 아닌 두 개의 서로 다른 문이었습니다. 문이 잘못 합쳐지면서 에러가 발생한 것이죠. 이 예제 외에도 이런 상황이 발생할 여지는 언제나 있습니다.
+=======
+The difference compared to the code above is only one character: the semicolon at the end of the first line is gone.
+
+If we run this code, only the first `Hello` shows (and there's an error, you may need to open the console to see it). There are no numbers any more.
+
+That's because JavaScript does not assume a semicolon before square brackets `[...]`. So, the code in the last example is treated as a single statement.
+
+Here's how the engine sees it:
+
+```js run no-beautify
+alert("Hello")[1, 2].forEach(alert);
+```
+
+Looks weird, right? Such merging in this case is just wrong. We need to put a semicolon after `alert` for the code to work correctly.
+
+This can happen in other situations also.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
````
줄 바꿈으로 문을 나눴더라도, 문 사이엔 세미콜론을 넣는 것이 좋습니다. 자바스크립트 커뮤니티에서도 이를 규칙으로 정해 권장하고 있습니다. 다시 한번 정리하도록 하겠습니다. 세미콜론은 *생략할 수 있습니다.* 하지만 세미콜론을 사용하는 것이 더 안전하므로 이를 기억하고 따르도록 합시다. 입문자라면 이를 더 잘 지키도록 합시다.
diff --git a/1-js/02-first-steps/04-variables/2-declare-variables/solution.md b/1-js/02-first-steps/04-variables/2-declare-variables/solution.md
index 03d3cf3bd0..524a309460 100644
--- a/1-js/02-first-steps/04-variables/2-declare-variables/solution.md
+++ b/1-js/02-first-steps/04-variables/2-declare-variables/solution.md
@@ -6,7 +6,11 @@
let ourPlanetName = "Earth";
```
+<<<<<<< HEAD
`planet`이라는 간단한 이름을 지어줘도 되지만, 이렇게 하면 어떤 행성(planet)을 언급하는 것인지 모호합니다. 변수명이 아주 길어지지 않는 이상, 설명을 좀 더 곁들어주는 것이 좋습니다.
+=======
+Note, we could use a shorter name `planet`, but it might not be obvious what planet it refers to. It's nice to be more verbose. At least until the variable isNotTooLong.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
## 현재 방문자를 나타내는 변수 이름 짓기
diff --git a/1-js/02-first-steps/04-variables/3-uppercast-constant/task.md b/1-js/02-first-steps/04-variables/3-uppercast-constant/task.md
index a532d0673f..523bc3b079 100644
--- a/1-js/02-first-steps/04-variables/3-uppercast-constant/task.md
+++ b/1-js/02-first-steps/04-variables/3-uppercast-constant/task.md
@@ -12,13 +12,24 @@ const birthday = '18.04.1982';
const age = someCode(birthday);
```
+<<<<<<< HEAD
위 코드의 상수 `birthday`는 태어난 날짜 정보를 담고 있습니다. `age`라는 상수는 나이에 관한 값을 담고 있는데 `birthday`를 조작하여 그 값을 도출합니다(생일을 이용하여 나이를 도출하는 코드는 간결성을 위해 여기선 언급하지 않겠습니다. 이 문제에서 해당 코드가 중요한 역할을 하지 않기도 합니다).
+=======
+Here we have a constant `birthday` for the date, and also the `age` constant.
+
+The `age` is calculated from `birthday` using `someCode()`, which means a function call that we didn't explain yet (we will soon!), but the details don't matter here, the point is that `age` is calculated somehow based on the `birthday`.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
이런 상황에서 `birthday`를 대문자 상수로 바꾸는 것이 적절할까요? `age` 역시 대문자 상수로 바꾸는 것이 괜찮은 선택일까요?
```js
+<<<<<<< HEAD
const BIRTHDAY = '18.04.1982'; // 대문자 상수로 바꿔도 괜찮을까요?
const AGE = someCode(BIRTHDAY); // 대문자 상수로 바꿔도 괜찮을까요?
-```
+=======
+const BIRTHDAY = '18.04.1982'; // make birthday uppercase?
+const AGE = someCode(BIRTHDAY); // make age uppercase?
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
+```
diff --git a/1-js/02-first-steps/04-variables/article.md b/1-js/02-first-steps/04-variables/article.md
index b17049faa5..54b7efec04 100644
--- a/1-js/02-first-steps/04-variables/article.md
+++ b/1-js/02-first-steps/04-variables/article.md
@@ -24,7 +24,11 @@ let message;
let message;
*!*
+<<<<<<< HEAD
message = 'Hello'; // 문자열을 저장합니다.
+=======
+message = 'Hello'; // store the string 'Hello' in the variable named message
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
*/!*
```
@@ -63,7 +67,12 @@ let age = 25;
let message = 'Hello';
```
+<<<<<<< HEAD
어떤 사람들은 이런 방식으로도 변수를 정의합니다.
+=======
+Some people also define multiple variables in this multiline style:
+
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js no-beautify
let user = 'John',
age = 25,
@@ -87,22 +96,37 @@ let user = 'John'
*!*var*/!* message = 'Hello';
```
+<<<<<<< HEAD
`var`는 `let`과 *거의* 동일하게 동작합니다. `var`도 `let`처럼 변수를 선언하는 데 쓰이죠. 다만 `var`는 '오래된' 방식입니다.
`let`과 `var`의 미묘한 차이점에 대해선 추후 에서 자세히 다루도록 하겠습니다. 지금 시점에선 이 차이점이 중요하지 않기 때문에 넘어가도록 합시다.
+=======
+The `var` keyword is *almost* the same as `let`. It also declares a variable but in a slightly different, "old-school" way.
+
+There are subtle differences between `let` and `var`, but they do not matter to us yet. We'll cover them in detail in the chapter .
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
````
## 현실 속의 비유
'상자' 안에 데이터를 저장하는데, 이 상자에는 특별한 이름표가 붙어 있다고 상상해 봅시다. 이렇게 하면 '변수'를 좀 더 쉽게 이해할 수 있습니다.
+<<<<<<< HEAD
예를 들어, 변수 `message`는 `message`라는 이름표가 붙어있는 상자에 `"Hello!"`라는 값을 저장한 것이라고 생각할 수 있습니다.
+=======
+For instance, the variable `message` can be imagined as a box labelled `"message"` with the value `"Hello!"` in it:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
상자 속엔 어떤 값이든지 넣을 수 있습니다.
+<<<<<<< HEAD
원하는 만큼 값을 변경할 수도 있습니다.
+=======
+We can also change it as many times as we want:
+
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js run
let message;
@@ -148,12 +172,21 @@ let message = "That"; // SyntaxError: 'message' has already been declared
따라서 변수는 딱 한 번만 선언하고, 선언한 변수를 참조할 때는 `let` 없이 변수명만 사용해 참조해야 합니다.
````
+<<<<<<< HEAD
```smart header="함수형 언어"
[함수형(functional)](https://en.wikipedia.org/wiki/Functional_programming) 프로그래밍 언어는 변숫값 변경을 금지합니다. [스칼라(Scala)](http://www.scala-lang.org/)와 [얼랭(Erlang)](http://www.erlang.org/)은 대표적인 함수형 언어입니다.
+=======
+```smart header="Functional languages"
+It's interesting to note that there exist so-called [pure functional](https://en.wikipedia.org/wiki/Purely_functional_programming) programming languages, such as [Haskell](https://en.wikipedia.org/wiki/Haskell), that forbid changing variable values.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
이들 언어에서는 '상자 속에' 값이 일단 저장되면, 그 값을 영원히 유지합니다. 다른 값을 저장하고 싶다면 새로운 상자를 만들어야(새 변수를 선언해야)만 합니다. 이전 변수를 재사용할 수 없습니다.
+<<<<<<< HEAD
처음 봤을 땐 좀 이상해 보일 수 있지만, 함수형 언어는 중대한 개발에 상당히 적합한 언어입니다. 이런 제약이 장점으로 작용하는 병렬 계산(parallel computation)과 같은 영역도 있죠. 당장은 사용할 계획이 없더라도 이런 언어를 공부하는 것은 시야를 넓히는 데 도움이 되므로, 학습을 권유 드립니다.
+=======
+Though it may seem a little odd at first sight, these languages are quite capable of serious development. More than that, there are areas like parallel computations where this limitation confers certain benefits.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```
## 변수 명명 규칙
@@ -191,19 +224,32 @@ let 1a; // 변수명은 숫자로 시작해선 안 됩니다.
let my-name; // 하이픈 '-'은 변수명에 올 수 없습니다.
```
+<<<<<<< HEAD
```smart header="대·소문자 구별"
`apple`와 `AppLE`은 서로 다른 변수입니다.
```
````smart header="비 라틴계 언어도 변수명에 사용할 수 있지만 권장하진 않습니다."
키릴 문자, 심지어 상형문자도 변수명에 사용할 수 있습니다. 모든 언어를 변수명에 사용할 수 있죠.
+=======
+```smart header="Case matters"
+Variables named `apple` and `APPLE` are two different variables.
+```
+
+````smart header="Non-Latin letters are allowed, but not recommended"
+It is possible to use any language, including Cyrillic letters, Chinese logograms and so on, like this:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js
let имя = '...';
let 我 = '...';
```
+<<<<<<< HEAD
위 코드에는 기술적인 에러가 없습니다. 변수명도 유효합니다. 하지만 영어를 변수명에 사용하는 것이 국제적인 관습이므로, 변수명은 영어를 사용해서 만들길 권유 드립니다. 다른 나라 사람이 스크립트를 볼 경우 등을 대비해 장기적인 안목을 가지고 코드를 작성합시다.
+=======
+Technically, there is no error here. Such names are allowed, but there is an international convention to use English in variable names. Even if we're writing a small script, it may have a long life ahead. People from other countries may need to read it sometime.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
````
````warn header="예약어"
@@ -258,12 +304,20 @@ const myBirthday = '18.04.1982';
myBirthday = '01.01.2001'; // error, can't reassign the constant!
```
+<<<<<<< HEAD
변숫값이 절대 변경되지 않을 것이라 확신하면, 값이 변경되는 것을 방지하면서 다른 개발자들에게 이 변수는 상수라는 것을 알리기 위해 `const`를 사용해 변수를 선언하도록 합시다.
+=======
+When a programmer is sure that a variable will never change, they can declare it with `const` to guarantee and communicate that fact to everyone.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
### 대문자 상수
+<<<<<<< HEAD
기억하기 힘든 값을 변수에 할당해 별칭으로 사용하는 것은 널리 사용되는 관습입니다.
+=======
+There is a widespread practice to use constants as aliases for difficult-to-remember values that are known before execution.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
이런 상수는 대문자와 밑줄로 구성된 이름으로 명명합니다.
@@ -288,16 +342,29 @@ alert(color); // #FF7F00
그렇다면 언제 일반적인 방식으로 상수를 명명하고, 언제 대문자를 사용해서 명명해야 하는 걸까요? 명확히 짚고 넘어갑시다.
+<<<<<<< HEAD
'상수'는 변수의 값이 절대 변하지 않음을 의미합니다. 그중에는 (빨간색을 나타내는 16진수 값처럼) 코드가 실행되기 전에 이미 그 값을 알고 있는 상수도 있고, 런타임 과정에서 *계산되지만* 최초 할당 이후 값이 변하지 않는 상수도 있습니다.
예시:
+=======
+Being a "constant" just means that a variable's value never changes. But some constants are known before execution (like a hexadecimal value for red) and some constants are *calculated* in run-time, during the execution, but do not change after their initial assignment.
+
+For instance:
+
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js
const pageLoadTime = /* 웹페이지를 로드하는데 걸린 시간 */;
```
+<<<<<<< HEAD
`pageLoadTime`의 값은 페이지가 로드되기 전에는 정해지지 않기 때문에 일반적인 방식으로 변수명을 지었습니다. 하지만 이 값은 최초 할당 이후에 변경되지 않으므로 여전히 상수입니다.
정리하자면, 대문자 상수는 '하드 코딩한' 값의 별칭을 만들 때 사용하면 됩니다.
+=======
+The value of `pageLoadTime` is not known before the page load, so it's named normally. But it's still a constant because it doesn't change after the assignment.
+
+In other words, capital-named constants are only used as aliases for "hard-coded" values.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
## 바람직한 변수명
@@ -305,18 +372,31 @@ const pageLoadTime = /* 웹페이지를 로드하는데 걸린 시간 */;
변수명은 간결하고, 명확해야 합니다. 변수가 담고있는 것이 무엇인지 잘 설명할 수 있어야 하죠.
+<<<<<<< HEAD
변수의 이름을 짓는 것은 프로그래밍에서 가장 중요하고 복잡한 기술 중 하나입니다. 변수명만 슬쩍 봐도 초보자가 코드를 작성했는지, 노련한 개발자가 작성했는지 알 수 있습니다.
실제 프로젝트에선 맨 처음부터 완전히 독립적인 코드를 작성하기보다 기존 코드의 틀을 변경하고 확장하는데 대부분의 시간을 보냅니다. 작성했던 코드를 얼마 후에 다시 봤을 때, 정보에 알맞은 이름이 적혀있으면 정보를 더 쉽게 찾을 수 있습니다. 다시 말해, 변수가 올바른 이름을 가졌을 때 말이죠.
+=======
+Variable naming is one of the most important and complex skills in programming. A glance at variable names can reveal which code was written by a beginner versus an experienced developer.
+
+In a real project, most of the time is spent modifying and extending an existing code base rather than writing something completely separate from scratch. When we return to some code after doing something else for a while, it's much easier to find information that is well-labelled. Or, in other words, when the variables have good names.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
그러므로 변수를 선언하기 전에 내가 지은 변수의 이름이 괜찮은지 숙고해 주시기 바랍니다.
아래는 변수 명명 시 참고하기 좋은 규칙입니다.
+<<<<<<< HEAD
- `userName` 이나 `shoppingCart`처럼 사람이 읽을 수 있는 이름을 사용하세요.
- 무엇을 하고 있는지 명확히 알고 있지 않을 경우 외에는 줄임말이나 `a`, `b`, `c`와 같은 짧은 이름은 피하세요.
- 최대한 서술적이고 간결하게 명명해 주세요. `data`와 `value`는 나쁜 이름의 예시입니다. 이런 이름은 아무것도 설명해주지 않습니다. 코드 문맥상 변수가 가리키는 데이터나 값이 아주 명확할 때에만 이런 이름을 사용합시다.
- 자신만의 규칙이나 소속된 팀의 규칙을 따르세요. 만약 사이트 방문객을 'user'라고 부르기로 했다면, 이와 관련된 변수를 `currentVisitor`나 `newManInTown`이 아닌 `currentUser`나 `newUser`라는 이름으로 지어야 합니다.
+=======
+- Use human-readable names like `userName` or `shoppingCart`.
+- Stay away from abbreviations or short names like `a`, `b`, and `c`, unless you know what you're doing.
+- Make names maximally descriptive and concise. Examples of bad names are `data` and `value`. Such names say nothing. It's only okay to use them if the context of the code makes it exceptionally obvious which data or value the variable is referencing.
+- Agree on terms within your team and in your mind. If a site visitor is called a "user" then we should name related variables `currentUser` or `newUser` instead of `currentVisitor` or `newManInTown`.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
간단해 보이나요? 그렇게 보이긴 합니다. 그러나 실전에서 서술적이고 간결한 변수명을 짓는 것은 간단하지 않습니다. 그럼, 화이팅!
diff --git a/1-js/02-first-steps/05-types/article.md b/1-js/02-first-steps/05-types/article.md
index 46134566a7..525e984aa7 100644
--- a/1-js/02-first-steps/05-types/article.md
+++ b/1-js/02-first-steps/05-types/article.md
@@ -46,6 +46,7 @@ n = 12.345;
alert( "숫자가 아님" / 2 ); // NaN, 문자열을 숫자로 나누면 오류가 발생합니다.
```
+<<<<<<< HEAD
`NaN`은 여간해선 바뀌지 않습니다. `NaN`에 어떤 추가 연산을 해도 결국 `NaN`이 반환됩니다.
```js run
@@ -53,6 +54,17 @@ n = 12.345;
```
연산 과정 어디에선가 `NaN`이 반환되었다면, 이는 모든 결과에 영향을 미칩니다.
+=======
+ `NaN` is sticky. Any further mathematical operation on `NaN` returns `NaN`:
+
+ ```js run
+ alert( NaN + 1 ); // NaN
+ alert( 3 * NaN ); // NaN
+ alert( "not a number" / 2 - 1 ); // NaN
+ ```
+
+ So, if there's a `NaN` somewhere in a mathematical expression, it propagates to the whole result (there's only one exception to that: `NaN ** 0` is `1`).
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```smart header="수학 연산은 안전합니다."
자바스크립트에서 행해지는 수학 연산은 '안전'하다고 볼 수 있습니다. 0으로 나눈다거나 숫자가 아닌 문자열을 숫자로 취급하는 등의 이례적인 연산이 자바스크립트에선 가능합니다.
@@ -64,11 +76,28 @@ n = 12.345;
숫자를 다루는 방법에 대해선 챕터에서 자세히 알아보도록 하겠습니다.
-## BigInt
+## BigInt [#bigint-type]
+<<<<<<< HEAD
내부 표현 방식 때문에 자바스크립트에선 (253-1)(`9007199254740991`) 보다 큰 값 혹은 -(253-1) 보다 작은 정수는 '숫자형'을 사용해 나타낼 수 없습니다.
사실 대부분의 상황에서 이런 제약사항은 문제가 되지 않습니다. 그렇지만 암호 관련 작업같이 아주 큰 숫자가 필요한 상황이거나 아주 높은 정밀도로 작업을 해야 할 때는 이런 큰 숫자가 필요합니다.
+=======
+In JavaScript, the "number" type cannot safely represent integer values larger than (253-1) (that's `9007199254740991`), or less than -(253-1) for negatives.
+
+To be really precise, the "number" type can store larger integers (up to 1.7976931348623157 * 10308), but outside of the safe integer range ±(253-1) there'll be a precision error, because not all digits fit into the fixed 64-bit storage. So an "approximate" value may be stored.
+
+For example, these two numbers (right above the safe range) are the same:
+
+```js
+console.log(9007199254740991 + 1); // 9007199254740992
+console.log(9007199254740991 + 2); // 9007199254740992
+```
+
+So to say, all odd integers greater than (253-1) can't be stored at all in the "number" type.
+
+For most purposes ±(253-1) range is quite enough, but sometimes we need the entire range of really big integers, e.g. for cryptography or microsecond-precision timestamps.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
`BigInt`형은 표준으로 채택된 지 얼마 안 된 자료형으로, 길이에 상관없이 정수를 나타낼 수 있습니다.
@@ -81,11 +110,15 @@ const bigInt = 1234567890123456789012345678901234567890n;
`BigInt`형 숫자는 자주 쓰이지 않기 때문에 여기서 자세히 다루지 않고 별도의 챕터, 에서 설명드리겠습니다. 아주 큰 숫자를 사용해야 하는 경우라면 해당 챕터를 참고해 주시기 바랍니다.
+<<<<<<< HEAD
```smart header="호환성 이슈"
이 글이 작성된 시점엔 Firefox, Chrome, Edge, Safari에서만 `BigInt`를 지원합니다. IE에선 지원하지 않습니다.
```
## 문자형
+=======
+## String
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
자바스크립트에선 문자열(string)을 따옴표로 묶습니다.
@@ -127,7 +160,11 @@ alert( "the result is ${1 + 2}" ); // the result is ${1 + 2} (큰따옴표는
```smart header="*글자형*은 없습니다."
일부 언어는 글자 하나를 저장할 때 쓰이는 자료형, '글자(character)'형을 따로 지원합니다. C 언어와 Java의 `char`가 대표적인 예입니다.
+<<<<<<< HEAD
자바스크립트는 글자형을 지원하지 않습니다. `문자형`만 있을 뿐입니다. 여기엔 글자가 하나 혹은 여러 개 들어갈 수 있습니다.
+=======
+In JavaScript, there is no such type. There's only one type: `string`. A string may consist of zero characters (be empty), one character or many of them.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```
## 불린형
@@ -208,6 +245,7 @@ alert(age); // "undefined"
## typeof 연산자 [#type-typeof]
+<<<<<<< HEAD
`typeof` 연산자는 인수의 자료형을 반환합니다. 자료형에 따라 처리 방식을 다르게 하고 싶거나 변수의 자료형을 빠르게 알아내고자 할 때 유용합니다.
`typeof` 연산자는 두 가지 형태의 문법을 지원합니다.
@@ -218,6 +256,11 @@ alert(age); // "undefined"
괄호가 있든 없든 결과가 동일합니다.
`typeof x`를 호출하면 인수의 자료형을 나타내는 문자열을 반환합니다.
+=======
+The `typeof` operator returns the type of the operand. It's useful when we want to process values of different types differently or just want to do a quick check.
+
+A call to `typeof x` returns a string with the type name:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js
typeof undefined // "undefined"
@@ -247,14 +290,33 @@ typeof alert // "function" (3)
마지막 세 줄은 약간의 설명이 필요해 보이네요.
+<<<<<<< HEAD
1. `Math`는 수학 연산을 제공하는 내장 객체이므로 `"object"`가 출력됩니다. `Math`에 대해선 챕터에서 학습하도록 하겠습니다. 내장 객체는 객체형이라는 것을 알려주기 위해 이런 예시를 작성해 보았습니다.
2. `typeof null`의 결과는 `"object"`입니다. `null`은 별도의 고유한 자료형을 가지는 특수 값으로 객체가 아니지만, 하위 호환성을 유지하기 위해 이런 오류를 수정하지 않고 남겨둔 상황입니다. 언어 자체의 오류이므로 `null`이 객체가 아님에 유의하시기 바랍니다.
3. `typeof`는 피연산자가 함수면 `"function"`을 반환합니다. 그러므로 `typeof alert`는 `"function"`을 출력해줍니다. 그런데 '함수'형은 따로 없습니다. 함수는 객체형에 속합니다. 이런 동작 방식이 형식적으론 잘못되긴 했지만, 아주 오래전에 만들어진 규칙이었기 때문에 하위 호환성 유지를 위해 남겨진 상태입니다. 한편, 실무에선 이런 특징이 매우 유용하게 사용되기도 합니다.
## 요약
+=======
+1. `Math` is a built-in object that provides mathematical operations. We will learn it in the chapter . Here, it serves just as an example of an object.
+2. The result of `typeof null` is `"object"`. That's an officially recognized error in `typeof`, coming from very early days of JavaScript and kept for compatibility. Definitely, `null` is not an object. It is a special value with a separate type of its own. The behavior of `typeof` is wrong here.
+3. The result of `typeof alert` is `"function"`, because `alert` is a function. We'll study functions in the next chapters where we'll also see that there's no special "function" type in JavaScript. Functions belong to the object type. But `typeof` treats them differently, returning `"function"`. That also comes from the early days of JavaScript. Technically, such behavior isn't correct, but can be convenient in practice.
+
+```smart header="The `typeof(x)` syntax"
+You may also come across another syntax: `typeof(x)`. It's the same as `typeof x`.
+
+To put it clear: `typeof` is an operator, not a function. The parentheses here aren't a part of `typeof`. It's the kind of parentheses used for mathematical grouping.
+
+Usually, such parentheses contain a mathematical expression, such as `(2 + 2)`, but here they contain only one argument `(x)`. Syntactically, they allow to avoid a space between the `typeof` operator and its argument, and some people like it.
+
+Some people prefer `typeof(x)`, although the `typeof x` syntax is much more common.
+```
+
+## Summary
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
자바스크립트에는 여덟 가지 기본 자료형이 있습니다.
+<<<<<<< HEAD
- `숫자형` -- 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용합니다. 정수의 한계는 ±253 입니다.
- `bigint` -- 길이 제약 없이 정수를 나타낼 수 있습니다.
- `문자형` -- 빈 문자열이나 글자들로 이뤄진 문자열을 나타낼 때 사용합니다. 단일 문자를 나타내는 별도의 자료형은 없습니다.
@@ -263,11 +325,29 @@ typeof alert // "function" (3)
- `undefined` -- `undefined` 값만을 위한 독립 자료형입니다. `undefined`는 할당되지 않은 값을 나타냅니다.
- `객체형` -- 복잡한 데이터 구조를 표현할 때 사용합니다.
- `심볼형` -- 객체의 고유 식별자를 만들 때 사용합니다.
+=======
+- Seven primitive data types:
+ - `number` for numbers of any kind: integer or floating-point, integers are limited by ±(253-1).
+ - `bigint` for integer numbers of arbitrary length.
+ - `string` for strings. A string may have zero or more characters, there's no separate single-character type.
+ - `boolean` for `true`/`false`.
+ - `null` for unknown values -- a standalone type that has a single value `null`.
+ - `undefined` for unassigned values -- a standalone type that has a single value `undefined`.
+ - `symbol` for unique identifiers.
+- And one non-primitive data type:
+ - `object` for more complex data structures.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
`typeof` 연산자는 피연산자의 자료형을 알려줍니다.
+<<<<<<< HEAD
- `typeof x` 또는 `typeof(x)` 형태로 사용합니다.
- 피연산자의 자료형을 문자열 형태로 반환합니다.
- `null`의 typeof 연산은 `"object"`인데, 이는 언어상 오류입니다. null은 객체가 아닙니다.
+=======
+- Usually used as `typeof x`, but `typeof(x)` is also possible.
+- Returns a string with the name of the type, like `"string"`.
+- For `null` returns `"object"` -- this is an error in the language, it's not actually an object.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
이어지는 챕터에선 원시 자료형에 대해 학습해 볼 예정입니다. 원시형에 어느 정도 익숙해지면 객체형에 대해 알아보도록 하겠습니다.
diff --git a/1-js/02-first-steps/06-alert-prompt-confirm/article.md b/1-js/02-first-steps/06-alert-prompt-confirm/article.md
index e094ea75ee..278379e823 100644
--- a/1-js/02-first-steps/06-alert-prompt-confirm/article.md
+++ b/1-js/02-first-steps/06-alert-prompt-confirm/article.md
@@ -30,8 +30,13 @@ result = prompt(title, [default]);
`default`
: 입력 필드의 초깃값(선택값)
+<<<<<<< HEAD
```smart header="인수를 감싸는 대괄호 `[...]`의 의미"
`default`를 감싸는 대괄호는 이 매개변수가 필수가 아닌 선택값이라는 것을 의미합니다.
+=======
+```smart header="The square brackets in syntax `[...]`"
+The square brackets around `default` in the syntax above denote that the parameter is optional, not required.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```
사용자는 프롬프트 대화상자의 입력 필드에 원하는 값을 입력하고 확인을 누를 수 있습니다. 값을 입력하길 원하지 않는 경우는 취소(Cancel) 버튼을 누르거나 `key:Esc`를 눌러 대화상자를 빠져나가면 됩니다.
diff --git a/1-js/02-first-steps/07-type-conversions/article.md b/1-js/02-first-steps/07-type-conversions/article.md
index a4aecec113..5eaefbf34c 100644
--- a/1-js/02-first-steps/07-type-conversions/article.md
+++ b/1-js/02-first-steps/07-type-conversions/article.md
@@ -6,8 +6,13 @@
이 외에, 전달받은 값을 의도를 갖고 원하는 타입으로 변환(명시적 변환)해 주는 경우도 형 변환이라고 할 수 있습니다.
+<<<<<<< HEAD
```smart header="객체의 형변환은 나중에 다룹니다."
이 챕터에선 객체는 다루지 않겠습니다. 여기선 원시형의 형변환에 대해서만 다룰 예정입니다.
+=======
+```smart header="Not talking about objects yet"
+In this chapter, we won't cover objects. For now, we'll just be talking about primitives.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
객체의 형 변환이 어떻게 이뤄지는지 에 대해선 객체에 대한 학습이 끝난 후 알아보겠습니다.
```
@@ -34,7 +39,11 @@ alert(typeof value); // string
## 숫자형으로 변환
+<<<<<<< HEAD
숫자형으로의 변환은 수학과 관련된 함수와 표현식에서 자동으로 일어납니다.
+=======
+Numeric conversion in mathematical functions and expressions happens automatically.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
숫자형이 아닌 값에 나누기 `/`를 적용한 경우와 같이 말이죠.
@@ -69,8 +78,13 @@ alert(age); // NaN, 형 변환이 실패합니다.
|-------|-------------|
|`undefined`|`NaN`|
|`null`|`0`|
+<<<<<<< HEAD
|true and false | `1` 과 `0` |
| `string` | 문자열의 처음과 끝 공백이 제거됩니다. 공백 제거 후 남아있는 문자열이 없다면 `0`, 그렇지 않다면 문자열에서 숫자를 읽습니다. 변환에 실패하면 `NaN`이 됩니다.|
+=======
+|true and false | `1` and `0` |
+| `string` | Whitespaces (includes spaces, tabs `\t`, newlines `\n` etc.) from the start and end are removed. If the remaining string is empty, the result is `0`. Otherwise, the number is "read" from the string. An error gives `NaN`. |
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
예시:
@@ -130,7 +144,11 @@ alert( Boolean(" ") ); // 공백이 있는 문자열도 비어있지 않은 문
|`undefined`|`NaN`|
|`null`|`0`|
|true / false | `1 / 0` |
+<<<<<<< HEAD
| `string` | 전달받은 문자열을 "그대로" 읽되, 처음과 끝의 공백을 무시합니다. 문자열이 비어있다면 `0`이 되고, 오류 발생 시 `NaN`이 됩니다. |
+=======
+| `string` | The string is read "as is", whitespaces (includes spaces, tabs `\t`, newlines `\n` etc.) from both sides are ignored. An empty string becomes `0`. An error gives `NaN`. |
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
**`불린형으로 변환`** 은 논리 연산 시 발생합니다. `Boolean(value)`으로도 변환할 수 있습니다.
diff --git a/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md
index bde9d58328..6288cc0d99 100644
--- a/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md
+++ b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md
@@ -9,7 +9,6 @@ true + false = 1
"$" + 4 + 5 = "$45"
"4" - 2 = 2
"4px" - 2 = NaN
-7 / 0 = Infinity
" -9 " + 5 = " -9 5" // (3)
" -9 " - 5 = -14 // (4)
null + 1 = 1 // (5)
@@ -17,10 +16,20 @@ undefined + 1 = NaN // (6)
" \t \n" - 2 = -2 // (7)
```
+<<<<<<< HEAD
1. 피 연산자 중 하나가 문자열인 `"" + 1`에서 `1`은 문자형으로 변환됩니다. 따라서 공백과 문자열 1을 더한, `"" + 1 = "1"`과 같은 효과를 발휘하죠. 그다음 연산 `"1" + 0`에도 같은 규칙이 적용됩니다.
2. 뺄셈 연산자 `-`는 기타 수학 연산자처럼 숫자형만을 인수로 받습니다. 빈 문자열 `""`는 숫자 `0`으로 변환되기 때문에 결과는 `-1`이 됩니다.
3. 피 연산자 중 하나가 문자열이므로 숫자 5가 문자열로 변환됩니다.
4. 뺄셈 연산자는 인수를 숫자형으로 변화시키므로 `" -9 "`는 숫자 `-9`로 변합니다. 앞, 뒤 공백은 제거되죠.
5. 숫자형으로 변환 시 `null`은 `0`이 됩니다.
6. `undefined`는 숫자형으로 변환시 `NaN`이 됩니다.
-7. 문자열이 숫자형으로 변할 땐 문자열 앞뒤의 공백이 삭제됩니다. 뺄셈 연산자 앞의 피연산자는 공백을 만드는 문자 `\t`와 `\n`, 그 사이의 "일반적인" 공백으로 구성됩니다. 따라서 `" \t \n"`는 숫자형으로 변환 시 길이가 `0`인 문자열로 취급되어 숫자 `0`이 됩니다.
\ No newline at end of file
+7. 문자열이 숫자형으로 변할 땐 문자열 앞뒤의 공백이 삭제됩니다. 뺄셈 연산자 앞의 피연산자는 공백을 만드는 문자 `\t`와 `\n`, 그 사이의 "일반적인" 공백으로 구성됩니다. 따라서 `" \t \n"`는 숫자형으로 변환 시 길이가 `0`인 문자열로 취급되어 숫자 `0`이 됩니다.
+=======
+1. The addition with a string `"" + 1` converts `1` to a string: `"" + 1 = "1"`, and then we have `"1" + 0`, the same rule is applied.
+2. The subtraction `-` (like most math operations) only works with numbers, it converts an empty string `""` to `0`.
+3. The addition with a string appends the number `5` to the string.
+4. The subtraction always converts to numbers, so it makes `" -9 "` a number `-9` (ignoring spaces around it).
+5. `null` becomes `0` after the numeric conversion.
+6. `undefined` becomes `NaN` after the numeric conversion.
+7. Space characters are trimmed off string start and end when a string is converted to a number. Here the whole string consists of space characters, such as `\t`, `\n` and a "regular" space between them. So, similarly to an empty string, it becomes `0`.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
diff --git a/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/task.md b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/task.md
index cff6c67e6a..2c45b127f9 100644
--- a/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/task.md
+++ b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/task.md
@@ -16,7 +16,6 @@ true + false
"$" + 4 + 5
"4" - 2
"4px" - 2
-7 / 0
" -9 " + 5
" -9 " - 5
null + 1
diff --git a/1-js/02-first-steps/08-operators/4-fix-prompt/solution.md b/1-js/02-first-steps/08-operators/4-fix-prompt/solution.md
index defe5642c0..d130e9a1ee 100644
--- a/1-js/02-first-steps/08-operators/4-fix-prompt/solution.md
+++ b/1-js/02-first-steps/08-operators/4-fix-prompt/solution.md
@@ -9,7 +9,11 @@ let b = "2"; // prompt("덧셈할 두 번째 숫자를 입력해주세요.", 2);
alert(a + b); // 12
```
+<<<<<<< HEAD
예시가 제대로 동작하게 하려면 덧셈 연산 `+`가 수행되기 전에 문자열을 숫자로 변환해야 합니다. 이때 `Number()`를 사용하거나 변수 앞에 `+`를 붙여줄 수 있습니다.
+=======
+What we should do is to convert strings to numbers before `+`. For example, using `Number()` or prepending them with `+`.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
아래 코드에선 `prompt` 함수 바로 앞에서 문자열을 숫자로 변환했습니다.
diff --git a/1-js/02-first-steps/08-operators/article.md b/1-js/02-first-steps/08-operators/article.md
index 29193f4995..e3e3485687 100644
--- a/1-js/02-first-steps/08-operators/article.md
+++ b/1-js/02-first-steps/08-operators/article.md
@@ -50,23 +50,46 @@
예시:
```js run
+<<<<<<< HEAD
alert( 5 % 2 ); // 5를 2로 나눈 후의 나머지인 1을 출력
alert( 8 % 3 ); // 8을 3으로 나눈 후의 나머지인 2를 출력
+=======
+alert( 5 % 2 ); // 1, the remainder of 5 divided by 2
+alert( 8 % 3 ); // 2, the remainder of 8 divided by 3
+alert( 8 % 4 ); // 0, the remainder of 8 divided by 4
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```
## 거듭제곱 연산자 **
+<<<<<<< HEAD
거듭제곱 연산자(exponentiation operator)를 사용한 `a ** b`를 평가하면 `a`를 `b`번 곱한 값이 반환됩니다.
+=======
+The exponentiation operator `a ** b` raises `a` to the power of `b`.
+
+In school maths, we write that as ab.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
예시:
```js run
+<<<<<<< HEAD
alert( 2 ** 2 ); // 4 (2 * 2)
alert( 2 ** 3 ); // 8 (2 * 2 * 2)
alert( 2 ** 4 ); // 16 (2 * 2 * 2 * 2)
```
거듭제곱 연산자는 정수가 아닌 숫자에 대해서도 동작합니다. `1/2`을 사용하면 제곱근을 구할 수 있죠.
+=======
+alert( 2 ** 2 ); // 2² = 4
+alert( 2 ** 3 ); // 2³ = 8
+alert( 2 ** 4 ); // 2⁴ = 16
+```
+
+Just like in maths, the exponentiation operator is defined for non-integer numbers as well.
+
+For example, a square root is an exponentiation by ½:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js run
alert( 4 ** (1/2) ); // 2 (1/2 거듭제곱은 제곱근)
@@ -76,7 +99,11 @@ alert( 8 ** (1/3) ); // 2 (1/3 거듭제곱은 세제곱근)
## 이항 연산자 '+'와 문자열 연결
+<<<<<<< HEAD
이제 학교에서 배운 기본 산술 연산자를 넘어, 자바스크립트가 제공하는 특별한 연산자 기능에 대해 살펴봅시다.
+=======
+Let's meet the features of JavaScript operators that are beyond school arithmetics.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
덧셈 연산자 `+`는 대개 숫자를 더한 결과를 반환합니다.
@@ -104,7 +131,16 @@ alert( 2 + '1' ); // "21"
alert(2 + 2 + '1' ); // '221'이 아니라 '41'이 출력됩니다.
```
+<<<<<<< HEAD
연산은 왼쪽에서 오른쪽으로 순차적으로 진행되기 때문에 이런 결과가 나왔습니다. 두 개의 숫자 뒤에 문자열이 오는 경우, 숫자가 먼저 더해지고, 그 후 더해진 숫자와 문자열과의 병합이 일어납니다.
+=======
+Here, operators work one after another. The first `+` sums two numbers, so it returns `4`, then the next `+` adds the string `1` to it, so it's like `4 + '1' = '41'`.
+
+```js run
+alert('1' + 2 + 2); // "122" and not "14"
+```
+Here, the first operand is a string, the compiler treats the other two operands as strings too. The `2` gets concatenated to `'1'`, so it's like `'1' + 2 = "12"` and `"12" + 2 = "122"`.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
이처럼 이항 덧셈 연산자 `+`는 문자열 연결과 변환이라는 특별한 기능을 제공합니다. 다른 산술 연산자가 오직 숫자형의 피연산자만 다루고, 피연산자가 숫자형이 아닌 경우에 그 형을 숫자형으로 바꾸는 것과는 대조적입니다.
@@ -180,6 +216,7 @@ alert( +apples + +oranges ); // 5
자바스크립트는 다양한 연산자를 제공하는데, 이 모든 연산자엔 우선순위가 매겨져 있습니다. 우선순위 숫자가 클수록 먼저 실행됩니다. 순위가 같으면 왼쪽부터 시작해서 오른쪽으로 연산이 수행됩니다.
+<<<<<<< HEAD
아래는 [우선순위 테이블(precedence table)](https://developer.mozilla.org/en/JavaScript/Reference/operators/operator_precedence)의 일부를 발췌한 표입니다. 순서를 기억할 필요는 없지만, 동일한 기호의 단항 연산자는 이항 연산자보다 우선순위가 더 높다는 것에 주목해 주시기 바랍니다.
| 순위 | 연산자 이름 | 기호 |
@@ -197,10 +234,33 @@ alert( +apples + +oranges ); // 5
| ... | ... | ... |
'단항 덧셈 연산자'는 우선순위 `17`로, '(이항) 덧셈 연산자'의 우선순위 `13`보다 높습니다. 표현식 `"+apples + +oranges"`에서 단항 덧셈 연산자가 덧셈보다 먼저 수행되는 이유가 바로 이 때문입니다.
+=======
+Here's an extract from the [precedence table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence) (you don't need to remember this, but note that unary operators are higher than corresponding binary ones):
+
+| Precedence | Name | Sign |
+|------------|------|------|
+| ... | ... | ... |
+| 14 | unary plus | `+` |
+| 14 | unary negation | `-` |
+| 13 | exponentiation | `**` |
+| 12 | multiplication | `*` |
+| 12 | division | `/` |
+| 11 | addition | `+` |
+| 11 | subtraction | `-` |
+| ... | ... | ... |
+| 2 | assignment | `=` |
+| ... | ... | ... |
+
+As we can see, the "unary plus" has a priority of `14` which is higher than the `11` of "addition" (binary plus). That's why, in the expression `"+apples + +oranges"`, unary pluses work before the addition.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
## 할당 연산자
+<<<<<<< HEAD
무언가를 할당할 때 쓰이는 `=`도 연산자입니다. 이 연산자는 할당(assignment) 연산자라고 불리는데, 우선순위는 `3`으로 아주 낮습니다.
+=======
+Let's note that an assignment `=` is also an operator. It is listed in the precedence table with the very low priority of `2`.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
`x = 2 * 2 + 1`과 같은 표현식에서 계산이 먼저 이뤄지고, 그 결과가 `x`에 할당되는 이유가 바로 이 때문입니다.
@@ -214,7 +274,11 @@ alert( x ); // 5
`=`는 연산자이기 때문에 흥미로운 함축성을 내포하고 있습니다.
+<<<<<<< HEAD
자바스크립트에서 대부분의 연산자들은 값을 반환합니다. `+`와 `-`뿐만 아니라 `=` 역시 값을 반환하죠.
+=======
+All operators in JavaScript return a value. That's obvious for `+` and `-`, but also true for `=`.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
`x = value`을 호출하면 `value`가 `x`에 쓰여지고, 이에 더하여 *`value`가 반환됩니다*.
@@ -294,9 +358,13 @@ alert( n ); // 14
```js run
let n = 2;
-n *= 3 + 5;
+n *= 3 + 5; // right part evaluated first, same as n *= 8
+<<<<<<< HEAD
alert( n ); // 16 (*=의 우측이 먼저 평가되므로, 위 식은 n *= 8과 동일합니다.)
+=======
+alert( n ); // 16
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```
## 증가·감소 연산자
@@ -428,7 +496,11 @@ counter++;
- 오른쪽 시프트(RIGHT SHIFT) ( `>>` )
- 부호 없는 오른쪽 시프트(ZERO-FILL RIGHT SHIFT) ( `>>>` )
+<<<<<<< HEAD
비트 연산자는 저수준(2진 표현)에서 숫자를 다뤄야 할 때 쓰이므로 흔하게 쓰이진 않습니다. 웹 개발 시엔 이런 일이 자주 일어나지 않기 때문에 비트 연산자를 만날 일은 거의 없죠. 그렇긴 해도 암호를 다뤄야 할 땐 비트 연산자가 유용하기 때문에 때가 되면 MDN의 [비트 연산자](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators) 문서를 보시는 걸 추천합니다.
+=======
+These operators are used very rarely, when we need to fiddle with numbers on the very lowest (bitwise) level. We won't need these operators any time soon, as web development has little use of them, but in some special areas, such as cryptography, they are useful. You can read the [Bitwise Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise_operators) chapter on MDN when a need arises.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
## 쉼표 연산자
diff --git a/1-js/02-first-steps/09-comparison/1-comparison-questions/solution.md b/1-js/02-first-steps/09-comparison/1-comparison-questions/solution.md
index 6066afae22..57056c3563 100644
--- a/1-js/02-first-steps/09-comparison/1-comparison-questions/solution.md
+++ b/1-js/02-first-steps/09-comparison/1-comparison-questions/solution.md
@@ -12,10 +12,20 @@ null === +"\n0\n" → false
해설:
+<<<<<<< HEAD
1. 명백히 true입니다.
2. 문자열의 비교는 사전순서가 기준이므로 false입니다. `"a"`는 `"p"`보다 작습니다.
3. 두 피연산자는 문자열이므로, 사전순으로 비교가 이뤄집니다. 왼쪽 피연산자의 첫 번째 글자 `"2"`는 오른쪽 피연산자의 첫 번째 글자 `"1"`보다 큽니다.
4. `null`과 `undefined`는 같습니다.
5. 일치 연산자는 형도 체크합니다. 형이 다르면 false가 반환됩니다.
6. (4)와 유사한 문제입니다. `null`은 오직 `undefined`와 같습니다.
-7. 형이 다르므로 false가 반환됩니다.
\ No newline at end of file
+7. 형이 다르므로 false가 반환됩니다.
+=======
+1. Obviously, true.
+2. Dictionary comparison, hence false. `"a"` is smaller than `"p"`.
+3. Again, dictionary comparison, first char `"2"` is greater than the first char `"1"`.
+4. Values `null` and `undefined` equal each other only.
+5. Strict equality is strict. Different types from both sides lead to false.
+6. Similar to `(4)`, `null` only equals `undefined`.
+7. Strict equality of different types.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
diff --git a/1-js/02-first-steps/09-comparison/article.md b/1-js/02-first-steps/09-comparison/article.md
index 0619bae6c0..afdef79a9a 100644
--- a/1-js/02-first-steps/09-comparison/article.md
+++ b/1-js/02-first-steps/09-comparison/article.md
@@ -4,6 +4,7 @@
자바스크립트에서 기본 수학 연산은 아래와 같은 문법을 사용해 표현할 수 있습니다.
+<<<<<<< HEAD
- 보다 큼·작음: a > b, a < b
- 보다 크거나·작거나 같음: a >= b, a <= b
- 같음(동등): `a == b`. 등호 `=`가 두 개 연달아 오는 것에 유의하세요. `a = b`와 같이 등호가 하나일 때는 할당을 의미합니다.
@@ -12,6 +13,16 @@
이번 글에선 비교 시 일어나는 기이한 현상을 포함하여 다양한 자료형을 대상으로 자바스크립트가 어떻게 비교를 하는지에 대해 다룰 예정입니다.
글 말미에는 자바스크립트에서만 일어나는 '기이한' 현상을 어떻게 예방할 수 있는지에 대해서 언급해두었습니다.
+=======
+- Greater/less than: a > b, a < b.
+- Greater/less than or equals: a >= b, a <= b.
+- Equals: `a == b`, please note the double equality sign `==` means the equality test, while a single one `a = b` means an assignment.
+- Not equals: In maths the notation is ≠, but in JavaScript it's written as a != b.
+
+In this article we'll learn more about different types of comparisons, how JavaScript makes them, including important peculiarities.
+
+At the end you'll find a good recipe to avoid "JavaScript quirks"-related issues.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
## 불린형 반환
@@ -57,7 +68,13 @@ alert( 'Bee' > 'Be' ); // true
4. 글자 간 비교가 끝날 때까지 이 과정을 반복합니다.
5. 비교가 종료되었고 문자열의 길이도 같다면 두 문자열은 동일하다고 결론 냅니다. 비교가 종료되었지만 두 문자열의 길이가 다르면 길이가 긴 문자열이 더 크다고 결론 냅니다.
+<<<<<<< HEAD
예시의 `'Z' > 'A'`는 위 알고리즘의 첫 번째 단계에서 비교 결과가 도출됩니다. 반면, 문자열 `'Glow'`와 `'Glee'`는 복수의 문자로 이루어진 문자열이기 때문에, 아래와 같은 순서로 문자열 비교가 이뤄집니다.
+=======
+In the first example above, the comparison `'Z' > 'A'` gets to a result at the first step.
+
+The second comparison `'Glow'` and `'Glee'` needs more steps as strings are compared character-by-character:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
1. `G`는 `G`와 같습니다.
2. `l`은 `l`과 같습니다.
diff --git a/1-js/02-first-steps/10-ifelse/2-check-standard/task.md b/1-js/02-first-steps/10-ifelse/2-check-standard/task.md
index 2f0a250112..562802995e 100644
--- a/1-js/02-first-steps/10-ifelse/2-check-standard/task.md
+++ b/1-js/02-first-steps/10-ifelse/2-check-standard/task.md
@@ -6,7 +6,11 @@ importance: 2
`if..else` 구조를 이용해 "자바스크립트의 '공식' 이름은 무엇일까요?"라는 질문을 하는 코드를 작성해 보세요.
+<<<<<<< HEAD
사용자가 'ECMAScript'를 입력했다면 '정답입니다!', 아니라면 '모르셨나요? 정답은 ECMAScript입니다!'라는 메시지를 보여주세요.
+=======
+If the visitor enters "ECMAScript", then output "Right!", otherwise -- output: "You don't know? ECMAScript!"
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
diff --git a/1-js/02-first-steps/10-ifelse/article.md b/1-js/02-first-steps/10-ifelse/article.md
index 9d12c2ce83..0879f47fdb 100644
--- a/1-js/02-first-steps/10-ifelse/article.md
+++ b/1-js/02-first-steps/10-ifelse/article.md
@@ -68,7 +68,11 @@ if (cond) {
## 'else'절
+<<<<<<< HEAD
`if`문엔 `else` 절을 붙일 수 있습니다. `else` 뒤에 이어지는 코드 블록은 조건이 거짓일 때 실행됩니다.
+=======
+The `if` statement may contain an optional `else` block. It executes when the condition is falsy.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
예시:
```js run
@@ -180,10 +184,17 @@ alert( message );
물음표 연산자를 이런 방식으로 쓰는 걸 처음 본 분이라면 이 코드가 어떻게 동작하는지 파악하기 힘들 수 있습니다. 그러나 주의를 집중하고 보면, 단순히 여러 조건을 나열한 코드임에 불과하다는 것을 알 수 있습니다.
+<<<<<<< HEAD
1. 첫 번째 물음표에선 조건문 `age < 3`을 검사합니다.
2. 그 결과가 참이면 `'아기야 안녕?'`를 반환합니다. 그렇지 않다면 첫 번째 콜론 `":"`에 이어지는 조건문 `age < 18`을 검사합니다.
3. 그 결과가 참이면 `'안녕!'`를 반환합니다. 그렇지 않다면 다음 콜론 `":"`에 이어지는 조건문 `age < 100`을 검사합니다.
4. 그 결과가 참이면 `'환영합니다!'`를 반환합니다. 그렇지 않다면 마지막 콜론 `":"` 이후의 표현식인 `'나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!'`를 반환합니다.
+=======
+1. The first question mark checks whether `age < 3`.
+2. If true -- it returns `'Hi, baby!'`. Otherwise, it continues to the expression after the colon ":", checking `age < 18`.
+3. If that's true -- it returns `'Hello!'`. Otherwise, it continues to the expression after the next colon ":", checking `age < 100`.
+4. If that's true -- it returns `'Greetings!'`. Otherwise, it continues to the expression after the last colon ":", returning `'What an unusual age!'`.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
`if..else`를 사용하면 위 예시를 아래와 같이 변형할 수 있습니다.
diff --git a/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md b/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md
index f3265b77bb..994e62d7bf 100644
--- a/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md
+++ b/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md
@@ -1,6 +1,6 @@
피연산자 중 첫 번째 falsy인 `null`이 출력됩니다.
```js run
-alert( 1 && null && 2 );
+alert(1 && null && 2);
```
diff --git a/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md b/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md
index e11019df3c..4d5c47bebf 100644
--- a/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md
+++ b/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md
@@ -4,6 +4,10 @@ importance: 3
# 사이 범위 확인하기
+<<<<<<< HEAD
`age`(나이)가 `14`세 이상 `90`세 이하에 속하는지를 확인하는 `if`문을 작성하세요.
+=======
+Write an `if` condition to check that `age` is between `14` and `90` inclusively.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
"이상과 이하"는 `age`(나이) 범위에 `14`나 `90`이 포함된다는 의미입니다.
diff --git a/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md b/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md
index 8add5934a5..e0e8b05b6f 100644
--- a/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md
+++ b/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md
@@ -4,6 +4,10 @@ importance: 3
# 바깥 범위 확인하기
+<<<<<<< HEAD
`age`(나이)가 `14`세 이상 `90`세 이하에 속하지 않는지를 확인하는 `if`문을 작성하세요.
+=======
+Write an `if` condition to check that `age` is NOT between `14` and `90` inclusively.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
답안은 NOT `!` 연산자를 사용한 답안과 사용하지 않은 답안 2가지를 제출해 주세요.
\ No newline at end of file
diff --git a/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md b/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md
index 66e7916d0d..707a266ad5 100644
--- a/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md
+++ b/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md
@@ -3,20 +3,32 @@
```js run demo
let userName = prompt("사용자 이름을 입력해주세요.", '');
-if (userName == 'Admin') {
+if (userName === 'Admin') {
let pass = prompt('비밀번호:', '');
+<<<<<<< HEAD
if (pass == 'TheMaster') {
alert( '환영합니다!' );
} else if (pass == '' || pass == null) {
alert( '취소되었습니다.' );
+=======
+ if (pass === 'TheMaster') {
+ alert( 'Welcome!' );
+ } else if (pass === '' || pass === null) {
+ alert( 'Canceled' );
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
} else {
alert( '인증에 실패하였습니다.' );
}
+<<<<<<< HEAD
} else if (userName == '' || userName == null) {
alert( '취소되었습니다.' );
+=======
+} else if (userName === '' || userName === null) {
+ alert( 'Canceled' );
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
} else {
alert( "인증되지 않은 사용자입니다." );
}
diff --git a/1-js/02-first-steps/11-logical-operators/article.md b/1-js/02-first-steps/11-logical-operators/article.md
index a71878d535..a62f237f49 100644
--- a/1-js/02-first-steps/11-logical-operators/article.md
+++ b/1-js/02-first-steps/11-logical-operators/article.md
@@ -1,6 +1,10 @@
# 논리 연산자
+<<<<<<< HEAD
자바스크립트엔 세 종류의 논리 연산자 `||`(OR), `&&`(AND), `!`(NOT)이 있습니다.
+=======
+There are four logical operators in JavaScript: `||` (OR), `&&` (AND), `!` (NOT), `??` (Nullish Coalescing). Here we cover the first three, the `??` operator is in the next article.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
연산자에 '논리'라는 수식어가 붙긴 하지만 논리 연산자는 피연산자로 불린형뿐만 아니라 모든 타입의 값을 받을 수 있습니다. 연산 결과 역시 모든 타입이 될 수 있습니다.
@@ -64,7 +68,11 @@ if (hour < 10 || hour > 18 || isWeekend) {
}
```
+<<<<<<< HEAD
## 첫 번째 truthy를 찾는 OR 연산자 '||'
+=======
+## OR "||" finds the first truthy value [#or-finds-the-first-truthy-value]
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
지금까진 피연산자가 불린형인 경우만을 다뤘습니다. 전통적인 방식이죠. 이제 자바스크립트에서만 제공하는 논리연산자 OR의 '추가'기능에 대해 알아보겠습니다.
@@ -84,7 +92,11 @@ result = value1 || value2 || value3;
여기서 핵심은 반환 값이 형 변환을 하지 않은 원래 값이라는 것입니다.
+<<<<<<< HEAD
정리해 보자면 이렇습니다. OR `"||"` 연산자를 여러 개 체이닝(chaining) 하면 첫 번째 truthy를 반환합니다. 피연산자에 truthy가 하나도 없다면 마지막 피연산자를 반환합니다.
+=======
+In other words, a chain of OR `||` returns the first truthy value or the last one if no truthy value is found.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
예시:
@@ -101,9 +113,15 @@ alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을
1. **변수 또는 표현식으로 구성된 목록에서 첫 번째 truthy 얻기**
+<<<<<<< HEAD
`firstName`, `lastName`, `nickName`이란 변수가 있는데 이 값들은 모두 옵션 값이라고 해봅시다.
OR `||`을 사용하면 실제 값이 들어있는 변수를 찾고, 그 값을 보여줄 수 있습니다. 변수 모두에 값이 없는 경우엔 `익명`를 보여줍시다.
+=======
+ For instance, we have `firstName`, `lastName` and `nickName` variables, all optional (i.e. can be undefined or have falsy values).
+
+ Let's use OR `||` to choose the one that has the data and show it (or `"Anonymous"` if nothing set):
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js run
let firstName = "";
@@ -115,7 +133,11 @@ alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을
*/!*
```
+<<<<<<< HEAD
모든 변수가 falsy이면 `"익명"`이 출력되었을 겁니다.
+=======
+ If all variables were falsy, `"Anonymous"` would show up.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
2. **단락 평가**
@@ -123,7 +145,11 @@ alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을
위에서 설명해 드린 바와 같이 OR`||`은 왼쪽부터 시작해서 오른쪽으로 평가를 진행하는데, truthy를 만나면 나머지 값들은 건드리지 않은 채 평가를 멈춥니다. 이런 프로세스를 '단락 평가'라고 합니다.
+<<<<<<< HEAD
단락 평가의 동작 방식은 두 번째 피연산자가 변수 할당과 같은 부수적인 효과(side effect)를 가지는 표현식 일 때 명확히 볼 수 있습니다.
+=======
+ The importance of this feature becomes obvious if an operand isn't just a value, but an expression with a side effect, such as a variable assignment or a function call.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
아래 예시를 실행하면 두 번째 메시지만 출력됩니다.
@@ -223,8 +249,13 @@ AND 연산자 `&&`의 우선순위는 OR 연산자 `||`보다 높습니다.
따라서 `a && b || c && d`는 `(a && b) || (c && d)`와 동일하게 동작합니다.
````
+<<<<<<< HEAD
````warn header="`if`를 ||나 &&로 대체하지 마세요."
어떤 개발자들은 AND 연산자 `&&`를 `if`문을 '짧게' 줄이는 용도로 사용하곤 합니다.
+=======
+````warn header="Don't replace `if` with `||` or `&&`"
+Sometimes, people use the AND `&&` operator as a "shorter way to write `if`".
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
예시:
@@ -244,7 +275,11 @@ let x = 1;
if (x > 0) alert( '0보다 큽니다!' );
```
+<<<<<<< HEAD
`&&`를 사용한 코드가 더 짧긴 하지만 `if`문을 사용한 예시가 코드에서 무엇을 구현하고자 하는지 더 명백히 드러내고, 가독성도 좋습니다. 그러니 if 조건문이 필요하면 `if`를 사용하고 AND 연산자는 연산자 목적에 맞게 사용합시다.
+=======
+Although, the variant with `&&` appears shorter, `if` is more obvious and tends to be a little bit more readable. So we recommend using every construct for its purpose: use `if` if we want `if` and use `&&` if we want AND.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
````
diff --git a/1-js/02-first-steps/12-nullish-coalescing-operator/article.md b/1-js/02-first-steps/12-nullish-coalescing-operator/article.md
index 04ca8f04bd..a4c91ce166 100644
--- a/1-js/02-first-steps/12-nullish-coalescing-operator/article.md
+++ b/1-js/02-first-steps/12-nullish-coalescing-operator/article.md
@@ -2,6 +2,7 @@
[recent browser="new"]
+<<<<<<< HEAD
nullish 병합 연산자(nullish coalescing operator) `??`를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어있는' 변수를 찾을 수 있습니다.
`a ?? b`의 평가 결과는 다음과 같습니다.
@@ -9,11 +10,27 @@ nullish 병합 연산자(nullish coalescing operator) `??`를 사용하면 짧
- 그 외의 경우는 `b`
nullish 병합 연산자 `??`없이 `x = a ?? b`와 동일한 동작을 하는 코드를 작성하면 다음과 같습니다.
+=======
+The nullish coalescing operator is written as two question marks `??`.
+
+As it treats `null` and `undefined` similarly, we'll use a special term here, in this article. For brevity, we'll say that a value is "defined" when it's neither `null` nor `undefined`.
+
+The result of `a ?? b` is:
+- if `a` is defined, then `a`,
+- if `a` isn't defined, then `b`.
+
+In other words, `??` returns the first argument if it's not `null/undefined`. Otherwise, the second one.
+
+The nullish coalescing operator isn't anything completely new. It's just a nice syntax to get the first "defined" value of the two.
+
+We can rewrite `result = a ?? b` using the operators that we already know, like this:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js
-x = (a !== null && a !== undefined) ? a : b;
+result = (a !== null && a !== undefined) ? a : b;
```
+<<<<<<< HEAD
비교 연산자와 논리 연산자만으로 nullish 병합 연산자와 같은 기능을 하는 코드를 작성하니 코드 길이가 길어지네요.
또 다른 예시를 살펴봅시다. `firstName`, `lastName`, `nickName`이란 변수에 사용자 이름이나 별명을 저장하는데, 사용자가 아무런 정보도 입력하지 않는 케이스도 허용한다고 해보겠습니다.
@@ -21,13 +38,46 @@ x = (a !== null && a !== undefined) ? a : b;
화면엔 세 변수 중 실제 값이 있는 변수의 값을 출력하는데, 세 변수 모두 값이 없다면 '익명의 사용자'가 출력되도록 해보죠.
이럴 때 nullish 병합 연산자 `??`를 사용하면 값이 정해진 변수를 간편하게 찾아낼 수 있습니다.
+=======
+Now it should be absolutely clear what `??` does. Let's see where it helps.
+
+The common use case for `??` is to provide a default value.
+
+For example, here we show `user` if its value isn't `null/undefined`, otherwise `Anonymous`:
+
+```js run
+let user;
+
+alert(user ?? "Anonymous"); // Anonymous (user is undefined)
+```
+
+Here's the example with `user` assigned to a name:
+
+```js run
+let user = "John";
+
+alert(user ?? "Anonymous"); // John (user is not null/undefined)
+```
+
+We can also use a sequence of `??` to select the first value from a list that isn't `null/undefined`.
+
+Let's say we have a user's data in variables `firstName`, `lastName` or `nickName`. All of them may be not defined, if the user decided not to fill in the corresponding values.
+
+We'd like to display the user name using one of these variables, or show "Anonymous" if all of them are `null/undefined`.
+
+Let's use the `??` operator for that:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js run
let firstName = null;
let lastName = null;
let nickName = "바이올렛";
+<<<<<<< HEAD
// null이나 undefined가 아닌 첫 번째 피연산자
+=======
+// shows the first defined value:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
*!*
alert(firstName ?? lastName ?? nickName ?? "익명의 사용자"); // 바이올렛
*/!*
@@ -35,6 +85,7 @@ alert(firstName ?? lastName ?? nickName ?? "익명의 사용자"); // 바이올
## '??'와 '||'의 차이
+<<<<<<< HEAD
nullish 병합 연산자는 OR 연산자 `||`와 상당히 유사해 보입니다. 실제로 위 예시에서 `??`를 `||`로 바꿔도 그 결과는 동일하기까지 하죠. 관련 내용은 [이전 챕터](info:logical-operators#or-finds-the-first-truthy-value)에서 살펴본 바 있습니다.
그런데 두 연산자 사이에는 중요한 차이점이 있습니다.
@@ -42,9 +93,38 @@ nullish 병합 연산자는 OR 연산자 `||`와 상당히 유사해 보입니
- `??`는 첫 번째 *정의된(defined)* 값을 반환합니다.
`null`과 `undefined`, 숫자 `0`을 구분 지어 다뤄야 할 때 이 차이점은 매우 중요한 역할을 합니다.
+=======
+The OR `||` operator can be used in the same way as `??`, as it was described in the [previous chapter](info:logical-operators#or-finds-the-first-truthy-value).
+
+For example, in the code above we could replace `??` with `||` and still get the same result:
+
+```js run
+let firstName = null;
+let lastName = null;
+let nickName = "Supercoder";
+
+// shows the first truthy value:
+*!*
+alert(firstName || lastName || nickName || "Anonymous"); // Supercoder
+*/!*
+```
+
+Historically, the OR `||` operator was there first. It's been there since the beginning of JavaScript, so developers were using it for such purposes for a long time.
+
+On the other hand, the nullish coalescing operator `??` was added to JavaScript only recently, and the reason for that was that people weren't quite happy with `||`.
+
+The important difference between them is that:
+- `||` returns the first *truthy* value.
+- `??` returns the first *defined* value.
+
+In other words, `||` doesn't distinguish between `false`, `0`, an empty string `""` and `null/undefined`. They are all the same -- falsy values. If any of these is the first argument of `||`, then we'll get the second argument as the result.
+
+In practice though, we may want to use default value only when the variable is `null/undefined`. That is, when the value is really unknown/not set.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
예시를 살펴봅시다.
+<<<<<<< HEAD
```js
height = height ?? 100;
```
@@ -53,6 +133,8 @@ height = height ?? 100;
이제 `??`와 `||`을 비교해봅시다.
+=======
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js run
let height = 0;
@@ -60,19 +142,36 @@ alert(height || 100); // 100
alert(height ?? 100); // 0
```
+<<<<<<< HEAD
`height || 100`은 `height`에 `0`을 할당했지만 `0`을 falsy 한 값으로 취급했기 때문에 `null`이나 `undefined`를 할당한 것과 동일하게 처리합니다. 따라서 `height || 100`의 평가 결과는 `100`입니다.
반면 `height ?? 100`의 평가 결과는 `height`가 정확하게 `null`이나 `undefined`일 경우에만 `100`이 됩니다. 예시에선 `height`에 `0`이라는 값을 할당했기 때문에 얼럿창엔 `0`이 출력됩니다.
이런 특징 때문에 높이처럼 `0`이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 `||`보다 `??`가 적합합니다.
+=======
+- The `height || 100` checks `height` for being a falsy value, and it's `0`, falsy indeed.
+ - so the result of `||` is the second argument, `100`.
+- The `height ?? 100` checks `height` for being `null/undefined`, and it's not,
+ - so the result is `height` "as is", that is `0`.
+
+In practice, the zero height is often a valid value, that shouldn't be replaced with the default. So `??` does just the right thing.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
## 연산자 우선순위
+<<<<<<< HEAD
[`??`의 연산자 우선순위](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table)는 `5`로 꽤 낮습니다.
따라서 `??`는 `=`와 `?` 보다는 먼저, 대부분의 연산자보다는 나중에 평가됩니다.
그렇기 때문에 복잡한 표현식 안에서 `??`를 사용해 값을 하나 선택할 땐 괄호를 추가하는 게 좋습니다.
+=======
+The precedence of the `??` operator is the same as `||`. They both equal `3` in the [MDN table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table).
+
+That means that, just like `||`, the nullish coalescing operator `??` is evaluated before `=` and `?`, but after most other operations, such as `+`, `*`.
+
+So we may need to add parentheses in expressions like this:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js run
let height = null;
@@ -84,6 +183,7 @@ let area = (height ?? 100) * (width ?? 50);
alert(area); // 5000
```
+<<<<<<< HEAD
그렇지 않으면 `*`가 `??`보다 우선순위가 높기 때문에 `*`가 먼저 실행됩니다.
결국엔 아래 예시처럼 동작하겠죠.
@@ -96,6 +196,21 @@ let area = height ?? (100 * width) ?? 50;
`??`엔 자바스크립트 언어에서 규정한 또 다른 제약사항이 있습니다.
**안정성 관련 이슈 때문에 `??`는 `&&`나 `||`와 함께 사용하지 못합니다.**
+=======
+Otherwise, if we omit parentheses, then as `*` has the higher precedence than `??`, it would execute first, leading to incorrect results.
+
+```js
+// without parentheses
+let area = height ?? 100 * width ?? 50;
+
+// ...works this way (not what we want):
+let area = height ?? (100 * width) ?? 50;
+```
+
+### Using ?? with && or ||
+
+Due to safety reasons, JavaScript forbids using `??` together with `&&` and `||` operators, unless the precedence is explicitly specified with parentheses.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
아래 예시를 실행하면 문법 에러가 발생합니다.
@@ -103,7 +218,11 @@ let area = height ?? (100 * width) ?? 50;
let x = 1 && 2 ?? 3; // SyntaxError: Unexpected token '??'
```
+<<<<<<< HEAD
이 제약에 대해선 아직 논쟁이 많긴 하지만 사람들이 `||`를 `??`로 바꾸기 시작하면서 만드는 실수를 방지하고자 명세서에 제약이 추가된 상황입니다.
+=======
+The limitation is surely debatable, it was added to the language specification with the purpose to avoid programming mistakes, when people start to switch from `||` to `??`.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
제약을 피하려면 괄호를 사용해주세요.
@@ -117,7 +236,11 @@ alert(x); // 2
## 요약
+<<<<<<< HEAD
- nullish 병합 연산자 `??`를 사용하면 피연산자 중 '값이 할당된' 변수를 빠르게 찾을 수 있습니다.
+=======
+- The nullish coalescing operator `??` provides a short way to choose the first "defined" value from a list.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
`??`는 변수에 기본값을 할당하는 용도로 사용할 수 있습니다.
@@ -126,5 +249,10 @@ alert(x); // 2
height = height ?? 100;
```
+<<<<<<< HEAD
- `??`의 연산자 우선순위는 대다수의 연산자보다 낮고 `?`와 `=` 보다는 높습니다.
- 괄호 없이 `??`를 `||`나 `&&`와 함께 사용하는 것은 금지되어있습니다.
+=======
+- The operator `??` has a very low precedence, only a bit higher than `?` and `=`, so consider adding parentheses when using it in an expression.
+- It's forbidden to use it with `||` or `&&` without explicit parentheses.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
diff --git a/1-js/02-first-steps/13-while-for/6-repeat-until-correct/solution.md b/1-js/02-first-steps/13-while-for/6-repeat-until-correct/solution.md
index dff25b0bc7..0f2c5fa340 100644
--- a/1-js/02-first-steps/13-while-for/6-repeat-until-correct/solution.md
+++ b/1-js/02-first-steps/13-while-for/6-repeat-until-correct/solution.md
@@ -9,7 +9,12 @@ do {
`do..while`반복문을 사용해 아래 두 조건이 모두 truthy인 경우 프롬프트 창이 뜨게 하면 됩니다.
+<<<<<<< HEAD
1. `num <= 100`인지 확인하기. `100`보다 작거나 같은 값을 입력한 경우 프롬프트 창이 떠야 합니다.
2. `num`이 `null`이나 빈 문자열인지 확인하기. `num`이 `null`이나 빈 문자열이면 `&& num`이 거짓이 되므로 `while` 반복문이 종료됩니다.
+=======
+1. The check for `num <= 100` -- that is, the entered value is still not greater than `100`.
+2. The check `&& num` is false when `num` is `null` or an empty string. Then the `while` loop stops too.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
참고: `num`이 `null`인 경우 `num <= 100`은 `true`가 되므로 두 번째 조건이 없으면 취소 버튼을 눌러도 반복문이 계속해서 실행됩니다. 따라서 위 두 조건을 모두 확인해야 합니다.
diff --git a/1-js/02-first-steps/13-while-for/article.md b/1-js/02-first-steps/13-while-for/article.md
index fee9f4adcc..33ef3079df 100644
--- a/1-js/02-first-steps/13-while-for/article.md
+++ b/1-js/02-first-steps/13-while-for/article.md
@@ -6,7 +6,24 @@
*반복문(loop)* 을 사용하면 동일한 코드를 여러 번 반복할 수 있습니다.
+<<<<<<< HEAD
## 'while' 반복문
+=======
+```smart header="The for..of and for..in loops"
+A small announcement for advanced readers.
+
+This article covers only basic loops: `while`, `do..while` and `for(..;..;..)`.
+
+If you came to this article searching for other types of loops, here are the pointers:
+
+- See [for..in](info:object#forin) to loop over object properties.
+- See [for..of](info:array#loops) and [iterables](info:iterable) for looping over arrays and iterable objects.
+
+Otherwise, please read on.
+```
+
+## The "while" loop
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
`while` 반복문의 문법은 다음과 같습니다.
@@ -106,10 +123,17 @@ for (let i = 0; i < 3; i++) { // 0, 1, 2가 출력됩니다.
| 구성 요소 | | |
|-------|----------|----------------------------------------------------------------------------|
+<<<<<<< HEAD
| begin | `i = 0` | 반복문에 진입할 때 단 한 번 실행됩니다. |
| condition | `i < 3`| 반복마다 해당 조건이 확인됩니다. false이면 반복문을 멈춥니다. |
| body | `alert(i)`| condition이 truthy일 동안 계속해서 실행됩니다. |
| step| `i++` | 각 반복의 body가 실행된 이후에 실행됩니다. |
+=======
+| begin | `let i = 0` | Executes once upon entering the loop. |
+| condition | `i < 3`| Checked before every loop iteration. If false, the loop stops. |
+| body | `alert(i)`| Runs again and again while the condition is truthy. |
+| step| `i++` | Executes after the body on each iteration. |
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
일반적인 반복문 알고리즘은 다음과 같습니다.
@@ -162,11 +186,14 @@ for (i = 0; i < 3; i++) { // 기존에 정의된 변수 사용
alert(i); // 3, 반복문 밖에서 선언한 변수이므로 사용할 수 있음
```
-
````
+<<<<<<< HEAD
### 구성 요소 생략하기
+=======
+### Skipping parts
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
`for`문의 구성 요소를 생략하는 것도 가능합니다.
@@ -268,7 +295,11 @@ for (let i = 0; i < 10; i++) {
기술적인 관점에서 봤을 때, 이 예시는 위쪽에 있는 예시와 동일합니다. `continue`를 사용하는 대신 코드를 `if` 블록으로 감싼 점만 다릅니다.
+<<<<<<< HEAD
그런데 이렇게 코드를 작성하면 부작용으로 중첩 레벨(중괄호 안의 `alert` 호출)이 하나 더 늘어납니다. `if` 안의 코드가 길어진다면 전체 가독성이 떨어질 수 있습니다.
+=======
+But as a side effect, this created one more level of nesting (the `alert` call inside the curly braces). If the code inside of `if` is longer than a few lines, that may decrease the overall readability.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
````
````warn header="'?' 오른쪽엔 `break`나 `continue`가 올 수 없습니다."
@@ -286,7 +317,6 @@ if (i > 5) {
물음표를 사용해서 위 조건문을 아래와 같이 바꾸려는 시도를 할 수 있을겁니다.
-
```js no-beautify
(i > 5) ? alert(i) : *!*continue*/!*; // 여기에 continue를 사용하면 안 됩니다.
```
@@ -318,9 +348,16 @@ alert('완료!');
사용자가 `Cancel` 버튼을 눌렀을 때 반복문을 중단시킬 방법이 필요합니다.
+<<<<<<< HEAD
`input` 아래에 평범한 `break` 지시자를 사용하면 안쪽에 있는 반복문만 빠져나올 수 있습니다. 이것만으론 충분하지 않습니다(중첩 반복문을 포함한 반복문 두 개 모두를 빠져나와야 하기 때문이죠 - 옮긴이). 이럴 때 레이블을 사용할 수 있습니다.
*레이블(label)* 은 반복문 앞에 콜론과 함께 쓰이는 식별자입니다.
+=======
+The ordinary `break` after `input` would only break the inner loop. That's not sufficient -- labels, come to the rescue!
+
+A *label* is an identifier with a colon before a loop:
+
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js
labelName: for (...) {
...
@@ -342,7 +379,12 @@ labelName: for (...) {
// 입력받은 값을 가지고 무언가를 함
}
}
+<<<<<<< HEAD
alert('완료!');
+=======
+
+alert('Done!');
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```
위 예시에서 `break outer`는 `outer`라는 레이블이 붙은 반복문을 찾고, 해당 반복문을 빠져나오게 해줍니다.
@@ -361,14 +403,37 @@ for (let i = 0; i < 3; i++) { ... }
````warn header="레이블은 마음대로 '점프'할 수 있게 해주지 않습니다."
레이블을 사용한다고 해서 원하는 곳으로 마음대로 점프할 수 있는 것은 아닙니다.
+<<<<<<< HEAD
아래 예시처럼 레이블을 사용하는 것은 불가능합니다.
```js
break label; // 아래 for 문으로 점프할 수 없습니다.
+=======
+For example, it is impossible to do this:
+
+```js
+break label; // jump to the label below (doesn't work)
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
label: for (...)
```
+<<<<<<< HEAD
`break`와 `continue`는 반복문 안에서만 사용할 수 있고, 레이블은 반드시 `break`이나 `continue` 지시자 위에 있어야 합니다.
+=======
+A `break` directive must be inside a code block. Technically, any labelled code block will do, e.g.:
+
+```js
+label: {
+ // ...
+ break label; // works
+ // ...
+}
+```
+
+...Although, 99.9% of the time `break` is used inside loops, as we've seen in the examples above.
+
+A `continue` is only possible from inside a loop.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
````
## 요약
diff --git a/1-js/02-first-steps/14-switch/article.md b/1-js/02-first-steps/14-switch/article.md
index 251cbba446..dbf775660e 100644
--- a/1-js/02-first-steps/14-switch/article.md
+++ b/1-js/02-first-steps/14-switch/article.md
@@ -47,7 +47,11 @@ switch (a) {
break;
*/!*
case 5:
+<<<<<<< HEAD
alert( '비교하려는 값보다 큽니다.' );
+=======
+ alert( 'Too big' );
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
break;
default:
alert( "어떤 값인지 파악이 되지 않습니다." );
@@ -139,7 +143,11 @@ switch (a) {
`case 3`과 `case 5`는 동일한 메시지를 보여줍니다.
+<<<<<<< HEAD
`switch/case`문에서 `break`문이 없는 경우엔 조건에 상관없이 다음 `case`문이 실행되는 부작용이 발생합니다. 위 예시에서 `case 3`이 참인 경우엔 `(*)`로 표시한 줄 아래의 코드가 실행되는데, 그 아래 줄엔 `case 5`가 있고 `break`문도 없기 때문에 12번째 줄의 `break`문을 만날 때까지 코드는 계속 실행됩니다.
+=======
+The ability to "group" cases is a side effect of how `switch/case` works without `break`. Here the execution of `case 3` starts from the line `(*)` and goes through `case 5`, because there's no `break`.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
## 자료형의 중요성
diff --git a/1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md b/1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md
index 85b5d8ab37..8ee841c60d 100644
--- a/1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md
+++ b/1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md
@@ -1 +1,7 @@
-동일하게 동작합니다.
\ No newline at end of file
+<<<<<<< HEAD
+동일하게 동작합니다.
+=======
+No difference!
+
+In both cases, `return confirm('Did parents allow you?')` executes exactly when the `if` condition is falsy.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
diff --git a/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md
index e0a188c9ba..51db4ad085 100644
--- a/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md
+++ b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md
@@ -14,4 +14,8 @@ function checkAge(age) {
}
```
-`age > 18`을 감싸고 있는 괄호는 가독성을 높이기 위해 넣었습니다. 괄호가 없어도 동일하게 동작합니다.
\ No newline at end of file
+<<<<<<< HEAD
+`age > 18`을 감싸고 있는 괄호는 가독성을 높이기 위해 넣었습니다. 괄호가 없어도 동일하게 동작합니다.
+=======
+Note that the parentheses around `age > 18` are not required here. They exist for better readability.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
diff --git a/1-js/02-first-steps/15-function-basics/article.md b/1-js/02-first-steps/15-function-basics/article.md
index 327bed8f91..4d77a83368 100644
--- a/1-js/02-first-steps/15-function-basics/article.md
+++ b/1-js/02-first-steps/15-function-basics/article.md
@@ -20,11 +20,19 @@ function showMessage() {
}
```
+<<<<<<< HEAD
`function` 키워드, *함수 이름*, 괄호로 둘러싼 매개변수를 차례로 써주면 함수를 선언할 수 있습니다. 위 함수에는 매개변수가 없는데, 만약 매개변수가 여러 개 있다면 각 매개변수를 콤마로 구분해 줍니다. 이어서 함수를 구성하는 코드의 모임인 '함수 본문(body)'을 중괄호로 감싸 붙여줍시다.
```js
function name(parameter1, parameter2, ... parameterN) {
// 함수 본문
+=======
+The `function` keyword goes first, then goes the *name of the function*, then a list of *parameters* between the parentheses (comma-separated, empty in the example above, we'll see examples later) and finally the code of the function, also named "the function body", between curly braces.
+
+```js
+function name(parameter1, parameter2, ... parameterN) {
+ // body
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
}
```
@@ -137,12 +145,20 @@ alert( userName ); // 함수는 외부 변수에 접근하지 않습니다. 따
## 매개변수
+<<<<<<< HEAD
매개변수(parameter)를 이용하면 임의의 데이터를 함수 안에 전달할 수 있습니다. 매개변수는 *인자(parameter)* 라고 불리기도 합니다.
+=======
+We can pass arbitrary data to functions using parameters.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
아래 예시에서 함수 showMessage는 매개변수 `from` 과 `text`를 가집니다.
```js run
+<<<<<<< HEAD
function showMessage(*!*from, text*/!*) { // 인자: from, text
+=======
+function showMessage(*!*from, text*/!*) { // parameters: from, text
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
alert(from + ': ' + text);
}
@@ -152,8 +168,11 @@ function showMessage(*!*from, text*/!*) { // 인자: from, text
`(*)`, `(**)`로 표시한 줄에서 함수를 호출하면, 함수에 전달된 인자는 지역변수 `from`과 `text`에 복사됩니다. 그 후 함수는 지역변수에 복사된 값을 사용합니다.
+<<<<<<< HEAD
예시 하나를 더 살펴봅시다. 전역 변수 `from`이 있고, 이 변수를 함수에 전달하였습니다. 함수가 `from`을 변경하지만, 변경 사항은 외부 변수 `from`에 반영되지 않았습니다. 함수는 언제나 복사된 값을 사용하기 때문입니다.
+=======
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js run
function showMessage(from, text) {
@@ -172,9 +191,27 @@ showMessage(from, "Hello"); // *Ann*: Hello
alert( from ); // Ann
```
+<<<<<<< HEAD
함수의 매개변수에 전달된 값을 *인수(argument)*라고 부르기도 합니다.
더 정확한 이해를 돕기 위해 용어를 다시 한번 정리해볼까요?
+=======
+When a value is passed as a function parameter, it's also called an *argument*.
+
+In other words, to put these terms straight:
+
+- A parameter is the variable listed inside the parentheses in the function declaration (it's a declaration time term).
+- An argument is the value that is passed to the function when it is called (it's a call time term).
+
+We declare functions listing their parameters, then call them passing arguments.
+
+In the example above, one might say: "the function `showMessage` is declared with two parameters, then called with two arguments: `from` and `"Hello"`".
+
+
+## Default values
+
+If a function is called, but an argument is not provided, then the corresponding value becomes `undefined`.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
- 매개변수는 함수 선언 방식 괄호 사이에 있는 변수입니다(선언 시 쓰이는 용어).
- 인수는 함수를 호출할 때 매개변수에 전달되는 값입니다(호출 시 쓰이는 용어).
@@ -193,9 +230,15 @@ alert( from ); // Ann
showMessage("Ann");
```
+<<<<<<< HEAD
이렇게 코드를 작성해도 에러가 발생하지 않습니다. 두 번째 매개변수에 값을 전달하지 않았기 때문에 `text`엔 `undefined`가 할당될 뿐입니다. 따라서 에러 없이 `"Ann: undefined"`가 출력됩니다.
매개변수에 값을 전달하지 않아도 그 값이 `undefined`가 되지 않게 하려면 함수를 선언할 때 `=`를 사용해 '기본값(default value)'을 설정해주면 됩니다.
+=======
+That's not an error. Such a call would output `"*Ann*: undefined"`. As the value for `text` isn't passed, it becomes `undefined`.
+
+We can specify the so-called "default" (to use if omitted) value for a parameter in the function declaration, using `=`:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js run
function showMessage(from, *!*text = "no text given"*/!*) {
@@ -205,7 +248,17 @@ function showMessage(from, *!*text = "no text given"*/!*) {
showMessage("Ann"); // Ann: no text given
```
+<<<<<<< HEAD
이젠 `text`가 값을 전달받지 못해도 `undefined` 대신 기본값 `"no text given"`이 할당됩니다.
+=======
+Now if the `text` parameter is not passed, it will get the value `"no text given"`.
+
+The default value also jumps in if the parameter exists, but strictly equals `undefined`, like this:
+
+```js
+showMessage("Ann", undefined); // Ann: no text given
+```
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
매개변수에 값을 전달해도 그 값이 `undefined`와 엄격히 일치한다면 기본값이 할당됩니다.
@@ -230,6 +283,7 @@ function showMessage(from, text = anotherFunction()) {
반면 `text`에 값이 없는 경우 `showMessage()`를 호출할 때마다 `anotherFunction()`이 호출됩니다.
+<<<<<<< HEAD
```
````smart header="구식 자바스크립트에서 매개변수 기본값 설정하는 방법"
@@ -270,14 +324,63 @@ function showMessage(from, text) {
가끔은 함수를 선언할 때가 아닌 함수 선언 후에 매개변수 기본값을 설정하는 것이 적절한 경우도 있습니다.
이런 경우엔 함수를 호출할 때 매개변수를 `undefined`와 비교하여 매개변수가 전달되었는지를 확인합니다.
+=======
+In the example above, `anotherFunction()` isn't called at all, if the `text` parameter is provided.
+
+On the other hand, it's independently called every time when `text` is missing.
+```
+
+````smart header="Default parameters in old JavaScript code"
+Several years ago, JavaScript didn't support the syntax for default parameters. So people used other ways to specify them.
+
+Nowadays, we can come across them in old scripts.
+
+For example, an explicit check for `undefined`:
+
+```js
+function showMessage(from, text) {
+*!*
+ if (text === undefined) {
+ text = 'no text given';
+ }
+*/!*
+
+ alert( from + ": " + text );
+}
+```
+
+...Or using the `||` operator:
+
+```js
+function showMessage(from, text) {
+ // If the value of text is falsy, assign the default value
+ // this assumes that text == "" is the same as no text at all
+ text = text || 'no text given';
+ ...
+}
+```
+````
+
+
+### Alternative default parameters
+
+Sometimes it makes sense to assign default values for parameters at a later stage after the function declaration.
+
+We can check if the parameter is passed during the function execution, by comparing it with `undefined`:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js run
function showMessage(text) {
// ...
*!*
+<<<<<<< HEAD
if (text === undefined) { // 매개변수가 생략되었다면
text = '빈 문자열';
+=======
+ if (text === undefined) { // if the parameter is missing
+ text = 'empty message';
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
}
*/!*
@@ -290,18 +393,31 @@ showMessage(); // 빈 문자열
이렇게 `if`문을 쓰는 것 대신 논리 연산자 `||`를 사용할 수도 있습니다.
```js
+<<<<<<< HEAD
// 매개변수가 생략되었거나 빈 문자열("")이 넘어오면 변수에 '빈 문자열'이 할당됩니다.
function showMessage(text) {
text = text || '빈 문자열';
+=======
+function showMessage(text) {
+ // if text is undefined or otherwise falsy, set it to 'empty'
+ text = text || 'empty';
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
...
}
```
+<<<<<<< HEAD
이 외에도 모던 자바스크립트 엔진이 지원하는 [nullish 병합 연산자(nullish coalescing operator)](info:nullish-coalescing-operator) `??`를 사용하면 `0`처럼 falsy로 평가되는 값들을 일반 값처럼 처리할 수 있어서 좋습니다.
```js run
// 매개변수 'count'가 `undefined` 또는 `null`이면 'unknown'을 출력해주는 함수
+=======
+Modern JavaScript engines support the [nullish coalescing operator](info:nullish-coalescing-operator) `??`, it's better when most falsy values, such as `0`, should be considered "normal":
+
+```js run
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
function showCount(count) {
+ // if count is undefined or null, show "unknown"
alert(count ?? "unknown");
}
@@ -463,9 +579,15 @@ checkPermission(..) // 승인 여부를 확인하고 true나 false를 반환함
```smart header="아주 짧은 이름"
정말 *빈번히* 쓰이는 함수 중에 이름이 아주 짧은 함수가 있습니다.
+<<<<<<< HEAD
[jQuery](http://jquery.com) 프레임워크에서 쓰이는 함수 `$`와 [Lodash](http://lodash.com/) 라이브러리의 핵심 함수 `_` 말이죠.
이 함수들은 지금까지 소개한 함수 이름짓기에 관련된 규칙을 지키지 않고 있습니다. 예외에 속하죠. 함수 이름은 간결하고 함수가 어떤 일을 하는지 설명할 수 있게 지어야 합니다.
+=======
+For example, the [jQuery](https://jquery.com/) framework defines a function with `$`. The [Lodash](https://lodash.com/) library has its core function named `_`.
+
+These are exceptions. Generally function names should be concise and descriptive.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```
## 함수 == 주석
@@ -531,7 +653,11 @@ function 함수이름(복수의, 매개변수는, 콤마로, 구분합니다) {
깔끔하고 이해하기 쉬운 코드를 작성하려면 함수 내부에서 외부 변수를 사용하는 방법 대신 지역 변수와 매개변수를 활용하는 게 좋습니다.
+<<<<<<< HEAD
개발자는 매개변수를 받아서 그 변수를 가지고 반환 값을 만들어 내는 함수를 더 쉽게 이해할 수 있습니다. 매개변수 없이 함수 내부에서 외부 변수를 수정해 반환 값을 만들어 내는 함수는 쉽게 이해하기 힘듭니다.
+=======
+It is always easier to understand a function which gets parameters, works with them and returns a result than a function which gets no parameters, but modifies outer variables as a side effect.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
함수 이름을 지을 땐 아래와 같은 규칙을 따르는 것이 좋습니다.
diff --git a/1-js/02-first-steps/16-function-expressions/article.md b/1-js/02-first-steps/16-function-expressions/article.md
index 1ea5b81e3a..e1806a4ebb 100644
--- a/1-js/02-first-steps/16-function-expressions/article.md
+++ b/1-js/02-first-steps/16-function-expressions/article.md
@@ -12,7 +12,13 @@ function sayHi() {
함수 선언 방식 외에 *함수 표현식(Function Expression)* 을 사용해서 함수를 만들 수 있습니다.
+<<<<<<< HEAD
함수 표현식으로 함수를 생성해보겠습니다.
+=======
+It allows us to create a new function in the middle of any expression.
+
+For example:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js
let sayHi = function() {
@@ -20,9 +26,25 @@ let sayHi = function() {
};
```
+<<<<<<< HEAD
함수를 생성하고 변수에 값을 할당하는 것처럼 함수가 변수에 할당되었습니다. 함수가 어떤 방식으로 만들어졌는지에 관계없이 함수는 값이고, 따라서 변수에 할당할 수 있습니다. 위 예시에선 함수가 변수 `sayHi`에 저장된 값이 되었습니다.
위 예시를 간단한 말로 풀면 다음과 같습니다: "함수를 만들고 그 함수를 변수 `sayHi`에 할당하기"
+=======
+Here we can see a variable `sayHi` getting a value, the new function, created as `function() { alert("Hello"); }`.
+
+As the function creation happens in the context of the assignment expression (to the right side of `=`), this is a *Function Expression*.
+
+Please note, there's no name after the `function` keyword. Omitting a name is allowed for Function Expressions.
+
+Here we immediately assign it to the variable, so the meaning of these code samples is the same: "create a function and put it into the variable `sayHi`".
+
+In more advanced situations, that we'll come across later, a function may be created and immediately called or scheduled for a later execution, not stored anywhere, thus remaining anonymous.
+
+## Function is a value
+
+Let's reiterate: no matter how the function is created, a function is a value. Both examples above store a function in the `sayHi` variable.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
함수는 값이기 때문에 `alert`를 이용하여 함수 코드를 출력할 수도 있습니다.
@@ -63,22 +85,31 @@ sayHi(); // Hello // 본래 함수도 정상적으로 실행됩니다.
2. `(2)` 에선 `sayHi`를 새로운 변수 `func`에 복사합니다. 이때 `sayHi` 다음에 괄호가 없다는 점에 유의하시기 바랍니다. 괄호가 있었다면 `func = sayHi()` 가 되어 `sayHi` *함수* 그 자체가 아니라, *함수 호출 결과(함수의 반환 값)* 가 `func`에 저장되었을 겁니다.
3. 이젠 `sayHi()` 와 `func()`로 함수를 호출할 수 있게 되었습니다.
+<<<<<<< HEAD
함수 `sayHi`는 아래와 같이 함수 표현식을 사용해 정의할 수 있습니다.
+=======
+We could also have used a Function Expression to declare `sayHi`, in the first line:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js
-let sayHi = function() {
+let sayHi = function() { // (1) create
alert( "Hello" );
};
-let func = sayHi;
+let func = sayHi; //(2)
// ...
```
동작 결과는 동일합니다.
+<<<<<<< HEAD
````smart header="끝에 세미 콜론은 왜 있나요?"
함수 표현식의 끝에 왜 세미 콜론 `;`이 붙는지 의문이 들 수 있습니다. 함수 선언문에는 세미 콜론이 없는데 말이죠.
+=======
+````smart header="Why is there a semicolon at the end?"
+You might wonder, why do Function Expressions have a semicolon `;` at the end, but Function Declarations do not:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js
function sayHi() {
@@ -90,9 +121,15 @@ let sayHi = function() {
}*!*;*/!*
```
+<<<<<<< HEAD
이유는 간단합니다.
- `if { ... }`, `for { }`, `function f { }` 같이 중괄호로 만든 코드 블록 끝엔 `;`이 없어도 됩니다.
- 함수 표현식은 `let sayHi = ...;`과 같은 구문 안에서 값의 역할을 합니다. 코드 블록이 아니고 값처럼 취급되어 변수에 할당되죠. 모든 구문의 끝엔 세미 콜론 `;`을 붙이는 게 좋습니다. 함수 표현식에 쓰인 세미 콜론은 함수 표현식 때문에 붙여진 게 아니라, 구문의 끝이기 때문에 붙여졌습니다.
+=======
+The answer is simple: a Function Expression is created here as `function(…) {…}` inside the assignment statement: `let sayHi = …;`. The semicolon `;` is recommended at the end of the statement, it's not a part of the function syntax.
+
+The semicolon would be there for a simpler assignment, such as `let sayHi = 5;`, and it's also there for a function assignment.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
````
## 콜백 함수
@@ -132,13 +169,21 @@ function showCancel() {
ask("동의하십니까?", showOk, showCancel);
```
+<<<<<<< HEAD
이렇게 함수를 작성하는 방법은 실무에서 아주 유용하게 쓰입니다. 면대면으로 질문하는 것보다 위처럼 컨펌창을 띄워 질문을 던지고 답변을 받으면 간단하게 설문조사를 진행할 수 있습니다. 실제 상용 서비스에선 컨펌 창을 좀 더 멋지게 꾸미는 등의 작업이 동반되긴 하지만, 일단 여기선 그게 중요한 포인트는 아닙니다.
+=======
+In practice, such functions are quite useful. The major difference between a real-life `ask` and the example above is that real-life functions use more complex ways to interact with the user than a simple `confirm`. In the browser, such functions usually draw a nice-looking question window. But that's another story.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
**함수 `ask`의 인수, `showOk`와 `showCancel`은 *콜백 함수* 또는 *콜백*이라고 불립니다.**
함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 그 함수를 "나중에 호출(called back)"하는 것이 콜백 함수의 개념입니다. 위 예시에선 사용자가 "yes"라고 대답한 경우 `showOk`가 콜백이 되고, "no"라고 대답한 경우 `showCancel`가 콜백이 됩니다.
+<<<<<<< HEAD
아래와 같이 함수 표현식을 사용하면 코드 길이가 짧아집니다.
+=======
+We can use Function Expressions to write an equivalent, shorter function:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js run no-beautify
function ask(question, yes, no) {
@@ -174,7 +219,11 @@ ask(
첫 번째는 문법입니다. 코드를 통해 어떤 차이가 있는지 살펴봅시다.
+<<<<<<< HEAD
- *함수 선언문:* 함수는 주요 코드 흐름 중간에 독자적인 구문 형태로 존재합니다.
+=======
+- *Function Declaration:* a function, declared as a separate statement, in the main code flow:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js
// 함수 선언문
@@ -182,8 +231,13 @@ ask(
return a + b;
}
```
+<<<<<<< HEAD
- *함수 표현식:* 함수는 표현식이나 구문 구성(syntax construct) 내부에 생성됩니다. 아래 예시에선 함수가 할당 연산자 `=`를 이용해 만든 "할당 표현식" 우측에 생성되었습니다.
+=======
+- *Function Expression:* a function, created inside an expression or inside another syntax construct. Here, the function is created on the right side of the "assignment expression" `=`:
+
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js
// 함수 표현식
let sum = function(a, b) {
@@ -279,9 +333,15 @@ if (age < 18) {
welcome(); // \ (실행)
*/!*
// |
+<<<<<<< HEAD
function welcome() { // |
alert("안녕!"); // | 함수 선언문은 함수가 선언된 블록 내
} // | 어디에서든 유효합니다
+=======
+ function welcome() { // |
+ alert("Hello!"); // | Function Declaration is available
+ } // | everywhere in the block where it's declared
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
// |
*!*
welcome(); // / (실행)
@@ -289,8 +349,13 @@ if (age < 18) {
} else {
+<<<<<<< HEAD
function welcome() {
alert("안녕하세요!");
+=======
+ function welcome() {
+ alert("Greetings!");
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
}
}
@@ -347,8 +412,13 @@ welcome(); // 제대로 동작합니다.
```
+<<<<<<< HEAD
```smart header="함수 선언문과 함수 표현식 중 무엇을 선택해야 하나요?"
제 경험에 따르면 함수 선언문을 이용해 함수를 선언하는 걸 먼저 고려하는 게 좋습니다. 함수 선언문으로 함수를 정의하면, 함수가 선언되기 전에 호출할 수 있어서 코드 구성을 좀 더 자유롭게 할 수 있습니다.
+=======
+```smart header="When to choose Function Declaration versus Function Expression?"
+As a rule of thumb, when we need to declare a function, the first thing to consider is Function Declaration syntax. It gives more freedom in how to organize our code, because we can call such functions before they are declared.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
함수 선언문을 사용하면 가독성도 좋아집니다. 코드에서 `let f = function(…) {…}`보다 `function f(…) {…}` 을 찾는 게 더 쉽죠. 함수 선언 방식이 더 "눈길을 사로잡습니다".
diff --git a/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/solution.md b/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/solution.md
index b944933855..d2690fa736 100644
--- a/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/solution.md
+++ b/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/solution.md
@@ -1,7 +1,7 @@
```js run
function ask(question, yes, no) {
- if (confirm(question)) yes()
+ if (confirm(question)) yes();
else no();
}
diff --git a/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/task.md b/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/task.md
index 2f98f308a9..479ba89c8e 100644
--- a/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/task.md
+++ b/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/task.md
@@ -5,7 +5,7 @@
```js run
function ask(question, yes, no) {
- if (confirm(question)) yes()
+ if (confirm(question)) yes();
else no();
}
diff --git a/1-js/02-first-steps/17-arrow-functions-basics/article.md b/1-js/02-first-steps/17-arrow-functions-basics/article.md
index bcaa1f38aa..848bee57f2 100644
--- a/1-js/02-first-steps/17-arrow-functions-basics/article.md
+++ b/1-js/02-first-steps/17-arrow-functions-basics/article.md
@@ -5,15 +5,19 @@
바로 화살표 함수(arrow function)를 사용하는 것입니다. 화살표 함수라는 이름은 문법의 생김새를 차용해 지어졌습니다.
```js
-let func = (arg1, arg2, ...argN) => expression
+let func = (arg1, arg2, ..., argN) => expression;
```
+<<<<<<< HEAD
이렇게 코드를 작성하면 인자 `arg1..argN`를 받는 함수 `func`이 만들어집니다. 함수 `func`는 화살표(`=>`) 우측의 `표현식(expression)`을 평가하고, 평가 결과를 반환합니다.
+=======
+This creates a function `func` that accepts arguments `arg1..argN`, then evaluates the `expression` on the right side with their use and returns its result.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
아래 함수의 축약 버전이라고 할 수 있죠.
```js
-let func = function(arg1, arg2, ...argN) {
+let func = function(arg1, arg2, ..., argN) {
return expression;
};
```
@@ -33,7 +37,11 @@ let sum = function(a, b) {
alert( sum(1, 2) ); // 3
```
+<<<<<<< HEAD
보시는 바와 같이 `(a, b) => a + b`는 인수 `a`와 `b`를 받는 함수입니다. `(a, b) => a + b`는 실행되는 순간 표현식 `a + b`를 평가하고 그 결과를 반환합니다.
+=======
+As you can see, `(a, b) => a + b` means a function that accepts two arguments named `a` and `b`. Upon the execution, it evaluates the expression `a + b` and returns the result.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
- 인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있습니다. 괄호를 생략하면 코드 길이를 더 줄일 수 있습니다.
@@ -48,7 +56,11 @@ alert( sum(1, 2) ); // 3
alert( double(3) ); // 6
```
+<<<<<<< HEAD
- 인수가 하나도 없을 땐 괄호를 비워놓으면 됩니다. 다만, 이 때 괄호는 생략할 수 없습니다.
+=======
+- If there are no arguments, parentheses are empty, but they must be present:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js run
let sayHi = () => alert("안녕하세요!");
@@ -64,8 +76,13 @@ alert( sum(1, 2) ); // 3
let age = prompt("나이를 알려주세요.", 18);
let welcome = (age < 18) ?
+<<<<<<< HEAD
() => alert('안녕') :
() => alert("안녕하세요!");
+=======
+ () => alert('Hello!') :
+ () => alert("Greetings!");
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
welcome();
```
@@ -76,9 +93,15 @@ welcome();
## 본문이 여러 줄인 화살표 함수
+<<<<<<< HEAD
위에서 소개해 드린 화살표 함수들은 `=>` 왼쪽에 있는 인수를 이용해 `=>` 오른쪽에 있는 표현식을 평가하는 함수들이었습니다.
그런데 평가해야 할 표현식이나 구문이 여러 개인 함수가 있을 수도 있습니다. 이 경우 역시 화살표 함수 문법을 사용해 함수를 만들 수 있습니다. 다만, 이때는 중괄호 안에 평가해야 할 코드를 넣어주어야 합니다. 그리고 `return` 지시자를 사용해 명시적으로 결괏값을 반환해 주어야 합니다.
+=======
+The arrow functions that we've seen so far were very simple. They took arguments from the left of `=>`, evaluated and returned the right-side expression with them.
+
+Sometimes we need a more complex function, with multiple expressions and statements. In that case, we can enclose them in curly braces. The major difference is that curly braces require a `return` within them to return a value (just like a regular function does).
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
아래와 같이 말이죠.
@@ -86,7 +109,11 @@ welcome();
let sum = (a, b) => { // 중괄호는 본문 여러 줄로 구성되어 있음을 알려줍니다.
let result = a + b;
*!*
+<<<<<<< HEAD
return result; // 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 합니다.
+=======
+ return result; // if we use curly braces, then we need an explicit "return"
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
*/!*
};
@@ -105,7 +132,14 @@ alert( sum(1, 2) ); // 3
## 요약
+<<<<<<< HEAD
화살표 함수는 본문이 한 줄인 함수를 작성할 때 유용합니다. 본문이 한 줄이 아니라면 다른 방법으로 화살표 함수를 작성해야 합니다.
1. 중괄호 없이 작성: `(...args) => expression` -- 화살표 오른쪽에 표현식을 둡니다. 함수는 이 표현식을 평가하고, 평가 결과를 반환합니다.
2. 중괄호와 함께 작성: `(...args) => { body }` -- 본문이 여러 줄로 구성되었다면 중괄호를 사용해야 합니다. 다만, 이 경우는 반드시 `return` 지시자를 사용해 반환 값을 명기해 주어야 합니다.
+=======
+Arrow functions are handy for simple actions, especially for one-liners. They come in two flavors:
+
+1. Without curly braces: `(...args) => expression` -- the right side is an expression: the function evaluates it and returns the result. Parentheses can be omitted, if there's only a single argument, e.g. `n => n*2`.
+2. With curly braces: `(...args) => { body }` -- brackets allow us to write multiple statements inside the function, but we need an explicit `return` to return something.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
diff --git a/1-js/02-first-steps/18-javascript-specials/article.md b/1-js/02-first-steps/18-javascript-specials/article.md
index 915fdf1513..a116b17388 100644
--- a/1-js/02-first-steps/18-javascript-specials/article.md
+++ b/1-js/02-first-steps/18-javascript-specials/article.md
@@ -55,7 +55,11 @@ for(;;) {
`'use strict'`는 스크립트 최상단이나 함수 본문 최상단에 있어야 합니다.
+<<<<<<< HEAD
`'use strict'`가 없어도 코드는 정상적으로 동작합니다. 다만, 모던한 방식이 아닌 옛날 방식으로 동작하죠. '하위 호환성'을 지키면서 말이죠. 될 수 있으면 모던한 방식을 사용하는 걸 추천해 드립니다.
+=======
+Without `"use strict"`, everything still works, but some features behave in the old-fashioned, "compatible" way. We'd generally prefer the modern behavior.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
참고로, 추후에 배우게 될 클래스와 같은 몇몇 모던 기능은 엄격 모드를 자동으로 활성화합니다.
@@ -103,6 +107,7 @@ typeof function(){} == "function" // 함수는 특별하게 취급됩니다.
호스트 환경이 브라우저인 경우, 다음과 같은 UI 함수를 이용해 사용자와 상호작용할 수 있습니다.
+<<<<<<< HEAD
[`prompt(question, [default])`](mdn:api/Window/prompt)
: 프롬프트 창에 매개변수로 받은 `question`을 넣어 사용자에게 보여줍니다. '확인' 버튼을 눌렀을 땐 사용자가 입력한 값을 반환해주고, '취소' 버튼을 눌렀을 땐 `null`을 반환합니다.
@@ -111,6 +116,16 @@ typeof function(){} == "function" // 함수는 특별하게 취급됩니다.
[`alert(message)`](mdn:api/Window/alert)
: `message`가 담긴 얼럿 창을 보여줍니다.
+=======
+[`prompt(question, [default])`](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt)
+: Ask a `question`, and return either what the visitor entered or `null` if they clicked "cancel".
+
+[`confirm(question)`](https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm)
+: Ask a `question` and suggest to choose between Ok and Cancel. The choice is returned as `true/false`.
+
+[`alert(message)`](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert)
+: Output a `message`.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
세 함수는 모두 *모달* 창을 띄워주는데, 모달 창이 닫히기 전까지 코드 실행이 중지됩니다. 사용자는 모달 창 외에 페이지에 있는 그 무엇과도 상호작용할 수 없습니다.
@@ -143,8 +158,13 @@ alert( "차 주문 여부: " + isTeaWanted ); // true
할당 연산자
: `a = b` 형태의 할당 연산자와 `a *= 2` 형태의 복합 할당 연산자가 있습니다.
+<<<<<<< HEAD
비트 연산자
: 비트 연산자는 인수를 32비트 정수로 변환하여 이진 연산을 수행합니다. 자세한 내용은 [docs](mdn:/JavaScript/Reference/Operators/Bitwise_Operators)에서 볼 수 있습니다.
+=======
+Bitwise
+: Bitwise operators work with 32-bit integers at the lowest, bit-level: see the [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise_operators) when they are needed.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
조건부 연산자
: 조건부 연산자는 자바스크립트 연산자 중 유일하게 매개변수가 3개인 연산자입니다. `cond ? resultA : resultB`와 같은 형태로 사용하고, `cond`가 truthy면 `resultA`를, 아니면 `resultB`를 반환합니다.
@@ -256,7 +276,11 @@ switch (age) {
3. 화살표 함수:
```js
+<<<<<<< HEAD
// 화살표(=>) 우측엔 표현식이 있음
+=======
+ // expression on the right side
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
let sum = (a, b) => a + b;
// 중괄호{ ... }를 사용하면 본문에 여러 줄의 코드를 작성할 수 있음. return문이 꼭 있어야 함.
@@ -273,9 +297,15 @@ switch (age) {
```
+<<<<<<< HEAD
- 함수는 지역 변수를 가질 수 있습니다. 지역 변수는 함수의 본문에 선언된 변수로, 함수 내부에서만 접근할 수 있습니다.
- 매개변수에 기본값을 설정할 수 있습니다. 문법은 다음과 같습니다. `function sum(a = 1, b = 2) {...}`
- 함수는 항상 무언가를 반환합니다. `return`문이 없는 경우는 `undefined`를 반환합니다.
+=======
+- Functions may have local variables: those declared inside its body or its parameter list. Such variables are only visible inside the function.
+- Parameters can have default values: `function sum(a = 1, b = 2) {...}`.
+- Functions always return something. If there's no `return` statement, then the result is `undefined`.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
자세한 내용은 와 에서 살펴보시기 바랍니다.
diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md
index b8852c546b..cc96fa8b64 100644
--- a/1-js/03-code-quality/01-debugging-chrome/article.md
+++ b/1-js/03-code-quality/01-debugging-chrome/article.md
@@ -1,4 +1,8 @@
+<<<<<<< HEAD
# Chrome으로 디버깅하기
+=======
+# Debugging in the browser
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
좀 더 복잡한 코드를 작성하기 전에, 디버깅이란 것에 대해 이야기해봅시다.
@@ -38,7 +42,11 @@ Sources 패널은 크게 세 개의 영역으로 구성됩니다.
콘솔 창에 구문(statement)을 입력하고 실행하면 아랫줄에 실행 결과가 출력됩니다.
+<<<<<<< HEAD
`1+2`를 입력하면 `3`이 출력되고, `hello("debugger")`를 입력하면 `undefined`가 출력되죠. `undefined`가 출력되는 이유는 `hello("debugger")`가 아무것도 반환하지 않기 때문입니다.
+=======
+For example, here `1+2` results in `3`, while the function call `hello("debugger")` returns nothing, so the result is `undefined`:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
@@ -62,13 +70,22 @@ Sources 패널 우측의 디버깅 영역을 보면 중단점 목록을 확인
- 마우스 오른쪽 버튼을 클릭했을 때 나오는 'Remove breakpoint' 옵션을 통해 중단점을 삭제할 수도 있습니다.
- 이 외에도 다양한 기능이 있습니다.
+<<<<<<< HEAD
```smart header="조건부 중단점"
줄 번호에 커서를 옮긴 후 마우스 오른쪽 버튼을 클릭하면 *조건부 중단점(conditional breakpoint)* 을 설정할 수 있습니다. `Add conditional breakpoint`를 클릭했을 때 뜨는 작은 창에 표현식을 입력하면, 표현식이 참인 경우에만 실행을 중지시킬 수 있습니다.
+=======
+```smart header="Conditional breakpoints"
+*Right click* on the line number allows to create a *conditional* breakpoint. It only triggers when the given expression, that you should provide when you create it, is truthy.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
조건부 중단점을 설정하면 변수에 특정 값이 할당될 때나 함수의 매개 변수에 특정 값이 들어올 때만 실행을 중단시킬 수 있어 디버깅 시 유용하게 활용할 수 있습니다.
```
+<<<<<<< HEAD
## debugger 명령어
+=======
+## The command "debugger"
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
아래 예시처럼 스크립트 내에 `debugger` 명령어를 적어주면 중단점을 설정한 것과 같은 효과를 봅니다.
@@ -84,8 +101,12 @@ function hello(name) {
}
```
+<<<<<<< HEAD
debugger 명령어를 사용하면 브라우저를 켜 개발자 도구를 열고 소스 코드 영역을 띄워 중단점을 설정하는 수고를 하지 않아도 됩니다. 에디터를 떠나지 않고도 중단점을 설정할 수 있기 때문에 편리하죠.
+=======
+Such command works only when the development tools are open, otherwise the browser ignores it.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
## 멈추면 보이는 것들
@@ -99,7 +120,11 @@ debugger 명령어를 사용하면 브라우저를 켜 개발자 도구를 열
1. **`Watch` -- 표현식을 평가하고 결과를 보여줍니다.**
+<<<<<<< HEAD
Add Expression 버튼 `+`를 클릭해 원하는 표현식을 입력한 후 `key:Enter`를 누르면 중단 시점의 값을 보여줍니다. 입력한 표현식은 실행 과정 중에 계속해서 재평가됩니다.
+=======
+ You can click the plus `+` and input an expression. The debugger will show its value, automatically recalculating it in the process of execution.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
2. **`Call Stack` -- 코드를 해당 중단점으로 안내한 실행 경로를 역순으로 표시합니다.**
@@ -137,11 +162,20 @@ debugger 명령어를 사용하면 브라우저를 켜 개발자 도구를 열
-- 'Step over': 다음 명령어를 실행하되, *함수 안으로 들어가진 않음* (단축키 `key:F10`)
: 'Step'과 유사하지만, 다음 문이 함수 호출일 때 'Step'과는 다르게 동작합니다(`alert` 같은 내장함수에는 해당하지 않고, 직접 작성한 함수일 때만 동작이 다릅니다).
+<<<<<<< HEAD
'Step'은 함수 내부로 들어가 함수 본문 첫 번째 줄에서 실행을 멈춥니다. 반면 'Step over'는 보이지 않는 곳에서 중첩 함수를 실행하긴 하지만 함수 내로 진입하지 않습니다.
실행은 함수 실행이 끝난 후에 즉시 멈춥니다.
'Step over'은 함수 호출 시 내부에서 어떤 일이 일어나는지 궁금하지 않을 때 유용합니다.
+=======
+ -- "Step over": run the next command, but *don't go into a function*, hotkey `key:F10`.
+: Similar to the previous "Step" command, but behaves differently if the next statement is a function call (not a built-in, like `alert`, but a function of our own).
+
+ If we compare them, the "Step" command goes into a nested function call and pauses the execution at its first line, while "Step over" executes the nested function call invisibly to us, skipping the function internals.
+
+ The execution is then paused immediately after that function call.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
-- 'Step into' (단축키 `key:F11`)
: 'Step'과 유사한데, 비동기 함수 호출에서 'Step'과는 다르게 동작합니다. 이제 막 자바스크립트를 배우기 시작한 분이라면 비동기 호출에 대해 아직 배우지 않았기 때문에 'Step'과 'Step into'의 차이를 몰라도 괜찮습니다.
@@ -157,8 +191,13 @@ debugger 명령어를 사용하면 브라우저를 켜 개발자 도구를 열
-- 예외 발생 시 코드를 자동 중지시켜주는 기능을 활성화/비활성화
: 활성화되어 있고, 개발자 도구가 열려있는 상태에서 스크립트 실행 중에 에러가 발생하면 실행이 자동으로 멈춥니다. 실행이 중단되었기 때문에 변수 등을 조사해 어디서 에러가 발생했는지 찾을 수 있게 됩니다. 개발하다가 에러와 함께 스크립트가 죽었다면 디버거를 열고 이 옵션을 활성화한 후, 페이지를 새로 고침하면 에러가 발생한 곳과 에러 발생 시점의 컨텍스트를 확인할 수 있습니다.
+<<<<<<< HEAD
```smart header="Continue to here 옵션"
특정 줄에서 마우스 오른쪽 버튼을 클릭해 컨텍스트 메뉴를 열면 "Continue to here"라는 옵션을 볼 수 있습니다.
+=======
+ -- enable/disable automatic pause in case of an error.
+: When enabled, if the developer tools is open, an error during the script execution automatically pauses it. Then we can analyze variables in the debugger to see what went wrong. So if our script dies with an error, we can open debugger, enable this option and reload the page to see where it dies and what's the context at that moment.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
중단점을 설정하기는 귀찮은데 해당 줄에서 실행을 재개하고 싶을 때 아주 유용한 옵션입니다.
```
@@ -187,7 +226,11 @@ for (let i = 0; i < 5; i++) {
2. `debugger`문 만났을 때
3. 에러가 발생했을 때(개발자 도구가 열려있고 버튼이 '활성화'되어있는 경우)
+<<<<<<< HEAD
스크립트 실행이 중지되면 중단 시점을 기준으로 변수에 어떤 값이 들어가 있는지 확인할 수 있습니다. 또한 단계별로 코드를 실행해 가며, 어디서 문제가 발생했는지 추적할 수도 있습니다. 이런 식으로 디버깅이 진행됩니다.
+=======
+When paused, we can debug: examine variables and trace the code to see where the execution goes wrong.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
개발자 도구는 여기서 소개한 기능 이외의 다양한 기능을 지원합니다. Google에서 제공하는 개발자 도구 공식 매뉴얼은 에서 확인할 수 있습니다.
diff --git a/1-js/03-code-quality/02-coding-style/article.md b/1-js/03-code-quality/02-coding-style/article.md
index 04ad87bae4..5d82dff5c8 100644
--- a/1-js/03-code-quality/02-coding-style/article.md
+++ b/1-js/03-code-quality/02-coding-style/article.md
@@ -116,7 +116,11 @@ if (
탭 대신 스페이스를 이용했을 때의 장점 중 하나는 들여쓰기 정도를 좀 더 유연하게 변경할 수 있다는 점입니다.
+<<<<<<< HEAD
아래 예시처럼 인수 모두의 위치를 여는 괄호와 맞출 수 있죠.
+=======
+ For instance, we can align the parameters with the opening bracket, like this:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js no-beautify
show(parameters,
@@ -301,11 +305,19 @@ Linter라는 도구를 사용하면 내가 작성한 코드가 스타일 가이
유명 linter:
+<<<<<<< HEAD
- [JSLint](http://www.jslint.com/) -- 역사가 오래된 linter
- [JSHint](http://www.jshint.com/) -- JSLint보다 세팅이 좀 더 유연한 linter
- [ESLint](http://eslint.org/) -- 가장 최근에 나온 linter
위 linter 모두 훌륭한 기능을 제공합니다. 글쓴이는 [ESLint](http://eslint.org/)를 사용하고 있습니다.
+=======
+- [JSLint](https://www.jslint.com/) -- one of the first linters.
+- [JSHint](https://jshint.com/) -- more settings than JSLint.
+- [ESLint](https://eslint.org/) -- probably the newest one.
+
+All of them can do the job. The author uses [ESLint](https://eslint.org/).
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
대부분의 linter는 플러그인 형태로 유명 에디터와 통합해 사용할 수 있습니다. 원하는 스타일을 설정하는 것 역시 가능합니다.
@@ -328,14 +340,18 @@ ESLint를 사용한다고 가정했을 때 아래 절차를 따르면 에디터
},
"rules": {
"no-console": 0,
- "indent": ["warning", 2]
+ "indent": 2
}
}
```
위 예시에서 지시자 `"extends"`는 "eslint:recommended"를 기반으로 이를 확장해 스타일 가이드를 설정하겠다는 걸 의미합니다. 이렇게 세팅한 이후에 자신만의 스타일을 설정하면 됩니다.
+<<<<<<< HEAD
스타일 규칙을 모아놓은 세트를 웹에서 다운로드해 이를 기반으로 스타일 가이드를 설정하는 것도 가능합니다. 설치 방법에 대한 자세한 내용은 에서 확인해 보시기 바랍니다.
+=======
+It is also possible to download style rule sets from the web and extend them instead. See for more details about installation.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
몇몇 IDE에서는 자체 lint 도구가 있어 편리하긴 하지만 ESLint처럼 쉽게 설정을 변경하는 게 불가능하다는 단점이 있습니다.
diff --git a/1-js/03-code-quality/03-comments/article.md b/1-js/03-code-quality/03-comments/article.md
index 88643e5991..5ba87da1a7 100644
--- a/1-js/03-code-quality/03-comments/article.md
+++ b/1-js/03-code-quality/03-comments/article.md
@@ -143,7 +143,11 @@ function pow(x, n) {
[WebStorm](https://www.jetbrains.com/webstorm/) 등의 다양한 에디터는 이런 주석을 이용해 자동 완성 기능, 자동 에러 검출 기능 등을 제공합니다.
+<<<<<<< HEAD
[JSDoc 3](https://github.com/jsdoc3/jsdoc)이나 기타 유사한 툴을 사용하면 주석으로 HTML 문서를 만들 수 있습니다. 자세한 정보는 에서 확인하시기 바랍니다.
+=======
+Also, there are tools like [JSDoc 3](https://github.com/jsdoc/jsdoc) that can generate HTML-documentation from the comments. You can read more information about JSDoc at .
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
왜 이런 방법으로 문제를 해결했는지를 설명하는 주석
: 무엇이 적혀있는지는 중요합니다. 그런데 무슨 일이 일어나고 있는지 파악하려면 무엇이 *적혀있지 않은 지*가 더 중요할 수 있습니다. '왜 이 문제를 이런 방법으로 해결했나?'라는 질문에 코드는 답을 해 줄 수 없기 때문입니다.
diff --git a/1-js/03-code-quality/04-ninja-code/article.md b/1-js/03-code-quality/04-ninja-code/article.md
index 074e031430..8e4210d21b 100644
--- a/1-js/03-code-quality/04-ninja-code/article.md
+++ b/1-js/03-code-quality/04-ninja-code/article.md
@@ -1,9 +1,14 @@
# 닌자 코드
+<<<<<<< HEAD
```quote author="공자"
생각 없이 배우기만 하면 얻는 것이 없고,
생각만 하고 배우지 않으면 오류나 독단에 빠질 위험이 있다.
+=======
+```quote author="Confucius (Analects)"
+Learning without thought is labor lost; thought without learning is perilous.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```
닌자라 불리던 전설 속 개발자들은 유지보수 담당 개발자를 혹독하게 훈련하고자 (아래에서 소개해 드릴) 다양한 편법을 사용하곤 했습니다.
@@ -106,10 +111,15 @@ i = i ? i < 0 ? Math.max(0, len + i) : i : 0;
## 동의어 사용하기
+<<<<<<< HEAD
```quote author="공자"
모든 일 중 가장 어려운 일은
어두운 방에서 검은 고양이를 찾는 일이다.
';
+};
+
+const downloadCollage = () => {
+ const date = new Date();
+ const fileName = `Collage-${date.getDay()}-${date.getMonth()}-${date.getFullYear()}.png`;
+ const img = canvasEl.toDataURL("image/png");
+ const link = document.createElement("a");
+ link.download = fileName;
+ link.href = img;
+ link.click();
+ link.remove();
+};
+
+const changeLayout = ({ target }) => {
+ state.currentLayout = JSON.parse(target.value);
+};
+
+// Listeners.
+selectEl.addEventListener("change", changeLayout);
+createCollageBtn.addEventListener("click", createCollage);
+startOverBtn.addEventListener("click", startOver);
+downloadBtn.addEventListener("click", downloadCollage);
diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/utils.js b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/utils.js
new file mode 100644
index 0000000000..f0140c116a
--- /dev/null
+++ b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/utils.js
@@ -0,0 +1,321 @@
+const loggerContainerEl = document.querySelector(".loggerContainer");
+
+export const images = [
+ {
+ img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1527631746610-bca00a040d60",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1500835556837-99ac94a94552",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1503220317375-aaad61436b1b",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1501785888041-af3ef285b470",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1528543606781-2f6e6857f318",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1523906834658-6e24ef2386f9",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1539635278303-d4002c07eae3",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1533105079780-92b9be482077",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1516483638261-f4dbaf036963",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1502791451862-7bd8c1df43a7",
+ },
+ {
+ img: "https://plus.unsplash.com/premium_photo-1663047367140-91adf819d007",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1506197603052-3cc9c3a201bd",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1517760444937-f6397edcbbcd",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1518684079-3c830dcef090",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1505832018823-50331d70d237",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1524850011238-e3d235c7d4c9",
+ },
+ {
+ img: "https://plus.unsplash.com/premium_photo-1661277758451-b5053309eea1",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1541410965313-d53b3c16ef17",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1528702748617-c64d49f918af",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1502003148287-a82ef80a6abc",
+ },
+ {
+ img: "https://plus.unsplash.com/premium_photo-1661281272544-5204ea3a481a",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1503457574462-bd27054394c1",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1499363536502-87642509e31b",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1551918120-9739cb430c6d",
+ },
+ {
+ img: "https://plus.unsplash.com/premium_photo-1661382219642-43e54f7e81d7",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1497262693247-aa258f96c4f5",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1525254134158-4fd5fdd45793",
+ },
+ {
+ img: "https://plus.unsplash.com/premium_photo-1661274025419-4c54107d5c48",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1553697388-94e804e2f0f6",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1574260031597-bcd9eb192b4f",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1536323760109-ca8c07450053",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1527824404775-dce343118ebc",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1612278675615-7b093b07772d",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1522010675502-c7b3888985f6",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1501555088652-021faa106b9b",
+ },
+ {
+ img: "https://plus.unsplash.com/premium_photo-1669223469435-27e091439169",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1506012787146-f92b2d7d6d96",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1511739001486-6bfe10ce785f",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1553342385-111fd6bc6ab3",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1516546453174-5e1098a4b4af",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1527142879-95b61a0b8226",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1520466809213-7b9a56adcd45",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1516939884455-1445c8652f83",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1545389336-cf090694435e",
+ },
+ {
+ img: "https://plus.unsplash.com/premium_photo-1669223469455-b7b734c838f4",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1454391304352-2bf4678b1a7a",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1433838552652-f9a46b332c40",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1506125840744-167167210587",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1522199873717-bc67b1a5e32b",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1495904786722-d2b5a19a8535",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1614094082869-cd4e4b2905c7",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1474755032398-4b0ed3b2ae5c",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1501554728187-ce583db33af7",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1515859005217-8a1f08870f59",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1531141445733-14c2eb7d4c1f",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1500259783852-0ca9ce8a64dc",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1510662145379-13537db782dc",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1573790387438-4da905039392",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1512757776214-26d36777b513",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1518855706573-84de4022b69b",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1500049242364-5f500807cdd7",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1528759335187-3b683174c86a",
+ },
+];
+export const THUMBNAIL_PARAMS = "w=240&h=240&fit=crop&auto=format";
+
+// Console styles.
+export const CONSOLE_BASE_STYLES = [
+ "font-size: 12px",
+ "padding: 4px",
+ "border: 2px solid #5a5a5a",
+ "color: white",
+].join(";");
+export const CONSOLE_PRIMARY = [
+ CONSOLE_BASE_STYLES,
+ "background-color: #13315a",
+].join(";");
+export const CONSOLE_SUCCESS = [
+ CONSOLE_BASE_STYLES,
+ "background-color: #385a4e",
+].join(";");
+export const CONSOLE_ERROR = [
+ CONSOLE_BASE_STYLES,
+ "background-color: #5a1a24",
+].join(";");
+
+// Layouts.
+export const LAYOUT_4_COLUMNS = {
+ name: "Layout 4 columns",
+ columns: 4,
+ itemWidth: 240,
+ itemHeight: 240,
+};
+export const LAYOUT_8_COLUMNS = {
+ name: "Layout 8 columns",
+ columns: 8,
+ itemWidth: 240,
+ itemHeight: 240,
+};
+export const LAYOUTS = [LAYOUT_4_COLUMNS, LAYOUT_8_COLUMNS];
+
+export const createImageFile = async (src) =>
+ new Promise((resolve, reject) => {
+ const img = new Image();
+ img.src = src;
+ img.onload = () => resolve(img);
+ img.onerror = () => reject(new Error("Failed to construct image."));
+ });
+
+export const loadImage = async (url) => {
+ try {
+ const response = await fetch(url);
+ if (!response.ok) {
+ throw new Error(String(response.status));
+ }
+
+ return await response.blob();
+ } catch (e) {
+ console.log(`%cFETCHED_FAILED: ${e}`, CONSOLE_ERROR);
+ }
+};
+
+export const weakRefCache = (fetchImg) => {
+ const imgCache = new Map();
+ const registry = new FinalizationRegistry(({ imgName, size, type }) => {
+ const cachedImg = imgCache.get(imgName);
+ if (cachedImg && !cachedImg.deref()) {
+ imgCache.delete(imgName);
+ console.log(
+ `%cCLEANED_IMAGE: Url: ${imgName}, Size: ${size}, Type: ${type}`,
+ CONSOLE_ERROR,
+ );
+
+ const logEl = document.createElement("div");
+ logEl.classList.add("logger-item", "logger--error");
+ logEl.innerHTML = `CLEANED_IMAGE: Url: ${imgName}, Size: ${size}, Type: ${type}`;
+ loggerContainerEl.appendChild(logEl);
+ loggerContainerEl.scrollTop = loggerContainerEl.scrollHeight;
+ }
+ });
+
+ return async (imgName) => {
+ const cachedImg = imgCache.get(imgName);
+
+ if (cachedImg?.deref() !== undefined) {
+ console.log(
+ `%cCACHED_IMAGE: Url: ${imgName}, Size: ${cachedImg.size}, Type: ${cachedImg.type}`,
+ CONSOLE_SUCCESS,
+ );
+
+ const logEl = document.createElement("div");
+ logEl.classList.add("logger-item", "logger--success");
+ logEl.innerHTML = `CACHED_IMAGE: Url: ${imgName}, Size: ${cachedImg.size}, Type: ${cachedImg.type}`;
+ loggerContainerEl.appendChild(logEl);
+ loggerContainerEl.scrollTop = loggerContainerEl.scrollHeight;
+
+ return cachedImg?.deref();
+ }
+
+ const newImg = await fetchImg(imgName);
+ console.log(
+ `%cFETCHED_IMAGE: Url: ${imgName}, Size: ${newImg.size}, Type: ${newImg.type}`,
+ CONSOLE_PRIMARY,
+ );
+
+ const logEl = document.createElement("div");
+ logEl.classList.add("logger-item", "logger--primary");
+ logEl.innerHTML = `FETCHED_IMAGE: Url: ${imgName}, Size: ${newImg.size}, Type: ${newImg.type}`;
+ loggerContainerEl.appendChild(logEl);
+ loggerContainerEl.scrollTop = loggerContainerEl.scrollHeight;
+
+ imgCache.set(imgName, new WeakRef(newImg));
+ registry.register(newImg, {
+ imgName,
+ size: newImg.size,
+ type: newImg.type,
+ });
+
+ return newImg;
+ };
+};
+
+export const stateObj = {
+ loading: false,
+ drawing: true,
+ collageRendered: false,
+ currentLayout: LAYOUTS[0],
+ selectedImages: new Set(),
+};
diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md
index f9fcd3e89e..7555d4c9d9 100644
--- a/2-ui/1-document/01-browser-environment/article.md
+++ b/2-ui/1-document/01-browser-environment/article.md
@@ -1,10 +1,18 @@
# 브라우저 환경과 다양한 명세서
+<<<<<<< HEAD
자바스크립트는 본래 웹 브라우저에서 사용하려고 만든 언어입니다. 이후 진화를 거쳐 다양한 사용처와 플랫폼을 지원하는 언어로 변모하였습니다.
자바스크립트가 돌아가는 플랫폼은 *호스트(host)* 라고 불립니다. 호스트는 브라우저, 웹서버, 심지어는 커피 머신이 될 수도 있습니다. 각 플랫폼은 해당 플랫폼에 특정되는 기능을 제공하는데, 자바스크립트 명세서에선 이를 *호스트 환경(host environment)* 이라고 부릅니다.
호스트 환경은 랭귀지 코어(ECMAScript - 옮긴이)에 더하여 플랫폼에 특정되는 객체와 함수를 제공합니다. 웹브라우저는 웹페이지를 제어하기 위한 수단을 제공하고, Node.js는 서버 사이드 기능을 제공해주죠.
+=======
+The JavaScript language was initially created for web browsers. Since then, it has evolved into a language with many uses and platforms.
+
+A platform may be a browser, or a web-server or another *host*, or even a "smart" coffee machine if it can run JavaScript. Each of these provides platform-specific functionality. The JavaScript specification calls that a *host environment*.
+
+A host environment provides its own objects and functions in addition to the language core. Web browsers give a means to control web pages. Node.js provides server-side features, and so on.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
아래 그림은 호스트 환경이 웹 브라우저일 때 사용할 수 있는 기능을 개괄적으로 보여줍니다.
@@ -15,7 +23,11 @@
1. 챕터에서 설명한 바와 같이, 자바스크립트 코드의 전역 객체입니다.
2. '브라우저 창(browser window)'을 대변하고, 이를 제어할 수 있는 메서드를 제공합니다.
+<<<<<<< HEAD
아래 예시에선 `window` 객체를 전역 객체로 사용하고 있습니다.
+=======
+For instance, we can use it as a global object:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js run global
function sayHi() {
@@ -26,17 +38,29 @@ function sayHi() {
window.sayHi();
```
+<<<<<<< HEAD
아래 예시에선 `window` 객체가 브라우저 창을 대변하고 있으며, 이를 이용해 창의 높이를 출력합니다.
+=======
+And we can use it as a browser window, to show the window height:
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```js run
alert(window.innerHeight); // 창 내부(inner window) 높이
```
+<<<<<<< HEAD
`window` 객체엔 다양한 메서드와 프로퍼티가 있는데, 추후 자세히 살펴보도록 하겠습니다.
+=======
+There are more window-specific methods and properties, which we'll cover later.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
## 문서 객체 모델(DOM)
+<<<<<<< HEAD
문서 객체 모델(Document Object Model, DOM)은 웹 페이지 내의 모든 콘텐츠를 객체로 나타내줍니다. 이 객체는 수정 가능합니다.
+=======
+The Document Object Model, or DOM for short, represents all page content as objects that can be modified.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
`document` 객체는 페이지의 기본 '진입점' 역할을 합니다. `document` 객체를 이용해 페이지 내 그 무엇이든 변경할 수 있고, 원하는 것을 만들 수도 있습니다.
@@ -49,18 +73,30 @@ document.body.style.background = "red";
setTimeout(() => document.body.style.background = "", 1000);
```
+<<<<<<< HEAD
문서 객체 모델은 예시에서 소개한 `document.body.style` 외에도 수많은 기능을 제공합니다. 관련 프로퍼티와 메서드에 대한 정보는 WHATWG의 [DOM Living Standard](https://dom.spec.whatwg.org)에서 찾을 수 있습니다.
+=======
+Here, we used `document.body.style`, but there's much, much more. Properties and methods are described in the specification: [DOM Living Standard](https://dom.spec.whatwg.org).
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```smart header="DOM은 브라우저만을 위한 모델이 아닙니다."
DOM 명세서엔 문서의 구조와 이를 조작할 수 있는 객체에 대한 설명이 담겨있습니다. 그런데 브라우저가 아닌 곳에서도 DOM을 사용하는 경우가 있습니다.
+<<<<<<< HEAD
HTML 페이지를 다운로드하고 이를 가공해주는 서버 사이드 스크립트에서도 DOM을 사용합니다. 이런 스크립트에선 명세서 일부만을 지원하겠지만요.
+=======
+For instance, server-side scripts that download HTML pages and process them can also use the DOM. They may support only a part of the specification though.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```
```smart header="스타일링을 위한 CSSOM"
CSS 규칙과 스타일시트(stylesheet)는 HTML과는 다른 구조를 띱니다. 따라서 CSS 규칙과 스타일시트를 객체로 나타내고 이 객체를 어떻게 읽고 쓸 수 있을지에 대한 설명을 담은 별도의 명세서, [CSS 객체 모델(CSS Object Model, CSSOM)](https://www.w3.org/TR/cssom-1/)이 존재합니다.
+<<<<<<< HEAD
CSSOM은 문서에 쓰이는 스타일 규칙을 수정할 때 DOM과 함께 쓰입니다. 그런데 CSS 규칙은 대부분 정적이기 때문에 CSSOM을 실무에서 자주 접하지는 않을 겁니다. 자바스크립트를 이용해 CSS 규칙을 추가 혹은 제거해야 하는 경우는 극히 드물긴 하지만, 이때 CSSOM이 사용됩니다.
+=======
+The CSSOM is used together with the DOM when we modify style rules for the document. In practice though, the CSSOM is rarely required, because we rarely need to modify CSS rules from JavaScript (usually we just add/remove CSS classes, not modify their CSS rules), but that's also possible.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```
## 브라우저 객체 모델(BOM)
@@ -69,8 +105,13 @@ CSSOM은 문서에 쓰이는 스타일 규칙을 수정할 때 DOM과 함께 쓰
예시:
+<<<<<<< HEAD
- [navigator](mdn:api/Window/navigator) 객체는 브라우저와 운영체제에 대한 정보를 제공합니다. 객체엔 다양한 프로퍼티가 있는데, 가장 잘 알려진 프로퍼티는 현재 사용 중인 브라우저 정보를 알려주는 `navigator.userAgent`와 브라우저가 실행 중인 운영체제(Windows, Linux, Mac 등) 정보를 알려주는 `navigator.platform`입니다.
- [location](mdn:api/Window/location) 객체는 현재 URL을 읽을 수 있게 해주고 새로운 URL로 변경(redirect)할 수 있게 해줍니다.
+=======
+- The [navigator](mdn:api/Window/navigator) object provides background information about the browser and the operating system. There are many properties, but the two most widely known are: `navigator.userAgent` -- about the current browser, and `navigator.platform` -- about the platform (can help to differentiate between Windows/Linux/Mac etc).
+- The [location](mdn:api/Window/location) object allows us to read the current URL and can redirect the browser to a new one.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
아래 예시는 `location` 객체를 어떻게 활용할 수 있을지 보여줍니다.
@@ -81,33 +122,60 @@ if (confirm("위키피디아 페이지로 가시겠습니까?")) {
}
```
+<<<<<<< HEAD
`alert/confirm/prompt` 역시 BOM의 일부입니다. 문서와 직접 연결되어 있지 않지만, 사용자와 브라우저 사이의 커뮤니케이션을 도와주는 순수 브라우저 메서드이죠.
```smart header="다양한 명세"
BOM은 [HTML 명세서](https://html.spec.whatwg.org)의 일부입니다.
BOM에 관련된 명세가 따로 있지는 않습니다. 에서 볼 수 있는 HTML 명세서는 태그, HTML 속성(attribute) 같은 'HTML' 뿐만 아니라 다양한 객체와 메서드, 브라우저에서만 사용되는 DOM 확장을 다룹니다. 이 모든 것이 HTML 기술에 속하기 때문입니다. HTML 명세서엔 이 외에도 에 있는 내용도 들어갑니다.
+=======
+The functions `alert/confirm/prompt` are also a part of the BOM: they are not directly related to the document, but represent pure browser methods for communicating with the user.
+
+```smart header="Specifications"
+The BOM is a part of the general [HTML specification](https://html.spec.whatwg.org).
+
+Yes, you heard that right. The HTML spec at is not only about the "HTML language" (tags, attributes), but also covers a bunch of objects, methods, and browser-specific DOM extensions. That's "HTML in broad terms". Also, some parts have additional specs listed at .
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```
## 요약
표준에 대하여 이야기하면서 다음 명세서들을 알아보았습니다.
+<<<<<<< HEAD
DOM 명세서
: 문서 구조, 조작, 이벤트에 관한 설명이 담겨있고, 에서 볼 수 있습니다.
CSSOM 명세서
: 스타일시트와 스타일 규칙, 이 둘을 어떻게 조작할 수 있는지, 이 둘과 문서 사이의 관계를 어떻게 조작할 수 있는지에 대한 설명이 담겨있고, 에서 볼 수 있습니다.
+=======
+DOM specification
+: Describes the document structure, manipulations, and events, see .
+
+CSSOM specification
+: Describes stylesheets and style rules, manipulations with them, and their binding to documents, see .
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
HTML 명세서
: 태그 등의 HTML 언어, `setTimeout`, `alert`, `location` 등의 다양한 브라우저 기능을 정의한 BOM에 대한 설명이 담겨있고, 에서 볼 수 있습니다. DOM 명세서에 다양한 프로퍼티와 메서드를 추가해 확장한 명세서입니다.
몇몇 클래스에 대한 설명은 에서 확인할 수 있습니다.
+<<<<<<< HEAD
배울 게 많지만, 모든 걸 한꺼번에 다루고 기억하기엔 그 양이 너무 많기 때문에 지금까지 소개해 드린 링크를 잘 기록해 놓으시기 바랍니다.
프로퍼티나 메서드에 대한 설명을 읽고 싶을 때 Mozilla 재단의 매뉴얼 을 찾아보는 것도 좋긴 하지만, 명세서에서 관련 설명을 찾는 게 더 나을 때도 있기 때문입니다. 명세서에 있는 설명은 복잡하고 내용도 더 많긴 하지만 명세서를 읽는 습관을 들이다 보면 기본 지식을 탄탄하게 쌓을 수 있습니다.
+=======
+Please note these links, as there's so much to learn that it's impossible to cover everything and remember it all.
+
+When you'd like to read about a property or a method, the Mozilla manual at is also a nice resource, but the corresponding spec may be better: it's more complex and longer to read, but will make your fundamental knowledge sound and complete.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
검색창에 'WHATWG [용어]' 혹은 'MDN [용어]'로 검색하면 명세서나 MDN문서에서 원하는 내용을 쉽게 찾을 수 있습니다. , 처럼 말이죠.
+<<<<<<< HEAD
자 이제 UI에서 핵심적인 역할을 하는 DOM에 대해 본격적으로 살펴보도록 합시다.
+=======
+Now, we'll get down to learning the DOM, because the document plays the central role in the UI.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md
index 7128c0d135..7e0c4debc5 100644
--- a/2-ui/1-document/02-dom-nodes/article.md
+++ b/2-ui/1-document/02-dom-nodes/article.md
@@ -51,7 +51,11 @@ DOM은 HTML을 아래와 같이 태그 트리 구조로 표현합니다.
@@ -142,8 +146,13 @@ let node4 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,
drawHtmlTree(node4, 'div.domtree', 690, 360);
+<<<<<<< HEAD
````warn header="테이블엔 언제나 ``가 있습니다."
테이블은 조금 흥미롭습니다. DOM 명세서에선 테이블에 반드시 ``가 있어야 한다고 못 박아 놓았지만, HTML에선 ``를 생략하곤 합니다. 이때, 브라우저는 자동으로 DOM에 ``를 만들어줍니다.
+=======
+````warn header="Tables always have ``"
+An interesting "special case" is tables. By DOM specification they must have `` tag, but HTML text may omit it. Then the browser creates `` in the DOM automatically.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
HTML:
@@ -160,7 +169,11 @@ let node5 = {"name":"TABLE","nodeType":1,"children":[{"name":"TBODY","nodeType":
drawHtmlTree(node5, 'div.domtree', 600, 200);
+<<<<<<< HEAD
보이시죠? ``가 어디선가 나타났습니다. 테이블을 다룰 땐 위 내용을 상기해 갑자기 나타난 ``때문에 놀라지 않도록 합시다.
+=======
+You see? The `` appeared out of nowhere. We should keep this in mind while working with tables to avoid surprises.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
````
## 기타 노드 타입
@@ -188,7 +201,11 @@ drawHtmlTree(node5, 'div.domtree', 600, 200);
@@ -199,7 +216,11 @@ drawHtmlTree(node6, 'div.domtree', 690, 500);
**HTML 안의 모든 것은 (심지어 그것이 주석이더라도) DOM을 구성합니다.**
+<<<<<<< HEAD
HTML 문서 최상단에 위치하는 `` 지시자 또한 DOM 노드가 됩니다. 이 노드는 DOM 트리의 `` 바로 위에 위치합니다. 본 튜토리얼에선 이 노드를 다루지 않을 예정이라 다이어그램에도 표시는 하지 않을 것입니다. 하지만 존재하는 노드입니다.
+=======
+Even the `` directive at the very beginning of HTML is also a DOM node. It's in the DOM tree right before ``. Few people know about that. We are not going to touch that node, we even don't draw it on diagrams, but it's there.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
문서 전체를 나타내는 `document` 객체 또한 DOM 노드입니다.
@@ -212,7 +233,11 @@ HTML 문서 최상단에 위치하는 `` 지시자 또한 DOM 노
## DOM 구조 직접 보기
+<<<<<<< HEAD
[Live DOM Viewer](http://software.hixie.ch/utilities/js/live-dom-viewer/)에 들어가면 실시간으로 DOM 구조를 볼 수 있습니다. 사이트에 들어가 DOM 구조를 보고 싶은 HTML 문서를 입력하면 HTML이 바로 DOM으로 바뀌어 출력됩니다.
+=======
+To see the DOM structure in real-time, try [Live DOM Viewer](https://software.hixie.ch/utilities/js/live-dom-viewer/). Just type in the document, and it will show up as a DOM at an instant.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
Live DOM Viewer를 이용하는 것 말고도 브라우저 개발자 도구를 사용해 DOM을 탐색할 수 있습니다. 실제론 대부분의 개발자가 개발자 도구를 사용합니다.
diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md
index 8b759337f3..044278bb56 100644
--- a/2-ui/1-document/03-dom-navigation/article.md
+++ b/2-ui/1-document/03-dom-navigation/article.md
@@ -214,7 +214,11 @@ alert( document.body.previousSibling ); // HTMLHeadElement
## 요소 간 이동
+<<<<<<< HEAD
지금까지 언급한 탐색 관련 프로퍼티는 *모든* 종류의 노드를 참조합니다. `childNodes`를 이용하면 텍스트 노드, 요소 노드, 심지어 주석 노드까지 참조할 수 있죠.
+=======
+Navigation properties listed above refer to *all* nodes. For instance, in `childNodes` we can see both text nodes, element nodes, and even comment nodes if they exist.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
하지만 실무에서 텍스트 노드나 주석 노드는 잘 다루지 않습니다. 웹 페이지를 구성하는 태그의 분신인 요소 노드를 조작하는 작업이 대다수이죠.
diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md
index 9db17890b3..98b3153e60 100644
--- a/2-ui/1-document/04-searching-elements-dom/article.md
+++ b/2-ui/1-document/04-searching-elements-dom/article.md
@@ -54,8 +54,13 @@
```
+<<<<<<< HEAD
```warn header="id를 따서 만들어진 전역변수를 요소 접근 시 사용하지 마세요."
`id`에 대응하는 전역변수는 [명세서](http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem)의 내용을 구현해 만들어진 것으로 표준이긴 하지만 하위 호환성을 위해 남겨둔 동작입니다.
+=======
+```warn header="Please don't use id-named global variables to access elements"
+This behavior is described [in the specification](https://html.spec.whatwg.org/multipage/window-object.html#named-access-on-the-window-object), but it is supported mainly for compatibility.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
브라우저는 스크립트의 네임스페이스와 DOM의 네임스페이스를 함께 사용할 수 있도록 해서 개발자의 편의를 도모합니다. 그런데 이런 방식은 스크립트가 간단할 땐 괜찮지만, 이름이 충돌할 가능성이 있기 때문에 추천하는 방식은 아닙니다. HTML을 보지 않은 상황에서 코드만 보고 변수의 출처를 알기 힘들다는 단점도 있습니다.
@@ -70,8 +75,13 @@
같은 `id`를 가진 요소가 여러 개 있으면 `document.getElementById`같이 `id`를 이용해 요소를 검색하는 메서드의 동작이 예측 불가능해집니다. 검색된 여러 요소 중 어떤 요소를 반환할지 판단하지 못해 임의의 요소가 반환되죠. 문서 내 동일 `id`가 없도록 해 이런 일을 방지하도록 합시다.
```
+<<<<<<< HEAD
```warn header="`anyNode.getElementById`가 아닌 `document.getElementById`"
`getElementById`는 `document` 객체를 대상으로 해당 `id`를 가진 요소 노드를 찾아 줍니다. 문서 노드가 아닌 다른 노드엔 호출할 수 없습니다.
+=======
+```warn header="Only `document.getElementById`, not `anyElem.getElementById`"
+The method `getElementById` can be called only on `document` object. It looks for the given `id` in the whole document.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
```
## querySelectorAll [#querySelectorAll]
@@ -116,7 +126,11 @@ querySelectorAll에는 `:hover`나 `:active` 같은 CSS 선택자의 가상 클
지금까지 소개한 모든 메서드는 DOM 검색에 쓰입니다.
+<<<<<<< HEAD
[elem.matches(css)](http://dom.spec.whatwg.org/#dom-element-matches)는 DOM을 검색하는 일이 아닌 조금 다른 일을 합니다. 이 메서드는 요소 `elem`이 주어진 CSS 선택자와 일치하는지 여부를 판단해줍니다. 일치한다면 `true`, 아니라면 `false`를 반환하죠.
+=======
+The [elem.matches(css)](https://dom.spec.whatwg.org/#dom-element-matches) does not look for anything, it merely checks if `elem` matches the given CSS-selector. It returns `true` or `false`.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
요소가 담겨있는 배열 등을 순회해 원하는 요소만 걸러내고자 할 때 유용합니다.
@@ -142,7 +156,11 @@ querySelectorAll에는 `:hover`나 `:active` 같은 CSS 선택자의 가상 클
부모 요소, 부모 요소의 부모 요소 등 DOM 트리에서 특정 요소의 상위에 있는 요소들은 *조상(ancestor)* 요소라고 합니다.
+<<<<<<< HEAD
메서드 `elem.closest(css)`는 `elem` 자기 자신을 포함하여 CSS 선택자와 일치하는 가장 가까운 조상 요소를 찾을 수 있게 도와줍니다.
+=======
+The method `elem.closest(css)` looks for the nearest ancestor that matches the CSS-selector. The `elem` itself is also included in the search.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
`closest`메서드는 해당 요소부터 시작해 DOM 트리를 한 단계씩 거슬러 올라가면서 원하는 요소를 찾습니다. CSS 선택자와 일치하는 요소를 찾으면, 검색을 중단하고 해당 요소를 반환합니다.
@@ -153,8 +171,13 @@ querySelectorAll에는 `:hover`나 `:active` 같은 CSS 선택자의 가상 클
+<<<<<<< HEAD
1장
2장
+=======
+
Chapter 1
+
Chapter 2
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
@@ -363,7 +386,11 @@ DOM에서 원하는 노드를 검색하게 해주는 주요 메서드 6가지는
+<<<<<<< HEAD
아마 실무에선 `querySelector`나 `querySelectorAll`을 가장 많이 사용하실 겁니다. `getElementBy`로 시작하는 메서드는 대개 오래된 스크립트에서 만날 수 있는데, 일부 이 메서드가 꼭 필요한 상황에서 쓰이는 경우도 있습니다.
+=======
+By far the most used are `querySelector` and `querySelectorAll`, but `getElement(s)By*` can be sporadically helpful or found in the old scripts.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
이 외에 알아두면 좋을 만한 메서드는 아래와 같습니다.
diff --git a/2-ui/1-document/05-basic-dom-node-properties/article.md b/2-ui/1-document/05-basic-dom-node-properties/article.md
index e850e97838..b22f82cb34 100644
--- a/2-ui/1-document/05-basic-dom-node-properties/article.md
+++ b/2-ui/1-document/05-basic-dom-node-properties/article.md
@@ -10,7 +10,11 @@ DOM 노드는 종류에 따라 각각 다른 프로퍼티를 지원합니다.
DOM 노드는 종류에 따라 대응하는 내장 클래스가 다릅니다.
+<<<<<<< HEAD
계층 구조 꼭대기엔 [EventTarget](https://dom.spec.whatwg.org/#eventtarget)이 있는데, [Node](http://dom.spec.whatwg.org/#interface-node)는 EventTarget을, 다른 DOM 노드들은 Node 클래스를 상속받습니다.
+=======
+The root of the hierarchy is [EventTarget](https://dom.spec.whatwg.org/#eventtarget), that is inherited by [Node](https://dom.spec.whatwg.org/#interface-node), and other DOM nodes inherit from it.
+>>>>>>> 035c5267ba80fa7b55878f7213cbde449b4092d9
이런 관계를 그림으로 나타내면 다음과 같습니다.
@@ -18,6 +22,7 @@ DOM 노드는 종류에 따라 대응하는 내장 클래스가 다릅니다.
각 클래스는 다음과 같은 특징을 지닙니다.
+<<<<<<< HEAD
- [EventTarget](https://dom.spec.whatwg.org/#eventtarget) -- 루트에 있는 '추상(abstract)' 클래스로, 이 클래스에 대응하는 객체는 실제로 만들어지지 않습니다. EventTarget가 모든 DOM 노드의 베이스에 있기때문에 DOM 노드에서 '이벤트'를 사용할 수 있습니다. 자세한 내용은 곧 다룰 예정입니다.
- [Node](http://dom.spec.whatwg.org/#interface-node) -- 역시 '추상' 클래스로, DOM 노드의 베이스 역할을 합니다. getter 역할을 하는 `parentNode`, `nextSibling`, `childNodes` 등의 주요 트리 탐색 기능을 제공합니다. `Node` 클래스의 객체는 절대 생성되지 않습니다. 하지만 이 클래스를 상속받는 클래스는 여럿 있습니다. 텍스트 노드를 위한 `Text` 클래스와 요소 노드를 위한 `Element` 클래스, 주석 노드를 위한 `Comment`클래스는 `Node`클래스를 상속받습니다.
- [Element](http://dom.spec.whatwg.org/#interface-element) -- DOM 요소를 위한 베이스 클래스입니다. `nextElementSibling`, `children` 이나 `getElementsByTagName`, `querySelector` 같이 요소 전용 탐색을 도와주는 프로퍼티나 메서드가 이를 기반으로 합니다. 브라우저는 HTML뿐만 아니라 XML, SVG도 지원하는데 `Element` 클래스는 이와 관련된 `SVGElement`, `XMLElement`, `HTMLElement` 클래스의 베이스 역할을 합니다.
@@ -28,6 +33,41 @@ DOM 노드는 종류에 따라 대응하는 내장 클래스가 다릅니다.
- 이외에도 다른 클래스가 많은데, 각 태그에 해당하는 클래스는 고유한 프로퍼티와 메서드를 지원합니다.
이렇게 특정 노드에서 사용할 수 있는 프로퍼티와 메서드는 상속을 기반으로 결정됩니다.
+=======
+- [EventTarget](https://dom.spec.whatwg.org/#eventtarget) -- is the root "abstract" class for everything.
+
+ Objects of that class are never created. It serves as a base, so that all DOM nodes support so-called "events", we'll study them later.
+
+- [Node](https://dom.spec.whatwg.org/#interface-node) -- is also an "abstract" class, serving as a base for DOM nodes.
+
+ It provides the core tree functionality: `parentNode`, `nextSibling`, `childNodes` and so on (they are getters). Objects of `Node` class are never created. But there are other classes that inherit from it (and so inherit the `Node` functionality).
+
+- [Document](https://dom.spec.whatwg.org/#interface-document), for historical reasons often inherited by `HTMLDocument` (though the latest spec doesn't dictate it) -- is a document as a whole.
+
+ The `document` global object belongs exactly to this class. It serves as an entry point to the DOM.
+
+- [CharacterData](https://dom.spec.whatwg.org/#interface-characterdata) -- an "abstract" class, inherited by:
+ - [Text](https://dom.spec.whatwg.org/#interface-text) -- the class corresponding to a text inside elements, e.g. `Hello` in `