책소개
자바스크립트 프론트엔드 개발 프레임워크의 첫걸음!『프론트엔드 개발 첫걸음』은 풍부한 UI를 구축할 수 있는 자바스크립트로 만든 프론트엔드 프레임워크로 React, Angular, Vue.js, React Native를 다룬다. 또한 iOS와 Android용 네이티브 응용 프로그램을 만들 수 있다. 슬랙(Slack) 스타일의 채팅 애플리케이션을 각각의 프레임워크로 만들어보는 과정으로 이루어져 있으며, 이를 위해 먼저 API 서버를 만들어보는 과정을 앞에 추가하였다. 또한 API 서버가 완성되면 이들 각 프레임워크로 같은 API 서버를 통해 같은 기능을 제공하는 애플리케이션을 만들어 보고, React Native는 모바일 네이티브 애플리케이션 개발을 목적으로 하는 프레임워크이므로 SPA(단일 페이지 애플리케이션)를 넘어 모바일 애플리케이션 개발도 배워볼 수 있다. React, Vue.js, Angular와 같은 프론트엔드 계열 자바스크립트 프레임워크를 배우고자 하는 웹 개발자나 jQuery의 경험이 있고 SPA(Single Page Application)도 이해하고 배우고자 하는 HTML/CSS 웹 디자이너들에게 추천되어 진다.
목차
Part 1. 자바스크립트 프론트엔드 개발 프레임워크의 최신 동향제1장 자바스크립트 프론트엔드 개발 프레임워크의 발전 프레임워크란 무엇인가 자바스크립트부터 프레임워크까지 그리고 찾아온 SPA의 시대 이 책에서 다루는 프레임워크 그 외의 자바스크립트 프레임워크제2장 SPA와 PWA-프론트엔드 구현 기술의 최신 동향 클라이언트 사이드 라우팅 CSS in JS 컴포넌트 지향 SSR과 프리렌더링 가상 DOM MVC와 MVP, MVVM Flux PWA 일렉트론Part 2. 자바스크립트 프론트엔드 개발을 위한 기초 지식 및 환경 구축제3장 자바스크립트 프론트엔드 개발을 위한 환경 구축 Node.js 설치하기 npm과 package.json 프론트엔드 빌드 도구 에디터 정리제4장 자바스크립트 프론트엔드 개발을 위한 기초 지식 ECMAScript 2015의 개요 TypeScript의 개요제5장 자바스크립트 프론트엔드 개발을 위한 서버 구축 예제 애플리케이션의 개요 RESTful API를 이용한 채팅 서버 채팅 서버의 RESTful API 채팅 서버의 구조 개발 환경 준비하기 채팅 서버의 RESTful API 구현Part 3. Slack 스타일의 예제를 만들어보며 React/Angular/Vue.js 익히기제6장 React 입문 및 활용하기 React의 기초 지식 props와 state 컴포넌트의 생애주기 그 외 정보 예제 애플리케이션을 구현하며 배우는 React 개발 라우팅 설정 컴포넌트 구현하기 메시지 피드 컴포넌트 구현하기 채널 상세 컴포넌트 구현하기 메시지 폼 컴포넌트 구현하기 컴포넌트 간의 연동 보다 실용적인 애플리케이션을 구현하기 위해제7장 Angular 입문 및 활용하기 Angular에 대한 기초 지식 Angular의 특징 아키텍처 및 주요 개념 AngularJS로부터 마이그레이션하기 UI 라이브러리 Angular 관련 커뮤니티 만들어보며 배우는 Angular 개발 Angular CLI로 프로젝트 만들기 Angular Material 도입하기 채널 목록 구현하기 라우팅 설정하기 메시지 피드 구현하기 메시지 폼 구현하기 부모자식 관계가 아닌 컴포넌트 연동시키기 보다 실용적인 애플리케이션을 구현하기 위해제8장 Vue.js 입문 및 활용하기 Vue.js에 대한 기초 지식 Vue.js의 특징 Vue 설치하기 채팅 애플리케이션 만들기 새로 생성한 프로젝트 확인하기 단일 파일 컴포넌트 컴포넌트 분할과 프로퍼티를 이용한 데이터 전달 컴포넌트 더 잘 활용하기 Element 라이브러리 사용하기 정리Part 4. Slack 스타일의 예제를 만들어보며 React Native 배우기제9장 React Native 입문 및 활용하기 React Native에 대한 기초 지식 React Native의 특징 React Native를 사용하기 위해 알아야 할 사항 React Native의 실용성 React Native 개발 환경 구축하기 React Native 시작하기 예제 애플리케이션을 구현해보며 React Native 배우기 “채널 상세 화면”의 메시지 목록 부분 구현하기 “채널 상세 화면”의 메시지 폼 부분 구현하기 Channel 컴포넌트 구현하기 채널 목록 구현하기 보다 실용적인 애플리케이션을 구현하기 위해
