기초부터 완성까지, 프런트엔드

기초부터 완성까지, 프런트엔드 - 개발부터 테스트까지, 이론과 예제로 배우는 프런트엔드
이재성.한정 지음 / 비제이퍼블릭 / 2021년 11월

저자의 말처럼 프런트엔드는 30년이라는 긴 역사를 가지고 있지만, 그 중요성이 부각된 것은 불과 15년이 채 되지 않는다. 개발 도구만도 엄청나게 다양한데, 다양한 프로젝트와 기본기를 다져야 프레임 워크를 더 쉽게 파악할 수 있기 때문에 기본기를 미리 터득하는 것은 아주 당연한 부분이다.  

HTML, CSS, 자바스크립트의 기본기를 다잡기 위해 책의 초반 부분은 기초를 다룬다.  (HTML을 공부하다 중도에 포기해서, 책의 난이도가 높을 거라는 생각을 했지만, HTML 요소 분류((인라인, 블록))와 문서 골격과 CSS에서의 선택자 등 예제를 기본기부터 간단히 설명해주고 있어 접근하는 데 어렵지 않게 느껴졌다.)

프런트 엔드는 UI를 가지고 동작하고, 백엔드는 프로세스 형태 만으로 존재한다. 그러니까 Front-end는 웹 프로그래밍의 한 분야이다. 그 반대말은 백엔드라고 한다.

-나무위키-
 프론트엔드 개발자는 프론트엔드, 백엔드의 완전한 분리 구조를 지향하는 업무 스타일의 개발 방식으로 프론트단의 비지니스 로직과 사용자 영역의 개발을 담당하는 사람이라고 정의한다. 이와 다른 방식의 업무 스타일 직군으로는 웹퍼블리셔(UI 개발)와 개발자(서버 개발자)의 업무 분리 방식이 있다. 이 경우는 주로 서버사이드가 클라이언트를 감싸는 방식이다. MVC로 치면 View 부분에 해당하는 영역을 맡는다.

책은 자바스크립트의 프로토 타입과 스코프를 이해하기 전 기초 부분인 타입 변환과 함수 변수 등을 4장에 걸쳐 설명한다. 이 후 심화 부분은 최상위 프로토 타입과 생성자 빌려쓰기, 렉시컬 스코프 등 프로그래밍 언어의 동작 기반 테스트와 중첩 예시를 통해 설명한다. (기초 부분이 부족하다면 여러 번 반복한 후, 심화를 확인해야 한다.) 

10장부터는 지금까지 설명했던 예시를 토대로 뉴스 게시판을 만드는데, 헤더 영역과 메인 영역, 반응형 레이아웃 적용 등의 미디어 쿼리를 사용한 조회 데이터를 보여준다. 이에 따른 flex-basis 프로퍼티의 사용은 flex-container 내에서 너비와 높이를 고정할 때 우선 시 되는 부분이라 참고해야 할 사항이었다. (모든 설명에서 NOTE 부분으로 TIP을 제공한다.)

디버깅의 크롬 개발자 도구는 널리 쓰이는 브라우저의 서비스 환경을 쉽게 확인할 수 있어서 특히 더 좋았던 내용이다. 최종 결과 값과 개발자 도구 활용은 모바일 환경에서 어떻게 표현되는 지까지 확인할 수 있다. 

[기초부터 완성까지, 프런트엔드]는 HTML과 CSS를 시작으로 프런트엔드의 테스트와 성능 개선까지 확인할 수 있는 몇 안되는 방대한 입문서였다. 수 많은 예제가 함께 있어 프런트엔드를 배울 수 있는 양질의 책이라 입문서 책을 찾고 있다면 꼭 추천하고 싶다.