리액트 머티리얼 UI 쿡북 (머티리얼 UI를 사용한 룩앤필 개선)

아담보두치

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

1장그리드-페이지에구성요소배치하기
__소개
__브레이크포인트적용
__공간채우기
__컨테이너와항목의추상화
__고정열레이아웃
__열방향변경

2장앱바-모든페이지의최상위수준
__소개
__고정된위치
__스크롤시숨기기
__툴바추상화
__내비게이션과함께사용하기

3장드로어-내비게이션제어를위한장소
__소개
__드로어타입
__드로어항목상태
__드로어항목내비게이션
__드로어섹션
__앱바상호작용

4장탭-콘텐츠를탭섹션으로그룹화하기
__소개
__앱바통합
__탭정렬
__상태에기반한탭렌더링
__탭콘텐츠추상화
__경로로탭탐색하기

5장확장패널-콘텐츠를패널섹션으로그룹화하기
__소개
__상태저장확장패널
__패널헤더서식지정
__스크롤가능한패널콘텐츠
__패널콘텐츠지연로딩

6장리스트-간단한수집데이터표시
__소개
__상태를사용한리스트항목렌더링
__리스트아이콘
__리스트아바타와텍스트
__리스트섹션
__중첩된리스트
__리스트제어
__리스트스크롤

7장테이블-복잡한수집데이터표시
__소개
__상태테이블
__정렬가능한열
__행필터링
__행선택
__행동작

8장카드-상세정보표시
__소개
__메인콘텐츠
__카드헤더
__동작수행하기
__미디어표현
__확장카드

9장스낵바-임시메시지
__소개
__스낵바콘텐츠
__상태로가시성제어하기
__스낵바전환
__스낵바위치지정
__오류경계와오류스낵바
__스낵바동작
__스낵바큐

10장버튼-동작시작하기
__소개
__버튼변형
__버튼강조
__링크버튼
__플로팅동작
__아이콘버튼
__버튼크기

11장텍스트-텍스트입력수집
__소개
__상태로입력제어하기
__자리표시자와헬퍼텍스트
__유효성검사및오류표시
__패스워드필드
__멀티라인입력
__입력꾸미기
__입력마스킹

12장자동완성과칩-여러항목에대한텍스트입력제안
__소개
__자동완성구성요소만들기
__자동완성제안선택
__API기반자동완성
__검색결과강조
__독립형칩입력

13장선택-선택사항의결정
__소개
__체크박스그룹추상화
__체크박스항목사용자정의
__라디오버튼그룹추상화
__라디오버튼유형
__체크박스를스위치로바꾸기
__상태로선택제어하기
__여러항목선택

14장선택도구-날짜와시간선택
__소개
__날짜선택도구사용
__시간선택도구사용
__초기날짜값과시간값설정
__날짜및시간구성요소결합
__다른날짜및시간패키지통합

15장대화상자-사용자상호작용을위한모달화면
__소개
__양식입력수집
__동작확인
__경고표시
__API통합
__전체화면대화상자만들기
__대화상자콘텐츠스크롤

16장메뉴-팝아웃되는동작표시하기
__소개
__상태로메뉴구성하기
__메뉴스크롤옵션
__메뉴전환사용하기
__메뉴항목사용자정의

17장타이포그래피-폰트의룩앤필제어하기
__소개
__타이포그래피유형
__테마색상사용
__텍스트정렬
__텍스트래핑

18장아이콘-룩앤필에맞게아이콘향상시키기
__소개
__아이콘색상
__아이콘크기조정
__동적으로아이콘로드하기
__테마아이콘
__더많은아이콘설치하기

19장테마-앱의룩앤필중앙집중화하기
__소개
__팔레트이해하기
__밝은테마와어두운테마비교
__타이포그래피사용자정의
__테마중첩
__구성요소테마설정이해

20장스타일-구성요소에스타일적용하기
__소개
__기본구성요소스타일
__범위구성요소스타일
__구성요소스타일확장
__스타일을테마로이동하기
__그외스타일링옵션

★이책에서다루는내용★

■머티리얼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를디자인한다.