이 책에서는 프런트엔드 개발의 정의와 프런트엔드 개발에 유용한 도구를 소개하고 예제를 중심으로 한 개발 방법을 설명한다. 프런트엔드 개발이 무엇이고, 그 범위가 어디까지인지를 설명하며, 프런트엔드 개발에 필요한 도구뿐만 아니라 품질 관리 도구도 자세하게 알려준다. 또한 조직도 트리 예제를 중심으로 명세 작성과 마크업, 자바스크립트 개발 등 프런트엔드 개발의 시작부터 끝까지를 쉽고 자세하게 설명한다. 이 책에는 네이버에서 사용하는 프런트엔드 개발 프로세스와 시행착오에서 얻은 소중한 경험이 녹아 있다. 이 책에서 다루는 내용 - 프런트엔드 개발 정의와 범위 소개 - 프런트엔드 개발 도구 소개: 웹스톰, JSLint, 카르마, Qunit, Less, Emmet, Bower, JSDoc3, Grunt, Uglify.js, 크롬 개발자 도구 - 조직도 트리 예제로 명세 작성, 마크업 개발, 자바스크립트 개발

[1부] 프런트엔드 개발과 도구 소개 01장 프런트엔드 개발의 이해 프런트엔드 개발이란 - 정의 - 범위 프런트엔드 개발 현황 - 미성숙한 개발 프로세스 - 프런트엔드 지식이 부족한 서버 개발자 - 백엔드와 프런트엔드의 개발 의존성 프런트엔드 개발 프로세스 - 새로운 프로젝트 시작 - 프런트엔드 개발 시작 - 프런트엔드 개발 산출물 배포 정리 02장 IDE와 에디터 유명한 에디터 - 이클립스 - 앱타나 스튜디오 - 서브라임 텍스트 웹스톰 - 웹스톰을 채택한 이유 웹스톰 설치 - Node.js 설치 - 웹스톰 설치 - 웹스톰 실행 정리 03장 버전 관리 시스템 서브버전과 깃 - 서브버전 - 깃 웹스톰과 버전 관리 시스템 - 서브버전 사용 - 깃 사용 정리 04장 코드 품질 관리 코드 품질 검증 도구 - JSHint - JSLint 웹스톰과 JSLint - JSLint 설정 - 실시간 코드 검증 테스트 도구 - QUnit - 카르마 웹스톰과 카르마 - 카르마 설치 - 테스트 실행 정리 05장 리팩터링 기법 리팩터링이란? 웹스톰과 리팩터링 - 이름 변경(Rename) - 이동(Move) - 안전한 삭제(Safe Delete) - 시그니처 변경(Change Signature) - 직접 삽입(Inline) - 추출(Extract) - Find Refactoring Preview 도구 창 정리 06장 디버깅 도구 크롬 브라우저 - 설치 HTML&CSS 디버깅 - 요소 패널 - 인스펙터 도구 - 스타일 창 - 계산 결과 창 자바스크립트 디버깅 - 소스 패널 - 콘솔 패널 네트워크 디버깅 - 네트워크 패널 반응형 모드 - 크롬 - 파이어폭스 정리 07장 프런트엔드 개발 도구 마크업 개발 도구 - Less - Emmet 웹스톰과 Less, Emmet - Less - Emmet 자바스크립트 개발 도구 - Bower - JSDoc3 애너테이션 웹스톰과 Bower, JSDoc3 애너테이션 - Bower - JSDoc3 애너테이션 디렉터리 스캐폴딩 - Grunt-init 소개 정리 08장 빌드 및 태스크 자동화 도구 빌드 도구 - Uglify.js - JSDoc3 문서화 태스크 자동화 도구 - Grunt 정리 [2부] 프런트엔드 개발 시작 09장 조직도 트리 개발 사례 조직도 트리 개발 시작 - 소개 - 상세설계서와 디자인 - 명세 작성 명세 분석 - 유스케이스 정리 10장 마크업 개발 마크업 디렉터리 구성 - 네이버 디렉터리 컨벤션 - 디렉터리 구조 생성 마크업 개발 단계 - 구조를 마크업하는 작업 - 구조를 스타일링하는 작업 조직도 트리 구조 작성 - 조직도 타이틀과 조직추가 버튼 마크업 - 최상위 노드(회사, 조직미지정) 마크업 - 부서 노드 마크업 - 콘텍스트 메뉴 마크업 조직도 트리 스타일링 - 스타일링에 필요한 Less 파일 생성 - 조직도 트리 레이아웃 스타일링 - 타이틀과 조직 추가 버튼 스타일링 - 조직도 트리 스타일링 - 수정 폼 스타일링 - 콘텍스트 메뉴 스타일링 정리 11장 자바스크립트 개발 자바스크립트 디렉터리 구성 - 일반적인 디렉터리 구조 - 디렉터리 구성 - 디렉터리 템플릿 조직도 모듈 개발 - 조직도 모듈 설계 - 조직도 모듈 HTTP API 디자인 - 모델 개발 - 컬렉션 개발 - 조직도 트리 뷰 개발 - 콘텍스트 메뉴 뷰 개발 - 빌더 함수 조직도 모듈 빌드 정리 부록A 도구 기능 소개 JSLint 옵션 소개 Qunit 기능 소개 Less 기능 소개 Emmet 기능 소개 JSDoc3 태그 소개 부록B 조직도 모듈 설계 패턴 모델-뷰-컨트롤러 컴포지트 패턴 데코레이터 패턴 부록C 참고 자료 웹 사이트 책