리액트와 함께 하는 웹 디자인

CHAPTER 1 플렉스 박스 레이아웃 11
1.1 개요
1.2 박스 모델
1.3 플렉스 박스 기본 개념
1.4 플렉스 컨테이너
1.5 플렉스 아이템
1.6 플렉스 박스를 사용한 아이템의 브라우저 정중앙 배치
1.7 플렉스 박스를 사용한 네비게이션 바
1.8 테스트용 이미지 사용

CHAPTER 2 그리드 레이아웃Grid Layout 디자인
2.1 개요
2.2 그리드 컨테이너(Grid Container)
2.3 그리드 단위 fr(Fraction) 적용하기
2.4 Repeat( ) 함수 사용하기
2.5 그리드 라인(Grid line)
2.6 Grid-template-areas 속성
2.7 그리드 트랙(Grid Track) 정렬
2.8 그리드 자동 플로우(흐름) 속성
2.9 컨테이너 레벨에서 그리드 셀 정렬
2.10 특정 그리드 셀 정렬
2.11 그리드 레이아웃을 이용한 이미지

CHAPTER 3 ReactJS 시작하기
3.1 ReactJS 소개
3.2 ReactJS 사용을 위한 기초 지식
3.3 자바스크립트 프론트 엔드 라이브러리/프레임워크
3.4 ReactJS의 특징
3.5 가상(Virtual) DOM
3.6 ReactJS 사용을 위한 준비 작업
3.7 ReactJS 시작하기
3.8 Dothome 서버를 통한 웹 서비스

CHAPTER 4 핵심 JavaScript 언어
4.1 개요
4.2 자바스크립트 식별자(Identifier)
4.3 변수(Variable)
4.4 템플릿 리터럴(Template Literal)
4.5 숫자, 문자열 그리고 부울
4.6 배열(Array)
4.7 객체(Object)
4.8 함수(Function)
4.9 화살표 함수(Arrow function)
4.10 구조 분해 할당(Destructuring assignment) 연산
4.11 전개 연산자(Spread Operator)
4.12 논리 연산자 ||와 &&
4.13 Nullish Coalescing 연산자(??)
4.14 로컬 저장소(Local Storage)
4.15 모듈(Module)
4.16 반복문(Loop)
4.17 Map과 Set
4.18 Promise 객체
4.19 ASYNC와 AWAIT
4.20 Fetch API

CHAPTER 5 함수형 컴포넌트Functional Component
5.1 개요
5.2 클래스형 컴포넌트와 함수형 컴포넌트
5.3 기존 HTML 파일을 컴포넌트로의 분할
5.4 컴포넌트(모듈)의 import와 export
5.5 컴포넌트에서 props 파라미터 전달
5.6 리액트 컴포넌트 렌더링

CHAPTER 6 리액트 문법 JSX
6.1 개요
6.2 JSX의 특징
6.3 JSX 기초 문법
6.4 HTML 스타일 속성 적용하기
6.5 CSS 모듈(Module)을 사용한 스타일 적용하기
6.6 조건문(Conditional Statement)
6.7 리액트에서 배열 사용하기
6.8 리액트에서 이미지 사용하기
6.9 리액트 이벤트(React Events)

CHAPTER 7 리액트 라우터React Router
7.1 리액트 라우터 개요 228
7.2 리액트 라우터 설치 및 관련 컴포넌트
7.3 Link가 없는 웹
7.4 라우팅 훅(Routing Hooks)
7.5 Outlet 컴포넌트
7.6 리액트 라우터를 적용한 디자인

CHAPTER 8 리액트 훅React Hooks
8.1 개요
8.2 리액트 훅의 종류
8.3 useState 훅
8.4 useEffect 훅
8.5 useRef 훅
8.6 useContext 훅
8.7 useMemo 훅
8.8 memo 컴포넌트
8.9 useCallback 훅
8.10 useReducer 훅

CHAPTER 9 전역 상태 관리용 Recoil과 Redux Toolkit
9.1 개요
9.2 Recoil
9.3 Redux Toolkit(리덕스 툴킷)

CHAPTER 10 파이어베이스Firebase
10.1 파이어베이스 개요
10.2 Firebase 프로젝트 생성하기
10.3 Firebase를 사용한 사용자 인증(Authentication)
10.4 Firestore 데이터베이스
10.5 Firebase 스토리지(Storage)

CHAPTER 11 Firebase와 연동한 심플 웹 페이지
11.1 Firebase 서버와 연동한 실습의 개요
11.2 프로젝트를 위한 패키지 설치
11.3 프로젝트의 구성
11.4 웹 페이지 결과 화면
11.5 소스 코드 설명
11.6 로드완료시 데이터 읽어오기
11.7 회원 등록시 유효성 검증

CHAPTER 12 리액트 부트스트랩React Bootstrap
12.1 개요
12.2 리액트 부트스트랩 활용을 위한 준비 작업
12.3 as prop API와 variant 속성
12.4 반응형 레이아웃
12.5 간단한 예제
12.6 여러 가지 리액트 부트스트랩의 컴포넌트
12.7 리액트 부트스트랩 라우팅 예제