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

프론트엔드 개발자는 기기나 운영체제와 상관없이 최대한 다양한 사용자가 이용할 수 있도록 브라우저에서 작동하는 애플리케이션을 내놓는다. 이 가이드는 플랫폼에 호환되는 풍부한 웹 사용자 경험을 만들기 위해 프로그래밍 개발의 기초를 튼튼하게 다지는 데 도움을 준다. 이 책은 이전의 웹 사용자 경험을 접해본 다양한 플랫폼의 프로그래머와 개발자들이 최신 도구와 모범 사례를 빨리 익힐 수 있도록 해주며 자바스크립트, CSS3, HTML5에 중점을 두고 있다. 각 장에서는 여러 애플리케이션을 만들기 위해 필요한 개념과 API에 대해 소개한다. 반응형 UI 구현, 원격 웹 서비스 접속 및 Ember.js를 사용한 애플리케이션 개발 등에 대해서도 다룬다. 또한 최신 개발 도구를 사용하여 코드의 버그를 처리하고 테스트하며, Node.js과 npm 레지스트리의 오픈소스 모듈을 활용할 것이다.

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를 컴포넌트로 만들기
도전 과제-금메달: 알림 배열

이 책의 단계별 예제 프로젝트를 실습해보고 나면, 최신 웹사이트와 웹 애플리케이션을 어떻게 개발하는지 이해하게 될 것이다.이 책에서 배우게 될 내용
ㆍ반응형 UI를 구현하고, 원격 웹 서비스에 액세스하며, Ember로 애플리케이션을 구축하는 방법
ㆍ모던 웹사이트 및 웹 애플리케이션을 개발하는 데 필요한 필수 개념 및 API
ㆍ최신 개발 도구로 코드를 디버그하고 테스트하는 효과적인 방법
ㆍ모든 플랫폼에서 풍부한 웹 경험을 만들기 위한 최적 기법
ㆍOS X 터미널 애플리케이션 또는 윈도우 명령 프롬프트에서 사용하는 명령어
ㆍ아톰 텍스트 에디터와 코드 작업을 위한 유용한 플러그인
ㆍjQuery와 crypto-js, moment 등의 라이브러리여러분은 아마도 iOS 또는 안드로이드를 위한 네이티브 개발, 즉 루비나 PHP로 서버 코드를 작성하고 OS X 또는 윈도우용 데스크톱 애플리케이션을 만드는 개발을 해봤을 것이다. 이처럼 프론트엔드 개발자는 모든 스마트폰, 태블릿, 개인 컴퓨터에서 사용 가능한 플랫폼인 브라우저를 대상으로 코드를 작성한다.
이 책의 목적은 브라우저를 위한 개발 방법을 가르쳐주는 것으로, 가이드에 따라 일련의 프로젝트 개발 과정을 살펴볼 것이다. 각 프로젝트는 프론트엔드 스펙트럼을 따르는 서로 다른 기술이 혼합되어 있다. 프론트엔드 도구, 라이브러리, 사용 가능한 프레임워크가 많기 때문에 이 책에서는 가장 필수적이고 쉬운 패턴과 기술에 초점을 맞출 것이다.
이 책에서는 네 개의 서로 다른 웹 애플리케이션을 개발하는 과정을 소개한다. 이 책의 하나의 섹션마다 각각의 애플리케이션을 다루며, 섹션의 각 장에서는 개발 중인 애플리케이션에 새로운 기능을 추가하는 법을 배운다. 이 네 개의 애플리케이션을 개발하는 작업을 통해 여러분을 하나의 프론트엔드 스펙트럼에서 다른 스펙트럼으로 인도하게 될 것이다.

회원리뷰 총 0개

리뷰작성 새 창

사용후기가 없습니다.

등록된 상품문의

상품문의 총 0개

문의작성 새 창

상품문의가 없습니다.

[반품/교환가능 기간]

변심반품의 경우 수령 후 14일 이내, 상품의 결함 및 계약내용과 다를 경우 문제점 발견 후 30일 이내

[반품/교환비용]

단순 변심 혹은 구매착오로 인한 반품/교환은 반송료 고객 부담

[반품/교환 불가 사유]

- 소비자의 책임 있는 사유로 상품 등이 손실 또는 훼손된 경우

(단지 확인을 위한 포장 훼손은 제외)

- 소비자의 사용, 포장 개봉에 의해 상품 등의 가치가 현저히 감소한 경우

예) 화장품, 식품, 가전제품(악세서리 포함) 등

- 복제가 가능한 상품 등의 포장을 훼손한 경우

예) 음반/DVD/비디오, 소프트웨어, 만화책, 잡지, 영상 화보집

- 소비자의 요청에 따라 개별적으로 주문 제작되는 상품의 경우 ((1)해외주문도서)

- 디지털 컨텐츠인 eBook, 오디오북 등을 1회 이상 다운로드를 받았을 경우

- 시간의 경과에 의해 재판매가 곤란한 정도로 가치가 현저히 감소한 경우

- 전자상거래 등에서의 소비자보호에 관한 법률이 정하는 소비자 청약철회 제한 내용에 해당되는 경우

* (1) 해외주문도서 : 이용자의 요청에 의한 개인주문상품으로 단순변심 및 착오로 인한 취소/교환/반품 시

‘해외주문 반품/취소 수수료’ 고객 부담 (해외주문 반품/취소 수수료 : ①양서-판매정가의 12%, ②일서-판매정가의 7%를 적용)

[상품 품절]

공급사(출판사) 재고 사정에 의해 품절/지연될 수 있으며, 품절 시 관련 사항에 대해서는 이메일과 문자로 안내드리겠습니다.

[소비자 피해보상, 환불지연에 따른 배상]

- 상품의 불량에 의한 교환, A/S, 환불, 품질보증 및 피해보상 등에 관한 사항은 소비자분쟁해결 기준 (공정거래위원회 고시)에 준하여 처리됩니다.

- 대금 환불 및 환불지연에 따른 배상금 지급 조건, 절차 등은 전자상거래 등에서의 소비자 보호에 관한 법률에 따라 처리함.