타입스크립트, 리액트, Next.js로 배우는 실전 웹 애플리케이션 개발 - 위키북스 오픈소스 & 웹 시리즈 110

테지마타쿠야,요시다타케토,타카바야시요시키

저자:테지마타쿠야
IBM과LINE에서약7년간주로웹제품개발을담당.이후공동창업자겸CTO로서태국에서창업,사업양도를경험했다.현재는싱가포르를거점으로동남아시아에서출발한스타트업스튜디오GAOGAO를설립하여대표를맡고있다.이책의1~2장을집필했다.

저자:요시다타케토
니혼게이자이신문사,태국의종합상사계열기업에서애플리케이션개발을경험했다.현재는Adobe주식회사에서SoftwareDevelopmentEngineer로근무하고있으며,DX(디지털경험)계열의제품개발과현지화기술의연구개발에종사하고있다.이책의5~7장을집필했다.

저자:타카바야시요시키
싱가포르의금융계스타트업에웹프런트엔드엔지니어로입사하여거래툴을개발했다.이후프리랜서로여러웹앱개발프로젝트에참여했다.현재는의료계스타트업의웹앱개발에풀스택엔지니어로참여하면서블록체인OSS프로젝트개발에종사하고있다.이책의3~4,7장을집필했다.

역자:김모세
소프트웨어엔지니어,소프트웨어품질엔지니어,애자일코치등다양한부문에서소프트웨어개발에참여했다.재미있는일,나와조직이성장하고성과를내도록돕는일에보람을느껴2019년부터번역을시작했다.지은책으로『코드품질시각화의정석』(지앤선,2015)이있고,옮긴책으로는『추천시스템입문』(한빛미디어,2023),『그림과작동원리로쉽게이해하는웹의기초/서버의기초』(위키북스,2023),『시스템을잘만들게하는기술』(위키북스,2023),『아트오브셸원라이너160제』(제이펍,2023),『애자일소프트웨어아키텍트의길』(에이콘출판,2022)등이있다.

01장:Next.js와타입스크립트를활용한모던개발
1.1Next.js와타입스크립트
1.2프런트엔드개발의변천
__1.2.1자바스크립트여명기와제이쿼리의인기
__1.2.2SPA의등장과MVC/MVVM프레임워크
__1.2.3리액트의등장과컴포넌트지향/상태관리
__1.2.4Node.js의약진
__1.2.5AltJS의유행과타입스크립트의꾸준한확산
__1.2.6빌드도구와태스크러너
__1.2.7SSR/SSG의필요성
__1.2.8Next.js등장
1.3모던프런트엔드개발의설계사상
__1.3.1프런트엔드기술의복잡화
__1.3.2컴포넌트지향
__1.3.3Next.js가필요해진이유

02장:타입스크립트기초
2.1타입스크립트기초지식
__2.1.1타입스크립트등장배경
__2.1.2타입스크립트와VisualStudioCode
__2.1.3타입스크립트와자바스크립트의차이
__2.1.4타입스크립트커맨드라인도구를사용한컴파일
2.2타입정의
__2.2.1변수
__2.2.2원시타입
__2.2.3배열
__2.2.4객체타입
__2.2.5any
__2.2.6함수
2.3기본적인타입의기능
__2.3.1타입추론
__2.3.2타입어서션
__2.3.3타입앨리어스
__2.3.4인터페이스
__2.3.5클래스
2.4실제개발시중요한타입
__2.4.1Enum타입
__2.4.2제네릭타입
__2.4.3Union타입과Intersection타입
__2.4.4리터럴타입
__2.4.5never타입
2.5타입스크립트테크닉
__2.5.1옵셔널체이닝
__2.5.2논-널어서션연산자
__2.5.3타입가드
__2.5.4keyof연산자
__2.5.5인덱스타입
__2.5.6readonly
__2.5.7unknown
__2.5.8비동기Async/Await
__2.5.9타입정의파일
2.6타입스크립트개발시설정
__2.6.1tsconfig.json
__2.6.2Prettier
__2.6.3ESLint
__2.6.4컴파일옵션

03장:리액트/Next.js기초
3.1리액트입문
__3.1.1리액트시작하기
__3.1.2리액트기본
__3.1.3리액트컴포넌트작성하기
3.2리액트에서의컴포넌트
__3.2.1리액트요소
__3.2.2컴포넌트(리액트컴포넌트)
3.3리액트에서의타입
3.4Context(콘텍스트)
3.5ReactHooks(훅)
__3.5.1useState와useReducer-상태훅
__3.5.2useCallback과useMemo-메모이제이션훅
__3.5.3useEffect와useLayoutEffect-부가작용훅
__3.5.4useContext-Context를위한훅
__3.5.5useRef와useImperativeHandle-ref훅
__3.5.6커스텀훅과useDebugValue
3.6Next.js입문
__3.6.1프로젝트셋업
__3.6.2프로젝트기본구성
3.7Next.js렌더링방법
__3.7.1정적사이트생성(SSG)
__3.7.2클라이언트사이드렌더링(CSR)
__3.7.3서버사이드렌더링(SSR)
__3.7.4점진적정적재생성(ISR)
3.8페이지와렌더링방법
__3.8.1Next.js의페이지와데이터취득
__3.8.2SSG를통한페이지구현
__3.8.3getStaticProps를사용한SSG를통한페이지구현
__3.8.4getStaticPaths를사용한여러페이지의SSG
__3.8.5SSR을통한페이지구현
__3.8.6ISR을통한페이지구현
3.9Next.js의기능
__3.9.1링크
__3.9.2이미지표시
__3.9.3API라우터
__3.9.4환경변수/구성

04장:컴포넌트개발
4.1아토믹디자인을통한컴포넌트설계
__4.1.1프레젠테이션컴포넌트와컨테이너컴포넌트
__4.1.2아토믹디자인
__4.1.3아톰
__4.1.4몰리큘
__4.1.5오거니즘
__4.1.6템플릿
__4.1.7페이지
4.2스타일드컴포넌트를사용한스타일구현
__4.2.1스타일드컴포넌트를Next.js에도입
__4.2.2스타일드컴포넌트를사용한컴포넌트구현
4.3스토리북을사용한컴포넌트관리
__4.3.1스토리북기본사용방법
__4.3.2액션을사용한콜백핸들링
__4.3.3컨트롤탭을사용한props제어
__4.3.4애드온
4.4컴포넌트의단위테스트
__4.4.1리액트에서의단위테스트
__4.4.2테스트환경구축
__4.4.3리액트테스팅라이브러리를사용한컴포넌트단위테스트
__4.4.4비동기컴포넌트의단위테스트

05장:애플리케이션개발1-설계/환경설정
5.1이번장에서개발하는애플리케이션
__5.1.1애플리케이션사양
__5.1.2애플리케이션아키텍처
5.2개발환경구축
__5.2.1Next.js프로젝트작성
__5.2.2스타일드컴포넌트설정
__5.2.3ESLint설정
__5.2.4스토리북설정
__5.2.5ReactHookForm도입
__5.2.6SWR도입
__5.2.7ReactContentLoader도입
__5.2.8머티리얼아이콘도입
__5.2.9환경변수
__5.2.10테스트환경구축
__5.2.11JSON서버설정

06장:애플리케이션개발2-구현
6.1애플리케이션아키텍처와전체구현흐름
6.2API클라이언트구현
__6.2.1fetcher함수
__6.2.2API클라이언트함수
__6.2.3애플리케이션에서사용되는데이터타입
__6.2.4개발환경을위한API요청프락시
6.3컴포넌트구현준비
__6.3.1반응형디자인대응컴포넌트
__6.3.2래퍼컴포넌트구현
6.4아토믹디자인을사용해컴포넌트설계
__6.4.1아토믹디자인에따른컴포넌트분할
6.5아톰구현
__6.5.1버튼-Button
__6.5.2텍스트-Text
__6.5.3셰이프이미지-ShapeImage
__6.5.4텍스트입력-Input
__6.5.5텍스트영역-TextArea
__6.5.6배지-Badge
6.6몰리큘구현
__6.6.1체크박스-Checkbox
__6.6.2드롭다운-Dropdown
__6.6.3드롭존-Dropzone
__6.6.4이미지미리보기-ImagePreview
6.7오거니즘구현
__6.7.1카트상품-CartProduct
__6.7.2글로벌스피너-GlobalSpinner
__6.7.3헤더-Header
__6.7.4상품카드-ProductCard
__6.7.5상품등록폼-ProductForm
__6.7.6로그인폼-SigninForm
__6.7.7사용자프로필-UserProfile
6.8템플릿구현
__6.8.1레이아웃
6.9페이지설계와구현
__6.9.1로그인페이지
__6.9.2사용자페이지
__6.9.3톱페이지
__6.9.4검색페이지
__6.9.5상품상세페이지
__6.9.6쇼핑카트페이지
__6.9.7상품등록페이지
6.10컴포넌트의단위테스트구현
__6.10.1버튼에대한단위테스트
__6.10.2드롭다운에대한단위테스트
__6.10.3드롭존에대한단위테스트
__6.10.4헤더에대한단위테스트
__6.10.5로그인폼에대한단위테스트
__6.10.6상품등록폼에대한단위테스트

07장:애플리케이션개발3-릴리스와개선
7.1배포와애플리케이션전체의시스템아키텍처
7.2헤로쿠
7.3버셀
__7.3.1버셀로애플리케이션배포
7.4로깅
7.5검색엔진최적화
__7.5.1메타태그
__7.5.2빵부스러기리스트
__7.5.3사이트맵
__7.5.4robots.txt
7.6접근성
__7.6.1시맨틱
__7.6.2보조텍스트
__7.6.3WAI-ARIA
7.7보안
__7.7.1프런트엔드개발에서의취약성과그대책

부록:Next.js의다양한활용
A.1스트라이프
__A.1.1스트라이프셋업
__A.1.2스트라이프API사용
__A.1.3스트라이프공식문서
A.2토스페이먼츠(한국어특전)
__A.2.1토스페이먼츠셋업
__A.2.2토스페이먼츠API사용
__A.2.3토스페이먼츠공식문서
A.3StoryShots-UI스냅숏테스트
__A.3.1StoryShots
__A.3.2storyshots-puppeteer-스냅숏페이지를사용한UI테스트
A.4AWSAmplify에Next.js애플리케이션배포
__A.4.1Next.js애플리케이션을AWSAmplify에배포
__A.4.2SSG를사용한Next.js애플리케이션을AWSAmplify에배포
A.5국제화도구i18n
__A.5.1경로에따른언어라우팅
__A.5.2next-i18n을사용한텍스트의i18n대응