헤드 퍼스트 자바스크립트 프로그래밍 - 게임과 퍼즐로 배우는 자바스크립트 입문서

괜찮다고 말하지만 괜찮지 않은 너와 나, 우리가 안고 사는 우울. 그리고 그 감정이 가져온 마음의 병 우울증. 화제의 채널



게임과 퍼즐로 배우는 자바스크립트 입문서

머리가 좋아하는 이 학습서는 기초에서부터 객체, 함수, 브라우저 도큐먼트 객체 모델과 같은 고급 주제에 이르기까지 자바스크립트 언어의 모든 것을 설명합니다. 그러나 지루하게 책만 읽는 것은 아닙니다. 게임도 하고, 퍼즐도 풀고, 미스터리 사건도 해결하고, 꿈에도 생각하지 못했던 방법으로 자바스크립트를 이용하게 됩니다. 그리고 진짜 코드를 만듭니다. 그것도 아주 많이. 이제 여러분은 자신만의 웹 애플리케이션을 만들 수 있게 됩니다.



출판사 리뷰

헤드 퍼스트의 검증된 학습이론으로 쉽고 재미있게 배우는 자바스크립트 입문서



[ 이 책의 특징과 장점 ]

- 우리는 자바스크립트의 좋은 점은 가르치고, 나쁜 점에 대해서는 주의를 줍니다.

- 언어의 모든 측면을 꼬치꼬치 설명하지는 않습니다.

- 이 책은 브라우저에서 자바스크립트를 가르칩니다.

- 이 책은 최고의 프로그래밍 기법에 기반한 구조화되고 읽기 쉬운 코드를 지지합니다.

- 이 책에서는 두 개 이상의 브라우저를 사용하도록 권합니다.



[대상 독자 ]

-자바스크립트를 처음 배우거나, 좀 더 깊이 있게 공부하려는 사람



[상세 내용 ]

1, 자바스크립트 간단히 맛보기 : 자바스크립트의 바다에 풍덩

자바스크립트는 여러분에게 초능력을 드립니다. 웹 시대의 진정한 프로그래밍 언어인 자바스크립트는 웹 페이지가 살아 움직이게 만듭니다. 사용자는 더 이상 무미건조하고, 따분하고, 가만히 있는 웹 페이지를 보지 않아도 되요. 자바스크립트를 이용하면 사용자에게 다가가 흥미로운 이벤트에 응답하고, 외부 서버에서 가져온 데이터를 웹 페이지에 사용하고, 직접 그림도 그릴 수 있어요. 그 외에도 많은 일을 할 수 있게 됩니다. 일단 자바스크립트를 배우면 완전히 새롭게 작동하는 페이지를 만들 수 있습니다.



2. 진짜 코드 만들기 : 코딩 파고들기

여러분은 이미 변수, 형, 표현식… 그리고 더 많은 걸 알고 있어요. 즉 여러분은 자바스크립트에 대해 이미 어느 정도 알고 있다는 것이죠. 사실 지금 알고 있는 것만으로도 진짜 코드를 짤 수 있습니다. 뭔가 재미있는 일을 하는 코드, 누군가 사용하고 싶어 하는 코드를 만들 준비가 이미 되어 있는 거죠. 여러분이 부족한 것은 단지 코딩하는 진짜 경험입니다. 이번 장에서는 이 문제를 해결해보겠습니다. 어떻게 하냐고요? 맨땅에 헤딩하면서 간단한 게임을 만들어보는 겁니다. 완전히 자바스크립트만을 사용해서요. 목표가 너무 거대한 거 같다고요? 걱정하지 마세요. 하나하나 차분히 해나가면 됩니다. 망설이지 말고 일단 시작하세요. 이 게임으로 새로운 벤처 회사를 만든다고 해도 말리지 않겠습니다. 코드는 여러분의 것이니까요.



3. 함수 개요 : 함수 사용하기

이제 첫번째 초능력을 배울 겁니다. 지금까지 어느 정도 프로그래밍을 배웠으니 이제 함수를 이용해 작업할 때가 되었습니다. 함수를 이용하면 아주 다양한 환경에서 사용할 수 있는 코드를 만들 수 있습니다. 이 코드는 계속해서 재사용할 수 있고, 관리하기도 훨씬 쉽고, 복잡한 것을 처리해주는 코드에 간단히 이름만 붙여 놓고 중요한 일에 집중할 수 있게 해줍니다. 이렇게 복잡한 부분을 간단히 생각할 수 있게 해주는 방법을 추상화라고 합니다. 함수는 스크립터에서 프로그래머로 넘어가는 관문일 뿐만 아니라 자바스크립트 프로그래밍 스타일에 있어서 핵심이라는 것을 알게 될 겁니다. 이번 장에서는 함수의 작동 방식 및 함수를 작동하게 하는 입출력 등 기본적인 개념을 익히고, 앞으로 계속 사용하게 될 함수 활용 능력을 개발합니다. 이제부터 함수에 대해 제대로 배워보겠습니다.



4. 순서가 있는 데이터 : 배열

자바스크립트에는 숫자, 문자열, 불린형 말고도 많이 있어요. 지금까지는 "해피", 23, true와 같은 간단한 문자열, 숫자, 불린형과 같은 기본형(Primitive)만 사용해 자바스크립트 코드를 작성해왔습니다. 기본형만 갖고도 할 수 있는 일이 많지만 어느 수준에 도달하면 더 많은 데이터를 다뤄야 해요. 가령 장바구니에 들어 있는 모든 품목들, 재생 목록에 있는 노래들, 수많은 별들과 이 별들의 표면적, 아니면 제품 카탈로그 같은 것들이 있죠. 이런 것들을 처리하려면 약간 더 강력한 무언가가 필요합니다. 순서가 있는 이런 데이터를 처리하려면 자바스크립트 배열(Array)을 이용할 수 있습니다. 이번 장에서는 배열에 데이터를 넣고, 배열을

전달하고, 배열을 이용해 계산하는 방법을 알아볼 거예요. 나중에 데이터를 구조화하는 다른 방법도 배우지만, 일단 배열부터 시작하겠습니다.



5. 객체 개요 : 객체타운으로의 여행

지금까지 기본형과 배열을 코드에 사용해왔습니다. 그리고 단순한 문장, 조건식, for / while 루프, 함수를 사용하면서 상당히 절차적인 방식으로 코드를 만들어왔습니다. 이런 방식은 그다지 객체지향적이지 않아요. 사실 객체지향이랑은 아주 거리가 멉니다. 알게 모르게 우리는 여기저기에서 객체를 사용해왔지만, 직접 객체를 만들지는 않았습니다. 자, 이제 지루한 절차타운을 떠나 객체타운에서 여러분의 객체를 직접 만들 때가 되었어요. 이번 장에서는 객체를 사용하면 여러분의 삶이 얼마나 더 윤택해지는지 알려줄 거예요. 물론 프로그래밍 측면에서 말이죠(책 한 권으로 여러분의 패션 감각과 자바스크립트 기술을 모두 가르쳐드릴 수는 없어요). 여기서 주의할 점이 있습니다. 일단 여러분의 객체을 알게 된 후에는 기존과 같은 방식으로는 돌아가고 싶지 않을 거예요. 객체타운에 도착하면 우리에게 엽서라도 보내주세요.



6. 웹 페이지와 대화를 : DOM과 함께 춤을

지금까지 자바스크립트에 대해 많은 걸 공부했습니다. 사실 초짜에서 스크립터 수준까지는 되었죠. 어쩌면

프로그래머라고 부를 수도 있을지 모르겠습니다. 그런데 중요한 게 빠졌네요. 자바스크립트 기술을 제대로

활용하려면 이 코드가 들어 있는 웹 페이지와 대화하는 방법을 알아야 해요. 웹 페이지와 대화하는 방법을 알아야만 로딩된 후에 사용자의 요구에 응답해 반응할 수는 있는, 동적인 웹 페이지를 만들 수 있습니다. 그러면 어떻게 해야 웹 페이지와 대화할 수 있을까요? 문서 객체 모델(Document Object Model, DOM)을 사용해야 합니다. 이번 장에서는 DOM을 분해해보고, DOM과 자바스크립트를 이용해 웹 페이지에 새로운 기법을 적용해보겠습니다.



7. 형, 일치, 변환 기타 등등 : 형에 대한 심각한 이야기들

이제 형에 대해 신중할 때가 되었습니다. 자바스크립트는 언어 자체를 상세히 배우지 않고도 많은 것을 할 수 있다는 장점이 있습니다. 그렇지만 진짜로 언어를 정복하고, 승진하고, 인생일대에 원하는 것을 해내려면 형을 멋지게 활용할 수 있어야 합니다. 한참 앞에서 자바스크립트에 대해 했던 말이 기억나나요? 자바스크립트가 부유하게 대학교에서 상호 검토를 받고 정의된 언어가 아니라는 걸 말이죠. 사실입니다. 그렇지만 학교를 그만두었다고 스티브 잡스와 빌 게이츠가 실패한 것은 아닙니다. 자바스크립트도 마찬가지입니다. 실제로 자바스크립트는… 흐음… 정교한 형 체계를 갖고 있지 않습니다. 사용하다 보면 특이성도 보입니다. 그러나 걱정할 필요는 없어요. 이번 장에서는 형에 대한 모든 것을 확실히 정리해서 형 때문에 발생할 수 있는 창피한 문제들을 겪지 않게 만들어줄 거예요.



8. 모두 한데 모으기 : 앱 만들기

공구 벨트를 차세요. 그리고 이 공구 벨트에는 새로 배운 코딩 기술, DOM과 약간의 HTML 및 CSS에 대한 지식을 담으세요. 이번 장에서는 지금까지 배운 지식을 총동원해 처음으로 진정한 웹 애플리케이션을 만들어보겠습니다. 전함 한 척이 덜렁 한 줄에 숨는 그런 시시한 게임은 이제 끝이에요. 이번 장에서는 멋지고 큰 게임판, 여러 척의 배, 사용자 입력을 웹 페이지에 바로 입력하는 완전히 새로운 경험을 할 거예요. 먼저 HTML로 게임 페이지 구조를 만들고, CSS로 시각적인 스타일을 지정하고, 자바스크립트로 게임 행동을 구현하는 코드를 작성합니다. 이번 장에서는 약간 복잡한 코드를 구현하는데, 나중에 여러분이 실제로 개발할 때 탄탄한 기반이 될 거예요. 자, 이제 마음의 각오를 단단히 하고 출발할게요.



9. 비동기 코딩 : 이벤트 처리

이번 장에서는 자바스크립트의 전혀 새로운 측면을 보게 될 거예요. 지금까지 여러분은 그저 위에서 아래로 내려가면서 실행하는 코드를 작성해왔습니다. 사실 함수, 객체, 메서드 때문에 완전히 순서대로 실행되는 것은 아니지만 코드는 대부분 위에서 아래로 내려가는 길을 따라갑니다. 이 책의 중반이 지난 이제서야 이 사실을 얘기해서 죄송하지만, 그런 것은 자바스크립트 코드를 작성하는 방식이 아닙니다. 오히려 자바스크립트 대부분은 이벤트에 응답하도록 작성합니다. 어떤 이벤트가 있냐고요? 흐음… 사용자가 페이지를 클릭하는 것, 네트워크를 통해 도착한 데이터, 설정한 시간이 지난 타이머, DOM에서 발생한 변화 등이 이벤트가 됩니다. 사실 브라우저에서는 내부적으로 각종 이벤트가 내내 발생하고 있습니다. 이번 장에서는 자바스크립트 코딩하는 방식에 대해 다시 생각해보고 이벤트에 응답하는 코드를 작성하는 방법과 이유에 대해 설명합니다.



10. 일급 함수 : 해방된 함수

함수를 안다는 건 정말 멋진 일이에요. 예술이나 기술, 학문에서는 최고의 대가와 중급자를 한눈에 구분할 수

있는 어떤 핵심 원리가 있어요. 자바스크립트에서는 함수를 제대로 이해하고 있느냐가 구분하는 기준이 됩니다. 함수는 자바스크립트의 근간을 이루고 있으며, 함수에 대한 고급 지식과 활용에 의존해 코드를 설계하고 구성하는 기법들이 많습니다. 이런 수준까지 함수를 이해하는 과정은 재미있기도 하지만 때로는 상당히 머리 아픕니다. 자, 이제 준비를 단단히 하세요… 이번 장에서는 챨리와 초콜릿 팩토리에 나오는 윌리 웡카가 초콜릿 공장을 안내하는 장면이 생각날 거예요. 자바스크립트 함수를 더 많이 배워갈수록 거칠고, 기괴하고, 멋진 것들을 보게 될 겁니다.



11. 익명 함수, 범위, 클로저 : 고급 함수

지금까지 함수의 진정한 능력을 보여줬지만 아직 배워야 할 게 남았어요. 이번 장에서는 함수의 진면목을

보게 될 겁니다. 어떻게 함수를 제대로 다루는지 설명할게요. 내용이 길지는 않지만 많은 내용이 들어 있어요. 이번 장을 마칠 때 쯤이면 여러분이 생각했던 것보다 자바스크립트 표현력이 훨씬 좋아질 겁니다. 게다가 이번 장에서는 함수에 관련된 숙어적인 코드 표현도 설명하기 때문에 여러분의 동료가 작업한 코드를 읽거나 오픈 소스 자바스크립트 라이브러리를 살펴볼 수도 있을 거예요. 그리고 지금까지 익명 함수나 클로저에 대해 들어보지 못했더라도 이번 장에서 모두 설명합니다.



12. 고급 객체 생성 : 객체 만들기

지금까지는 객체를 수작업으로 하나씩 만들었습니다. 객체를 하나하나 만들기 위해 객체 리터럴을 이용해 속성을 모두 지정했습니다. 프로그램이 크지 않다면 이 방법도 나쁘지 않지만 제대로 된 코드에서는 더 좋은 방법이 필요합니다. 동일한 구조의 객체가 많이 필요할 때에는 객체 생성자를 사용합니다. 객체 생성자를 이용하면 객체를 더욱 쉽게 만들 수 있고, 동일한 설계도에 따르는 객체를 만들 수 있습니다. 동일한 설계도에 따라 만든 객체들은 모두 동일한 속성과 메서드를 갖고 있습니다. 그리고 생성자를 이용하면 동일한 코드를 반복할 때 발생하는 오류 없이, 객체 코드를 더욱 간결하게 만들 수 있어요. 그러면 이제 시작해볼까요? 이번 장을 마치면 여러분은 객체지향 개념을 탄탄히 갖춘 개발자처럼 생성자에 대해 얘기할 수 있게 됩니다.



13. 프로토타입 사용하기 : 초강력 객체

객체를 생성하는 건 시작일 뿐입니다. 이제 객체를 강화시킬 때가 되었네요. 객체들 간의 관계를 정의하고 코드를 공유할 수 있는 더 많은 방법이 필요합니다. 그리고 기존 객체를 확장해 개선할 방법도 필요합니다. 즉, 도구가 더 많이 필요합니다. 이번 장에서는 자바스크립트가 갖고 있는 강력한 객체 모델에 대해 알아볼 겁니다. 이 객체 모델은 지금까지의 객체지향 모델과 약간 다릅니다. 자바스크립트는 전형적인 클래스 기반의 객체지향 시스템이 아니라 더욱 강력한 프로토타입 모델을 채택하고 있습니다. 프로토타입을 통해 객체는 다른 객체의 행동을 상속하고 확장할 수 있습니다. 객체를 확장해서 뭐하냐고요? 잠시 후에 알아볼게요. 자, 이제 시작할까요?...



14. 부록 : (지금까지 설명하지 않은) 못다한 이야기들

지금까지 아주 많은 분야에 대해 다뤘고 책이 거의 끝나갑니다. 여러분이 그리울 겁니다. 그렇지만 여러분이

실제 자바스크립트 프로그래밍 세계로 떠나기 전에 약간의 준비를 도와주지 않으면 후회할 것 같네요. 이렇게 한정된 지면에 여러분이 알아야 할 것들을 모두 집어넣을 수는 없을 겁니다. 사실 처음에는 이 책의 앞에서 설명하지 않은 것들 중 여러분이 자바스크립트 프로그래밍에 대해 알아야 할 것을 모두 넣었었습니다. 폰트 크기를 0.00004로 줄여야 했습니다. 모든 내용이 다 들어 있더라도 이런 크기의 글자를

읽을 수 있는 사람은 없겠죠. 그래서 거의 모든 것을 버리고 가장 중요한 10가지만 추렸습니다. 이 부록이 정말 이 책의 끝입니다. 물론 찾아보기는 빼고요(찾아보기도 꼭 살펴보세요!).