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

단계별 예제로 마스터하는 최신 웹사이트& 웹 애플리케이션 프론트엔드 개발자는 기기나 운영체제와 상관없이 최대한 다양한 사용자가 이용할 수 있도록브라우저에서 작동하는 애플리케이션을 내놓는다. 이 가이드는 플랫폼에 호환되는 풍부한 웹 사용자 경험을 만들기 위해 프로그래밍 개발의 기초를 튼튼하게 다지는 데 도움을 준다. 이 책은 이전의 웹 사용자 경험을 접해본 다양한 플랫폼의 프로그래머와 개발자들이 최신 도구와 모범 사례를 빨리 익힐 수 있도록 해주며 자바스크립트, 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를 컴포넌트로 만들기 도전 과제-금메달: 알림 배열