추가 적립 안내

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

프론트엔드 개발자는 기기나 운영체제와 상관없이 최대한 다양한 사용자가 이용할 수 있도록 브라우저에서 작동하는 애플리케이션을 내놓는다. 이 가이드는 플랫폼에 호환되는 풍부한 웹 사용자 경험을 만들기 위해 프로그래밍 개발의 기초를 튼튼하게 다지는 데 도움을 준다. 이 책은 이전의 웹 사용자 경험을 접해본 다양한 플랫폼의 프로그래머와 개발자들이 최신 도구와 모범 사례를 빨리 익힐 수 있도록 해주며 자바스크립트, CSS3, HTML5에 중점을 두고 있다.

각 장에서는 여러 애플리케이션을 만들기 위해 필요한 개념과 API에 대해 소개한다. 반응형 UI 구현, 원격 웹 서비스 접속 및 Ember.js를 사용한 애플리케이션 개발 등에 대해서도 다룬다. 또한 최신 개발 도구를 사용하여 코드의 버그를 처리하고 테스트하며, Node.js과 npm 레지스트리의 오픈소스 모듈을 활용할 것이다.

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

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

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

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와 afterModel

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

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

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

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

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