지브리 영화 명장면에 ‘좋아요’와 ‘감상평’을 남기는 웹 서비스를
GraphQL과 타입스크립트로 개발해 보자!

GraphQL은 효과적인 API를 제공하기 위한 쿼리 언어이며 런타임 및 도구이다. 클라이언트/서버 구조의 중간자로서 양측에 공유되는 추상화된 데이터 명세 계층을 제시한다. 여러 글로벌 기업에서 GraphQL을 적극적으로 활용하고 있으며 국내 기업에서도 기존 또는 신규 프로젝트에 도입하는 사례가 많아지고 있다. 또한 GraphQL은 특정 언어나 플랫폼에 종속적이지 않아 지속해서 관련 프레임워크, 라이브러리, 서비스가 생산되고 있다.

이 책은 스튜디오 지브리 영화의 명장면 감상평 서비스를 함께 구현하면서 GraphQL을 자연스럽게 익힐 수 있도록 구성되어 있다. 백엔드 스키마 설계부터 프런트엔드 화면 구성과 서비스 배포에 이르기까지 순차적으로 따라 하며 하나의 웹 서비스를 개발해 볼 수 있다. 이 책에서 배운 내용을 바탕으로 본인이 원하는 주제의 웹 서비스를 개발해 보자.

웹 서비스를 직접 만들며 배우는 GraphQL

이 책은 단순한 이론 설명이 아닌 지브리 영화를 주제로 한 웹 서비스를 만들어 보면서 GraphQL에 대해 설명하여 재밌게 배울 수 있고 실무에도 유익하다. 기초 지식부터 단계별로 상세하게 설명하기 때문에 GraphQL을 처음 접하더라도 쉽게 이해하며 따라 해볼 수 있다. 백엔드부터 프런트엔드까지 직접 개발 및 배포한 경험을 바탕으로 여러분이 원하는 웹 서비스를 개발해 볼 수 있길 바란다.

이 책은 다음과 같이 구성되어 있다. 1장에서는 웹 개발의 역사부터 시작하여 GraphQL 탄생과 명세, REST와 GraphQL의 차이점, GraphQL이 해결할 수 있는 문제에 대해 알아본다. 2장에서는 Node.js + 타입스크립트 환경에서의 GraphQL 개발 생태계에 대해 알아본다. 3장부터는 함께 서비스를 구성하기 시작한다. Docker를 통해 Redis, MySQL을 구성하고 Node.js 개발 환경을 구성한다. 4장에서는 영화 목록에 대한 데이터베이스 모델과 GraphQL 스키마를 설계하고 쿼리를 통해 데이터를 불러오는 과정을 알아본다. 5장에서는 회원가입과 로그인, 감상평과 좋아요 기능을 구현하며 뮤테이션을 통해데이터를 조작하는 과정을 알아본다. 6장에서는 알림 기능을 구현하며 GraphQL을 통한 파일 업로드 방식에 대해 알아본다. 7장에서는 구현한 서비스를 AWS의 Beanstalk, S3를 통해 배포하는 과정을 진행한다.

저자 소개
서문
베타 리더 추천사

1장 웹 개발과 GraphQL
1.1 웹 개발의 간략한 역사
1.2 GraphQL
___GraphQL
___GraphQL의 설계 디자인 원칙
___REST
___REST의 문제점과 GraphQL
___GraphQL과 REST의 차이
___GraphQL이 가져오는 부가적 이점
1.3 GraphQL 사용하기
___쿼리
___인자와 변수
___Directives
___Fragment
___뮤테이션
___스키마와 타입
___GraphQL의 실행

2장. GraphQL, 타입스크립트 생태계
2.1 GraphQL 프로그래밍 방식
___스키마 주도 방식
___코드 주도 방식
___스키마 주도 방식 vs 코드 주도 방식
2.2 데이터베이스
___ORM
___Tools
2.3 GraphQL 서버
___Apollo 서버
___Nestjs
2.4 GraphQL 클라이언트
___GraphQL 클라이언트 없이 GraphQL 요청하기
___Relay
___Apollo 클라이언트
___Urql
___GraphQL 클라이언트의 캐시 방법
2.5 그 외 유용한 툴
___GraphQL Code Generator
___DataLoader

3장. 프로젝트 준비
3.1 프로젝트 소개
___기능 요구사항
3.2 프로젝트 아키텍처
___데이터베이스
___GraphQL 서버
___프런트엔드
3.3 개발 환경 구성
___Nodejs 환경 구성
___Docker 설치
___MySQL과 Redis 설치
___Visual Studio Code
3.4 프로젝트 구성
___프런트엔드
___백엔드
___코딩 스타일 및 규칙 적용
___프로젝트 데이터 다운로드

4장. 프로젝트 개발 I
4.1 영화 목록
___영화 목록 스키마 설계
___리졸버 구성
___영화 목록 쿼리
___클라이언트에서 쿼리 처리하기
___GraphQL Code Generator
___UI 구성
___페이지네이션
4.2 레이아웃
___페이지 처리
___레이아웃 컴포넌트
___네비게이션 바
4.3 개별 영화 상세 정보
___영화 상세 정보 리졸버
___개별 영화 페이지 구성
___명장면 스키마 설계
___명장면 목록 정보 UI 구성
___명장면 자세히 보기

5장. 프로젝트 개발 II
5.1 회원가입
___TypeORM 구성
___회원가입
___회원가입 UI
5.2 로그인
___인증과 인가
___로그인
___로그인 UI
___로그인 정보 조회
___로그인 유지
___로그아웃
5.3 명장면 좋아요 기능
___CutVote 스키마 설계
___좋아요 뮤테이션
___좋아요 조회 쿼리
5.4 명장면 감상평 기능
___감상평 스키마 설계
___감상평 뮤테이션
___감상평 쿼리
___감상평 UI

6장. 프로젝트 개발 III
6.1 프로필 사진 기능 추가하기
___프로필 사진 생성하기
___uploadLink
___프로필 사진 UI
6.2 실시간 알림 기능 추가하기
___알림 스키마 설계
___Subscription 설정
___알림 리졸버
___Subscription in Client
___알림 UI
___알림 기능 보완하기

7장. 배포
7.1 배포 준비-소개
7.2 배포 준비
___프리티어
___환경변수 처리
7.3 백엔드 서버 배포 구성
___RDS
___ElastiCache
___Beanstalk
7.4 React 프런트엔드 배포 구성
___AWS S3
7.5 더 많은 배포 작업
7.6 마무리
___더 많은 기능을 추가해 보세요.
___GraphQL 기반 서비스를 확인해 보세요.