프런트엔드 개발 시작하기 (예제로 배우는 프런트엔드 개발과 도구)

주우영

저자주우영은카페24에서웹개발자로일했고현재는NHNTECHNOLOGYSERVICES프런트엔드개발팀에서프런트엔드개발자로근무하고있다.공학적인것에관심이많고,사용하고있는기술의역사와본질을알아야한다고주장하는개발자다.페이스북의프론트엔드개발그룹(https://www.facebook.com/groups/webfrontend)에서주로활동하고있으며최근엔D2와ToolCon2014콘퍼런스에서강연하는등대외적으로도다양한활동을하고있다.

[1부]프런트엔드개발과도구소개

▣01장프런트엔드개발의이해
프런트엔드개발이란
-정의
-범위
프런트엔드개발현황
-미성숙한개발프로세스
-프런트엔드지식이부족한서버개발자
-백엔드와프런트엔드의개발의존성
프런트엔드개발프로세스
-새로운프로젝트시작
-프런트엔드개발시작
-프런트엔드개발산출물배포
정리

▣02장IDE와에디터
유명한에디터
-이클립스
-앱타나스튜디오
-서브라임텍스트
웹스톰
-웹스톰을채택한이유
웹스톰설치
-Node.js설치
-웹스톰설치
-웹스톰실행
정리

▣03장버전관리시스템
서브버전과깃
-서브버전
-깃
웹스톰과버전관리시스템
-서브버전사용
-깃사용
정리

▣04장코드품질관리
코드품질검증도구
-JSHint
-JSLint
웹스톰과JSLint
-JSLint설정
-실시간코드검증
테스트도구
-QUnit
-카르마
웹스톰과카르마
-카르마설치
-테스트실행
정리

▣05장리팩터링기법
리팩터링이란?
웹스톰과리팩터링
-이름변경(Rename)
-이동(Move)
-안전한삭제(SafeDelete)
-시그니처변경(ChangeSignature)
-직접삽입(Inline)
-추출(Extract)
-FindRefactoringPreview도구창
정리

▣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장자바스크립트개발
자바스크립트디렉터리구성
-일반적인디렉터리구조
-디렉터리구성
-디렉터리템플릿
조직도모듈개발
-조직도모듈설계
-조직도모듈HTTPAPI디자인
-모델개발
-컬렉션개발
-조직도트리뷰개발
-콘텍스트메뉴뷰개발
-빌더함수
조직도모듈빌드
정리

▣부록A도구기능소개
JSLint옵션소개
Qunit기능소개
Less기능소개
Emmet기능소개
JSDoc3태그소개

▣부록B조직도모듈설계패턴
모델-뷰-컨트롤러
컴포지트패턴
데코레이터패턴

▣부록C참고자료
웹사이트
책

프런트엔드개발을쉽게시작할수있게도와드립니다!

이책에서는프런트엔드개발의정의와프런트엔드개발에유용한도구를소개하고예제를중심으로한개발방법을설명한다.프런트엔드개발이무엇이고,그범위가어디까지인지를설명하며,프런트엔드개발에필요한도구뿐만아니라품질관리도구도자세하게알려준다.

또한조직도트리예제를중심으로명세작성과마크업,자바스크립트개발등프런트엔드개발의시작부터끝까지를쉽고자세하게설명한다.이책에는네이버에서사용하는프런트엔드개발프로세스와시행착오에서얻은소중한경험이녹아있다.

★이책에서다루는내용★

◎프런트엔드개발정의와범위소개
◎프런트엔드개발도구소개:웹스톰,JSLint,카르마,Qunit,Less,Emmet,Bower,JSDoc3,Grunt,Uglify.js,크롬개발자도구
◎조직도트리예제로명세작성,마크업개발,자바스크립트개발

<추천의글>

좋은책이다.이책으로부터필자가겪었던프런트엔드노하우를보고배울수있다.보통책은많은분야를다루지않는다.하지만이책은분야가다양하고내용이풍부하며,직접그린그림으로쉽게이해할수있게작성돼있다.프런트엔드의초심자에게좋은경험이될수있고,전문가에게도도움이될것이다.
-SK플래닛박난하