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

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