Skip to content

Commit

Permalink
Merge branch 'master' into foo
Browse files Browse the repository at this point in the history
  • Loading branch information
ieunjung committed Nov 3, 2019
2 parents a4dbadc + 5e7559e commit 37128ac
Show file tree
Hide file tree
Showing 367 changed files with 4,449 additions and 3,953 deletions.
20 changes: 10 additions & 10 deletions 1-js/01-getting-started/1-intro/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,24 +28,24 @@
- [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- Firefox에서 쓰입니다.
- IE는 버전에 따라 "Trident"나 "Chakra"라 불리는 엔진을 사용합니다. "ChakraCore"는 Microsoft Edge에 사용되며, "SquirrelFish"는 Safari에 사용됩니다.

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

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

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

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

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

브라우저 환경에선 웹페이지 조작, 클라이언트와 서버의 상호작용에 관한 모든 일을 할 수 있습니다.

Expand All @@ -61,9 +61,9 @@

브라우저는 보안을 위해 자바스크립트의 기능에 제약을 걸어놓았습니다. 이런 제약은 악성 웹페이지가 개인 정보에 접근하거나 사용자의 데이터를 손상하는 것을 막기 위해 만들어졌습니다.

몇 가지 제약사항을 소개해드리도록 하겠습니다.
몇 가지 제약사항을 소개해 드리겠습니다.

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

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

Expand Down Expand Up @@ -92,22 +92,22 @@

이런 특징 때문에 자바스크립트는 브라우저 인터페이스를 만들 때 가장 널리 사용되고 있습니다.

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

## 자바스크립트 "너머의" 언어들

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

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

이로 인해 근래엔 자바스크립트로 *트랜스파일(transpile, 변환)*할 수 있는 새로운 언어들이 많이 등장했습니다. 브라우저에서 구동하려면 결국 자바스크립트가 필요하긴 하니까요.
이로 인해 근래엔 브라우저에서 실행 되기 전에 자바스크립트로 *트랜스파일(transpile, 변환)*할 수 있는 새로운 언어들이 많이 등장했습니다.

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

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

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

Expand All @@ -117,4 +117,4 @@

- 자바스크립트는 브라우저에서만 쓸 목적으로 고안된 언어이지만, 지금은 다양한 환경에서 쓰이고 있습니다.
- 오늘날 자바스크립트는 브라우저 환경에서 가장 널리 사용되는 언어로 자리매김하였습니다. HTML/CSS와 완전한 통합이 가능합니다.
- 자바스크립트로 "트랜스파일"할 수 있는 언어는 많습니다. 각 언어마다 고유한 기능을 제공하죠. 자바스크립트에 숙달한 뒤에 이 언어들을 살펴볼 것을 추천드립니다.
- 자바스크립트로 "트랜스파일"할 수 있는 언어는 많습니다. 각 언어마다 고유한 기능을 제공하죠. 자바스크립트에 숙달한 뒤에 이 언어들을 살펴볼 것을 추천드립니다.
18 changes: 9 additions & 9 deletions 1-js/01-getting-started/2-manuals-specifications/article.md
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@

# 매뉴얼과 명세서

*튜토리얼*은 자바스크립트를 기초부터 배울 수 있도록 만들어졌습니다. 그런데 어느 정도 자바스크립트가 익숙해지면 튜토리얼 이외의 자료가 필요한 시점이 옵니다.
*튜토리얼*은 자바스크립트를 기초부터 차근차근 배울 수 있도록 만들어졌습니다. 그런데 어느 정도 자바스크립트가 익숙해지면 튜토리얼 이외의 자료가 필요한 시점이 옵니다.

## 명세서

[The ECMA-262 명세서(specification)](https://www.ecma-international.org/publications/standards/Ecma-262.htm)는 자바스크립트와 관련된 가장 심도 있고 상세한 정보를 담고 있는 공식 문서입니다. 이 명세서에서 자바스크립트라는 언어를 정의합니다.
[ECMA-262 명세서(specification)](https://www.ecma-international.org/publications/standards/Ecma-262.htm)는 자바스크립트와 관련된 가장 심도 있고 상세한 정보를 담고 있는 공식 문서입니다. 이 명세서에서 자바스크립트라는 언어를 정의합니다.

ECMA-262는 그 형식 때문에 처음 접하는 사람이 이해하기가 쉽지 않습니다. 자바스크립트에 관한 정보를 얻을 수 있는 가장 신뢰할만한 자료이긴 하지만 형식 때문에 일상적인 참고자료로는 적합하지 않습니다.
ECMA-262 명세서의 고유한 형식 때문에 명세서를 처음 접하는 사람은 그 내용을 이해하기가 쉽지 않습니다. 자바스크립트에 관한 정보를 얻을 수 있는 가장 신뢰할만한 자료이긴 하지만 일상적인 참고자료로는 적합하지 않죠.

ECMA-262명세서는 매년 새로 나오는데, 공식 버전이 나오기 이전의 최신 초안은 <https://tc39.es/ecma262/>에서 확인할 수 있습니다.
ECMA-262명세서는 새로운 버전이 매년 나옵니다. 공식 버전이 나오기 이전의 최신 초안은 <https://tc39.es/ecma262/>에서 확인할 수 있습니다.

명세에 등록된 기능이나 "등록되기 바로 직전" ("스테이지(stage) 3")에 있는 기능, 제안 목록은 <https://github.com/tc39/proposals>에서 확인할 수 있습니다.
명세서에 등록된 기능이나 "등록되기 바로 직전"에 있는 기능("스테이지(stage)3 상태의 기능"), 제안 목록은 <https://github.com/tc39/proposals>에서 확인할 수 있습니다.

본 튜토리얼의 [두 번째 대 단원](info:browser-environment)에서 브라우저와 관련된 명세서를 다룰 예정이므로, 만약 브라우저에서 돌아가는 기능을 구현하는 개발자라면 해당 내용을 확인해 보시기 바랍니다.

## 매뉴얼

- 모질라(Mozilla) 재단이 운영하는 **MDN JavaScript Reference**엔 다양한 예제와 정보가 있습니다. 특정 함수나 메서드에 대한 깊이 있는 정보를 얻고 싶다면 이 사이트가 제격입니다.
- Mozilla 재단이 운영하는 **MDN JavaScript Reference**엔 다양한 예제와 정보가 있습니다. 특정 함수나 메서드에 대한 깊이 있는 정보를 얻고 싶다면 이 사이트가 제격입니다.

링크는 다음과 같습니다. <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference>

위 사이트에 들어가서 원하는 내용을 직접 검색하는 것도 좋지만, 가끔은 검색 엔진을 이용해 내용을 찾는 게 더 나을 때도 있습니다. Google 검색 엔진에 "MDN [원하는 용어]"를 검색어로 입력하면 되죠. `parseInt` 함수에 대한 정보를 얻고 싶다면 <https://google.com/search?q=MDN+parseInt> 같이 검색하는 식으로 말이죠.
위 사이트에 들어가서 원하는 내용을 직접 검색하는 것도 좋지만, 가끔은 검색 엔진을 이용해 내용을 찾는 게 더 나을 때도 있습니다. Google 검색 엔진에 접속해 "MDN [원하는 용어]"를 입력해 봅시다. `parseInt` 함수에 대한 정보를 얻고 싶다면 <https://google.com/search?q=MDN+parseInt> 같이 검색하는 식으로 말이죠.


- Microsoft가 운영하는 **MSDN**도 자바스크립트(해당 사이트에선 JScript라고 불립니다)와 관련된 광범위한 정보를 제공합니다. Internet Explorer에 관련된 정보를 찾고 싶다면 <http://msdn.microsoft.com/>에 방문해 보는 것을 추천합니다.
- Microsoft가 운영하는 **MSDN**도 자바스크립트(해당 사이트에선 JScript라고 불립니다)와 관련된 광범위한 정보를 얻기에 좋은 사이트입니다. Internet Explorer에 관련된 정보를 찾고 싶다면 <http://msdn.microsoft.com/>에 방문해 보는 것을 추천합니다.

위에서 소개한 방법처럼 검색어 앞에 "MSDN"을 붙이면 원하는 정보를 쉽게 찾을 수 있습니다. "RegExp MSDN", "RegExp MSDN jscript" 처럼 말이죠.
위에서 소개한 방법처럼 검색 엔진을 켜서 검색어에 "MSDN"을 붙이면 원하는 정보를 쉽게 찾을 수 있습니다. "RegExp MSDN", "RegExp MSDN jscript" 처럼 말이죠.

## 호환성 표

Expand Down
25 changes: 13 additions & 12 deletions 1-js/01-getting-started/3-code-editors/article.md
Original file line number Diff line number Diff line change
@@ -1,39 +1,40 @@
# 코드 에디터

개발자는 에디터(editor)에서 가장 많은 시간을 보냅니다.
개발자는 코드 에디터(code editor)에서 가장 많은 시간을 보냅니다.

에디터는 크게 IDE(통합 개발 환경)와 경량 에디터로 나뉘는데, 많은 개발자가 둘 중 하나를 택해 작업합니다.
코드 에디터는 크게 통합 개발 환경(IDE)과 경량 에디터로 나뉘는데, 많은 개발자가 둘 중 하나를 택해 작업합니다.

## 통합 개발 환경

[통합 개발 환경](https://en.wikipedia.org/wiki/Integrated_development_environment) (Integrated Development Environment, IDE) 강력한 에디터입니다. 보통 "프로젝트 전체"를 관장하는 다양한 기능을 제공합니다. 이름에서 알 수 있듯이 IDE는 단순한 에디터가 아닙니다. "개발 환경"을 쾌적하게 해주는 통합 환경을 제공합니다.
[통합 개발 환경](https://en.wikipedia.org/wiki/Integrated_development_environment) (Integrated Development Environment, IDE) 강력한 에디터입니다. 보통 "프로젝트 전체"를 관장하는 다양한 기능을 제공합니다. 이름에서 알 수 있듯이 IDE는 단순한 에디터가 아닙니다. "개발 환경"을 쾌적하게 해주는 통합 환경을 제공합니다.

IDE를 이용하면 수많은 파일로 구성된 프로젝트를 불러오고, 탐색하는 작업이 수월해집니다. 단순히 파일을 여는 것뿐만 아니라 파일 구조에 기반한 자동 완성 기능도 사용할 수 있습니다. 여기에 더하여 [git](https://git-scm.com/) 같은 버전 관리 시스템, 테스팅 환경 등, "프로젝트 수준"의 작업도 IDE에서 할 수 있습니다.
IDE를 이용하면 수많은 파일로 구성된 프로젝트를 불러오고, 파일 간의 탐색 작업이 수월해집니다. 단순히 열려있는 파일뿐만 아니라 전체 프로젝트에 기반한 자동 완성 기능도 사용할 수 있습니다. 여기에 더하여 [git](https://git-scm.com/) 같은 버전 관리 시스템, 테스팅 환경 등, "프로젝트 수준"의 작업도 IDE에서 할 수 있습니다.

아직 어떤 IDE를 사용할지 결정하지 못했다면, 아래 두 에디터를 고려해 보시길 바랍니다.

- [Visual Studio Code](https://code.visualstudio.com/) (크로스 플랫폼, 무료)
- [WebStorm](http://www.jetbrains.com/webstorm/) (크로스 플랫폼, 유료)

Windows 사용자라면 "Visual Studio"라는 IDE를 들어보셨을 겁니다. Visual Studio는 "Visual Studio Code"와는 다릅니다. "Visual Studio"는 .NET 플랫폼 개발에 쓰이는 유료 에디터로, Windows에서만 사용할 수 있습니다. 자바스크립트도 지원합니다. Visual Studio의 무료 버전인 ([Visual Studio Community](https://www.visualstudio.com/vs/community/)도 있으니 참고하시기 바랍니다.
Windows 사용자라면 "Visual Studio"라는 IDE를 들어보셨을 겁니다. Visual Studio는 "Visual Studio Code"와는 다릅니다. "Visual Studio"는 .NET 플랫폼 개발에 쓰이는 유료 에디터로, Windows에서만 사용할 수 있습니다. 자바스크립트도 지원합니다. Visual Studio의 무료 버전인 [Visual Studio Community](https://www.visualstudio.com/vs/community/)도 있으니 참고하시기 바랍니다.

상당수의 IDE가 유료이긴 하지만 개발자 연봉 대비 무시할 수 있을 만한 수준입니다. 체험 기간을 이용해 자신에게 맞는 IDE를 찾아 구매하는걸 권유 드립니다.
상당수의 IDE가 유료이긴 하지만 개발자 연봉 대비 무시할 수 있을 만한 수준입니다. 체험 기간을 이용해 자신에게 맞는 IDE를 찾아 구매하는 것을 권유 드립니다.

## 경량 에디터

"경량 에디터(lightweight editor)"는 IDE만큼 많은 기능을 제공하진 않지만, 속도가 빠르고 단순하다는 장점이 있습니다.

경량 에디터는 파일을 열고 즉시 수정하고자 할 때 주로 사용됩니다.

"경량 에디터"와 "IDE"의 가장 큰 차이점은 IDE는 프로젝트 레벨에서 작동한다는 점입니다. IDE는 구동 시 불러와야 할 데이터가 많고, 필요하다면 구동 시 프로젝트 구조를 분석하는 일 등도 하게 됩니다. 파일 하나만 수정하고 싶다면 경량 에디터를 사용하는 게 훨씬 빠릅니다.
"경량 에디터"와 "IDE"의 가장 큰 차이점은 IDE는 프로젝트 레벨에서 작동한다는 점입니다. IDE는 구동 시 불러와야 할 데이터가 많고, 필요하다면 구동 시 프로젝트 구조를 분석하는 일 등도 하게 됩니다. 파일 하나만 수정하고 싶다면 경량 에디터를 사용하는 게 훨씬 빠릅니다.

경량 에디터는 다양한 플러그인을 지원합니다. 디렉터리 레벨 문법 분석기나 자동완성기능 등을 플러그인을 설치해 사용할 수 있습니다. 플러그인을 사용하면 경량 에디터에서도 IDE 못지않게 다양한 기능을 사용할 수 있죠. 요즘엔 경량 에디터와 IDE 사이의 엄격한 구분이 사라져가는 추세입니다.

추천하는 에디는 다음과 같습니다.
추천하는 에디터는 다음과 같습니다.

- [Atom](https://atom.io/) (크로스 플랫폼, 무료).
- [Sublime Text](http://www.sublimetext.com) (크로스 플랫폼, 셰어웨어).
- [Notepad++](https://notepad-plus-plus.org/) (Windows, 무료).
- [Atom](https://atom.io/) (크로스 플랫폼, 무료)
- [Visual Studio Code](https://code.visualstudio.com/) (크로스 플랫폼, 무료)
- [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/)도 에디터로 사용법만 잘 숙지하면 충분히 에디터 역할을 잘합니다.

## 논쟁하지 맙시다
Expand All @@ -42,4 +43,4 @@ Windows 사용자라면 "Visual Studio"라는 IDE를 들어보셨을 겁니다.

이 외에도 제가 모르는 훌륭한 에디터가 있을 수 있으니 여러분이 가장 좋아하는 것 하나를 택하시면 됩니다.

여타 도구와 마찬가지로 에디터를 선택하는 것은 프로젝트의 종류, 개발 습관, 개인 성향에 따라 다르므로 이에 관한 논쟁은 지양하도록 합시다.
여타 툴과 마찬가지로 에디터를 선택하는 것은 프로젝트의 종류, 개발 습관, 개인 성향에 따라 다르므로 이에 관한 논쟁은 지양하도록 합시다.
Loading

0 comments on commit 37128ac

Please sign in to comment.