Top

풀스택 리액트, 타입스크립트, 노드 [리액트 18, 훅, GraphQL로 클라우드 기반 웹앱 만들기]

  • 원서명Full-Stack React, TypeScript, and Node: Build cloud-ready web applications using React 17 with Hooks and GraphQL (ISBN 9781839219931)
  • 지은이데이비드 최(David Choi)
  • 옮긴이양정열
  • ISBN : 9791161756943
  • 40,000원 (eBook 32,000원)
  • 2022년 11월 30일 펴냄
  • 페이퍼백 | 684쪽 | 188*235mm
  • 시리즈 : 웹 프로페셔널

책 소개

소스 코드 파일은 여기에서 내려 받으실 수 있습니다.
https://github.com/AcornPublishing/fullstack-react

요약

리액트 SPA 기반의 애플리케이션을 통해 프론트엔드 구현에서부터 백엔드 구현까지 풀스택 개발 과정을 자세히 살펴볼 수 있다. 개발 과정과 상용 환경에서 발생할 수 있는 문제를 해결하기 위한 적절한 팁을 제공한다. 상용 클라우드 환경에서 애플리케이션을 배포하고 설정하는 방법도 다룬다. 저자의 오랜 실무 경험과 노하우를 통해 플랫폼과 도구들을 경험하고 이해할 수 있으며, 더 나아가 자신의 아이디어를 구체화할 수 있는 방법을 찾을 수 있을 것이다.

이 책에서 다루는 내용

◆ 타입스크립트의 핵심 기능과 코드 품질 및 유지 보수 방법
◆ 리액트 훅의 이해와 리액트 앱 구현 방법
◆ 리덕스로 리액트 앱 상태 관리
◆ 타입스크립트와 GraphQL을 사용한 Express 프로젝트 설정 기초
◆ 리액트와 GraphQL으로 온라인 포럼 앱 구현
◆ Redis로 웹 앱 인증 구현
◆ TypeORM으로 Postgres 데이터베이스 데이터 저장 및 검색
◆ AWS 클라우드에 NGINX 구성 및 앱 배포

이 책의 대상 독자

여러 가지 최신 웹 기술과 그 기술을 함께 사용하는 방법을 배움으로써 프론트엔드를 넘어 풀스택 웹 개발의 세계로 들어가려는 웹 개발자를 대상으로 한다. 이 책을 시작하려면 먼저 자바스크립트 프로그래밍에 대한 이해가 있어야 한다.

이 책의 구성

1장, ‘타입스크립트 이해하기’에서는 타입스크립트가 무엇이며 대규모 애플리케이션 개발에 사용하면 좋은 이유를 살펴본다.
2장, ‘타입스크립트 살펴보기’에서는 타입스크립트를 좀 더 자세히 살펴본다. 정적 타입을 포함한 여러 가지 타입스크립트의 기능을 알아보고 이러한 기능이 자바스크립트보다 개선된 이유를 살핀다.
3장, ‘ES6+로 앱 만들기’는 모든 개발자가 알아야 하는 자바스크립트의 중요 기능을 다룬다. ES6 이상 버전에 추가된 최신 기능을 중심으로 알아본다.
4장, ‘SPA의 개념과 리액트에서 사용하는 방법’에서는 SPA(Single-Page Application) 스타일의 앱에 초점을 둔 웹사이트 개발 방법을 배운다. 그리고 리액트를 소개하고 SPA를 만드는 데 리액트를 사용하는 방법을 알아본다.
5장, ‘훅을 사용한 리액트 개발’에서는 리액트를 더 자세히 관찰한다. 리액트 애플리케이션을 과거의 클래스 스타일로 작성하는 방식의 한계를 알아본다.
6장, ‘create-react-app을 사용한 프로젝트 설정과 Jest 활용 테스트’는 리액트 애플리케이션 개발에 사용되는 최신 기법을 설명한다. 이러한 기법에는 리액트 프로젝트를 만드는 표준인 create-react-app 그리고 Jest나 testing-library를 사용한 클라이언트 측 테스트가 포함된다.
7장, ‘리덕스와 리액트 라우터’에서는 리액트 애플리케이션을 만드는 데 도움이 되는 리덕스와 리액트 라우터를 다룬다.
8장, ‘Node.js와 Express를 사용한 서버 측 개발’은 노드와 Express를 다룬다.
9장, ‘GraphQL’에서는 GraphQL이 무엇인지 살펴보고 데이터 스키마를 사용해 웹 API를 만드는 방법을 알아본다.
10장, ‘타입스크립트와 GraphQL 의존성으로 Express 프로젝트 구성하기’에서는 타입스크립트와 Express, GraphQL 그리고 테스트를 위한 Jest를 사용해 상용 품질의 서버 측 프로젝트를 만드는 방법을 설명한다.
11장, ‘온라인 포럼 애플리케이션’에서는 만들어보게 될 애플리케이션을 설명한다. 애플리케이션의 기능과 앱을 만들어보는 것이 어떻게 웹 개발을 더 자세히 배우는 데 도움이 되는지 살펴본다.
12장, ‘온라인 포럼 애플리케이션 리액트 클라이언트 만들기’에서는 리액트를 사용해 클라이언트측 애플리케이션을 작성하는 방법을 설명한다.
13장, ‘Express와 Redis로 세션 상태 구성하기’에서는 세션 상태가 무엇인지 살펴보고, 가장 강력한 인메모리 데이터 저장소인 Redis를 사용해 서버용 세션을 만드는 방법을 알아본다.
14장, ‘TypeORM으로 저장소 계층과 Postgres 구성하기’에서는 Postgres를 사용해 애플리케이션에서 사용할 데이터베이스를 만드는 방법을 설명한다.
15장, ‘GraphQL 스키마 추가하기 - 1부’에서는 애플리케이션에 GraphQL을 통합하는 방법을 배운다. 스키마를 만들고 쿼리와 뮤테이션을 추가하고 GraphQL 훅을 리액트 프론트엔드에 추가한다.
16장, ‘GraphQL 스키마 추가하기 - 2부’에서는 GraphQL을 클라이언트와 서버에 통합하는 작업을 끝으로 애플리케이션을 완성한다.
17장, ‘AWS에 애플리케이션 배포하기’에서는 완성된 애플리케이션을 AWS 클라우드 서비스에 배포하는 방법을 다룬다.

저자/역자 소개

지은이의 말

오픈소스 소프트웨어의 최대 저장소 깃허브의 발표에 따르면 자바스크립트는 여전히 세계적으로 가장 인기 있는 프로그래밍 언어다. 많은 프로젝트가 자바스크립트로 작성된다. 머신러닝이나 암호 화폐와 같은 웹과 관련이 없는 일반적인 프로젝트조차도 자바스크립트를 사용한다.
자바스크립트 프로그래밍 언어는 굉장히 강력하고 기능이 좋은데, 언어의 기능을 확장하는 리액트와 노드를 포함해 이 언어를 더욱 좋게 만들어주는 프레임워크가 존재한다. 또한 타입스크립트는 대규모 자바스크립트 프로젝트를 수행하기 위한 표준으로 자리 잡았다. 타입스크립트가 자바스크립트 코드를 생산적으로 만들고 대규모 애플리케이션에 적합한 언어적인 기능을 제공하는 것이다.
웹 개발은 여러 해 동안 엄청나게 발전했다. 클라이언트 코드란 과거에는 정적인 HTML과 CSS에 약간의 자바스크립트가 포함되는 것을 의미했다. 백엔드는 PHP나 CGI 스크립트와 같은 전혀 다른 언어로 작성됐다. 하지만 이제는 클라이언트에서 서버까지 전체 애플리케이션을 자바스크립트와 자바스크립트 관련 프레임워크만 사용해 작성하는 것이 일반적이다. 이렇게 단일 언어만 사용해 애플리케이션을 작성할 수 있는 능력은 개발 과정에서 엄청난 이점을 제공한다. 더욱이 여러 가지 활용 가능한 강력하고 성숙된 프레임워크는 모든 다른 플랫폼에 비해 자바스크립트 풀스택 프로그래밍이 경쟁력을 가지게 만들어준다.
이 책에서는 풀스택 웹 애플리케이션을 만들기 위해 자바스크립트의 강력함을 사용하는 방법을 배운다. 강력한 언어 상위 열 번째 안에 드는 언어인 타입스크립트를 사용해 자바스크립트의 강력함을 강화한다. 그리고 리액트와 리덕스, 노드, Express, GraphQL과 같은 프레임워크를 사용해 현실적이고 완벽한 기능을 갖춘 모범 사례가 될 수 있는 웹 애플리케이션을 만든다. 이 애플리케이션을 통해 최신 풀스택 웹 애플리케이션을 만들기 위해 필요한 모든 지식을 얻게 된다. 그리고 애플리케이션이 완성되면 가장 인기 있고 다양한 기능을 가진 CSP(클라우드 서비스 제공자)인 AWS 클라우드 서비스에 애플리케이션을 배포할 수 있을 것이다.

지은이 소개

데이비드 최(David Choi)

다양한 프레임워크와 언어로 대규모 애플리케이션을 개발한 10년 이상 경력의 개발자다. 전문 개발 경험의 대부분은 JP모건과 CSFB, 프랭클린 템플턴과 같은 기업의 재무 업무와 관련이 있다. DzHaven을 창업했으며 개발자들이 서로 도울 수 있는 애플리케이션을 만들고 있다.

옮긴이의 말

풀스택 개발자나 풀스택 개발이라는 말이 흔한 만큼 이들이 수요가 있을 것이라고 짐작할 수 있다. 인터넷을 검색해보면 풀스택 개발자의 정의도 다양하고 풀스택에 관한 여러 가지 주장도 확인된다. 풀스택 개발에 사용되는 기술을 모두 다 잘 알거나 골고루 잘할 수는 없으므로 풀스택 개발자는 존재하지 않는 허상이라고 주장하는 사람도 있다.
책 제목에서도 알 수 있듯이, 풀스택 개발은 어떤 정의처럼 거창한 내용이 아니라 프론트엔드와 백엔드를 모두 포함한 아주 단순한 웹 개발을 의미한다. 누군가의 주장처럼 프론트엔드와 백엔드를 모두 완벽하게 잘 아는 것은 불가능할지도 모르겠다. 하지만 각 영역에서 어떤 기술이 사용돼야 하는지 알고 기본적인 구현과 동작 방식을 이해해야 하는 것은 풀스택 개발자만의 소양은 아닐 것이다.
이 책에서는 리액트와 타입스크립트, GraphQL 그리고 노드를 사용한 풀스택 웹 개발을 다룬다. 웹 애플리케이션을 만들어보고, 클라우드 서비스에 개발한 웹 애플리케이션을 배포하고 운영하는 방법을 살펴본다. 그 밖에도 개발에 도움이 되는 여러 가지 도구와 정보를 제공한다. 또한 저자의 경험에서 나오는 다양한 오류 해결 방법도 제시한다. 깃허브에 예제와 최신 버전의 소스 코드가 제공된다.
예제를 따라 학습하다 보면 기본적인 내용뿐만 아니라 전반적인 웹 개발을 이해할 수 있게 될 것이다. 더불어 자신의 아이디어를 추가해 확장시키다 보면 보다 더 많은 내용을 습득하고 경험할 수 있을 것이다. 이 책으로 풀스택 개발을 경험하고 더 나은 개발자로 성장할 수 있기를 바란다.

옮긴이 소개

양정열

국내 Telco SI/SM Software 개발자로 시작해 현재는 프로젝트 매니저와 정보보호 업무를 담당하고 있으며, 자기 계발에 관심이 많다.

목차

목차
  • 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 설정하기
      • 트러블 슈팅
    • 요약

도서 오류 신고

도서 오류 신고

에이콘출판사에 관심을 가져 주셔서 고맙습니다. 도서의 오탈자 정보를 알려주시면 다음 개정판 인쇄 시 반영하겠습니다.

오탈자 정보는 다음과 같이 입력해 주시면 됩니다.

(예시) p.100 아래에서 3행 : '몇일'동안 -> 며칠동안

정오표

정오표

[p.80 : 10행]
보관한다
->
반환한다

[p.135 : 아래에서 4행]
npmmodules
->
node
modules

[p.139 : 5번]
다음으로 App.tsx 파일을 다음과 같이 업데이트한다.
->
다음으로 App.tsx 파일을 다음과 같이 업데이트한다. 그리고, 다음 명령으로 react-router를 설치한다.
npm i react-router@^5.1.18 @types/react-router

[p.138 : 1행]
div 태크
->
div 태그

[p.150 : 3행]
랜더링
->
렌더링

[p.173 : 3행]
setCountCallback를 클릭하면
->
setCountCallback이 호출되면

[p.190 : 12행]
npmmodules
->
node
modules

[p.225 : 세 번째 박스 7행]
if (usersResponse) {
->
if (usersResponse.ok) {

[p.225 : 네 번째 박스 마지막 행]
if (userByName && todosResponse) {
->
if (userByName && todosResponse.ok) {

[p.325 : 두 번째 박스 2행]
npm I apollo-server-core
->
npm i apollo-server-core

[p.420 : 3행]
첫 번째 게시물의 아이콘에서는
->
두 번째 게시물의 아이콘에서는