이 안내 문서는 JavaScript를 처음 시작하는 개발자와 더 나은 방법들을 익히고자 하는 숙련된 개발자 모두를 위해 작성되었습니다.
이 문서의 이름과 달리, 이 안내 문서는 JavaScript를 하기 위한 "유일한 길"을 의미하지는 않습니다.
우리는 단지 실력 있는 개발자들로부터 모든 기사, 팁, 트릭을 여기 한 페이지에 모아놓았을 뿐입니다. 비범한 사람들에게서 나온 것들이기 때문에, 이것이 "정석", 또는 가장 좋은 방법이라고 이야기할 수 있습니다.
JavaScript는 1995년에 Netscape Navigator 2.0의 확장 기능으로써 Netscape사에 의해 개발되었습니다. JavaScript의 주사용 목적은 HTML의 조작과 입력 서의 검사였습니다. 이 이름이 지금처럼 유명해지기 전에는 JavaScript는 Mocha라고 불렸습니다. 베타 버전이 배포되었을 때는 공식적으로 LiveScript라 불리었고, Sun Microsystems에 의해 정식 버전이 배포되었을 때는 우리가 지금 알고 있는 이름으로 변경되었습니다. 비슷한 이름 때문에 Java와 JavaScript를 혼동하는 사람들이 많습니다. 두 언어 모두 프로그래밍 언어적인 어휘 구조로 되어 있지만 같은 언어는 아닙니다. C, C#, Java와는 다르게, JavaScript는 인터프리터 언어입니다. 인터프리터가 필요하다는 뜻인데, JavaScript의 경우 인터프리터는 브라우저입니다.
JavaScript의 표준은 ECMAScript입니다. 2012년 현재, 모든 모던 브라우저는 ECMAScript 5.1을 완벽히 지원합니다. 조금 더 오래된 브라우저는 최소 ECMAScript 3를 지원합니다. 2015년 6월 현재, ES6/ES2015의 사양이 승인되었습니다. ECMAScript 2015 언어 사양은 Ecma International에서 자세히 볼 수 있습니다.
자바스크립트에 대한 정보, 참고자료, 뉴스 등은 Mozilla Developer Network에서 볼 수 있습니다.
문서 객체 모델(DOM)은 HTML과 XML 문서의 API입니다. DOM은 문서의 구조를 표현하고, 문서의 내용을 수정할 수 있게 하며, JavaScript 등의 스크립트 언어로 시각화하여 보여줄 수 있습니다. 더 많은 정보는 Mozilla Developer Network - DOM을 참조하세요.
다른 언어들과 마찬가지로 JavaScript에도 다양한 코딩 스타일 규칙이 있습니다. 아마도 가장 많은 이들이 사용하고, 추천하는 것은 구글 JavaScript 코드 스타일 규칙일 것입니다. 하지만 우리는 당신에게 Idiomatic.js 를 읽어볼 것을 추천합니다.
요즘 JavaScript 코드 검사를 위한 가장 좋은 도구는 JSHint입니다. 우리는 당신이 어디서든지 린트 도구로 코드 스타일과 패턴 점검을 하는 것을 추천합니다.
JavaScript는 객체지향 프로그래밍에 강력한 호환성을 제공하고 있지만, 그런데도 타 객체 지향 언어와 비교했을 때 다른 점으로 인해 자주 논의됩니다.
참고: Introduction to Object-Oriented JavaScript
익명 함수는 실행 시간 중에 동적으로 선언되는 함수입니다. 이런 함수를 익명함수라 하는데 다른 평범한 함수와는 달리 이름이 주어지지 않기 때문입니다.
참고: JavaScript anonymous functions
JavaScript에서 함수는 1급 객체입니다. 다시 말해 JavaScript 함수는 특별한 타입의 객체로, 일반적인 객체가 할 수 있는 모든 일을 할 수 있다는 뜻입니다.
참고: Functions are first class objects in JavaScript
많은 Front-end 개발자들에게 JavaScript는 처음으로 접하는 인터프리터 언어이자 스크립트 언어입니다. 이 개발자들에게 느슨한 타입의 변수라는 개념과 논리적 함축은 아주 자연스러운 것입니다. 하지만 모던 웹 애플리케이션에 대한 수요가 폭발적으로 증가함에 따라 클라이언트 측 기술에 발을 디딘 Back-end 개발자들도 점점 많아지고 있는데, C#이나 Java 같은 강한 타입의 언어에 친숙한 이 사람들에게는 느슨한 타입의 변수들이 주는 자유로움이나 잠재적인 함정들이 익숙하지 않습니다.
참고: Understanding Loose Typing in JavaScript
스코핑: JavaScript에서는 함수가 사실상의 변수들의 스코프 범위입니다. 그 말인즉슨, 루프나 조건문(if, for, while, switch, try 같은)의 블록은 다른 언어들과는 다르게 스코프 범위가 아닙니다. 그러므로 함수와 그 함수 내에 있는 블록들은 같은 스코프를 사용합니다. 따라서 변수가 블록 내에서만 존재 할거라 생각하고 변수를 선언하는 것은 위험할 수도 있습니다.
호이스팅: 실행을 시작하면 모든 변수와 함수의 선언은 각 함수(스코프)의 가장 위로 옮겨집니다. 이것이 바로 호이스팅(hoisting)입니다. 이것 때문에, 첫 줄 이후에 선언된 변수들은 호이스팅으로 인해 선언한 곳 전부터 존재하게 됩니다. 실수를 피하고자 모든 변수를 제일 첫 줄에 함께 선언하는 것은 좋은 습관입니다. 이것은 블록 스코프 기반 언어를 사용하던 프로그래머들이 흔하게 겪는 문제입니다.
참고: JavaScript Scoping and Hoisting
함수 바인딩은 처음 JavaScript를 시작할 때에는 거의 신경 쓸 일이 없을지도 모릅니다. 하지만 다른 함수 내에서 this의 context를 유지해야 할 일이 생겼을 때 당신이 정말 필요로 하는 것은 Function.prototype.bind()라는 걸 알게 될 겁니다.
참고: Understanding JavaScript’s Function.prototype.bind
클로저는 독립적인(자유로운) 변수들을 가리키는 함수입니다. 다시 말하자면, 클로저 안에서 정의한 함수는 그 함수가 만들어진 환경을 '기억'합니다. private 메소드를 흉내 내는 것 이외에도 개발 시에 유용하게 쓰이는 개념이므로 이해하는 것이 중요합니다. 또한, 반복문 안에서 클로저를 생성하는 것처럼, 흔히 하는 실수들을 어떻게 피할 수 있는지 배우는 데도 도움이 됩니다.
참고: MDN - Closures
ECMAScript 5의 strict 모드는 JavaScript의 제한된 변형을 사용하는 방법입니다. 단순히 부분집합은 아닙니다: 의도적으로 일반 코드와 다른 의미를 가집니다. Strict 모드를 지원하지 않는 브라우저는 지원하는 브라우저와 다르게 Strict 모드 코드를 실행하므로, Strict 모드에 대해 적절하게 지원되는지 기능 테스트가 없다면 신뢰할 수 없습니다. Strict 모드와 비 Strict 모드의 코드는 동시에 존재할 수 있으므로, 계속해서 Strict 모드를 명시해야 합니다.
즉시 실행 함수 표현은 JavaScript의 함수 스코핑을 사용해서 렉시컬 스코프를 생성하는 패턴입니다. 즉시 실행 함수 표현은 블록 내에서 변수가 호이스팅되는걸 방지하거나 전역 환경이 오염되는 것을 보호하는 데 사용되기도 하며, 동시에 함수 내에서 정의된 변수를 private로 만들며 메소드만 접근하도록 만들 수도 있습니다. 이 패턴은 자기실행 익명 함수(self-executing anonymous function)이라고 불리기도 하지만, @cowboy (Ben Alman)이 패턴에 대해 의미상으로 더 정확한 단어로 IIFE를 소개했습니다.
JavaScript는 자기만의 독자적인 디자인 패턴을 가지고 있는 한편, 많은 고전적인 디자인 패턴 또한 구현할 수 있습니다.
JavaScript 디자인 패턴에 대해 배우는 좋은 방법은 Addy Osmani의 오픈소스 책 Learning JavaScript Design Patterns와 아래에 있는 중요한 패턴들의 문서를 기본으로 삼는 것입니다.
생성패턴
구조패턴
행위패턴
JavaScript로 작성된 프로그램을 테스트하는 데에 필요한 여러 가지 라이브러리들과 프레임워크들을 소개합니다.
TJ Holowaychuk이 관리하고 있습니다.
jQuery가 관리하고 있습니다.
Pivotal Labs가 관리하고 있습니다.
AngularJS팀이 뒤에서 관리하고 있습니다. 주로 Vojta Jina가 관리하고 있습니다.
Sitepen이 관리하고 있습니다.
JavaScript로 작성된 JavaScript 코드 커버리지 측정 도구입니다. Krishnan Anantheswaran이 관리하고 있습니다.
JavaScript 테스트를 위한 Spy, Stub, Mock을 제공합니다. 의존성이 없고, 어느 유닛 테스트 프레임워크와도 동작합니다. Sinon.JS 커뮤니티가 만들었습니다.
Mock 함수와 XHR 객체를 제공하는 테스트 도우미입니다. Leo Balter가 관리하고 있습니다.
Test runner with asynchronous tests, maintained by Sindre Sorhus
Painless JavaScript Testing, maintained by Facebook
jQuery는 작고 빠르며, 풍부한 기능을 가지고 있는 JavaScript 라이브러리로 John Resig이 만들었습니다.
Yahoo!가 제작한 YUI는 자유 오픈소스 JavaScript, CSS 라이브러리로 상호작용하는 웹 애플리케이션을 제작하는 데 사용됩니다. 2014년 8월 29일 이후로 새로운 개발이 진행되지 않고 있습니다.
Zepto는 현대적 웹 브라우저를 위한, jQuery에 호환성을 가진 API를 제공하는 소형 JavaScript 라이브러리입니다. jQuery를 사용할 줄 안다면 Zepto를 어떻게 사용하는지 이미 알고 있는 겁니다.
Dojo는 고성능의 웹 애플리케이션을 만들기 위한 자유, 오픈소스 JavaScript Toolkit입니다. 이 프로젝트의 후원자에는 IBM과 SitePen이 포함되어 있습니다.
Underscore.js는 내장 객체를 확장하지 않고도 유용한 함수형 프로그래밍 도우미를 사용할 수 있도록 돕는 JavaScript 라이브러리입니다.
@jashkenas가 만든 아주 유명한 JavaScript 클라이언트 측 프레임워크입니다.
jQuery와 Ruby on Rails 코어 개발자인 @wycats가 만들었습니다.
Model-View-View Model (MVVM)를 적용하여 동적인 JavaScript 사용자 인터페이스 개발을 간소화시켜줍니다.
Google이 개발한 Angular.js는 마치 미래의 HTML을 위한 polyfill 같습니다.
프레임 워크입니다. 모바일 및 데스크톱입니다. Angular로 응용 프로그램을 만들고 코드와 기술을 사용하여 각 배포 목표에 맞는 응용 프로그램을 만드는 한 가지 방법입니다. 웹, 모바일 웹, 기본 휴대 전화 및 기본 데스크탑 용.
Cappuccino는 데스크톱 앱 품질의 웹 애플리케이션을 쉽게 개발할 수 있게 해주는 오픈소스 프레임워크입니다.
JavaScriptMVC는 jQuery 개발에 쓰이는 최고의 아이디어를 포함한 오픈소스 프레임워크입니다.
Meteor는 당신이 숙련된 개발자이건, 처음 시작한 개발자이건 상관없이 짧은 시간 안에 최고 품질의 웹 애플리케이션을 만들게 도와주는 오픈소스 플랫폼입니다.
Spice는 아주 작고 (< 3k) 유연한 MVC JavaScript 프레임워크입니다. Spice는 이미 존재하는 애플리케이션에 쉽게 추가할 수 있고, jQuery, pjax, turbolinks, node 혹은 당신이 쓰는 어떤 기술들과도 같이 연동하기 쉽게 만들어졌습니다.
Riot은 엄청나게 빠르고 강력하지만 아주 작으며, 대규모의 웹 애플리케이션 개발을 위한 클라이언트 (MV*) 라이브러리입니다. 아주 작은 크기에도 불구하고 템플릿 엔진, 라우터, 이벤트 라이브러리, 엄격한 MVP 패턴 같은 모든 필요한 요소를 갖추고 있습니다.
CanJS는 복잡한 애플리케이션을 쉽고 빠르게 개발할 수 있도록 해주는 JavaScript 프레임워크입니다. 배우기 쉽고 작으며 대단하진 않지만, 커스텀 태그나 양방향 바인딩 같은 최신 기능을 지원합니다.
Facebook이 공개한 React는 Facebook과 Instagram의 사용자 인터페이스를 만드는 데 사용된 JavaScript 라이브러리입니다. 많은 사람이 MVC의 V로써 React를 선택하고 있습니다.
Handlebars는 의미론적인 템플릿을 효과적으로 만들 수 있게 해주는 라이브러리입니다.
브라우저와 node.js를 위한 비동기 템플릿 라이브러리입니다.
Asynchronous templates for the browser and node.js.
Velocity는 jQuery의 $.animate()와 같은 API를 가지고 있는 애니메이션 엔진입니다.
Bounce.js는 아름다운 CSS3 애니메이션 제작을 가능하게 하는 툴인 동시에 JavaScript 라이브러리입니다.
HTML5와 JavaScript 프로퍼티의 tweening과 애니메이션을 지원하는 간단하지만 강력한 JavaScript 라이브러리입니다.
Move.js는 CSS3기반 애니메이션을 아주 간단하고 우아하게 만들 수 있는 작은 JavaScript 라이브러리입니다.
SVG는 스크린 사이즈와 해상도에 독립적이면서 상호작용하는 벡터 그래픽을 만드는 훌륭한 방법입니다.
Rekapi는 canvas와 DOM 애니메이션을 만들기 위한 JavaScript 라이브러리입니다. 또한, 모던 브라우저를 위한 @keyframe 애니메이션도 지원합니다.
배지, 이미지, 비디오와 함께 favicon을 사용하세요.
Textillate.js는 몇몇 멋진 라이브러리들을 통합하여 어떤 텍스트에든 CSS3 애니메이션을 적용가능하게 해주는 사용하기 편리한 플러그인입니다.
Motio는 간단하지만 강력한 스프라이트 기반의 애니메이션과 panning을 지원하는 JavaScript 라이브러리입니다.
Anima로 수백 개의 객체의 애니메이션을 쉽게 만들 수 있습니다. 각 객체는 질량과 점성을 가질 수 있어서 실제 세계의 객체를 모방할 수 있습니다!
With Anima it's easy to animate over a hundred objects at a time. Each item can have it's mass and viscosity to emulate reallife objects!
MelonJS는 무료이며 경량화된 HTML5 게임 엔진입니다. MelonJS는 tiled map format을 사용하여 레벨 디자인을 하기 쉽게 도와줍니다.
ImpactJS는 2010년 말에 소개된 HTML5 게임 엔진입니다. ImpactJS는 꾸준히 업데이트되고 관리되고 있으며 대형 커뮤니티가 지원하고 있습니다. 많은 개발 문서가 있으며 ImpactJS를 이용해 게임을 제작하는 책도 있습니다.
LimeJS는 모든 모던 터치스크린/데스크톱 브라우저에서 빠르고 네이티브 애플리케이션에 가까운 게임을 개발할 수 있게 도와주는 HTML5 게임 프레임워크입니다.
Crafty는 2010년에 선보인 게임 엔진입니다. Crafty는 아주 쉽게 JavaScript 게임 개발을 시작할 수 있게 도와줍니다.
Cocos2d-html5는 MIT 라이센스의 오픈소스 웹 2D 게임 프레임워크입니다. Cocos2d-html5는 Cocos2d-x 프로젝트의 HTML5 버전으로써 브라우저와 네이티브 환경을 아우르는 Cocos2d 크로스 플랫폼을 만드는 데 집중하고 있습니다.
Phaser는 Flixel에 기반을 두고 있습니다. 수년 동안 HTML5 커뮤니티에서 왕성하게 활동해 온 Richard Davey (Photon Storm)가 Phaser를 관리하고 있습니다.
Goo는 WebGL/HTML5 기반으로 제작된 3D JavaScript 게임 엔진입니다.
LycheeJS는 JavaScript 게임 라이브러리입니다. 웹 브라우저와 네이티브 환경에서 HTML5 Canvas, WebGL 또는 native OpenGL(ES) 기반 게임의 프로토타이핑과 배포를 위한 통합 솔루션을 제공합니다.
Quintus는 모듈화/경량화를 위해 디자인된 간결화 된 JavaScript 문법을 사용하는 HTML5 게임 엔진입니다.
Kiwi.js는 재미있고 친근한 HTML5 게임 엔진입니다. 몇몇 사람들은 HTML5 게임 엔진 계의 워드프레스라고 부릅니다.
Panda.js는 Canvas와 WebGL 렌더링을 사용하는 모바일/데스크톱용 HTML5 게임 엔진입니다.
Rot.js is a set of JavaScript libraries, designed to help with a roguelike development in browser environment.
Isogenic is an advanced game engine that provides the most advanced networking and realtime multiplayer functionality available in any HTML 5 game engine. The system is based on entity streaming and includes powerful simulation options and client-side entity interpolation from delta updates.
Super-fast 3D framework for Web Applications & Games. Based on Three.js. Includes integrated physics support and ReactJS integration.
저자: Quildreen Motta
저자: Yehuda Katz
저자: Scott Allen
저자: Ben Alman
저자: Nico Bevacqua
저자: Viljami S.
저자: Ju Gonçalves
저자: Marijn Haverbeke
저자: David Flanagan
저자: Stoyan Stefanov
저자: James Coglan
저자: Henrik Joreteg
저자: Stoyan Stefanov
저자: Dustin Diaz
저자: John Resig
저자: Nicolas Bevacqua
저자: Axel Rauschmayer
저자: Kyle Simpson
저자: Ryan Burgess
저자: Ivo Wetzel
저자: David Herman
저자: Michael Fogus
저자: DevFreeBooks
by DevFreeBooks
이 프로젝트는 놀라운 기여자분들 없이는 존재할 수 없었을 겁니다. 이 문서를 만들어준 모두에게 정말 감사합니다!
JavaScript: The Right Way by William Oliveira.
이 저작물은 크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.
원문: http://jstherightway.org.
William Oliveira
Allan Esquina