리액트 SPA 기반의 애플리케이션을 통해 프론트엔드 구현에서부터 백엔드 구현까지 풀스택 개발 과정을 자세히 살펴볼 수 있다. 개발 과정과 상용 환경에서 발생할 수 있는 문제를 해결하기 위한 적절한 팁을 제공한다. 상용 클라우드 환경에서 애플리케이션을 배포하고 설정하는 방법도 다룬다. 저자의 오랜 실무 경험과 노하우를 통해 플랫폼과 도구들을 경험하고 이해할 수 있으며, 더 나아가 자신의 아이디어를 구체화할 수 있는 방법을 찾을 수 있을 것이다.
Contents
1장. 타입스크립트 이해하기
__기술적 요구 사항
__타입스크립트란 무엇인가?
__왜 타입스크립트가 필요한가?
____동적 타입과 정적 타입
____객체지향 프로그래밍
__요약
2장. 타입스크립트 살펴보기
__기술적 요구 사항
__타입은 무엇인가?
____타입은 어떻게 동작하는가?
__타입스크립트의 타입 살펴보기
____any 타입
____unknown 타입
____인터섹션 타입과 유니온 타입
____리터럴 타입
____타입 별칭
____함수 반환 타입
____함수 타입
____never 타입
__클래스와 인터페이스 이해하기
____클래스
____인터페이스
__상속 이해하기
____추상 클래스
____인터페이스
__제네릭 이해하기
__최신 기능과 컴파일러 설정
____선택적 연결
____널 병합
____타입스크립트 설정
__요약
3장. ES6+로 앱 만들기
__기술적 요구 사항
__ES6 변수 타입과 자바스크립트 범위
__화살표 함수
__this 컨텍스트 변경하기
____스프레드, 구조 분해, 레스트
____스프레드와 Object.assign, Array.concat
____구조 분해
____레스트
____새로운 배열 함수
____새로운 컬렉션 타입
____async await
__요약
4장. SPA의 개념과 리액트에서 사용하는 방법
__기술적 요구 사항
__전통적인 웹사이트 개발 방법 이해하기
__SPA의 이점과 특성 이해하기
__리액트 SPA 방식 이해하기
__리액트 애플리케이션의 여러 가지 속성
__요약
5장. 훅을 사용한 리액트 개발
__기술적 요구 사항
__클래스 방식 컴포넌트의 한계와 문제점 이해하기
____상태
____라이프 사이클 메서드
__리액트 훅과 장점 이해하기
__클래스 방식과 훅 방식의 유사점과 차이점
____코드 재사용
____단순성
__요약
6장. create-react-app을 사용한 프로젝트 설정과 Jest 활용 테스트
__기술적 요구 사항
__리액트 개발 방법과 빌드 시스템 이해하기
____프로젝트 도구
____트랜스파일
____코드 저장소
__리액트 클라이언트 측 테스트 이해하기
__모킹
____jest.fn 모킹
____컴포넌트 모킹
__리액트 개발에 사용하는 일반적인 도구와 사용법
____VS Code
____프리티어
____크롬 디버거
____그 밖의 IDE
__요약
7장. 리덕스와 리액트 라우터
__기술적 요구 사항
__리덕스 상태
____리듀서와 액션
____리액트 컨텍스트
__리액트 라우터
__요약
8장. Node.js와 Express를 사용한 서버 측 개발
__기술적 요구 사항
__노드 동작 방식 이해하기
____이벤트 루프
__노드의 기능 학습하기
____노드 설치하기
____간단한 노드 서버 만들기
____Request와 Response
____라우팅
____디버깅
__Express로 노드 개발을 개선하는 방법 이해하기
__Express 기능 학습하기
__Express로 웹 API 만들기
__요약
9장. GraphQL
__기술적 요구 사항
__GraphQL 이해하기
__GraphQL 스키마 이해하기
__typedef와 resolver 이해하기
__쿼리와 뮤테이션, 구독 이해하기
__요약
10장. 타입스크립트와 GraphQL 의존성으로 Express 프로젝트 구성하기
__기술적 요구 사항
__타입스크립트 기반 Express 프로젝트 만들기
__프로젝트에 GraphQL과 의존성 추가하기
__보조 패키지 살펴보기
__요약
11장. 온라인 포럼 애플리케이션
__포럼 애플리케이션 분석
__포럼 인증 분석
__스레드 관리 분석
__스레드 포인트 시스템 분석
__요약
12장. 온라인 포럼 애플리케이션 리액트 클라이언트 만들기
__기술적 요구 사항
__초기 버전의 리액트 애플리케이션 만들기
____CSS Grid
____에러 경계
____데이터 서비스 계층
____내비게이션 메뉴
____인증 컴포넌트
____라우팅과 화면
____홈 화면
____스레드 게시 화면
__요약
13장. Express와 Redis로 세션 상태 구성하기
__기술적 요구 사항
__세션 상태 이해하기
__Redis 이해하기
__Express와 Redis를 사용해 세션 상태 만들기
__요약
14장. TypeORM으로 저장소 계층과 Postgres 구성하기
__기술적 요구 사항
__Postgres 데이터베이스 설정하기
__TypeORM을 사용해 객체 관계 매퍼 이해하기
__TypeORM과 Postgres를 사용해 저장소 계층 만들기
__요약
15장. GraphQL 스키마 추가하기 - 1부
__기술적 요구 사항
__GraphQL 서버 측 typedefs와 리졸버 만들기
____ThreadPoint 시스템
__인증과 GraphQL 리졸버 통합하기
__Apollo GraphQL을 쿼리하기 위한 리액트 클라이언트 측 훅 만들기
____메인 화면
____인증 관련 기능
____UserProfile 화면
__요약
16장. GraphQL 스키마 추가하기 - 2부
__스레드 경로
____포인트 시스템
__요약
17장. AWS에 애플리케이션 배포하기
__기술적 요구 사항
__AWS 클라우드에서 우분투 리눅스 설정하기
__우분투에서 Redis, Postgres, 노드 설정하기
____Redis 설정
____Postgres 설정하기
____노드 설정하기
__NGINX에서 앱을 설정하고 배포하기
____super-forum-server 설정하기
____super-forum-client 설정하기
____트러블 슈팅
__요약