• 네이버는 이렇게 한다! 프런트엔드 개발 시작하기
  • 예제로 배우는 프런트엔드 개발과 도구

  • 주우영 지음

  • TECH@NAVER _ 009
  • ISBN: 9788998139667
  • 22,000원 | 2014년 09월 19일 발행 | 412쪽



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

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

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

★ 이 책에서 다루는 내용 ★

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

 

추천의 글

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

-- SK플래닛 박난하, 트위터: https://twitter.com/nanhapark

 

상세 이미지

본문 상세 이미지

주우영

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

  • [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 참고 자료
    • 웹 사이트

예제코드 관련 깃허브 페이지