리액트 머티리얼 UI 쿡북(웹 프로페셔널)

★ 이 책에서 다루는 내용 ★



■ 머티리얼 UI 앱의 전체적인 구조와 내비게이션 구축 방법

■ 다양한 방법으로 단순하거나 복잡한 정보를 제공하는 방법

■ 상호적이고 직관적인 컨트롤 구축

■ 모든 머티리얼 UI 앱에 유용한 테마와 스타일 구축

■ 탭과 확장 패널을 사용해 콘텐츠를 섹션으로 그룹화하는 방법

■ 머티리얼 UI 그리드를 사용한 일반적인 데이터 레이아웃 설계

■ 복잡한 데이터에 대한 리스트 사용과 자세한 정보에 대한 카드 사용



★ 이 책의 대상 독자 ★



머티리얼 UI로 애플리케이션에서 더 나은 사용자 경험을 제공하려는 모든 개발자를 대상으로 한다. 노련한 전문가부터 초보 개발자까지 모두에게 적합한 책이며, 머티리얼 UI에 대해 상세한 설명을 가득 담고 있다. 여러분이 머티리얼 디자인에 익숙하지 않다고 가정해 설명하지만, 이 책을 최대한 활용하려면 리액트와 현대 자바스크립트에 대한 최소한의 실무 지식은 갖춰야 한다.

리액트를 가르치는 것이 이 책의 목적은 아니지만, 예제를 따라 하는 데 도움이 된다면 리액트 특화 메커니즘도 설명한다



★ 이 책의 구성 ★



1장. '그리드 - 페이지에 구성 요소 배치하기'에서는 그리드 시스템을 사용해 페이지에 구성 요소를 배치한다.

2장. '앱바 - 모든 페이지의 최상위 수준'에서는 앱바를 UI의 상단에 추가한다.

3장. '드로어 - 내비게이션 제어를 위한 장소'에서는 드로어를 사용해 메인 내비게이션을 표시한다.

4장. '탭 - 콘텐츠를 탭 섹션으로 그룹화하기'에서는 콘텐츠를 탭으로 구성한다.

5장. '확장 패널 - 콘텐츠를 패널 섹션으로 그룹화하기'에서는 콘텐츠를 패널로 구성한다.

6장. '리스트 - 간단한 수집 데이터 표시'에서는 사용자가 읽고 상호작용할 수 있는 항목의 리스트를 렌더링한다.

7장. '테이블 - 복잡한 수집 데이터 표시'에서는 데이터 수집에 대한 자세한 정보를 보여준다.

8장. '카드 - 상세 정보 표시'에서는 카드를 사용해 특정 엔티티/사물/객체에 대한 세부 정보를 표시한다.

9장. '스낵바 - 임시 메시지'에서는 사용자에게 애플리케이션의 현재 상황을 알린다.

10장. '버튼 - 동작 시작하기'에서는 사용자가 작업을 수행하는 가장 일반적인 방법인 버튼을 설명한다.

11장. '텍스트 - 텍스트 입력 수집'에서는 사용자가 정보를 입력할 수 있게 한다.

12장. '자동 완성과 칩 - 여러 항목에 대한 텍스트 입력 제안'에서는 사용자가 입력할 때 선택 사항을 제공한다.

13장. '선택 - 선택 사항의 결정'에서는 사용자가 미리 정의된 옵션 집합에서 선택할 수 있다.

14장. '선택 도구 - 날짜와 시간 선택'에서는 읽기 쉬운 형식을 사용해 날짜와 시간 값을 선택한다.

15장. '대화상자 - 사용자 상호작용을 위한 모달 화면'에서는 입력을 수집하거나 정보를 나타내는 모달 화면을 표시한다.

16장. '메뉴 - 팝 아웃되는 동작 표시하기'에서는 메뉴에 동작을 추가해 화면 공간을 절약한다.

17장. '타이포그래피 - 폰트의 룩앤필 제어하기'에서는 체계적인 방식으로 UI의 폰트를 제어한다.

18장. '아이콘 - 룩앤필에 맞게 아이콘 향상시키기'에서는 머티리얼 UI 아이콘을 사용자 정의하고 새 아이콘을 추가한다.

19장. '테마 - 앱의 룩앤필을 중앙집중화하기'에서는 테마를 사용해 구성 요소의 룩앤필을 변경한다.

20장. '스타일 - 구성 요소에 스타일 적용하기'에서는 많은 스타일 솔루션 중 하나를 사용해 UI를 디자인한다.

1장 그리드 - 페이지에 구성 요소 배치하기

__소개

__브레이크포인트 적용

__공간 채우기

__컨테이너와 항목의 추상화

__고정열 레이아웃

__열 방향 변경



2장 앱바 - 모든 페이지의 최상위 수준

__소개

__고정된 위치

__스크롤 시 숨기기

__툴바 추상화

__내비게이션과 함께 사용하기



3장 드로어 - 내비게이션 제어를 위한 장소

__소개

__드로어 타입

__드로어 항목 상태

__드로어 항목 내비게이션

__드로어 섹션

__앱바 상호작용



4장 탭 - 콘텐츠를 탭 섹션으로 그룹화하기

__소개

__앱바 통합

__탭 정렬

__상태에 기반한 탭 렌더링

__탭 콘텐츠 추상화

__경로로 탭 탐색하기



5장 확장 패널 - 콘텐츠를 패널 섹션으로 그룹화하기

__소개

__상태 저장 확장 패널

__패널 헤더 서식 지정

__스크롤 가능한 패널 콘텐츠

__패널 콘텐츠 지연 로딩



6장 리스트 - 간단한 수집 데이터 표시

__소개

__상태를 사용한 리스트 항목 렌더링

__리스트 아이콘

__리스트 아바타와 텍스트

__리스트 섹션

__중첩된 리스트

__리스트 제어

__리스트 스크롤



7장 테이블 - 복잡한 수집 데이터 표시

__소개

__상태 테이블

__정렬 가능한 열

__행 필터링

__행 선택

__행 동작



8장 카드 - 상세 정보 표시

__소개

__메인 콘텐츠

__카드 헤더

__동작 수행하기

__미디어 표현

__확장 카드



9장 스낵바 - 임시 메시지

__소개

__스낵바 콘텐츠

__상태로 가시성 제어하기

__스낵바 전환

__스낵바 위치 지정

__오류 경계와 오류 스낵바

__스낵바 동작

__스낵바 큐



10장 버튼 - 동작 시작하기

__소개

__버튼 변형

__버튼 강조

__링크 버튼

__플로팅 동작

__아이콘 버튼

__버튼 크기



11장 텍스트 - 텍스트 입력 수집

__소개

__상태로 입력 제어하기

__자리표시자와 헬퍼 텍스트

__유효성 검사 및 오류 표시

__패스워드 필드

__멀티라인 입력

__입력 꾸미기

__입력 마스킹



12장 자동 완성과 칩 - 여러 항목에 대한 텍스트 입력 제안

__소개

__자동 완성 구성 요소 만들기

__자동 완성 제안 선택

__API 기반 자동 완성

__검색 결과 강조

__독립형 칩 입력



13장 선택 - 선택 사항의 결정

__소개

__체크박스 그룹 추상화

__체크박스 항목 사용자 정의

__라디오 버튼 그룹 추상화

__라디오 버튼 유형

__체크박스를 스위치로 바꾸기

__상태로 선택 제어하기

__여러 항목 선택



14장 선택 도구 - 날짜와 시간 선택

__소개

__날짜 선택 도구 사용

__시간 선택 도구 사용

__초기 날짜 값과 시간 값 설정

__날짜 및 시간 구성 요소 결합

__다른 날짜 및 시간 패키지 통합



15장 대화상자 - 사용자 상호작용을 위한 모달 화면

__소개

__양식 입력 수집

__동작 확인

__경고 표시

__API 통합

__전체 화면 대화상자 만들기

__대화상자 콘텐츠 스크롤



16장 메뉴 - 팝 아웃되는 동작 표시하기

__소개

__상태로 메뉴 구성하기

__메뉴 스크롤 옵션

__메뉴 전환 사용하기

__메뉴 항목 사용자 정의



17장 타이포그래피 - 폰트의 룩앤필 제어하기

__소개

__타이포그래피 유형

__테마 색상 사용

__텍스트 정렬

__텍스트 래핑



18장 아이콘 - 룩앤필에 맞게 아이콘 향상시키기

__소개

__아이콘 색상

__아이콘 크기 조정

__동적으로 아이콘 로드하기

__테마 아이콘

__더 많은 아이콘 설치하기



19장 테마 - 앱의 룩앤필 중앙집중화하기

__소개

__팔레트 이해하기

__밝은 테마와 어두운 테마 비교

__타이포그래피 사용자 정의

__테마 중첩

__구성 요소 테마 설정 이해



20장 스타일 - 구성 요소에 스타일 적용하기

__소개

__기본 구성 요소 스타일

__범위 구성 요소 스타일

__구성 요소 스타일 확장

__스타일을 테마로 이동하기

__그 외 스타일링 옵션

아담 보두치 거의 10년 동안 대규모 자바스크립트 개발 작업에 참여해왔다. 프론트엔드로 옮기기 전에는 파이썬과 리눅스를 사용하는 여러 가지 대규모 클라우드 컴퓨팅 제품을 연구했다. 복잡성을 잘 알고 있으면서 실제 소프트웨어 시스템과 이들이 제기하는 확장 문제에 대한 실질적인 경험을 갖고 있다. 『리액트 & 리액트 네이티브 통합 교과서』(에이콘, 2019)를 비롯한 여러 자바스크립트 서적을 저술했으며, 혁신적인 사용자 경험과 고성능을 추구하는 데 열정적이다.