홈앤서비스 SK BROADBAND

01장 리액트 소개
_1.1 리액트란?
__1.1.1 전통적인 웹 애플리케이션
__1.1.2 멀티 페이지 애플리케이션
__1.1.3 단일 페이지 애플리케이션
_1.2 리액트의 실행 방식과 특징
__1.2.1 상태 관리와 단방향 데이터 바인딩
__1.2.2 JSX
__1.2.3 컴포넌트 기반의 개발
__1.2.4 가상 DOM의 성능
_1.3 리액트 애플리케이션 작성
_1.4 개발 환경 설정
__1.4.1 Node.js 설치
__1.4.2 Visual Studio Code 설치
__1.4.3 React Developer Tools 설치

02장 ES6와 타입스크립트 기초
_2.1 ES6와 타입스크립트 개요
_2.2 ES6
__2.2.1 ES6를 사용하기 위한 프로젝트 설정
__2.2.2 let과 const
__2.2.3 기본 파라미터와 가변 파라미터
__2.2.4 구조 분해 할당
__2.2.5 화살표 함수
__2.2.6 객체 리터럴
__2.2.7 템플릿 리터럴
__2.2.8 모듈
__2.2.9 프로미스
__2.2.10 전개 연산자
__2.2.11 클래스
_2.3 타입스크립트
__2.3.1 타입스크립트 환경 설정
__2.3.2 타입 지정 방법
__2.3.3 제네릭
__2.3.4 타입 별칭
__2.3.5 유니온 타입
__2.3.6 인터섹션 타입
__2.3.7 열거형
__2.3.8 인터페이스
__2.3.9 타입 추론

03장 리액트 시작하기
_3.1 개발 환경 설정 도구
__3.1.1 CRA 도구
__3.1.2 Vite 도구
_3.2 Hello 애플리케이션 작성
_3.3 CSS 스타일 적용 방법
_3.4 JSX
__3.4.1 JSX 주의 사항 1
__3.4.2 JSX 주의 사항 2
__3.4.3 JSX 주의 사항 3
__3.4.4 JSX 주의 사항 4
__3.4.5 JSX 주의 사항 5
__3.4.6 JSX 적용 예제
_3.5 속성
__3.5.1 속성 정의
__3.5.2 속성 적용 예제
__3.5.3 컴포넌트의 세분화
_3.6 상태
__3.6.1 상태의 초기화

04장 리액트 컴포넌트
_4.1 컴포넌트 스타일 지정
__4.1.1 HTML에서의 스타일 지정
__4.1.2 리액트에서의 스타일 지정
__4.1.3 리액트 인라인 스타일 지정
__4.1.4 CSS 모듈
__4.1.5 styled-components
_4.2 속성의 유효성 검증
__4.2.1 속성의 유효성 검증 방법
__4.2.2 PropTypes를 이용한 유효성 검증
__4.2.3 지정 가능한 유효성 검증 타입
__4.2.4 속성의 기본값 지정
_4.3 리액트 이벤트
__4.3.1 이벤트 적용 방법
__4.3.2 이벤트 아규먼트의 정적 타입
__4.3.3 이벤트 적용 예제 작성
__4.3.4 리액트의 단방향 데이터 바인딩
_4.4 이벤트 핸들러와 상태 변경
_4.5 제어 컴포넌트와 비제어 컴포넌트
__4.5.1 제어 컴포넌트
__4.5.2 비제어 컴포넌트
_4.6 상태 심화
__4.6.1 렌더링 최적화와 불변성
__4.6.2 불변성 라이브러리 immer
_4.7 컨테이너 컴포넌트와 표현 컴포넌트
_4.8 화면 단위 개발 단계
__4.8.1 화면 시안 작성
__4.8.2 상태와 액션 도출
__4.8.3 컴포넌트 분할과 목록 도출
__4.8.4 컴포넌트 정의
__4.8.5 컴포넌트 구현
_4.9 애플리케이션 실습
__4.9.1 화면 시안과 컴포넌트 분할
__4.9.2 컴포넌트 목록 작성
__4.9.3 프로젝트 생성
__4.9.4 컴포넌트 작성
__4.9.5 애플리케이션 실행

05장 리액트 클래스 컴포넌트
_5.1 함수 컴포넌트와 클래스 컴포넌트
_5.2 클래스 컴포넌트 작성 방법
_5.3 간단한 디지털 시계 만들기 예제
_5.4 생명주기 메서드
__5.4.1 컴포넌트가 마운트될 때
__5.4.2 컴포넌트가 업데이트될 때
__5.4.3 컴포넌트가 언마운트될 때
__5.4.4 생명주기 메서드 예제 1
__5.4.5 생명주기 메서드 예제 2
__5.4.6 생명주기 메서드 예제 3
_5.5 가상 DOM과 조정
__5.5.1 가상 DOM과 브라우저 DOM
__5.5.2 key 특성
__5.5.3 생명주기 메서드를 이용한 렌더링 최적화
_5.6 렌더링 최적화 적용
__5.6.1 shouldComponentUpdate 생명주기 메서드 적용
__5.6.2 PureComponent 적용

06장 리액트 훅
_6.1 함수 컴포넌트와 리액트 훅
_6.2 useState 훅
_6.3 useEffect 훅
__6.3.1 컴포넌트가 마운트 및 업데이트될 때
__6.3.2 depsList 지정
__6.3.3 클린업 함수
__6.3.4 useEffect의 장점
__6.3.5 리액트 훅의 생명주기
_6.4 useReducer 훅
__6.4.1 리듀서의 개념
__6.4.2 리듀서 함수
__6.4.3 useReducer 훅 사용하기
_6.5 useRef 훅
__6.5.1 상태가 아닌 데이터 관리
__6.5.2 useRef 훅을 이용해 브라우저 DOM에 접근하기
_6.6 메모이제이션 훅
__6.6.1 테스트 예제 준비
__6.6.2 useMemo 훅 적용
__6.6.3 useCallback 훅 적용
_6.7 사용자 정의 훅

07장 고차 함수와 렌더링 최적화
_7.1 고차 함수란?
_7.2 간단한 고차 함수 예제
_7.3 React.memo 고차 함수
_7.4 React.memo를 이용한 렌더링 성능 최적화
__7.4.1 최적화 이전의 todolist-app
__7.4.2 React.memo 고차 함수 적용
__7.4.3 속성으로 함수를 전달하는 경우
__7.4.4 useCallback 훅 적용
__7.4.5 React.memo의 두 번째 인자 적용
__7.4.6 추가적인 컴포넌트의 분할

08장 Context API
_8.1 Context API란?
_8.2 todolist-app에 Context API 적용하기

09장 리액트 라우터
_9.1 리액트 라우터란?
_9.2 리액트 라우터의 기본 사용법
__9.2.1 예제 프로젝트 생성 및 라우팅 컴포넌트 기초
__9.2.2 기초 예제 작성
_9.3 라우팅된 컴포넌트로 속성 전달하기
__9.3.1 속성을 전달하는 방법
__9.3.2 복잡한 객체를 속성으로 전달하기
_9.4 URI 파라미터 이용
__9.4.1 URI 파라미터란?
__9.4.2 URI 파라미터 적용하기
__9.4.3 클래스 컴포넌트에 URI 파라미터 적용하기
_9.5 중첩 라우트
__9.5.1 중첩 라우트란?
__9.5.2 중첩 라우트 적용하기
__9.5.3 index 라우트 설정
_9.6 리액트 라우터가 제공하는 훅
__9.6.1 useMatch
__9.6.2 useSearchParams
__9.6.3 useNavigate와 useLocation
__9.6.4 useOutletContext
_9.7 라우터 관련 컴포넌트
__9.7.1 Router 컴포넌트
__9.7.2 fallback UI가 없는 웹 서버에서의 에러 확인
__9.7.3 404 라우트와 리디렉션 구성
__9.7.4 NavLink 컴포넌트
_9.8 리액트 라우터와 레이지 로딩 기법
__9.8.1 레이지 로딩이란?
__9.8.2 레이지 로딩 적용 방법
__9.8.3 Suspense 컴포넌트
__9.8.4 레이징 로딩 적용하기

10장 라우팅을 적용한 예제 실습
_10.1 예제 개요
_10.2 프로젝트 생성과 초기화
_10.3 AppContainer 컴포넌트 작성
_10.4 App 컴포넌트 작성
_10.5 Header, Layout, Home, About, NotFound 컴포넌트 작성
_10.6 TodoList, TodoItem 컴포넌트 작성
_10.7 AddTodo 컴포넌트 작성
_10.8 EditTodo 컴포넌트 작성
_10.9 실행 결과 확인

11장 axios를 이용한 HTTP 통신
_11.1 axios란?
_11.2 테스트용 백엔드 API 소개
_11.3 프로젝트 생성과 크로스 오리진 에러 발생
_11.4 크로스 오리진 문제란?
_11.5 크로스 오리진 문제 해결 방법
__11.5.1 CORS
__11.5.2 프록시를 이용한 우회
_11.6 axios 라이브러리 사용법
__11.6.1 Promise와 async/await
__11.6.2 axios 라이브러리 사용 방법
__11.6.3 에러 처리
_11.7 axios 적용하기
__11.7.1 todolist-app-router 프로젝트에 axios 적용하기
__11.7.2 지연 시간에 대한 처리
_11.8 Suspense 적용하기

12장 리덕스를 이용한 상태 관리
_12.1 리액트의 상태 관리 리뷰
_12.2 플럭스 아키텍처와 리덕스
__12.2.1 플럭스
__12.2.2 리덕스 특징
__12.2.3 리덕스 상세 보기
_12.3 리덕스 적용하기
__12.3.1 예제 아키텍처
__12.3.2 프로젝트 설정과 설계
__12.3.3 리덕스 구성 요소 작성
__12.3.4 리덕스 구성 요소를 사용하는 컴포넌트로 변경
__12.3.5 리덕스 툴킷 이용하기
_12.4 다중 리듀서
__12.4.1 다중 리듀서란?
__12.4.2 다중 리듀서 적용
_12.5 리덕스 미들웨어
__12.5.1 리덕스 미들웨어란?
__12.5.2 테스트용 미들웨어 적용하기
__12.5.3 간단한 콘솔 로거 미들웨어
_12.6 redux-thunk 미들웨어
__12.6.1 리덕스와 비동기 처리
__12.6.2 redux-thunk란?
__12.6.3 redux-thunk 적용하기
__12.6.4 redux-thunk와 @reduxjs/toolkit 함께 사용하기
__12.6.5 redux-thunk와 axios를 사용하는 예제
_12.7 redux-saga 미들웨어
__12.7.1 redux-saga란?
__12.7.2 redux-saga를 시작하기 전 알아야 할 것들
__12.7.3 redux-saga 아키텍처
__12.7.4 redux-saga 적용하기
_12.8 react-redux가 제공하는 훅
_12.9 리덕스 개발 도구
__12.9.1 리덕스 개발 도구란?
__12.9.2 리덕스 개발 도구 사용해보기

13장 리액트 18 더 알아보기
_13.1 ReactDOM.createRoot( ) API
_13.2 자동 배치 처리 기능
_13.3 전환 기능
_13.4 지연된 값
_13.5 기타 추가된 기능