React 16 Tooling (적재적소의 도구 활용을 통한 개발 작업 효율화)

아담보두치

대규모자바스크립트개발분야에서10년가까이일했다.프론트엔드로옮겨가기전에파이썬과리눅스를사용해몇가지대규모클라우드컴퓨팅제품을개발했다.복잡성에익숙하며실제소프트웨어시스템과그시스템이취한규모확장문제에관해현장경험이있다.
팩트출판사의『ReactandReactNative』(2017)를비롯한여러자바스크립트도서를저술했으며혁신적인사용자경험과고성능에매우관심이많다.

1장맞춤형React개발생태계만들기
__React에포함되는것
____렌더트리를비교하는컴포넌트
____DOM렌더타깃
__도구활용소개?
____React외부의보조작업
____건설현장과의유사점
__이책에서다루는React도구
____JSX는자바스크립트로컴파일돼야한다
____최신자바스크립트언어기능은트랜스파일돼야한다
____애플리케이션개발을가능하게하는핫모듈로딩
____단위테스트자동실행
____타입안전성에관한고려
____코드품질을위한소스코드분석
____컴포넌트개발환경격리
____브라우저기반의디버깅환경제공
____React애플리케이션배포
__올바른도구선택
____필수도구
____옵션도구
__요약

2장CreateReactApp으로React애플리케이션을효율적으로부트스트랩하기
__CreateReactApp설치
____첫번째앱제작
______프로젝트이름지정
______자동종속성처리
______디렉터리구조
__요약

3장개발모드와핫리로딩마스터하기
__개발서버시작
____웹팩구성
______진입점
______빌드출력
______입력파일해결
______파일로드와컴파일
______플러그인설정
______핫리로딩
____핫컴포넌트리로딩가동
____CreateReactApp에서벗어나기
__요약

4장테스트지향React개발최적화
__Jest의지향철학
____애플리케이션코드를제외한모든것흉내내기
____테스트를격리해서병렬로실행
______테스트는자연스럽게느껴져야한다
__테스트실행
____react-scripts를사용해테스트실행하기
____단독형Jest를사용해테스트실행하기
__Jest테스트작성
____스위트를사용해테스트조직하기
____기본어서션
______기본일치
______근사일치
______값일치
______컬렉션의값
______모킹으로작업하기
______비동기어서션
______React컴포넌트스냅샷
____단위테스트커버리지
__요약

5장타입안전한React컴포넌트로개발간소화와리팩토링하기
__타입안전성으로무엇을해결할수있는가?
____어림짐작을분명하게하기
____런타임점검제거
____명백히심각성이낮은버그
__Flow설치및초기화
__컴포넌트프로퍼티및상태검증
____프리미티브프로퍼티값
____객체프로퍼티값
____컴포넌트상태의유효화
____함수프로퍼티값
____자식컴포턴트타입의적용
______특정자식타입을가진부모
______하나의자식을가진부모
______자식이옵션인부모
______프리미티브자식값을가진부모
__이벤트처리기함수에관한유효성검사
__개발서버에서Flow가능하게하기
__편집기에서Flow가능하게하기
__요약

6장유지보수성을향상시키기위한코드품질강화
__ESLint설치및설정
__에어비앤비표준으로빌드하기
__ESLint에React플러그인추가하기
__create-react-app과함께ESLint사용하기
__코드편집기에서ESLint사용하기
__Prettier로코드포맷자동화하기
__요약

7장Storybook을사용해컴포넌트격리하기
__격리된컴포넌트개발에관한필요
__Storybook설치및구성
__스토리를사용해컴포넌트개발하기
____props로실험하기
____액션으로실험하기
____스토리에링크걸기
____문서화도구로서의스토리
__정적Storybook앱제작
__요약

8장브라우저에서의컴포넌트디버깅
__ReactDeveloperTools애드온설치하기
__ReactDeveloperTools에서React요소로작업하기
____React요소선택
____React요소검색
__컴포넌트프로퍼티및상태검사
__요소상태값조작
__컴포넌트성능프로파일링
____조정작업삭제하기
____CPU에부하를주는컴포넌트찾기
__요약

9장Redux로애플리케이션상태조율하기
__Redux앱빌드하기
____App컴포넌트및상태
____Home컴포넌트및상태
____NewBook컴포넌트및상태
____API추상화
____모두조립하기
__ReduxDevTools설치하기
__액션선택및검사
____액션데이터
____액션상태트리및차트
____액션상태차이
__시간이동디버깅
__수동으로액션발생시키기
__상태내보내기와가져오기
__요약

10장Gatsby로정적React사이트구축및전개하기
__왜정적React사이트인가?
____React앱의타입
____사용자경험개선
____효율적인자원사용
__처음으로Gatsby사이트만들기
__로컬파일시스템데이터추가하기
__원격데이터가져오기
__요약

11장Docker컨테이너로React애플리케이션빌드및배포하기
__메시징앱제작
____BarelySMS시작하기
____로그인
____홈페이지
____연락처페이지
____메시지페이지
____메시지보내기
____API
__Node컨테이너로시작하기
__React앱을서비스로구성하기
__생산을위한정적React빌드
__요약

★이책에서다루는내용★

■create-react-app을사용한React애플리케이션부트스트랩
■Storybook을사용해React컴포넌트개발을격리하기
■Jest를사용해React컴포넌트에대한효과적인단위테스트를작성하기
■ESLint를사용해컴포넌트코드가표준에맞는지확인하기
■브라우저확장프로그램및내장된컴포넌트장치를사용한React애플리케이션디버깅
■Flow타입으로React컴포넌트의타입안전성활성화
■규모가큰애플리케이션스택의일부분으로서React애플리케이션을Docker컨테이너에배포하기

★이책의대상독자★

자신의업무를향상시킬더나은도구와기술을항상염두에두고있는React개발자를대상으로하는책이다.이책을읽는데React를다룬경험이없어도되지만,React의기본사항들을미리알고있으면큰도움이될것이다.

★이책의구성★

1장,‘맞춤형React개발생태계만들기’에서는React프로젝트에서도구제작을위한동기부여를소개한다.
2장,‘CreateReactApp으로React애플리케이션을효율적으로부트스트랩하기’에서는create-react-app을실행해본다.
3장,‘개발모드및핫리로딩마스터하기’에서는개발서버및핫모듈리로딩을사용해React애플리케이션을개발하는방법을설명한다.
4장,‘테스트지향의React개발최적화’에서는Jest단위테스트를프로젝트에통합하는방법을설명한다.
5장,‘타입안전한React컴포넌트로개발간소화와리팩토링하기’에서는Flow를사용해React컴포넌트의타입안전성(type-safety)을소개한다.
6장,‘유지보수성을향상시키기위한코드품질강화’에서는ESLint와Prettier(코드품질향상을위한도구)를다룬다.
7장,‘Storybook을사용해컴포넌트격리하기’에서는Storybook을사용해애플리케이션에서컴포넌트개발을분리해야한다는것을보여준다.
8장,‘브라우저에서의컴포넌트디버깅’에서는React컴포넌트디버깅을지원하는ReactDevelopmentTools브라우저플러그인에관해자세히설명한다.
9장,‘Redux로애플리케이션상태조율하기’에서는ReduxDevTools브라우저플러그인을도입해애플리케이션상태를명확하게알아본다.
10장,‘Gatsby로정적React사이트구축및전개하기’에서는Gatsby와React컴포넌트를사용해정적웹사이트를만드는방법을설명한다.
11장,‘Docker컨테이너로React애플리케이션빌드및배포하기’에서는출시준비된React애플리케이션을컨테이너에배치하는방법을설명한다.