『모던 웹 디자인을 위한 HTML5 + CSS3 입문』의 개정 3판을 내게 되었습니다. 책 제목은 『모던 웹을
위한 HTML5 + CSS3 바이블』로 바뀌었습니다.
2011년에 이 책을 처음 집필했을 때는 구 버전 인터넷 익스플로러를 절대 놓을 수 없는 시기였기에, 구 버전 인터넷 익스플로러와 관련된 이야기를 부록으로까지 굉장히 많이 다루었습니다. 하지만 2019년을 기준으로 인터넷 익스플로러 6의 PNG 관련 문제, 인터넷 익스플로러 8 이하에서 사용하는 스타 핵 등은 사용 비율이 많이 줄었기에 해당 내용은 제거했습니다.
이번 3판에서는 내용 업데이트와 함께 처음 HTML을 접하는 분들이 책을 조금 더 쉽게 읽을 수 있도록 많은 부분을 업데이트했습니다. 예를 들어 이전 판까지는 벤더 프리픽스 처리를 세세하게 해주어야 했기 때문에, Prefix Free 플러그인의 사용을 위해 Visual Studio라는 거대한 프로그램을 설치하고, 내장되어 제공되는 서버를 사용해 HTML 파일을 실행했습니다. 물론 이후에는 도움이 될 수 있는 내용이지만, 처음 HTML을 접하는 분들에게는 이 설정들이 힘들었을 것 같습니다. 그러나 이번 3판에서는 더 이상 Prefix Free 플러그인을 사용하지 않기 때문에 Visual Studio와 같은 무거운 프로그램을 설치하지 않아도 됩니다(가벼운 Visual Studio Code를 사용합니다).
책을 개정할 수 있게 도와주신 이미향 님과 송성근 님께 감사의 말씀을 드립니다. 1판, 2판을 진행해주신 이전 담당자 분께도 모두 감사의 말씀 드립니다. 또한 책을 봐주시는 모든 독자 분께도 감사의 말씀을 드립니다.
우선, 서점에서 이 책을 펴보고 있거나 이미 구매해보고 있는 모든 분께 감사의 말을 드립니다.
서문부터 이런 말을 하는 것은 조금 그렇지만 자바스크립트는 개발자들이 가장 무시하는 언어 중 하나입니다. 프로그래밍 언어로 별로 취급도 잘 안 해주는 관계로 "통합 개발 환경은 무슨 그냥 글자 편집기만 쓰면 되지"라는 말도 심심치 않게 나옵니다. 적어도 새로운 웹 표준인 HTML5가 등장하기 전까지는 그랬습니다.
현재를 새로운 웹 표준 HTML5가 도래하는 시대라고 합니다. 도래는 어떤 시기나 기회가 닥쳐오는 상태를 뜻하는 말입니다. 즉, HTML5가 너무 멀리 있는 것도 아니고 그렇다고 너무 가까이에 있는 것도 아닙니다. 2007년부터 HTML5의 권고안이 만들어지기 시작했고, 2010년 초부터 웹 브라우저가 HTML5를 지원하기 시작했습니다. 2012년 3월에 정식 권고안이 나올 예정입니다.
HTML5는 정말 빠르게 변화하는 분야입니다. 2011년 한 해 동안 인터넷 익스플로러 9이 나왔고 파이어폭스는 세 번이나 버전을 변경했으며 크롬도 버전을 일곱 번이나 변경했습니다. 어도비에서는 HTML5로 인해 플래시에 위협을 느껴 HTML5 애니메이션을 만들 수 있는 프로그램 Edge를 발표했고, 마이크로소프트는 2011년에 출시하는 Windows 8부터는 HTML5를 사용해서 애플리케이션을 제작할 수 있다고 공식 발표까지 했습니다.
자바스크립트 책인데 왜 HTML5 얘기를 하냐고요? HTML5를 구성하는 프로그래밍 언어가 바로 자바스크립트이기 때문입니다. 물론, 현재도 스마트폰이나 태블릿 PC의 애플리케이션을 자바스크립트로 만들 수도 있지만 한정돼 있습니다. 하지만, 앞으로는 자바스크립트로 플래시 애니메이션이나 윈도우 애플리케이션도 만들 수 있을 것입니다.
이 책은 이러한 클라이언트 자바스크립트와 관련된 거의 모든 내용을 다루는 책입니다. 사실 표준 자바스크립트 프레임워크로 채택된 jQuery를 함께 다룹니다. 거기서 한 걸음 더 나아가 현대적 웹 애플리케이션을 개발하기 위한 Ajax와 jQuery 플러그인까지 소개합니다. 자바스크립트는 결코 무시해서는 안 되는 언어입니다. C++, 자바, C# 같은 높은 수준의 프로그래밍 언어의 관점에서 자바스크립트를 살펴보겠습니다.
2017년 4월, 『모던 웹을 위한 JavaScript + jQuery 입문(3판)』으로 개정을 하게 되었습니다. 이번 개정 과정에서는 많은 분들께서 메일과 쪽지로 "이렇게 개정해주세요!"라는 의견을 많이 주셨습니다. 해당 내용들은 대부분 반영했으나, 일부 반영하지 않은 것도 있습니다. 이에 대해 설명하겠습니다.
<2016년 10월에 네이버에서 공개한 네이버 접속 웹 브라우저 비율>
네이버에서 2016년 10월에 공개한 네이버에 접속하는 웹 브라우저의 종류를 살펴보면 IE8, IE9, IE10, IE11의 점유율이 75%(IE11이 44%) 정도 됩니다. 또한, 국내 모바일 브라우저 점유율 1위는 네이버 애플리케이션입니다. 스마트폰 애플리케이션 내부에 있는 웹 브라우저는 대부분 최신 버전의 크롬 또는 사파리가 아닙니다. 때문에 최신 기능을 사용할 수 없는 경우가 많습니다. 그래서 이를 기준으로 책의 개정 방향을 정하게 되었습니다.
<ECMAScript 6를 '조금 더 나아가기'로 담았습니다>
위의 통계로 인해 2017년 4월을 기준으로 ES6와 ES7의 기능을 활용해 웹 페이지를 만들 경우 문제가 발생할 수 있습니다. 물론 보완할 수 있는 트랜스파일 도구들이 있습니다. 하지만 모든 개발자들이 완전히 알아야 하는 내용이라고 말할 수는 없습니다. 그래서 이번 3판에서는 ES6 와 관련된 내용을 본문에 넣지 않고, 장의 후반부에 '조금 더 나아가기'로 추가했습니다. 조금 더 나아가기에 추가한 ES6의 범위는 '현재 시점에서 활용할 수 있는 범위'로 한정했습니다. 이러한 범위는 ES6를 광범위하게 활용하고 있는 에어비앤비의 ES6 개발 스타일 가이드 (https://github.com/airbnb/javascript)를 참고했습니다. 예를 들어, 에어비앤비는 2017년 4월 시점에 제너레이터 기능을 트랜스파일 도구도 정확하게 변환해주지 못한다는 이유로 사용하지 말자고 가이드를 잡았습니다. 또한 이터레이터도 부작 용이 더 많다는 이유로 사용하지 말자고 가이드를 잡았습니다. 따라서 이러한 기능들은 이번 3 판에서 제외했습니다. 해당 도서를 2년에서 3년 주기로 계속해서 개정하고 있으므로, 2018년 또는 2019년에는 또 해당 시점에 맞게 ES6와 ES7의 기능을 추가하도록 하겠습니다.
<ECMAScript 5를 본문에 흡수했습니다>
1판에서 장의 후반부에서 다뤘던 ES5의 기능은 이제 90% 이상의 웹 브라우저에서 사용 가능 한 상태가 되었습니다. 이는 국내 데스크톱 웹 브라우저를 기준으로 한 통계이므로, 스마트폰 까지 합한다면 95% 이상이 될 것입니다. 따라서 '배열의 메서드', 'ECMAScript 5 배열의 메서드' 등으로 분리했던 것을 합쳤습니다.
<jQuery는 유지합니다>
최근 꿈에서 『모던 웹을 위한 JavaScript 48판』이라는 책을 보고 일어나서 'jQuery를 빼야 하나?'하는 생각을 했었습니다. 1판을 집필하던 2010년 시점에는 "모두가 jQuery를 사용하기 위해 JavaScript를 사용했다"라고 말할 수 있을 정도로 모두가 jQuery를 사용하고, jQuery 라이브러리를 활용했습니다. 하지만 2017년 시점에서는 다양한 라이브러리들이 나와서 "jQuery는 너무 오래된 과거의 유물 아니야?"라고 말하는 사람들이 많아졌습니다. 하지만 2010년에 책을 집필하던 시점과 2017년 현재 시점을 기준으로 전 세계 상위 1만 개의 사이트에서 jQuery를 사용하는 비율은 크게 변화하지 않았습니다. 또한, jQuery는 기본 지식을 익히기 위한 도구로써 아직도 좋은 중간 과정이라고 할 수 있습니다.
<jQuery 플러그인과 관련된 내용을 축소했습니다>
다만 최근에는 jQuery로 기본기를 익힌 뒤에 다른 대규모 프론트엔드 웹 프레임워크 등을 활 용하는 일이 많아졌습니다. 따라서 기존 1판과 2판의 파트4에서 다뤘던 jQuery 플러그인과 관련된 내용을 대폭 축소했습니다. 파트4가 축소되면서 책의 전체적인 두께가 이전 판보다 약간 감소되었습니다.
변경 사항과 그에 대한 이유는 이 정도로 정리하면 될 것 같습니다. 3판까지 나올 수 있게 6년 동안 책을 구매해주신 모든 분들께 감사 드립니다. 또한, 이번 3판 개정을 담당해주신 이중민 과장님과 이미향 과장님께도 감사의 말씀을 드립니다.
『모던 웹을 위한 JavaScript + jQuery 입문』(한빛미디어, 2011)에 이어 두 번째 모던 웹 시리즈인 『모던 웹을 위한 Node.js 프로그래밍』도 출간하게 되었습니다. 특별히 이어지는 내용은 아니므로 이전 책을 보지 않아도 상관없지만 자바스크립트와 관련된 내용은 알고 있어야 이 책을 읽을 수 있다는 사실을 먼저 말씀 드립니다.
"자바스크립트를 사용해 대규모 네트워크 프로그램을 개발한다."
기존 사고 방식을 놓고 살펴보면 굉장히 웃기는 일입니다. 웹 브라우저에서만 작동하고 느리다고 알려진 자바스크립트를 사용해 서버를 개발한다고 하면 불가능한 일처럼 들릴지도 모릅니다. 그렇지만 그러한 일이 실제로 일어났습니다.
2008년 8월 구글은 자바스크립트 엔진을 탑재한 최초의 웹 브라우저, 크롬 베타 버전을 발표합니다. 크롬에 탑재된 자바스크립트 엔진 V8은 자바스크립트 코드를 기계어로 바꾸어 실행하는 자바스크립트 컴파일 엔진입니다. 이때부터 자바스크립트 속도 혁명이 시작되었습니다. 자바스크립트로 충분히 "웹 애플리케이션"을 구현할 수 있다는 인식이 시작된 것은 물론 이내 자바스크립트 속도가 더 빨라지자 "애플리케이션"도 충분히 구현할 수 있다는 인식도 시작되었습니다. 이때부터 자바스크립트는 웹 브라우저를 벗어났고 데이터베이스 관리는 물론 서버 개발 환경도 자바스크립트가 접근할 수 있는 영역이 되었습니다.
웹 브라우저를 벗어난 자바스크립트가 활발하게 성장하고 있는 곳이 바로 이 책에서 다루는 Node.js입니다. Node.js는 대규모 네트워크 프로그램을 개발하기 위해 설계된 서버 개발 환경입니다. 자바스크립트 서버 개발 환경이라고 하니 자바스크립트로 만들어졌다고 생각할 수 있지만 Node.js는 C++로 개발된 V8 자바스크립트 엔진을 기반으로 C++ 코드 8000줄과 자바스크립트 코드 2000줄로 시작했습니다.
Node.js는 아직 1.0 버전도 나오지 않은 신생 개발 환경이지만 많은 기업이 채택해서 사용하고 있고 네트워크 프로그램을 개발하는 것에서 벗어나 데스크톱 애플리케이션이나 게임을 개발할 때도 사용되고 있습니다. 이 책은 Node.js가 지닌 이러한 많은 역할 중 네트워크 개발과 관련된 부분을 다룹니다. 조금 거창하지만 이 책을 정의한다면 다음과 같이 할 수 있습니다.
"자바스크립트에 의한, 자바스크립트를 위한, 자바스크립트에 대한 책"
이 책은 클라이언트 웹 페이지는 물론 웹 서버, 소켓 서버, 데이터베이스까지 자바스크립트를 사용해 개발하는 방법을 다룹니다.
마지막으로 책을 집필할 수 있게 도와주신 한빛미디어 한동훈 대리님과 책을 집필하는 동안 틈틈이 여러 운영체제에서 예제를 실행하고 검토한 윤하린 님과 임윤경 님, 미완성된 책으로 함께 스터디를 진행하며 피드백한 강윤경, 김인수, 류태호, 백선주, 서하림, 이지연, 임승우 님과 책 교정과 편집을 맡은 모든 분께 감사 인사를 드립니다
jQuery Mobile은 모바일 웹 프레임워크 중에 가장 빨리 발전하고 있는 프레임워크입니다. 이 책의 원서가 알파 버전에 맞추어 출간된 것이 2011년 7월이었는데 2011년 11월까지 수많은 판 올림을 거치며 정식 버전이 출시되었습니다. 정식 버전이 나오면서 모든 효과가 굉장히 빨라졌고 테마를 쉽게 지정할 수 있는 Theme Roller가 추가되었습니다. 이 책은 정식 버전에 맞게 출시한 개정판입니다.
jQuery Mobile이 무엇인지 설명한 내용은 서문에 써있으므로 “jQuery Mobile이 어렵지 않으니 시작해보세요.”라는 언급만 하겠습니다. 제가 jQuery Mobile을 처음 접했을 때의 첫 느낌은 굉장함이라기보다 허무함이었습니다. 첫 예제를 작성해보고 입에서 나온 한 마디, “뭐 이렇게 쉬워”
아이폰 애플리케이션이나 안드로이드 애플리케이션을 개발해보던 사람이라면 누구나 jQuery Mobile을 접했을 때에 이러한 느낌을 받을 것입니다. 데이터 역할 속성(data-role)만 입력하면 모든 것이 자동으로 완성됩니다. jQuery Mobile을 사용하면 HTML을 처음 공부하고 있는 독자라도 쉽게 모바일 웹을 만들 수 있습니다.
“Write Less Do More”
“적게 쓰고 더 많은 일을 수행하라.” 이는 jQuery의 표어이며 jQuery Mobile도 이를 물려받았습니다. jQuery 뒤에 Mobile이라는 글자가 붙어도 전혀 어렵지 않습니다. 부담 갖지 말고 jQuery Mobile을 시작해보세요. 잊을 뻔 했는데 스크린샷 작성에 도움을 준 강혜영, 신동현, 이상기 님 고맙습니다. - 감수자 서문
저는 프로그래밍 대회의 관점이 아니라 조금 다른 관점에서 이 책을 살펴보겠습니다. 모던 웹을 위한 시리즈를 집필하면서 가장 많이 받은 질문은 다음과 같습니다.
“a 상황과 b 상황을 구분하려면 어떻게 해야 할까요?”
물론 답변은 간단하게 “조건문을 사용하세요”였습니다. 어떻게 보면 굉장히 황당하게 느껴질 수도 있습니다. 왜 계속 이러한 질문을 하는 것인지 궁금해서 질문자의 프로그래밍 공부 단계를 살펴보았습니다. 대부분 웹 개발과 스마트폰 애플리케이션 개발이 뜨면서 기본적인 프로그래밍 지식을 무시한 채로 프로그래밍 언어의 규정과 프레임워크의 사용법만 알고 무언가를 만들려는 사람이었습니다.
물론 이것이 나쁘다는 것은 아닙니다. 하지만 이렇게 공부한 사람은 웹 개발 서적과 스마트폰 애플리케이션 개발 서적을 보고 모든 예제를 따라서 진행한 후에 직접 무언가를 만들어보려 할 때 굉장히 사소한 것에 부딪치게 됩니다. 예를 들어 “특정한 지역의 치킨 집을 중복 없이 임의로 10개 추천해주는 스마트폰 애플리케이션”을 만든다고 합시다. 치킨 집과 관련된 데이터를 가져오는 것과 데이터를 사용자에게 보여주는 부분 자체는 “파싱”과 “리스트뷰”로 스마트폰 개발 서적에 나와 있을 것입니다.
하지만 “중복 없이 임의로 10개”를 구현하려면 어떤 방법을 사용해야 할까요? 이러한 것은 개발자가 스스로 생각해서 알고리즘을 만들어야 합니다. 이러한 알고리즘이 곧바로 머리에 떠오르지 않는다면 알고리즘과 관련된 프로그래밍 지식이 부족한 것입니다. 물론 너무 깊은 알고리즘까지 공부할 필요는 없습니다. 고등학교 때 미분과 적분을 배운 사람이라면 한 번쯤 “그런데 실생활에서 사용할 일이 전혀 없잖아?”라고 생각한 적이 있을 것입니다. 알고리즘도 너무 깊게 들어가면 일반적인 상황에서 전혀 사용할 일이 없는 것이 많습니다.
이 책은 알고리즘 책이지만 실용적인 부분을 자세하게 다룹니다. 따라서 알고리즘을 전문적으로 공부할 사람보다는 TopCoder 프로그래밍 대회를 준비하는 사람과 기본적인 알고리즘 개발 능력을 향상하고 싶은 사람에게 적합합니다.
번역할 수 있게 도와주신 한동훈 과장님과 책의 진행을 도와주신 박진희님과 안윤경님께 감사의 말씀을 드립니다.
