원쌤의 리액트 퀵스타트 with 타입스크립트 (프런트엔드 개발자가 무조건 알아야 하는 리액트 제대로 배우기)

원쌤의 리액트 퀵스타트 with 타입스크립트 (프런트엔드 개발자가 무조건 알아야 하는 리액트 제대로 배우기)

$32.00
Ask a Question
Vendor: 쌤즈 - 원형섭
Type: 웹프로그래밍일반
SKU: 9791186710937
Categories: ALL BOOKS
Tags: 원쌤의리액트퀵스타트with타입스크립트프런트엔드개발자가무조건알아야하는리액트제대로배우기 컴퓨터/IT_웹프로그래밍
Description
원쌤에게 제대로 배우는 리액트 with 타입스크립트
정적인 데이터 형식을 지원하는 타입스크립트의 언어적 특성이 개발 생산성과 코드 안정성을 높이는 데 어떻게 적용되는지 타입스크립트의 주요 개념을 먼저 살펴봅니다. 그리고 리액트의 기능과 요소들이 필요한 이유를 설명해 리액트의 기초를 탄탄하게 잡습니다. 유튜브 플레이리스트를 만들어보며 리액트의 고급 기술까지 제대로 익히고, 끝에는 리액트 18에 새롭게 추가된 훅과 기능들을 알아봅니다.
저자

원형섭

2001년까지삼성종합기술원HCILAB에서일하다2001년부터현재까지크레듀멀티캠퍼스(구삼성멀티캠퍼스)에서프로그래밍,빅데이터,NOSQL분야전임교수로활동하고있다.또한강의와병행하여㈜오픈에스지에서수석컨설턴트로재직중이며삼성중공업,삼성디스플레이등에서프로젝트를진행하였다.React,Angular,Vue.js등의프런트엔드프레임워크와OpenAPI,MSA(MicroServiceArchitecture)에관심이많으며DB에서백엔드,프런트엔드까지섭렵하는풀스택개발자를지향한다.최근에는AWS와같은클라우드환경과컨테이너기반기술에대한여러가지시도를하고있으며현재챔피언AWS공인강사(AAI:AWSAuthorizedInstructor)로도활동중이다.

목차

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

02장ES6와타입스크립트기초
_2.1ES6와타입스크립트개요
_2.2ES6
__2.2.1ES6를사용하기위한프로젝트설정
__2.2.2let과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.1CRA도구
__3.1.2Vite도구
_3.2Hello애플리케이션작성
_3.3CSS스타일적용방법
_3.4JSX
__3.4.1JSX주의사항1
__3.4.2JSX주의사항2
__3.4.3JSX주의사항3
__3.4.4JSX주의사항4
__3.4.5JSX주의사항5
__3.4.6JSX적용예제
_3.5속성
__3.5.1속성정의
__3.5.2속성적용예제
__3.5.3컴포넌트의세분화
_3.6상태
__3.6.1상태의초기화

04장리액트컴포넌트
_4.1컴포넌트스타일지정
__4.1.1HTML에서의스타일지정
__4.1.2리액트에서의스타일지정
__4.1.3리액트인라인스타일지정
__4.1.4CSS모듈
__4.1.5styled-components
_4.2속성의유효성검증
__4.2.1속성의유효성검증방법
__4.2.2PropTypes를이용한유효성검증
__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.2key특성
__5.5.3생명주기메서드를이용한렌더링최적화
_5.6렌더링최적화적용
__5.6.1shouldComponentUpdate생명주기메서드적용
__5.6.2PureComponent적용

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

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

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

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

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

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

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.6redux-thunk미들웨어
__12.6.1리덕스와비동기처리
__12.6.2redux-thunk란?
__12.6.3redux-thunk적용하기
__12.6.4redux-thunk와@reduxjs/toolkit함께사용하기
__12.6.5redux-thunk와axios를사용하는예제
_12.7redux-saga미들웨어
__12.7.1redux-saga란?
__12.7.2redux-saga를시작하기전알아야할것들
__12.7.3redux-saga아키텍처
__12.7.4redux-saga적용하기
_12.8react-redux가제공하는훅
_12.9리덕스개발도구
__12.9.1리덕스개발도구란?
__12.9.2리덕스개발도구사용해보기

13장리액트18더알아보기
_13.1ReactDOM

출판사 서평

이책의구성
-1~2장개발환경설정과선수지식학습
리액트란무엇인지소개하고리액트의특징과장점들을살펴봅니다.본격적으로리액트를학습하기에앞서개발환경을설정하고선수지식인ES6,타입스크립트언어의기초를학습합니다.
-3~4장리액트기초
리액트의JSX,속성(props),상태(state)와같은기초지식과더불어리액트컴포넌트를작성하는방법과컴포넌트사이의데이터를전달하는방법,이벤트처리등과같은리액트의핵심을학습합니다.
-5장리액트클래스컴포넌트
이책은리액트를함수컴포넌트를중심으로사용하지만5장에서는클래스컴포넌트를다룹니다.클래스컴포넌트의생명주기메서드활용방법과렌더링최적화에대해알아봅니다.
-6~7장리액트훅과고차함수
함수컴포넌트에서상태와생명주기메서드기능을사용할수있도록하는리액트훅을학습합니다.또한고차함수의개념과사용자정의고차함수를작성하는방법,React.memo라는고차함수를이용해렌더링성능을최적화하는방법을학습합니다.
-8장ContextAPI
ContextAPI를이용해속성을이용하지않고필요한데이터를자식컴포넌트에전달하는방법을학습합니다.
-9~10장리액트라우터
리액트라우터를이용해SPA(SinglePageApplication)를개발하는방법을알아봅니다.리액트라우터가제공하는다양한리액트훅도함께다룹니다.9장을학습한후10장에서는리액트라우터가적용된SPA실전예제를작성해봅니다.
-11장axios를이용한HTTP통신
axios라이브러리를이용해백엔드API와통신하는방법을학습합니다.크로스오리진문제해결을위해프록시를설정하는방법도함께다룹니다.
-12장리덕스를이용한상태관리
리덕스(redux)라이브러리를이용해애플리케이션수준의상태관리기법을리액트애플리케이션에적용해봅니다.특히redux-thunk,redux-saga와같은리덕스미들웨어를이용해비동기작업을처리하는방법을그림과함께자세히살펴봅니다.
-13장리액트18더알아보기
리액트18에서추가된새로운기능과훅들을살펴봅니다.

저자직강과함께하세요.
SSAMZ.com에이책을교재로하는유료동영상강의가있습니다.