최근들어 실무에서는 바닐라 자바스크립트(Vanilla JS) 를 많이 사용한다고 알고 있습니다. 이유는 웹 프론트엔드 프레임워크 종류가 다양 하다 보니 호환성 및 기능모듈간의 연결 등의 다양한 문제가 발생할 가능성이 높아 유지보수 비용이 높아지기 때문 입니다. 차라리 순수한 자바스크립트를 활용하여 프로젝트를 진행하는 것이 다수가 작업을 하고, 향후 유지보수에 더 유리하다는 인식 때문으로 알고 있습니다.

이번에 리뷰하게 된 도서가 더 나은 웹 개발을 위한 가이드 (한빛출판사) 입니다. 이 책이 추구하는 내용이 Angular, React.js, Fluter, Vue.js 등의 Single Page Application 으로 프론트엔드 작업을 시작 개발자에게 HTML, CSS, JavaScript 의 중급, 고급 개념 과 구체적인 사례들 을 통해, 순수한 HTML, CSS, JavaScript 의 개념과 역활에 대해 이해할 수 있도록 돕는 책이었습니다.

이 책은 HTML, CSS, JavaScript 에 대한 기초적인 개념은 이해를 한 상태에서 읽기에 좋은 책이었습니다. 때문에 이 책을 읽으면서 생각이 난 비슷한 성격의 도서가 있었는데 인사이드 자바스크립트 | 송형주, 고현준 공저 | 한빛미디어 | 2017년 03월 10일 였습니다. 인사이드 도서는 내용도 알차서 GitHub 등에 정리된 문서 들도 많을만큼 개발자 들에게 검증된 중급 도서 입니다.

인사이드 는 좋은 책이긴 하지만 출시된 이후, ES6 등 자바스크립트 생태계도 진화해서 그 내용들이 반영되었고, HTML, CSS 와 관련하여 보다 유기적인 설명들이 더 추가 되어있는 만큼, 오히려 이번에 리뷰를 한 더 나은 웹개발을 위한 가이드 를 보시길 추천 합니다.

375 페이지 임에도 책의 두께는 상당히 얇아서, 개발자 책상 위에 두고서 궁금했던 부분들 반복해서 찾아보기 좋도록 구성되어 있었습니다.

1장, 2장 웹은 어디에나 있다, 웹 개발을 위한 라이프 사이클

개발 작업과정에 대해서 설명을 하고 있었습니다. 실무에 대한 경험이 부족한 독자들과 함께 실무에서 경험했던 팁들을 전달하는 내용 입니다.

3장 더 나은 HTML 개발

본격적인 개발언어와 관련하여 다루기 시작하는 챕터 입니다. HTML 태그들의 기본개념 보다는, 구체적인 웹서비스를 동작하는데 있어서 각각의 역활들과 함께, 각 언어 기본서 에서는 다루지 않고 넘어가는 고급 속성 들에 대해서 구체적인 역활과 내용들을 다루고 있었습니다.

실제 작업을 하면서, 내가 원하는 효과 및 기능들이 잘 구현이 안 되어서 어려움이 있었던 분들, 그리고 웹서비스를 동작하는데 보다 효율적인 서비스 운영을 위해 추가될 내용이 무었이 있는지 궁금한 분들에게 도움이 되는 내용들이 많이 담겨 있었습니다.

4장 더 나은 CSS 개발

CSS 레이아웃을 작업하다 보면 flex-box, CSS grid 의 차이점 및 비교들이 헷갈리는 부분이 많은데, 이러한 부분에 대해, 다양한 칼라를 활용하여 설명을 하고 있습니다.

반응형 서비스 페이지를 작업하는데 사용하는 Media Query 와 관련해서도, 해당 개념들과 기초적인 기능 뿐만이 아니라 HTML Viweport 즉 사용자가 어떤 방향으로 기기를 사용하고 있는지를 구분 하여 스타일을 다르게 적용하는 방법 등의 내용들로, 관련 기본 개념을 설명하는 도서등에서 다루는 내용보다 더 깊이있는 내용들을 다루고 있었습니다.

5장 더 나은 자바스크립트 개발

자바스크립트는 HTML, CSS 에 비해서 워낙 다루고 있는 이슈 및 사용팁등이 더 많기 때문에 난이도가 더 놓은 내용들을 다루고 있었습니다. ES2022 등의 최신 문법들과 함께 비동기 객체인 Promise 그리고, 클래스와 관련하여 파이썬의 클래스 메서드 기능을 하는 ProtoType 등의 고급 개념에 대해서 집중적으로 다루고 있습니다.

개인적으로 흥미있게 읽었던 부분은 Proxy 객체로 구현하는 프레임워크 부분이었습니다. 프론트엔드 작업을 할 때 React.js 를 사용하고 있어서 그런지 양방향 데이터 바인딩 구현하기 부분은 HTML 과 단순한 몇줄의 JavaScript 로 구현이 가능하여 신기하게 살펴본 내용 이었습니다.

6장 타입스크립트 : 자바스크립트에 타입을 더하다

이번 챕터가 앞의 HTML, CSS, JavaScript 부분과 비교해서 가장 얇았는데, 그 이유는 부제서도 다루고 있듯이 자바스크립트에 타입을 더하다 만큼의 내용을 다루고 있었습니다. 아무래도 TypeScript 부분은 점점 중요도가 높아지고 있는 만큼 추후 개정판을 통해서 보강이 될 것으로 기대가 되는 부분이었습니다.

나머지 챕터들은 해당 내용들에 대해서 간단히 설명을 하는 정도로 다루고 있었고, 주요 핵심 내용은 3장 ~ 6장 의 내용들로 꼼꼼히 살펴볼 수록 놓치던 부분을 많이 발견할 수 있을 것으로 생각 됩니다.

총평

가장 큰 장점 첫째로 쉽게 쓰여진 책 입니다. HTML,CSS,자바스크립트 를 모두 다루다 보니 초보자가 읽기에도 내용들이 유기적으로 연결되며 이해하기 좋았습니다. 대신 많은 내용들을 다루다 보니 다양한 예시 및 설명보단 짧게 압축해서 비교 및 설명하는 부분이 많아 한번 보면 내용들을 놓치기 쉬워 보였습니다.

개인적으로는 전체적으로 다루는 내용들을 훝어 보면서, 궁금했거나 놓친 부분이 많아 보이는 부분에 포스트잇으로 표시를 하며 빠르게 본 뒤에, 각각의 표시한 내용을 출퇴근 시간 등에 꼼꼼히 읽어보시는 방법을 추천 합니다.

조금 더 익숙해지신 분들이라면 저자가 강조한 3~6장 각각의 장을 반복해서 읽어보시면 발견하는 부분이 더 많을 것으로 생각 됩니다.

추가로 바라는 점

한가지 보완되었으면 하는 내용은 지난주에 리뷰했던 백엔드 개발자를 위한 핸즈온 장고 (2023) 도서처럼, 각 장의 마지막 페이지에서 해당 장에서 다뤘던 고급 개념을 나열 또는 요약설명을 덧붙인다면, 독자들도 놓쳤던 부분이 이렇게나 많았구나 하는 생각이 들면서 다시 반복할 계기가 될 수 있고, 책이 다루고 있는 깊이있는 개념들을 모두 발견할 수 있는 힌트가 될 수 있을 것으로 생각 되었습니다.

※ 본 리뷰는 IT 현업개발자가, 한빛미디어 책을 제공받아 작성한 서평입니다.