동형 자바스크립트 웹 개발 (리액트와 Node. js를 활용한 동형 웹 앱 구현 기법)

토마스알라베스

저자토마스알라베스
실리콘밸리(SiliconValley)의오라클(Oracle)에서클라우드(Clouds)를구축하는시니어소프트웨어엔지니어다.풀스택엔지니어로7년이상일하고있으며,열렬한블로거이자열정적인학습자다.항상스스로를발전시키기위한방법을찾고,자신의지식을공유한다.

1장.동형웹앱시작하기
__동형앱이란무엇인가?
__동형자바스크립트코드는어떻게작성하는가?
__React.js소개
__예제앱설명
__시작하기위해필요한것
__프로젝트의존성설치하기
__기본프로젝트구조
__첫번째리액트컴포넌트만들기
__클라이언트와서버에서리액트앱렌더링하기
__앱을로컬에서실행하고테스트하기
__요약

2장.리액트웹UI만들기
__컴포넌트기반UI개발
__상태저장과상태비저장리액트컴포넌트
__프로젝트에서UI컴포넌트그룹화
__UI를컴포넌트계층구조로분해하기
__리액트로정적버전만들기
__기본동형라우터구현하기
__요약

3장.CSS와미디어자산으로작업하기
__리액트컴포넌트의인라인스타일
__CSSModules시작하기
__PostCSS시작하기
__웹팩로더시작하기
__이미지와CSS용웹팩설정하기
__여러CSS파일에서공통설정공유하기
__요약

4장.브라우저싱크와HMR로작업하기
__브라우저싱크시작하기
____설치방법
__HMR시작하기
__요약

5장.서버에서리액트컴포넌트렌더링하기
__서버측렌더링의핵심개념
__트러블슈팅
__서버에서클라이언트로컴포넌트상태전달하기
__리액트컨텍스트로작업하기
__페이지타이틀과메타태그설정방법
__타사라이브러리로작업하기
__서버데이터가져오기
__요약

6장.GraphQL데이터API만들기
__GraphQL의기초
__GraphQL쿼리
__GraphQL타입체계
__Node.js로GraphQL서버구현하기
__GraphQL서버에서SQL데이터저장소사용하기
__배치와캐시하기
__요약

7장.라우팅과내비게이션구현하기
__서버라우팅
____익스프레스라우팅
__클라이언트라우팅
____해시와히스토리API
____리액트라우팅
__리액트서버렌더링
____뷰렌더링
____애플리케이션에상태전달하기
________초기상태
________react-router-config사용하기
________Redux사용하기
__요약


8장.인증및권한부여
__토큰기반인증과쿠키
____쿠키
____토큰기반인증
__JWT
____jwt-simple사용하기
__서버인증
____가입하기
________JWT토큰클레임
________JWT토큰암호
____로그인
____라우팅리다이렉션
________상위컴포넌트(HoC)인증하기
________서버측인증확인
____로그아웃
__요약

9장.애플리케이션테스트와배포
__테스트와배포
____테스트
____Mocha,Sinon,Chai,jsdom,Enzyme으로리액트단위테스트하기
________Mocha
________Chai
________Sinon
________테스트
________Enzyme
____Nightwatch로통합테스트하기
__배포
____상용환경의모범사례
________코드에서해야할작업
________환경/설정에서할작업
____클라우드플랫폼에배포하기
________헤로쿠
__요약

★이책에서다루는내용★

·막강한리액트를사용한클라이언트구축
·효과적인애플리케이션스타일링
·리액트를사용한서버측렌더링
·노드(Node)와익스프레스(Express),SQL기반의GraphQL서버구현
·애플리케이션에서사용되는동형라우터구축
·클라우드호스트에애플리케이션배포
·견고한토큰기반인증을통한애플리케이션보안

★이책의대상독자★

이책은개발자용으로,자바스크립트애플리케이션스킬을향상하고통일된자바스크립트애플리케이션을개발하고자하는독자를대상으로한다.

★이책의구성★

1장,‘동형웹앱시작하기’에서는동형앱이무엇이고,흔히사용하는기존의SPA와는어떤차이가있는지살펴본다.개발자가동형앱을개발하는과정에서직면하게될중요한사항들을이해하게된다.소개를마친후에는동형앱개발을시작하기위한개발환경을설정한다.
2장,‘리액트웹UI만들기’에서는자바스크립트와리액트(React)를사용해자연스러운웹UI를만드는방법을설명한다.효율적인개발을위해애플리케이션에서사용할컴포넌트를만들고컴포넌트간의데이터흐름을구성하는방법을배운다.
3장,‘CSS와미디어자산으로작업하기’에서는UI컴포넌트스타일링과CSS및그래픽을컴포넌트에번들링하는방법을살펴본다.자산을번들링하기위해웹팩(Webpack)을효과적으로구성하는방법을배운다.
4장,‘브라우저싱크와HMR로작업하기’에서는앱에대한서버측렌더링설정방법과효과적인SEO(검색엔진최적화)를위한최적화,초기페이지로딩속도향상에대해설명한다.
5장,‘서버에서리액트컴포넌트렌더링하기’에서는서버에서웹애플리케이션을렌더링하는것과관련된여러가지요소를살펴본다.클라이언트로상태를전달하는방법,리액트컨텍스트를사용하는방법,그밖의문제와트러블슈팅등을살펴본다.
6장,‘GraphQL데이터API만들기’에서는노드(Node)와익스프레스(Express),SQL기반의GraphQL서버를구현하는방법을살펴본다.전통적인RESTfulAPI구조와비교해어떻게동작하는지이해한다.서버에서데이터를수신하고검사및수정하는방법을배운다.
7장,‘라우팅과내비게이션구현하기’에서는라우팅과내비게이션구현방법에관해처음부터살펴본다.또한기존라이브러리를동형웹앱에맞게통합하는방법도살펴본다.
8장,‘인증및권한부여’에서는애플리케이션보안의복잡한내용들을살펴본다.동형애플이케이션에서토큰기반인증과접근제어를구현하는방법을배운다.
9장,‘애플리케이션테스트와배포’에서는단위테스트와통합테스트를구성하는방법에관해살펴본다.클라우드호스팅서비스에앱을배포하는방법도포함된다.

★옮긴이의말★

과거에는자바스크립트를단순히클라이언트에서동적인효과를주는데주로사용했다.그러다가Ajax가등장했으며,이를시작으로jQuery등수많은자바스크립트라이브러리가나왔고,이러한자바스크립트라이브러리를사용하지않는페이지를찾아보기힘든자바스크립트시대가도래했다.그이후로도백본(Backbone),머스터치(Mustach)등화면에표현해주기위한다양한방법이계속해서등장하고있으며,이러한플러그인과템플릿,프레임워크는앵귤러(Angular)에서정점을찍게된다.하지만초기페이지로딩속도,검색엔진최적화(SEO),페이지깜빡임(FOUC,flashofunstyledcontent)이슈등은여전히남아있었다.이시점에리액트(React)가등장하면서서버측렌더링을통해앞서언급한대부분의이슈를해결했고,페이스북을비롯해인스타그램(Instagram),에어비앤비(AirBnb),넷플릭스(Netflix),플립보드(Flipboard),드롭박스(Dropbox)등여러대규모사이트에적용하고있다.
이책에서는리액트와Node.js,그밖의다양한플러그인을활용해,서버와클라이언트에서동일한코드를사용할수있는동형(Isomorphic)웹앱을구현하는기법을소개한다.적절한예제를따라하면서자연스럽게습득할수있으며,개발경험이많지않더라도기본적인웹개발지식과Node.js사용경험이있으면쉽게이해할수있다.만약관련경험이전혀없다면,책을잠시덮어두고HelloWorld나튜토리얼을먼저확인하고돌아와서보면된다.출판사의링크를통해내려받을수있는예제의동작하는코드를확인하려면package.json파일에포함돼있는라이브러리를모두직접설치해야한다.자,그럼즐거운배움의시간이되길바란다.