Skip to content

Commit 51365ec

Browse files
Merge remote-tracking branch 'upstream/master'
- 영어 원문 변경분 반영 - 클래스 기초 부분 번역 다시 진행해야함 # Conflicts: # 1-js/01-getting-started/1-intro/article.md # 1-js/02-first-steps/01-hello-world/article.md # 1-js/02-first-steps/03-strict-mode/article.md # 1-js/02-first-steps/05-types/article.md # 1-js/02-first-steps/06-alert-prompt-confirm/article.md # 1-js/02-first-steps/07-type-conversions/article.md # 1-js/02-first-steps/08-operators/article.md # 1-js/02-first-steps/09-comparison/article.md # 1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md # 1-js/02-first-steps/11-logical-operators/article.md # 1-js/02-first-steps/15-function-basics/article.md # 1-js/02-first-steps/18-javascript-specials/article.md # 1-js/03-code-quality/03-comments/article.md # 1-js/04-object-basics/01-object/4-const-object/solution.md # 1-js/04-object-basics/01-object/4-const-object/task.md # 1-js/04-object-basics/01-object/article.md # 1-js/04-object-basics/04-object-methods/article.md # 1-js/05-data-types/02-number/article.md # 1-js/05-data-types/04-array/article.md # 1-js/05-data-types/10-destructuring-assignment/article.md # 1-js/05-data-types/11-date/8-format-date-relative/solution.md # 1-js/05-data-types/11-date/8-format-date-relative/task.md # 1-js/05-data-types/11-date/article.md # 1-js/06-advanced-functions/01-recursion/article.md # 1-js/06-advanced-functions/02-rest-parameters-spread/article.md # 1-js/06-advanced-functions/03-closure/article.md # 1-js/06-advanced-functions/04-var/article.md # 1-js/06-advanced-functions/09-call-apply-decorators/article.md # 1-js/08-prototypes/01-prototype-inheritance/article.md # 1-js/08-prototypes/02-function-prototype/article.md # 1-js/08-prototypes/04-prototype-methods/article.md # 1-js/09-classes/01-class/article.md # 1-js/09-classes/02-class-inheritance/article.md # 1-js/10-error-handling/2-custom-errors/article.md # 1-js/11-async/01-callbacks/article.md # 1-js/11-async/05-promise-api/article.md # 1-js/13-modules/02-import-export/article.md # 1-js/99-js-misc/01-proxy/article.md # 1-js/99-js-misc/03-currying-partials/article.md # 1-js/99-js-misc/04-reference-type/2-check-syntax/solution.md # 1-js/99-js-misc/04-reference-type/3-why-this/solution.md # 2-ui/1-document/03-dom-navigation/article.md # 2-ui/1-document/04-searching-elements-dom/article.md # 2-ui/1-document/05-basic-dom-node-properties/article.md # 2-ui/1-document/08-styles-and-classes/article.md # 2-ui/2-events/01-introduction-browser-events/article.md # 2-ui/2-events/02-bubbling-and-capturing/article.md # 2-ui/2-events/03-event-delegation/article.md # 2-ui/2-events/04-default-browser-action/article.md # 2-ui/2-events/05-dispatch-events/article.md # 2-ui/5-loading/01-onload-ondomcontentloaded/article.md # 5-network/01-fetch/article.md # 6-data-storage/02-localstorage/article.md # 7-animation/1-bezier-curve/article.md
2 parents d364a8c + c2ce2d4 commit 51365ec

File tree

141 files changed

+1297
-817
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

141 files changed

+1297
-817
lines changed

1-js/01-getting-started/1-intro/article.md

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
## 정의
66

7-
*자바스크립트**"웹페이지에 생동감을 불어넣기 위해"* 만들어진 프로그래밍 언어입니다.
7+
*자바스크립트*'웹페이지에 생동감을 불어넣기 위해' 만들어진 프로그래밍 언어입니다.
88

99
자바스크립트로 작성한 프로그램을 *스크립트(script)* 라고 부릅니다. 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행됩니다.
1010

@@ -13,37 +13,37 @@
1313
이런 관점에서 보면 자바스크립트는 [자바(Java)](https://en.wikipedia.org/wiki/Java_(programming_language))와는 매우 다른 언어라고 할 수 있습니다.
1414

1515
```smart header="왜 <u>자바</u>스크립트인가요?"
16-
처음 자바스크립트가 만들어졌을 때는 "LiveScript"라는 이름으로 불렸습니다. 그런데, 당시 자바의 인기가 아주 높은 상황이었습니다. 관련인들은 자바스크립트를 자바의 "동생" 격인 언어로 홍보하면 도움이 될 것이라는 의사결정을 내리고 이름을 바꿨습니다.
16+
처음 자바스크립트가 만들어졌을 때는 LiveScript'라는 이름으로 불렸습니다. 그런데, 당시 자바의 인기가 아주 높은 상황이었습니다. 관련인들은 자바스크립트를 자바의 '동생' 격인 언어로 홍보하면 도움이 될 것이라는 의사결정을 내리고 이름을 바꿨습니다.
1717
1818
이름은 자바에서 차용해 왔지만, 자바스크립트는 자바와는 독자적인 언어입니다. 꾸준히 발전을 거듭하면서 [ECMAScript](http://en.wikipedia.org/wiki/ECMAScript)라는 고유한 명세를 갖춘 독립적인 언어가 되었죠. 자바스크립트는 자바와 아무런 연관이 없습니다.
1919
```
2020

2121
자바스크립트는 브라우저뿐만 아니라 서버에서도 실행할 수 있습니다. 이 외에도 [자바스크립트 엔진(JavaScript engine)](https://en.wikipedia.org/wiki/JavaScript_engine)이라 불리는 특별한 프로그램이 들어 있는 모든 디바이스에서도 동작합니다.
2222

23-
브라우저엔 "자바스크립트 가상 머신"이라 불리는 엔진이 내장되어 있습니다.
23+
브라우저엔 '자바스크립트 가상 머신'이라 불리는 엔진이 내장되어 있습니다.
2424

2525
엔진의 종류는 다양한데, 엔진마다 특유의 코드네임이 있습니다. 아래처럼 말이죠.
2626

2727
- [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- Chrome과 Opera에서 쓰입니다.
2828
- [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- Firefox에서 쓰입니다.
29-
- IE는 버전에 따라 "Trident"나 "Chakra"라 불리는 엔진을 사용합니다. "ChakraCore"는 Microsoft Edge에 사용되며, "SquirrelFish"는 Safari에 사용됩니다.
29+
- IE는 버전에 따라 'Trident'나 'Chakra'라 불리는 엔진을 사용합니다. 'ChakraCore'는 Microsoft Edge에 사용되며, 'SquirrelFish'는 Safari에 사용됩니다.
3030

3131
위의 코드네임은 개발 관련 글에서 종종 언급되기 때문에 기억해 두는 것이 좋습니다. 본 튜토리얼에서도 해당 코드네임을 사용할 예정입니다. "X라는 기능은 V8에서만 지원합니다."라는 식으로 말이죠. 이런 문장을 만나면 Chrome과 Opera에서만 이 기능을 지원한다고 이해하시면 됩니다.
3232

3333
```smart header="엔진은 어떻게 동작하나요?"
3434
3535
엔진이 어떻게 동작하는지 이해하려면 상당한 시간을 쏟아부어야 합니다. 하지만 기본 원리는 다음과 같이 간단합니다.
3636
37-
1. 엔진(브라우저라면 내장 엔진)이 스크립트를 읽습니다("파싱").
38-
2. 읽어 들인 스크립트를 기계어로 전환합니다("컴파일").
37+
1. 엔진(브라우저라면 내장 엔진)이 스크립트를 읽습니다(파싱).
38+
2. 읽어 들인 스크립트를 기계어로 전환합니다(컴파일).
3939
3. 기계어로 전환된 코드가 실행됩니다. 기계어로 전환되었기 때문에 실행 속도가 빠릅니다.
4040
4141
엔진은 프로세스 각 단계마다 최적화를 진행합니다. 심지어 컴파일이 끝나고 실행 중인 코드를 감시하면서, 이 코드로 흘러가는 데이터를 분석하고, 분석 결과를 토대로 기계어로 전환된 코드를 다시 최적화하기도 합니다. 이런 과정을 거치면 스크립트 실행 속도는 더욱 더 빨라집니다.
4242
```
4343

4444
## 브라우저에서 할 수 있는 일
4545

46-
모던 자바스크립트는 "안전한" 프로그래밍 언어입니다. 메모리나 CPU 같은 저수준 영역의 조작을 허용하지 않습니다. 애초에 이러한 접근이 필요치 않은 브라우저를 대상으로 만든 언어이기 때문이죠.
46+
모던 자바스크립트는 '안전한' 프로그래밍 언어입니다. 메모리나 CPU 같은 저수준 영역의 조작을 허용하지 않습니다. 애초에 이러한 접근이 필요치 않은 브라우저를 대상으로 만든 언어이기 때문이죠.
4747

4848
자바스크립트의 능력은 실행 환경에 상당한 영향을 받습니다. [Node.js](https://wikipedia.org/wiki/Node.js) 환경에선 임의의 파일을 읽거나 쓰고, 네트워크 요청을 수행하는 함수를 지원합니다.
4949

@@ -55,7 +55,7 @@
5555
- 마우스 클릭이나 포인터의 움직임, 키보드 키 눌림 등과 같은 사용자 행동에 반응하기
5656
- 네트워크를 통해 원격 서버에 요청을 보내거나, 파일 다운로드, 업로드하기([AJAX](https://en.wikipedia.org/wiki/Ajax_(programming))[COMET](https://en.wikipedia.org/wiki/Comet_(programming))과 같은 기술 사용)
5757
- 쿠키를 가져오거나 설정하기. 사용자에게 질문을 건네거나 메시지 보여주기
58-
- 클라이언트 측에 데이터 저장하기("로컬 스토리지")
58+
- 클라이언트 측에 데이터 저장하기(로컬 스토리지)
5959

6060
## 브라우저에서 할 수 없는 일
6161

@@ -65,12 +65,12 @@
6565

6666
- 웹페이지 내 스크립트는 디스크에 저장된 임의의 파일을 읽거나 쓰고, 복사하거나 실행할 때 제약을 받을 수 있습니다. 운영체제가 지원하는 기능을 브라우저가 직접 쓰지 못하게 막혀있기 때문입니다.
6767

68-
모던 브라우저를 사용하면 파일을 다룰 순 있습니다. 하지만 접근은 제한되어 있습니다. 사용자가 브라우저 창에 파일을 "끌어다 두거나" `<input>` 태그를 통해 파일을 선택할 때와 같이 특정 상황에서만 파일 접근을 허용합니다.
68+
모던 브라우저를 사용하면 파일을 다룰 순 있습니다. 하지만 접근은 제한되어 있습니다. 사용자가 브라우저 창에 파일을 '끌어다 두거나' `<input>` 태그를 통해 파일을 선택할 때와 같이 특정 상황에서만 파일 접근을 허용합니다.
6969

7070
카메라나 마이크 같은 디바이스와 상호 작용하려면 사용자의 명시적인 허가가 있어야 합니다. 자바스크립트가 활성화된 페이지라도 사용자 몰래 웹 카메라를 작동 시켜 수집한 정보를 [국가안보국(NSA)](https://en.wikipedia.org/wiki/National_Security_Agency)과 같은 곳에 몰래 전송할 수 없습니다.
7171
- 브라우저 내 탭과 창은 대개 서로의 정보를 알 수 없습니다. 그런데 자바스크립트를 사용해 한 창에서 다른 창을 열 때는 예외가 적용됩니다. 하지만 이 경우에도 도메인이나 프로토콜, 포트가 다르다면 페이지에 접근할 수 없습니다.
7272

73-
이런 제약사항을 "동일 출처 정책(Same Origin Policy)"이라 부릅니다. 이 정책을 피하려면 *두 페이지*는 데이터 교환에 동의해야 하고, 동의와 관련된 특수한 자바스크립트 코드를 포함하고 있어야 합니다. 자세한 사항은 추후 학습하도록 하겠습니다.
73+
이런 제약사항을 '동일 출처 정책(Same Origin Policy)'이라 부릅니다. 이 정책을 피하려면 *두 페이지*는 데이터 교환에 동의해야 하고, 동의와 관련된 특수한 자바스크립트 코드를 포함하고 있어야 합니다. 자세한 사항은 추후 학습하도록 하겠습니다.
7474

7575
다시 한번 강조하지만, 이런 제약사항은 사용자의 보안을 위해 만들어졌습니다. `http://anysite.com`에서 받아온 페이지가 `http://gmail.com`에서 받아온 페이지 상의 정보에 접근해 중요한 개인정보를 훔치는 걸 막기 위함입니다.
7676
- 자바스크립트를 이용하면 페이지를 생성한 서버와 쉽게 정보를 주고받을 수 있습니다. 하지만 타 사이트나 도메인에서 데이터를 받아오는 건 불가능합니다. 가능하다 할지라도 원격 서버에서 명확히 승인을 해줘야 합니다(HTTP 헤더 등을 이용). 이 역시 보안을 위해 만들어진 제약사항입니다.
@@ -94,20 +94,20 @@
9494

9595
이 외에도 자바스크립트를 이용해 서버나 모바일 앱 등을 만드는 것도 가능합니다.
9696

97-
## 자바스크립트 "너머의" 언어들
97+
## 자바스크립트 '너머의' 언어들
9898

9999
자바스크립트 문법은 모든 사람의 요구를 충족시키진 못합니다. 사람마다 각기 다른 기능을 원하기 때문이죠.
100100

101101
프로젝트마다 요구사항이 천차만별이기 때문에 이는 당연한 현상입니다.
102102

103103
이로 인해 근래엔 브라우저에서 실행 되기 전에 자바스크립트로 *트랜스파일(transpile, 변환)*할 수 있는 새로운 언어들이 많이 등장했습니다.
104104

105-
최신 툴을 사용하면 트랜스파일을 빠르고 명확하게 수행할 수 있습니다. 최신도구는 자바스크립트 이외의 언어로 작성한 코드를 "보이지 않는 곳에서" 자바스크립트로 자동 변환해줍니다.
105+
최신 툴을 사용하면 트랜스파일을 빠르고 명확하게 수행할 수 있습니다. 최신도구는 자바스크립트 이외의 언어로 작성한 코드를 '보이지 않는 곳에서' 자바스크립트로 자동 변환해줍니다.
106106

107107
자바스크립트로 트랜스파일이 가능한 언어 몇 가지를 소개해 드리겠습니다.
108108

109-
- [CoffeeScript](http://coffeescript.org/)는 자바스크립트를 위한 "syntactic sugar"입니다. 짧은 문법을 도입하여 명료하고 이해하기 쉬운 코드를 작성할 수 있습니다. Ruby 개발자들이 좋아합니다.
110-
- [TypeScript](http://www.typescriptlang.org/)는 개발을 단순화 하고 복잡한 시스템을 지원하려는 목적으로 "자료형의 명시화(strict data typing)"에 집중해 만든 언어입니다. Microsoft가 개발하였습니다.
109+
- [CoffeeScript](http://coffeescript.org/)는 자바스크립트를 위한 'syntactic sugar'입니다. 짧은 문법을 도입하여 명료하고 이해하기 쉬운 코드를 작성할 수 있습니다. Ruby 개발자들이 좋아합니다.
110+
- [TypeScript](http://www.typescriptlang.org/)는 개발을 단순화 하고 복잡한 시스템을 지원하려는 목적으로 '자료형의 명시화(strict data typing)'에 집중해 만든 언어입니다. Microsoft가 개발하였습니다.
111111
- [Flow](http://flow.org/) 역시 자료형을 강제하는데, TypeScript와는 다른 방식을 사용합니다. Facebook이 개발하였습니다.
112112
- [Dart](https://www.dartlang.org/)는 모바일 앱과 같이 브라우저가 아닌 환경에서 동작하는 고유의 엔진을 가진 독자적 언어입니다. Google이 개발하였습니다.
113113

@@ -117,4 +117,4 @@
117117

118118
- 자바스크립트는 브라우저에서만 쓸 목적으로 고안된 언어이지만, 지금은 다양한 환경에서 쓰이고 있습니다.
119119
- 오늘날 자바스크립트는 브라우저 환경에서 가장 널리 사용되는 언어로 자리매김하였습니다. HTML/CSS와 완전한 통합이 가능합니다.
120-
- 자바스크립트로 "트랜스파일"할 수 있는 언어는 많습니다. 각 언어마다 고유한 기능을 제공하죠. 자바스크립트에 숙달한 뒤에 이 언어들을 살펴볼 것을 추천드립니다.
120+
- 자바스크립트로 '트랜스파일'할 수 있는 언어는 많습니다. 각 언어마다 고유한 기능을 제공하죠. 자바스크립트에 숙달한 뒤에 이 언어들을 살펴볼 것을 추천드립니다.
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<body>
5+
6+
<script>
7+
alert( "I'm JavaScript!" );
8+
</script>
9+
10+
</body>
11+
12+
</html>
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+
[html src="index.html"]

1-js/02-first-steps/03-strict-mode/article.md

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@
1919
...
2020
```
2121

22-
명령어를 그룹화하는 방식인 함수에 대해선 곧 학습하도록 하겠습니다. 함수에 대해 학습하기 전에, `"use strict"`는 스크립트 최상단이 아닌 함수 본문 맨 앞에 올 수도 있다는 점을 알아두시기 바랍니다. 이렇게 하면 오직 해당 함수만 엄격 모드로 실행됩니다. 엄격 모드는 대개 스크립트 전체에 적용되지만 말이죠.
23-
22+
명령어를 그룹화하는 방식인 함수에 대해선 곧 학습하도록 하겠습니다. 함수에 대해 학습하기 전에, `"use strict"`는 스크립트 최상단이 아닌 함수 본문 맨 앞에 올 수도 있다는 점을 알아두시기 바랍니다. 이렇게 하면 오직 해당 함수만 엄격 모드로 실행됩니다. 엄격 모드는 대개 스크립트 전체에 적용하지만 말이죠.
2423

24+
````warn header="Ensure that \"use strict\" is at the top"
2525
````warn header="\"use strict\"는 반드시 최상단에 위치시키세요."
2626
`"use strict"`는 스크립트 최상단에 있어야 한다는 점을 잊지 마세요. 그렇지 않으면 엄격 모드가 활성화되지 않을 수도 있습니다.
2727
@@ -47,11 +47,13 @@ alert("some code");
4747
4848
## 브라우저 콘솔
4949
50-
개발한 기능을 테스트하기 위해 브라우저 내 콘솔을 사용하는 경우, 기본적으로 `use strict`가 적용되어있지 않는다는 점에 주의하셔야 합니다.
50+
개발한 기능을 테스트하기 위해 [브라우저 콘솔](info:devtools)을 사용하는 경우, 기본적으로 `use strict`가 적용되어있지 않는다는 점에 주의하셔야 합니다.
51+
52+
`use strict`에 영향을 받는 경우라면 개발자는 기대하지 않았던 결과를 얻을 수 있기 때문입니다.
5153
52-
`use strict`가 기능이 동작하는 방식에 영향을 주는 경우라면 기대치 않았던 결과를 얻을 수 있기 때문입니다.
54+
그렇다면 어떻게 해야 콘솔에서 `use strict`를 사용할 수 있을까요?
5355
54-
이럴 땐 'use strict'를 입력한 후, `Shift+Enter키`를 눌러 줄 바꿈 해 원하는 스크립트를 테스트해 볼 수 있습니다. 아래와 같이 말이죠.
56+
'use strict'를 입력한 후, `Shift+Enter키`를 눌러 줄 바꿈 해 원하는 스크립트를 입력하면 됩니다. 아래와 같이 말이죠.
5557
5658
```js
5759
'use strict'; <Shift+Enter를 눌러 줄 바꿈 함>
@@ -61,7 +63,7 @@ alert("some code");
6163

6264
이 기능은 Firefox와 Chrome 같은 유명한 브라우저에서 대부분 사용 가능합니다.
6365

64-
만약 콘솔 창에 `use strict`를 입력하는 게 불가능하다면, `use strict`를 적용하는 가장 확실한 방법은 아래와 같이 코드를 작성하는 것입니다.
66+
브라우저가 오래 되어서 콘솔 창에 `use strict`를 입력하는 게 불가능하다면, `use strict`를 적용하는 가장 확실한 방법은 아래와 같이 코드를 래퍼로 감싸면 됩니다.
6567

6668
```js
6769
(function() {
@@ -71,15 +73,18 @@ alert("some code");
7173
})()
7274
```
7375

74-
## 항상 "use strict"를 사용하세요.
76+
## 'use strict'를 꼭 사용해야 하나요
77+
78+
"당연히 사용해야 하는 거 아니야?"라는 생각이 드시겠지만, 꼭 그렇지만은 않습니다.
79+
80+
누군가는 스크립트 맨 윗줄엔 `"use strict"`를 넣는 게 좋다고 권유할 수 있습니다. 그런데 그거 아세요?
81+
82+
모던 자바스크립트는 '클래스'와 '모듈'이라 불리는 진일보한 구조를 제공합니다(클래스와 모듈에 대해선 당연히 뒤에서 학습할 예정입니다). 이 둘을 사용하면 `use strict`가 자동으로 적용되죠. 따라서 이 둘을 사용하고 있다면 스크립트에 `"use strict"`를 붙일 필요가 없습니다.
7583

76-
엄격 모드와 "기본" 모드의 차이점에 대해선 아직 다루지 않았습니다.
84+
결론은 이렇습니다. **코드를 클래스와 모듈을 사용해 구성한다면 `"use strict"`를 생략해도 됩니다. 그런데 아직은 이 둘을 배우지 않았으니 `"use strict"`를 귀한 손님처럼 모시도록 합시다.**
7785

78-
다음 챕터에서 자바스크립트에 대해서 좀 더 학습하면서 엄격 모드와 기본 모드의 차이점에 대해 알아볼 예정인데, 다행히도 차이점이 그리 많지는 않습니다. 두 모드의 차이점은 개발을 용이하게 해줍니다.
86+
지금까지는 `use strict`의 일반적인 특징에 대해 알아보았습니다.
7987

80-
지금까지 살펴본 엄격 모드에 대해 간단히 정리해 보도록 하겠습니다.
88+
다음 챕터부터는 자바스크립트 언어가 제공하는 기능들을 하나씩 학습하면서 이 기능들이 엄격 모드와 비 엄격 모드에서 어떤 차이점을 보이는지 알아보겠습니다. 희소식을 알려드리자면 두 모드에서 차이를 보이는 기능이 많지 않다는 점과 엄격 모드를 사용하면 개발자의 삶의 질이 조금 더 높아진다는 점입니다.
8189

82-
1. `"use strict"` 지시자는 자바스크립트 엔진을 "모던한" 모드로 전환해줍니다. 이 모드에선 몇 가지 내장 기능의 동작 방식이 변경됩니다. 자세한 변경사항은 추후 살펴보도록 하겠습니다.
83-
2. `"use strict"`를 스크립트나 함수 본문 최상단에 위치시키면 엄격 모드가 활성화됩니다. "클래스", "모듈" 같은 몇몇 기능은 자동으로 엄격 모드가 활성화되도록 합니다.
84-
3. 모든 모던 브라우저는 엄격 모드를 지원합니다.
85-
4. 스크립트는 항상 `"use strict"`로 시작하길 권장합니다. 특별한 언급이 없으면 이 튜토리얼에 등장하는 모든 예시엔 엄격 모드를 적용할 예정입니다.
90+
그리고 특별한 언급이 없는 한 이 튜토리얼에 등장하는 모든 예시엔 엄격 모드를 적용할 예정입니다.

0 commit comments

Comments
 (0)