제대로 배우는 프론트엔드 웹 개발

 

 

 

제대로 배우는 프론트엔드 웹 개발

부제 단계별 예제로 마스터하는 최신 웹사이트 & 웹 애플리케이션

저자 크리스 아키노, 토드 간디

역자 이지은

 

출간/배본가능일 2017년 8월 18일

정가 33,000원

페이지 586

판형 크라운판 173*230

ISBN 979-11-86697-40-5 (93000)

 

책 소개

 

단계별 예제로 마스터하는 최신 웹사이트 & 웹 애플리케이션

 

프론트엔드 개발자는 기기나 운영체제와 상관없이 최대한 다양한 사용자가 이용할 수 있도록 브라우저에서 작동하는 애플리케이션을 내놓는다. 이 가이드는 플랫폼에 호환되는 풍부한 웹 사용자 경험을 만들기 위해 프로그래밍 개발의 기초를 튼튼하게 다지는 데 도움을 준다.

이 책은 이전의 웹 사용자 경험을 접해본 다양한 플랫폼의 프로그래머와 개발자들이 최신 도구와 모범 사례를 빨리 익힐 수 있도록 해주며 자바스크립트, CSS3, HTML5에 중점을 두고 있다. 각 장에서는 여러 애플리케이션을 만들기 위해 필요한 개념과 API에 대해 소개한다. 반응형 UI 구현, 원격 웹 서비스 접속 및 Ember.js를 사용한 애플리케이션 개발 등에 대해서도 다룬다. 또한 최신 개발 도구를 사용하여 코드의 버그를 처리하고 테스트하며, Node.js과 npm 레지스트리의 오픈소스 모듈을 활용할 것이다.

이 책의 단계별 예제 프로젝트를 실습해보고 나면, 최신 웹사이트와 웹 애플리케이션을 어떻게 개발하는지 이해하게 될 것이다.

 

이 책에서 배우게 될 내용

• 반응형 UI를 구현하고, 원격 웹 서비스에 액세스하며, Ember로 애플리케이션을 구축하는 방법
• 모던 웹사이트 및 웹 애플리케이션을 개발하는 데 필요한 필수 개념 및 API
• 최신 개발 도구로 코드를 디버그하고 테스트하는 효과적인 방법
• 모든 플랫폼에서 풍부한 웹 경험을 만들기 위한 최적 기법
• OS X 터미널 애플리케이션 또는 윈도우 명령 프롬프트에서 사용하는 명령어
• 아톰 텍스트 에디터와 코드 작업을 위한 유용한 플러그인
• jQuery와 crypto-js, moment 등의 라이브러리

 

대상독자
초중급

 

 

저자 소개

 

크리스 아키노 Chris Aquino

크리스 아키노는 웹 엔지니어링 책임자이자 Big Nerd Ranch의 강사다. 개발자로서 사용자에게 의미 있는 사용자 경험을 제공하고 싶어 한다. 현재 그는 그의 팀과 학생들이 더 나은 웹 개발을 할 수 있도록 도움을 주는 데 전념하고 있다. 크리스는 와인드업 토이, 에스프레소, 그리고 모든 종류의 바비큐를 좋아한다.

 

토드 간디 Todd Gandee

토드 간디는 프론트엔드 개발자이자 Big Nerd Ranch의 강사다. 10년 이상 웹 컨설턴트로서의 경력을 쌓았다. 토드는 프로그래밍을 하지 않을 땐 달리기, 자전거, 암벽 등반을 즐긴다.

 

 

역자 소개

 

이지은

웹 페이지 개발에 관심이 많아 컴퓨터 공학을 전공으로 선택했다. 첫 경력은 피처폰용 모바일 브라우저 개발이었고, 이후 안드로이드 개발 프로젝트에 잠시 참여했으며, 가장 최근에는 통신사의 과금 검증 업무를 맡았다. 안드로이드 앱 및 웹 기술에 관심이 많아, 현재 기술 전문가 그룹 GoDev의 멤버로 활동하고 있다.

 

 

목차

 

 

1부 코어 브라우저 프로그래밍 

 

1장 개발 환경 설정
 구글 크롬 설치하기
 아톰 설치 및 구성하기
 문서와 참조 소스
 명령줄 속성 과정
 node.js와 browser-sync 설치
 더 알아보기: 아톰의 대안

 

2장 첫 프로젝트 준비

 Ottergram 준비
 브라우저에서 웹 페이지 보기
 크롬 개발자 도구
 더 알아보기: CSS 버전
 더 알아보기: 파비콘(favicon.ico)
 도전 과제-은메달: 파비콘 추가

 

3장 스타일

 스타일 베이스라인 생성
 스타일 작성을 위한 HTML 준비
 스타일 구조
 첫 번째 스타일 규칙
 스타일 상속
 이미지를 창에 맞추기
 색상
 아이템 간격 조절
 폰트 추가
 도전 과제-동메달: 색상 변경
 더 알아보기: 구체성! 선택자가 충돌할 때

 

4장 플렉스박스를 사용한 반응형 레이아웃
 인터페이스 확장
 플렉스박스
 절대 위치와 상대 위치

 

5장 미디어 쿼리와 함께하는 적응형 레이아웃
 뷰포트 재설정
 미디어 쿼리 추가
 도전 과제-동메달: 세로보기
 더 알아보기: 플렉스박스 레이아웃의 일반적인 해결(버그)
 도전 과제-금메달: 홀리 그레일 레이아웃

 

6장 자바스크립트를 사용한 이벤트 처리
 반드시 필요한 앵커 태그 준비
 첫 스크립트
 Ottergram 자바스크립트 개요
 스트링 변수 선언
 콘솔 작업
 DOM 엘리먼트 접근
 SetDetails 함수 작성
 함수의 반환값
 이벤트 리스너 추가
 모든 섬네일 접근
 섬네일 배열을 통한 반복
 도전 과제-은메달: 링크 탈취
 도전 과제-금메달: 랜덤 수달
 더 알아보기: 엄격 모드
 더 알아보기: 클로저
 더 알아보기: NodeLists와 HTMLCollections
 더 알아보기: 자바스크립트 타입

 

7장 CSS를 사용한 시각 효과
 상세 이미지 숨기기 및 보이기
 CSS 전환을 사용한 상태 변경
 사용자 정의 타이밍 함수
 더 알아보기: 강제 형변환 규칙

 

 

2부 모듈, 객체, 폼 

 

8장 모듈, 객체, 메소드

 모듈
 CoffeeRun 설정
 DataStore 모듈 만들기
 네임스페이스에 모듈 추가
 생성자
 트럭 모듈 생성
 디버깅
 페이지 로딩 시 CoffeeRun 초기화
 도전 과제-동메달: TruckID 바꿔보기
 더 알아보기: Private 모듈 데이터
 도전 과제-은메달: Private 데이터 만들기
 더 알아보기: forEach의 콜백에 적용

 

9장 부트스트랩 소개

 부트스트랩 추가
 주문 폼 만들기

 

10장 자바스크립트를 사용한 폼 처리

 FormHandler 모듈 생성
 submit 핸들러 추가
 FormHandler 사용
 UI 확장
 도전 과제-동메달: 특대 사이즈
 도전 과제-은메달: 변경되는 슬라이더 값 출력
 도전 과제-금메달: 기능 추가

 

11장 데이터를 DOM으로

 체크리스트 설정
 체크리스트 모듈 생성
 Row 생성자 만들기
 제출 시 체크리스트의 Row 생성
 줄을 클릭하여 주문 처리 완료
 도전 과제-동메달: 설명에 카페인 함량 추가
 도전 과제-은메달: 맛 추가에 따른 색상 코딩
 도전 과제-금메달: 주문 편집

 

12장 폼 검증

 required 어트리뷰트
 정규 표현식을 사용한 검증
 Constraint Validation API
 유효하거나 유효하지 않은 엘리먼트 꾸미기
 도전 과제-은메달: 디카페인 커피를 위한 사용자 정의 유효성
 더 알아보기: Webshim 라이브러리

 

13장 Ajax

 XMLHttpRequest 객체
 RESTful 웹 서비스
 RemoteDataStore 모듈
 서버로 데이터 전송
 서버로부터 가져온 데이터
 서버의 데이터 삭제
 DataStore를 RemoteDataStore로 교체
 도전 과제-은메달: 원격 서버에 대한 유효성 검사
 더 알아보기: 포스트맨

 

14장 디퍼드와 프로미스

 프로미스와 디퍼드
 디퍼드 반환
 then을 사용하여 콜백 등록
 then을 사용한 실패 처리
 콜백 전용 API를 사용하여 디퍼드 사용
 DataStore에 프로미스 사용
 도전 과제-은메달: DataStore 대체 시스템

 

 

3부 리얼타임 데이터 

 

15장 Node.js 소개

 Node와 npm
 Hello, World
 npm 스크립트 추가
 파일에서 검색
 오류 처리
 더 알아보기: npm 모듈 레지스트리
 도전 과제-동메달: 사용자 정의 오류 페이지 만들기
 더 알아보기: MIME 타입
 도전 과제-은메달: MIME 타입 자동 제공
 도전 과제-금메달: 오류 처리 코드를 자체 모듈로 이동

 

16장 웹소켓을 사용하는 실시간 커뮤니케이션

 웹소켓 설정
 웹소켓 서버 테스트
 채팅 서버 기능 만들기
 첫 채팅!
 더 알아보기: socket.io 웹소켓 라이브러리
 더 알아보기: 웹소켓 서비스
 도전 과제-동메달: 혼자 반복할까?
 도전 과제-은메달: 주류 밀매점
 도전 과제-금메달: 채팅 봇

 

17장 바벨과 함께 ES6 사용하기

 자바스크립트 컴파일 도구
 Chattrbox 클라이언트 애플리케이션
 바벨 사용 첫 단계
 모듈 패키징을 위한 Browserify 사용
 ChatMessage 클래스 추가
 ws-client 모듈 생성
 더 알아보기: 다른 언어에서 자바스크립트 컴파일
 도전 과제-동메달: 디폴트 Import 이름
 도전 과제-은메달: 연결 닫힘 알림
 더 알아보기: 호이스팅
 더 알아보기: 화살표 함수

 

18장 계속해서 ES6 살펴보기

 Node 모듈로 jQuery 설치
 ChatForm 클래스 만들기
 ChatList 클래스 만들기
 그라바타 사용
 사용자 이름 입력 대기
 사용자 세션 저장
 메시지 타임스탬프 서식화 및 업데이트
 도전 과제-동메달: 메시지에 시각적 효과 추가
 도전 과제-은메달: 캐시 메시지
 도전 과제-금메달: 채팅방 구분

 

 

4부 애플리케이션 아키텍처

 

19장 MVC와 Ember 소개

 Tracker
 Ember: MVC 프레임워크
 외부 라이브러리와 애드온
 환경 설정
 더 알아보기 : npm과 Bower 설치
 도전 과제-동메달: 불러오기 제한
 도전 과제-은메달: Font Awesome 추가
 도전 과제-금메달: NavBar 최적화

 

20장 라우팅, 라우트, 모델

 ember generate
 중첩 라우트
 Ember 인스펙터
 모델 할당
 beforeModel
 더 알아보기: setupController와 afterMode

 

21장 모델과 데이터 바인딩

 모델 정의
 createRecord
 get과 set
 계산된 속성
 더 알아보기: 데이터 가져오기
 더 알아보기: 데이터 저장 및 삭제
 도전 과제-동메달: 계산된 속성 변경
 도전 과제-은메달: 새로운 목격 표시
 도전 과제-금메달: 제목 추가

 

22장 데이터-어댑터, 시리얼라이저, 트랜스폼

 어댑터
 콘텐츠 보안 정책
 시리얼라이저
 트랜스폼
 더 알아보기: Ember CLI Mirage
 도전 과제-은메달: 콘텐츠 보안
 도전 과제-금메달: Mirage

 

23장 뷰와 템플릿

 핸들바
 모델
 헬퍼
 사용자 정의 헬퍼
 도전 과제-동메달: Link Rollover 추가
 도전 과제-은메달: 날짜 형식 변경
 도전 과제-금메달: 사용자 정의 섬네일 헬퍼 생성

 

24장 컨트롤러

 새로운 목격
 목격 편집
 목격 삭제
 라우트 동작
 도전 과제-동메달: 목격 상세 페이지
 도전 과제-은메달: 목격 날짜
 도전 과제-금메달: 목격자 추가 및 제거

 

25장 컴포넌트

 컴포넌트로서의 반복자 항목
 DRY 코드를 위한 컴포넌트
 데이터는 아래로, 액션은 위로
 클래스 이름 바인딩
 데이터는 아래로
 액션은 위로
 도전 과제-동메달: 알림 메시지 사용자 정의
 도전 과제-은메달: NavBar를 컴포넌트로 만들기
 도전 과제-금메달: 알림 배열

  

 

출판사 리뷰

 

여러분은 아마도 iOS 또는 안드로이드를 위한 네이티브 개발, 즉 루비나 PHP로 서버 코드를 작성하고 OS X 또는 윈도우용 데스크톱 애플리케이션을 만드는 개발을 해봤을 것이다. 이처럼 프론트엔드 개발자는 모든 스마트폰, 태블릿, 개인 컴퓨터에서 사용 가능한 플랫폼인 브라우저를 대상으로 코드를 작성한다.
이 책의 목적은 브라우저를 위한 개발 방법을 가르쳐주는 것으로, 가이드에 따라 일련의 프로젝트 개발 과정을 살펴볼 것이다. 각 프로젝트는 프론트엔드 스펙트럼을 따르는 서로 다른 기술이 혼합되어 있다. 프론트엔드 도구, 라이브러리, 사용 가능한 프레임워크가 많기 때문에 이 책에서는 가장 필수적이고 쉬운 패턴과 기술에 초점을 맞출 것이다.
이 책에서는 네 개의 서로 다른 웹 애플리케이션을 개발하는 과정을 소개한다. 이 책의 하나의 섹션마다 각각의 애플리케이션을 다루며, 섹션의 각 장에서는 개발 중인 애플리케이션에 새로운 기능을 추가하는 법을 배운다. 이 네 개의 애플리케이션을 개발하는 작업을 통해 여러분을 하나의 프론트엔드 스펙트럼에서 다른 스펙트럼으로 인도하게 될 것이다.