리액트의 정석 with 타입스크립트
$38.56
SKU
9791140712939
[Free shipping over $100]
Standard Shipping estimated by Fri 05/2 - Thu 05/8 (주문일로부 10-14 영업일)
Express Shipping estimated by Tue 04/29 - Thu 05/1 (주문일로부 7-9 영업일)
* 안내되는 배송 완료 예상일은 유통사/배송사의 상황에 따라 예고 없이 변동될 수 있습니다.
| Publication Date | 2025/03/31 |
| Pages/Weight/Size | 183*235*20mm |
| ISBN | 9791140712939 |
| Categories | IT 모바일 > 컴퓨터 공학 |
Description
리액트와 타입스크립트를 결합하여 효율적인 웹 개발 학습
객체지향 프로그래밍 개념과 원리를 학습하여 실무 개발자되기
『리액트의 정석 with 타입스크립트』는 기존의 리액트 및 타입스크립트 학습서들과는 전혀 다른 시각에서 구성되었다. 단순히 타입스크립트 기반에서 리액트만 다루는 것이 아니라 그 근본이 되는 프로그래밍 원리부터 객체지향 개념, 타입스크립트의 기초까지 탄탄히 익힐 수 있도록 설계되었다. “왜 리액트를 사용하는가?”, “왜 타입스크립트가 필요한가?”, “프로그래밍의 기본 원리는 무엇인가?”라는 근본적인 질문에 대한 답을 찾는 과정에서 이 책을 모두 읽고 나면, 단순한 웹 개발자가 아닌, 진정한 소프트웨어 개발자로 성장할 수 있을 것이다.
객체지향 프로그래밍 개념과 원리를 학습하여 실무 개발자되기
『리액트의 정석 with 타입스크립트』는 기존의 리액트 및 타입스크립트 학습서들과는 전혀 다른 시각에서 구성되었다. 단순히 타입스크립트 기반에서 리액트만 다루는 것이 아니라 그 근본이 되는 프로그래밍 원리부터 객체지향 개념, 타입스크립트의 기초까지 탄탄히 익힐 수 있도록 설계되었다. “왜 리액트를 사용하는가?”, “왜 타입스크립트가 필요한가?”, “프로그래밍의 기본 원리는 무엇인가?”라는 근본적인 질문에 대한 답을 찾는 과정에서 이 책을 모두 읽고 나면, 단순한 웹 개발자가 아닌, 진정한 소프트웨어 개발자로 성장할 수 있을 것이다.
Contents
첫째 마당. 프로그래밍의 기본 원리
1장 │ 프로그래밍을 시작할 결심
1.1 왜 컴파일 기반의 언어를 학습해야 하는가
모든 프로그래밍 언어의 동작 원리는 거의 동일하다
왜 컴파일 기반의 언어를 학습해야 하는가
1.2 프로그래밍의 개념
프로그래밍이란
프로그래밍 언어란
컴퓨터 언어와 사람을 위한 언어
프로그래밍 작성 과정
1.3 개발 환경 구축하기
어떤 컴파일러를 사용해야 할까?
Visual Studio Community 설치하기
새 프로젝트 만들기
1.4 생애 최초 C 언어로 Hello World 출력하기
Hello World를 출력하는 의미
Hello World 무작정 작성하기
헤더 파일에 관하여
프로그래밍의 기본 구성 요소 함수
출력 함수 printf에 대한 이해
문장의 끝 세미콜론(;)
리턴값에 관하여
주석문을 사용하자
2장 │ 꼭 알아두어야 할 기본 문법과 원리
2.1 변수와 자료형
변수란
자료형이란
2.2 연산자
연산자란
산술 연산자
대입 연산자
증감 연산자
관계 연산자
논리 연산자
2.3 조건문
조건문이란
if 문의 기본 원리
if~else 문
if~else if~else 문
2.4 반복문
반복문이란
for 문의 기본 원리
for 문의 활용
이중 반복문
무한 반복
while 문의 기본 원리
2.5 함수
함수란 무엇인가
함수를 왜 사용할까
함수형 기반 언어의 구조
함수형 종류
함수의 기본 형태
함수 정의 및 호출하기
2.6 배열
배열이란 무엇인가
배열은 왜 사용할까
배열의 구조
배열의 복사
문자열 변수
null 문자에 관하여
3장 │ 코드 안에서 일어나는 동작 원리
3.1 포인터
포인터를 알아야 하는 이유
변수 선언 시 메모리 구조
포인터의 개념
포인터의 기본 사용법
3.2 포인터와 배열
배열 이름의 의미
배열의 이름과 포인터 변수의 차이점
3.3 함수 포인터
함수 포인터 사용
함수 포인터를 사용하는 이유
3.4 구조체, 공용체, 열거형
구조체란
공용체
열거형
3.5 동적 메모리 할당
동적으로 메모리를 할당해야 하는 이유
동적 메모리 할당 및 해제
동적 메모리의 구조
동적 메모리를 알아야 하는 이유
둘째 마당. 객체지향에 대한 이해
4장 │ 객체지향 철학의 이해
4.1 객체지향 철학에 관하여
객체지향 철학을 왜 이해해야 하는가
객체지향이란
4.2 추상화
추상화(抽象化)와 추상화(抽象?)
추상화란 무엇인가
추상화를 사용하는 이유
플라톤의 이데아론
4.3 캡슐화
캡슐화란
은닉된 데이터의 인터페이스
4.4 전통적인 클래스의 구조와 사용 이유
클래스란
클래스의 선언 형식
접근 지정자
객체의 선언
객체의 생성
생성자의 개념
클래스를 사용하는 이유
5장 │ 객체지향 기반의 재사용과 유연한 동작
5.1 상속성
현실 세계에서의 상속
클래스의 상속
프로젝트 관점의 상속
5.2 다형성
다형성의 의미
오버로딩의 개념
오버로딩의 구현
오버라이딩
5.3 자바스크립트 기반의 클래스 구조와 사용 방법
자바스크립트의 클래스 구조
자바스크립트 클래스의 사용 방법
자바스크립트 클래스의 상속과 오버라이딩
5.4 인터페이스
인터페이스란
인터페이스 구현
인터페이스를 사용하는 이유
추상 클래스를 상속하는 경우
인터페이스를 상속하는 경우
5.5 람다를 통한 화살표 함수의 이해
익명 메소드
람다식이란
람다식 표현
자바스크립트 기반 화살표 함수
화살표 함수를 사용하는 이유
셋째 마당. 타입스크립트의 기초
6장 │ 타입스크립트와 실행 환경
6.1 타입스크립트
타입스크립트란
데이터 타입을 표기하면 좋은 점
타입스크립트의 컴파일
타입스크립트의 사용 이유
6.2 타입스크립트 실행 환경
Node.js와 npm 설치하기
명령 프롬프트로 Node.js 확인하기
타입스크립트 설치하기
Visual Studio Code 다운로드 및 설치하기
Visual Studio Code 실행하기
6.3 타입스크립트 기반 프로젝트
첫 번째 타입스크립트 코드 만들기
중복 선언 문제 해결하기
자동 컴파일하기
7장 │ 기본 데이터 타입 사용하기
7.1 데이터 타입과 추론
자바스크립트의 데이터 타입
타입스크립트의 데이터 타입과 추론
배열 타입 추론
함수 리턴 타입 추론
객체 리터럴 타입 추론
타입스크립트의 데이터 타입 종류
7.2 타입 명시
기본 데이터 타입 명시
null과 undefined 타입 명시
7.3 함수의 데이터 타입
함수 매개변수와 반환 타입 명시
함수에서 매개변수를 생략할 수 없는 경우
선택적 매개변수 사용
매개변수 기본값 설정
나머지 매개변수
7.4 배열과 튜플 타입
배열 타입
튜플 타입
8장 │ 객체 데이터 타입 사용하기
8.1 객체의 데이터 타입
기본 객체 타입 선언하기
중첩된 객체 타입
선택적 속성
읽기 전용 속성
객체의 타입과 함수 결합
8.2 인터페이스
인터페이스 만들기
선택적 속성이 있는 인터페이스
읽기 전용 속성이 있는 인터페이스
인터페이스로 함수 타입 정의
인터페이스 간 상속
클래스와 인터페이스 구현
객체 리터럴과 클래스 사용의 차이점
8.3 열거형과 유니온 타입
열거형 타입
유니온 타입
8.4 타입 별칭과 리터럴 타입
타입 별칭
리터럴 타입
8.5 타입 가드
타입 가드란
typeof를 사용한 타입 가드
instanceof를 사용한 타입 가드
in 연산자를 사용한 타입 가드
null 체크를 사용한 타입 가드
넷째 마당. 타입스크립트 기반의 리액트
9장 │ 리액트 시작하기
9.1 리액트
리액트란
리액트의 특징
리액트 공식 사이트
9.2 리액트의 동작 원리
컴포넌트란
렌더링이란
가상 DOM
초기 렌더링과 재렌더링
재조정 과정
9.3 리액트에서 타입스크립트를 사용하는 이유
9.4 타입스크립트 기반의 리액트 환경 설정
프로젝트 생성하기
프로젝트 파일 구조 확인하기
타입스크립트 설정 파일(tsconfig.json) 확인하기
리액트 빌드 및 실행하기
9.5 리액트 기본 앱의 실행 구조
index.html 파일 확인하기
main.tsx 파일 확인하기
App.tsx 파일 확인하기
스타일 설정하기
10장 │ 리액트의 기본 개념
10.1 일정 관리 앱 프로젝트 만들기
무엇을 만들 것인가
프로젝트 생성하기
10.2 반드시 알아두어야 할 JSX 기본 문법
JSX란
JSX로 화면에 Hello React 출력하기
출력 내용 감싸기
변수의 데이터 바인딩, 중괄호
클래스 선택자, className
인라인 스타일링, style
태그 꼭 닫기
주석
10.3 컴포넌트 만들기
컴포넌트의 종류
클래스형 컴포넌트
함수형 컴포넌트
TodoList 컴포넌트 만들기
함수형 컴포넌트 타입 React.FC
10.4 변수와 상태
상태란
상태를 사용하는 방법
상태 코드 반영하기
상태 데이터 여러 개 저장하기
상태 변경 함수
상태 함수를 사용해야만 하는 이유
스타일 추가 및 수정하기
할 일 목록 타입 확장하기
10.5 구조 분해 할당 이해하기
구조 분해 할당
배열의 구조 분해 할당
객체의 구조 분해 할당
10.6 반복 루틴 처리하기
map 함수 사용하기
key 속성 사용하기
10.7 이벤트 처리와 상태 업데이트하기
체크 박스 추가하기
체크 이벤트 처리하기
체크 여부에 따라 취소선 출력하기
10.8 부트스트랩을 사용하여 UI 적용하기
부트스트랩 설치하기
부트스트랩 CSS 파일 추가하기
현재 코드에 부트스트랩 적용하기
11장 │ 리액트의 활용
11.1 게시물 입력하기
입력 텍스트 박스와 추가 버튼 배치하기
새로운 할 일을 목록에 추가하기
스프레드(...) 연산자
11.2 타이머로 현재 시각 출력하기
타이머 컴포넌트 만들기
시계 컴포넌트 만들기
11.3 게시물 삭제하기
게시물 삭제 버튼 배치하기
게시물 삭제 기능 구현하기
11.4 상세보기 대화상자 만들기
모달 대화상자 추가하기
게시물을 선택했을 때 이벤트 등록하기
게시물을 선택했을 때 상세 페이지 출력하기
11.5 다른 컴포넌트에 데이터 전달하기: props
프롭스란
함수형 컴포넌트에서 프롭스 사용하기
클래스형 컴포넌트에서 프롭스 사용하기
태그 사이의 내용을 보여주는 children
구조 분해 할당 문법을 통해 props 내부 값 추출하기
프롭스로 함수 전달하기
상세 페이지 컴포넌트화하기
상세 페이지에 프롭스로 데이터 전달하기
12장 │ 리액트 라우팅
12.1 도서 쇼핑몰 프로젝트 만들기
타입스크립트 기반의 새 프로젝트 생성하기
리액트 부트스트랩 환경 설정하기
리액트 부트스트랩 컴포넌트 사용하기
레이아웃 만들기
12.2 메인 화면 구성하기
상단 바 만들기
이미지 넣기
이미지를 캐러셀에 적용하기
12.3 도서 상품 데이터 가져오기
베스트 도서 상품 데이터 만들기
데이터 가져오기
BookItem 컴포넌트 만들기
12.4 푸터 만들기
Footer 컴포넌트 내용 추가하기
12.5 라우팅하기
라우터로 페이지 나누기
상세 페이지 만들기
URL 파라미터로 여러 개의 상세 페이지 만들기
404 페이지 오류 처리하기
13장 │ 리액트 훅
13.1 컴포넌트 라이프 사이클
컴포넌트 라이프 사이클이란
클래스형 컴포넌트 기반 라이프 사이클
13.2 함수형 컴포넌트
라이프 사이클과 useEffect
useEffect란
함수형 컴포넌트 기반 라이프 사이클
useEffect를 이용한 타이머 사용하기
useEffect를 사용하지 않았다면
useEffect를 이용한 API 데이터 요청하기
useEffect를 이용한 팝업 페이지 출력하기
13.3 훅(Hooks)에 관하여
훅이란
훅의 종류
useRef 사용 방법
useMemo 사용 방법
useCallback 사용 방법
useCallback을 사용하는 이유
14장 │ 데이터 통신과 페이지 구현하기
14.1 Ajax를 활용한 데이터 송수신하기
Ajax를 사용한 비동기 통신
14.2 도서 목록 페이지 구현하기
리액트에서의 Ajax 호출 방식
Ajax로 불러온 데이터 바인딩하기
14.3 About 페이지 구현하기
About 페이지 레이아웃 설계하기
About 페이지 기능 구현하기
14.4 Contact 페이지 구현하기
Contact 페이지 UI 구현하기
14.5 로그인 페이지 구현하기
로그인 페이지 UI 구현하기
로그인 아이콘 추가하기
15장 │ 리덕스 툴킷을 사용한 상태 관리
15.1 카트 페이지 만들기
카트 페이지 구성 요소
라우터 추가하기
CartPage 컴포넌트 작성하기
15.2 리덕스를 사용하는 이유 및 리덕스 설치
카트 페이지에 데이터 바인딩하기
이 코드에서 생각해 볼 구조 문제점 및 개선점
리덕스를 사용하는 이유
리덕스 툴킷 설치하기
리덕스 툴킷 설정하기
15.3 리덕스 store에 상태 저장하고 사용하기
리덕스 store에 상태 저장하기
리덕스 store에서 상태 가져오기
도서 데이터를 store에 저장하고 바인딩하기
15.4 리덕스 store의 상태 변경하기
상태 변경 함수 정의하기
상태 변경 함수 사용하기
리덕스 상태 사용 방법
왜 디스패치(dispatch)를 사용할까?
15.5 상태가 object 또는 Array일 경우 변경하기
상태가 object인 데이터 변경하기
15.6 전달 인자를 활용한 상태 업데이트
상태 변경 함수에 전달 인자 전달하기
카트 페이지 상품의 수량 변경하기
15.7 카트 페이지 기능 개선하기
useMemo를 사용한 성능 개선하기
카트 메뉴 추가하기
〈카트에 담기〉 버튼을 클릭했을 때 카트에 상품 추가하기
카트의 도서 수량 변경하기
카트의 데이터 유지하기
카트 비우기
15.8 리액트 배포하기
현재 소스 코드의 리소스 용량
배포 파일 생성하기
내부에서 수행되는 작업
배포 파일 실행하기
찾아보기
1장 │ 프로그래밍을 시작할 결심
1.1 왜 컴파일 기반의 언어를 학습해야 하는가
모든 프로그래밍 언어의 동작 원리는 거의 동일하다
왜 컴파일 기반의 언어를 학습해야 하는가
1.2 프로그래밍의 개념
프로그래밍이란
프로그래밍 언어란
컴퓨터 언어와 사람을 위한 언어
프로그래밍 작성 과정
1.3 개발 환경 구축하기
어떤 컴파일러를 사용해야 할까?
Visual Studio Community 설치하기
새 프로젝트 만들기
1.4 생애 최초 C 언어로 Hello World 출력하기
Hello World를 출력하는 의미
Hello World 무작정 작성하기
헤더 파일에 관하여
프로그래밍의 기본 구성 요소 함수
출력 함수 printf에 대한 이해
문장의 끝 세미콜론(;)
리턴값에 관하여
주석문을 사용하자
2장 │ 꼭 알아두어야 할 기본 문법과 원리
2.1 변수와 자료형
변수란
자료형이란
2.2 연산자
연산자란
산술 연산자
대입 연산자
증감 연산자
관계 연산자
논리 연산자
2.3 조건문
조건문이란
if 문의 기본 원리
if~else 문
if~else if~else 문
2.4 반복문
반복문이란
for 문의 기본 원리
for 문의 활용
이중 반복문
무한 반복
while 문의 기본 원리
2.5 함수
함수란 무엇인가
함수를 왜 사용할까
함수형 기반 언어의 구조
함수형 종류
함수의 기본 형태
함수 정의 및 호출하기
2.6 배열
배열이란 무엇인가
배열은 왜 사용할까
배열의 구조
배열의 복사
문자열 변수
null 문자에 관하여
3장 │ 코드 안에서 일어나는 동작 원리
3.1 포인터
포인터를 알아야 하는 이유
변수 선언 시 메모리 구조
포인터의 개념
포인터의 기본 사용법
3.2 포인터와 배열
배열 이름의 의미
배열의 이름과 포인터 변수의 차이점
3.3 함수 포인터
함수 포인터 사용
함수 포인터를 사용하는 이유
3.4 구조체, 공용체, 열거형
구조체란
공용체
열거형
3.5 동적 메모리 할당
동적으로 메모리를 할당해야 하는 이유
동적 메모리 할당 및 해제
동적 메모리의 구조
동적 메모리를 알아야 하는 이유
둘째 마당. 객체지향에 대한 이해
4장 │ 객체지향 철학의 이해
4.1 객체지향 철학에 관하여
객체지향 철학을 왜 이해해야 하는가
객체지향이란
4.2 추상화
추상화(抽象化)와 추상화(抽象?)
추상화란 무엇인가
추상화를 사용하는 이유
플라톤의 이데아론
4.3 캡슐화
캡슐화란
은닉된 데이터의 인터페이스
4.4 전통적인 클래스의 구조와 사용 이유
클래스란
클래스의 선언 형식
접근 지정자
객체의 선언
객체의 생성
생성자의 개념
클래스를 사용하는 이유
5장 │ 객체지향 기반의 재사용과 유연한 동작
5.1 상속성
현실 세계에서의 상속
클래스의 상속
프로젝트 관점의 상속
5.2 다형성
다형성의 의미
오버로딩의 개념
오버로딩의 구현
오버라이딩
5.3 자바스크립트 기반의 클래스 구조와 사용 방법
자바스크립트의 클래스 구조
자바스크립트 클래스의 사용 방법
자바스크립트 클래스의 상속과 오버라이딩
5.4 인터페이스
인터페이스란
인터페이스 구현
인터페이스를 사용하는 이유
추상 클래스를 상속하는 경우
인터페이스를 상속하는 경우
5.5 람다를 통한 화살표 함수의 이해
익명 메소드
람다식이란
람다식 표현
자바스크립트 기반 화살표 함수
화살표 함수를 사용하는 이유
셋째 마당. 타입스크립트의 기초
6장 │ 타입스크립트와 실행 환경
6.1 타입스크립트
타입스크립트란
데이터 타입을 표기하면 좋은 점
타입스크립트의 컴파일
타입스크립트의 사용 이유
6.2 타입스크립트 실행 환경
Node.js와 npm 설치하기
명령 프롬프트로 Node.js 확인하기
타입스크립트 설치하기
Visual Studio Code 다운로드 및 설치하기
Visual Studio Code 실행하기
6.3 타입스크립트 기반 프로젝트
첫 번째 타입스크립트 코드 만들기
중복 선언 문제 해결하기
자동 컴파일하기
7장 │ 기본 데이터 타입 사용하기
7.1 데이터 타입과 추론
자바스크립트의 데이터 타입
타입스크립트의 데이터 타입과 추론
배열 타입 추론
함수 리턴 타입 추론
객체 리터럴 타입 추론
타입스크립트의 데이터 타입 종류
7.2 타입 명시
기본 데이터 타입 명시
null과 undefined 타입 명시
7.3 함수의 데이터 타입
함수 매개변수와 반환 타입 명시
함수에서 매개변수를 생략할 수 없는 경우
선택적 매개변수 사용
매개변수 기본값 설정
나머지 매개변수
7.4 배열과 튜플 타입
배열 타입
튜플 타입
8장 │ 객체 데이터 타입 사용하기
8.1 객체의 데이터 타입
기본 객체 타입 선언하기
중첩된 객체 타입
선택적 속성
읽기 전용 속성
객체의 타입과 함수 결합
8.2 인터페이스
인터페이스 만들기
선택적 속성이 있는 인터페이스
읽기 전용 속성이 있는 인터페이스
인터페이스로 함수 타입 정의
인터페이스 간 상속
클래스와 인터페이스 구현
객체 리터럴과 클래스 사용의 차이점
8.3 열거형과 유니온 타입
열거형 타입
유니온 타입
8.4 타입 별칭과 리터럴 타입
타입 별칭
리터럴 타입
8.5 타입 가드
타입 가드란
typeof를 사용한 타입 가드
instanceof를 사용한 타입 가드
in 연산자를 사용한 타입 가드
null 체크를 사용한 타입 가드
넷째 마당. 타입스크립트 기반의 리액트
9장 │ 리액트 시작하기
9.1 리액트
리액트란
리액트의 특징
리액트 공식 사이트
9.2 리액트의 동작 원리
컴포넌트란
렌더링이란
가상 DOM
초기 렌더링과 재렌더링
재조정 과정
9.3 리액트에서 타입스크립트를 사용하는 이유
9.4 타입스크립트 기반의 리액트 환경 설정
프로젝트 생성하기
프로젝트 파일 구조 확인하기
타입스크립트 설정 파일(tsconfig.json) 확인하기
리액트 빌드 및 실행하기
9.5 리액트 기본 앱의 실행 구조
index.html 파일 확인하기
main.tsx 파일 확인하기
App.tsx 파일 확인하기
스타일 설정하기
10장 │ 리액트의 기본 개념
10.1 일정 관리 앱 프로젝트 만들기
무엇을 만들 것인가
프로젝트 생성하기
10.2 반드시 알아두어야 할 JSX 기본 문법
JSX란
JSX로 화면에 Hello React 출력하기
출력 내용 감싸기
변수의 데이터 바인딩, 중괄호
클래스 선택자, className
인라인 스타일링, style
태그 꼭 닫기
주석
10.3 컴포넌트 만들기
컴포넌트의 종류
클래스형 컴포넌트
함수형 컴포넌트
TodoList 컴포넌트 만들기
함수형 컴포넌트 타입 React.FC
10.4 변수와 상태
상태란
상태를 사용하는 방법
상태 코드 반영하기
상태 데이터 여러 개 저장하기
상태 변경 함수
상태 함수를 사용해야만 하는 이유
스타일 추가 및 수정하기
할 일 목록 타입 확장하기
10.5 구조 분해 할당 이해하기
구조 분해 할당
배열의 구조 분해 할당
객체의 구조 분해 할당
10.6 반복 루틴 처리하기
map 함수 사용하기
key 속성 사용하기
10.7 이벤트 처리와 상태 업데이트하기
체크 박스 추가하기
체크 이벤트 처리하기
체크 여부에 따라 취소선 출력하기
10.8 부트스트랩을 사용하여 UI 적용하기
부트스트랩 설치하기
부트스트랩 CSS 파일 추가하기
현재 코드에 부트스트랩 적용하기
11장 │ 리액트의 활용
11.1 게시물 입력하기
입력 텍스트 박스와 추가 버튼 배치하기
새로운 할 일을 목록에 추가하기
스프레드(...) 연산자
11.2 타이머로 현재 시각 출력하기
타이머 컴포넌트 만들기
시계 컴포넌트 만들기
11.3 게시물 삭제하기
게시물 삭제 버튼 배치하기
게시물 삭제 기능 구현하기
11.4 상세보기 대화상자 만들기
모달 대화상자 추가하기
게시물을 선택했을 때 이벤트 등록하기
게시물을 선택했을 때 상세 페이지 출력하기
11.5 다른 컴포넌트에 데이터 전달하기: props
프롭스란
함수형 컴포넌트에서 프롭스 사용하기
클래스형 컴포넌트에서 프롭스 사용하기
태그 사이의 내용을 보여주는 children
구조 분해 할당 문법을 통해 props 내부 값 추출하기
프롭스로 함수 전달하기
상세 페이지 컴포넌트화하기
상세 페이지에 프롭스로 데이터 전달하기
12장 │ 리액트 라우팅
12.1 도서 쇼핑몰 프로젝트 만들기
타입스크립트 기반의 새 프로젝트 생성하기
리액트 부트스트랩 환경 설정하기
리액트 부트스트랩 컴포넌트 사용하기
레이아웃 만들기
12.2 메인 화면 구성하기
상단 바 만들기
이미지 넣기
이미지를 캐러셀에 적용하기
12.3 도서 상품 데이터 가져오기
베스트 도서 상품 데이터 만들기
데이터 가져오기
BookItem 컴포넌트 만들기
12.4 푸터 만들기
Footer 컴포넌트 내용 추가하기
12.5 라우팅하기
라우터로 페이지 나누기
상세 페이지 만들기
URL 파라미터로 여러 개의 상세 페이지 만들기
404 페이지 오류 처리하기
13장 │ 리액트 훅
13.1 컴포넌트 라이프 사이클
컴포넌트 라이프 사이클이란
클래스형 컴포넌트 기반 라이프 사이클
13.2 함수형 컴포넌트
라이프 사이클과 useEffect
useEffect란
함수형 컴포넌트 기반 라이프 사이클
useEffect를 이용한 타이머 사용하기
useEffect를 사용하지 않았다면
useEffect를 이용한 API 데이터 요청하기
useEffect를 이용한 팝업 페이지 출력하기
13.3 훅(Hooks)에 관하여
훅이란
훅의 종류
useRef 사용 방법
useMemo 사용 방법
useCallback 사용 방법
useCallback을 사용하는 이유
14장 │ 데이터 통신과 페이지 구현하기
14.1 Ajax를 활용한 데이터 송수신하기
Ajax를 사용한 비동기 통신
14.2 도서 목록 페이지 구현하기
리액트에서의 Ajax 호출 방식
Ajax로 불러온 데이터 바인딩하기
14.3 About 페이지 구현하기
About 페이지 레이아웃 설계하기
About 페이지 기능 구현하기
14.4 Contact 페이지 구현하기
Contact 페이지 UI 구현하기
14.5 로그인 페이지 구현하기
로그인 페이지 UI 구현하기
로그인 아이콘 추가하기
15장 │ 리덕스 툴킷을 사용한 상태 관리
15.1 카트 페이지 만들기
카트 페이지 구성 요소
라우터 추가하기
CartPage 컴포넌트 작성하기
15.2 리덕스를 사용하는 이유 및 리덕스 설치
카트 페이지에 데이터 바인딩하기
이 코드에서 생각해 볼 구조 문제점 및 개선점
리덕스를 사용하는 이유
리덕스 툴킷 설치하기
리덕스 툴킷 설정하기
15.3 리덕스 store에 상태 저장하고 사용하기
리덕스 store에 상태 저장하기
리덕스 store에서 상태 가져오기
도서 데이터를 store에 저장하고 바인딩하기
15.4 리덕스 store의 상태 변경하기
상태 변경 함수 정의하기
상태 변경 함수 사용하기
리덕스 상태 사용 방법
왜 디스패치(dispatch)를 사용할까?
15.5 상태가 object 또는 Array일 경우 변경하기
상태가 object인 데이터 변경하기
15.6 전달 인자를 활용한 상태 업데이트
상태 변경 함수에 전달 인자 전달하기
카트 페이지 상품의 수량 변경하기
15.7 카트 페이지 기능 개선하기
useMemo를 사용한 성능 개선하기
카트 메뉴 추가하기
〈카트에 담기〉 버튼을 클릭했을 때 카트에 상품 추가하기
카트의 도서 수량 변경하기
카트의 데이터 유지하기
카트 비우기
15.8 리액트 배포하기
현재 소스 코드의 리소스 용량
배포 파일 생성하기
내부에서 수행되는 작업
배포 파일 실행하기
찾아보기