장바구니 담기 close

장바구니에 상품을 담았습니다.

장바구니로 계속쇼핑하기
리액트와 함께 하는 웹 디자인
미리보기

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

  • 손승일
  • |
  • 21세기사
  • |
  • 2024-04-24 출간
  • |
  • 398페이지
  • |
  • 210 X 297 X 30mm / 1075g
  • |
  • ISBN 9791168331532
판매가

32,000원

즉시할인가

28,800 원

배송비

2,300원

(제주/도서산간 배송 추가비용:3,000원)

추가상품
상품선택
독서대 7,900원 독서대 선택안함 0원
수량
+ -
총주문금액
28,800원
장바구니 구매하기

※ 스프링제본 상품은 반품/교환/환불이 불가능하므로 신중하게 선택하여 주시기 바랍니다.

북스크린영상으로 만나보는 한 권의 책 이야기

출판사서평

 

이 책은 반응형 디자인에 적합한 플렉스 박스 모델과 그리드 디자인을 먼저 학습한 다음, 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 리액트 부트스트랩 라우팅 예제
추천포스트

교환 및 환불안내

도서교환 및 환불
  • ㆍ배송기간은 평일 기준 1~3일 정도 소요됩니다.(스프링 분철은 1일 정도 시간이 더 소요됩니다.)
  • ㆍ상품불량 및 오배송등의 이유로 반품하실 경우, 반품배송비는 무료입니다.
  • ㆍ고객님의 변심에 의한 반품,환불,교환시 택배비는 본인 부담입니다.
  • ㆍ상담원과의 상담없이 교환 및 반품으로 반송된 물품은 책임지지 않습니다.
  • ㆍ이미 발송된 상품의 취소 및 반품, 교환요청시 배송비가 발생할 수 있습니다.
  • ㆍ반품신청시 반송된 상품의 수령후 환불처리됩니다.(카드사 사정에 따라 카드취소는 시일이 3~5일이 소요될 수 있습니다.)
  • ㆍ주문하신 상품의 반품,교환은 상품수령일로 부터 7일이내에 신청하실 수 있습니다.
  • ㆍ상품이 훼손된 경우 반품 및 교환,환불이 불가능합니다.
  • ㆍ반품/교환시 고객님 귀책사유로 인해 수거가 지연될 경우에는 반품이 제한될 수 있습니다.
  • ㆍ스프링제본 상품은 교환 및 환불이 불가능 합니다.
  • ㆍ군부대(사서함) 및 해외배송은 불가능합니다.
  • ㆍ오후 3시 이후 상담원과 통화되지 않은 취소건에 대해서는 고객 반품비용이 발생할 수 있습니다.
반품안내
  • 마이페이지 > 나의상담 > 1 : 1 문의하기 게시판 또는 고객센터 1800-7327
교환/반품주소
  • 경기도 파주시 문발로 211 1층 / (주)북채널 / 전화 : 1800-7327
  • 택배안내 : CJ대한통운(1588-1255)
  • 고객님 변심으로 인한 교환 또는 반품시 왕복 배송비 5,000원을 부담하셔야 하며, 제품 불량 또는 오 배송시에는 전액을 당사에서부담 합니다.