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

손승일 지음

21세기사 2025년 09월 22일 출간 국내도서 : 2024년 04월 24일 출간

작품소개

책소개

이 책은 반응형 디자인에 적합한 플렉스 박스 모델과 그리드 디자인을 먼저 학습한 다음, javaScript에 대한 최신 기초 지식을 간단히 학습한다. 이후 React를 사용해 웹 디자인을 수행하는 기술을 주로 학습한다. 특히 클래스 기반의 컴포넌트 설계 방식이 아닌 함수형 컴포넌트를 사용한 웹 디자인 기법을 집중적으로 학습할 것이다. 그리고 리액트 훅을 사용하는 방법, 전역 상태 변수를 다루는 방법 등을 학습한다. 리액트 훅의 도입은 함수형 컴포넌트를 사용한 웹 디자인이 대세가 되는데 큰 기여를 하였다. 물론 라우팅의 개념도 상세하게 소개하고, 소개한 라우팅을 개념을 적용해 라우팅을 구현해 보는실습도 수행한다. 그리고 책의 후반부에는 구글의 백 엔드 서비스인 파이이베이스(Firebase)와 연동하여 간단한 웹을 제작하는 실습을 할 것이다. 본 책의 흐름을 따라서 학습한다면 React를 사용한 웹 디자인의 개념을 체득할 수 있는 기회가 될 것이라고 확신하는 바이다.

목차

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 리액트 부트스트랩 라우팅 예제

인물정보

저자(글) 손승일