모던 리액트 프로그래밍

전병선 지음

리얼데브러닝 2024년 01월 15일 출간

작품소개

책소개

이 책은 모두 14개의 장으로 구성되어 있다. 그리고 각 장은 굵직한 리액트 프로그래밍 기술 요소들을 상세히 설명한다. 1장 리액트 들어가기에서는 단일 페이지 애플리케이션과 리액트에 대한 개요를 설명한다. 그리고 리액트 함수형 컴포넌트의 특징과 함께 자바스크립트 함수 프로그래밍에 대해서도 설명한다. 2장 JSX 컴포넌트에서는 JSX 구문을 사용하는 리액트 컴포넌트에 대해 살펴본다. 그리고 HTML 웹 애플리케이션에서 리액트 컴포넌트를 식별하고 분할하여 구현하는 작업을 경험한다. 3장 스타일은 CSS 셀렉터와 인라인 스타일, CSS 모듈, 그리고 CSS-in-JS 방식을 지원하는 이모션과 스타일 컴포넌트를 사용하여 리액트 컴포넌트를 스타일링하는 방법에 대해서 살펴본다.
4장 상태와 이벤트, 라우터에서는 useState() 훅을 사용하면서 리액트 컴포넌트의 훅(hook) 메커니즘의 핵심 개념에 대해 살펴본다. 그리고 리액트와 함께 사용할 수 있는 라우터 라이브러리인 리액트 라우터에 대해서도 살펴본다. 5장 이펙트, 컨텍스트, 리듀서에서는 useStat() 훅과 함께 리액트 라이브러리의 백미라고 할 수 있는 useEffect() 훅과 useContext(), useReducer() 훅에 대해서 상세히 살펴본다. 그리고 6장 커스텀 훅과 최신 리액트에서는 커스텀 훅을 구현하는 방법과 리액트 버전 18에서 제공하는 최신 리액트 기능에 대해서 설명한다.
7장에서부터는 자바스크립트 대신에 타입스크립트가 사용된다. 따라서 7장에서는 리액트 타입스크립트 개요와 함께 자바스크립트로 구현된 프로젝트를 타입스크립트로 마이그레이션하는 방법에 대해서 살펴본다. 8장 리액트 리덕스에서는 많은 사람들이 다소 어려워하지만 실무에서 활용 가치가 많은 리덕스에 대해서 살펴본다. 특별히 조금이라도 리덕스를 이해하기 쉽도록 순수하게 타입스크립트만을 사용하여 리덕스를 활용하는 프로그램을 작성하면서 핵심 개념과 기능을 설명하고, 점차적으로 고급 기능인 RTK 질의까지 차근차근 리액트 리덕스를 활용하는 방법을 설명하였다. 그리고 9장 GraphQL 클라이언트에서는 REST API와 함께 많이 사용되는 또 다른 백엔드 서비스인 GraphQL API를 사용하는 GraphQL 클라이언트 애플리케이션을 구현하는 방법을 설명한다.
10장에서부터는 주제를 넥스트 프레임워크로 전환한다. 10장 넥스트 들어가기에서는 넥스트 프레임워크가 제공하는 페이지 라우터와 앱 라우터를 중심으로 넥스트 프레임워크를 개관한다. 11장 페이지 라우터에서는 파일 시스템 기반 라우팅과 함께 서버 측 렌더링 기능과 API 라우터에 대해 상세하게 살펴본다. 그리고 페이지 라우터가 제공하는 기능을 사용하여 온라인 주문 관리 예제 시스템의 모든 컴포넌트를 구현하는 실습을 수행한다. 12장 앱 라우터는 가장 최신의 라우팅 방식인 앱 라우팅과 함께 리액트 서버 컴포넌트와 라우트 핸들러에 대해 상세하게 살펴본다. 또한 앱 라우터가 제공하는 기능을 사용하여 온라인 주문 관리 예제 시스템의 모든 컴포넌트를 구현하는 실습을 수행한다.
13장 Tailwind CSS에서는 넥스트 프레임워크가 추천하는 Tailwind CSS를 사용하여 리액트 컴포넌트를 스타일링하는 방법에 대해서 살펴본다. 그리고 마지막 14장 인증과 세션에서는 로그인을 통한 JWT 인증과 함께, 구글이나 깃허브, 애플, 카카오, 네이버 등을 통해서 사용자 인증을 받는 OAuth2 사용자 인증 방법에 대해 설명한다.

목차

1장 리액트 들어가기
- 리액트란?
- 단일 페이지 애플리케이션
- 사용자 인터페이스 라이브러리
- 함수형 컴포넌트
- 자바스크립트 함수형 프로그래밍
- 가상 DOM과 동시성 렌더링
- 리액트 프로젝트 생성
2장 JSX 컴포넌트
- JSX 컴포넌트 개요
- JSX 구문
- 속성
- 클래스 컴포넌트
- 실습 1: 컴포넌트 식별 및 분할
- 실습 2: 주문 관리 시스템 메인 컴포넌트 생성
3장 스타일
- CSS 셀렉터
- 인라인 스타일
- CSS 모듈
- 이모션
- 스타일 컴포넌트
- 실습 3: 할 일 관리 프로그램 스타일링
- 실습 4: 주문 관리 시스템 스타일링
4장 상태와 이벤트, 라우터
- 클래스 컴포넌트 상태와 이벤트
- 함수 컴포넌트 상태와 useState() 훅
- 입력 폼과 useRef() 훅
- 목록 및 조건부 컨텐츠 렌더링
- 실습 5: 할 일 추가, 변경, 삭제
- 리액트 라우터
- 실습 6: 고객 관리 컴포넌트 구현과 라우팅
5장 이펙트, 컨텍스트, 리듀서
- useEffect() 훅
- 실습7: 할 일 관리 REST API 사용
- 실습 8: 고객 관리 REST API 사용
- useContext() 훅
- 실습 9: 할 일 관리 컨텍스트 사용
- 실습 10: 고객 컴포넌트 컨텍스트 사용
- useReducer() 훅
- 실습 11: 할 일 관리 리듀서 사용
- 실습 12: 고객 컴포넌트 리듀서 사용
6장 커스텀 훅과 최신 리액트
- 커스텀 훅
- 실습 13: 할 일 관리 커스텀 훅 구현
- 실습 14: 고객 컴포넌트 커스텀 훅 사용
- 리액트 포털
- 새로운 리액트 기능
7장 타입스크립트 마이그레이션
- 타입스크립트 개요
- 리액트 타입스크립트
- 기존 프로젝트 마이그레이션
- 실습 15: 주문 관리 예제 시스템 마이그레이션
8장 리액트 리덕스
- 리덕스
- 리액트 리덕스
- 액션 생성
- 리듀서 생성
- 비동기 미들웨어
- 리덕스 슬라이스
- 실습 16: 할 일 관리 애플리케이션 리액트 리덕스 적용
- 실습 17: 비동기 처리
- RTK 질의
- 실습 18: 할 일 관리 애플리케이션 RTK 질의 적용
- 실습 19: 고객 컴포넌트 RTK 질의 적용
- 리액트 질의와 SWR
9장 GraphQL 클라이언트
- GraphQL 개요
- GraphQL 질의 구문
- GraphQL 질의 구현
- 아폴로 클라이언트 질의
- 실습 20: 고객 컴포넌트 GraphQL 질의
10장 넥스트 들어가기
- 페이지 라우터와 앱 라우터
- 라우팅
- 렌더링
- 데이터 가져오기
- API 라우트와 라우트 핸들러
- 넥스트 프로젝트 생성
11장 페이지 라우터
- 파일 시스템 기반 라우팅
- 서버 측 렌더링
- 정적 사이트 생성
- 클라이언트 측 렌더링
- API 라우트
- 데이터베이스 액세스
- 실습 21: 고객 관리 구현
- 실습 22: 제품 및 재고 관리 구현
- 실습 23: 주문 관리 구현
12장 앱 라우터
- 앱 라우팅
- 리액트 서버 컴포넌트
- 클라이언트 컴포넌트
- 라우트 핸들러
- 실습 24: 고객 관리 구현
- 실습 25: 제품 및 재고 관리 구현
- 실습 26: 주문 관리 구현
13장 Tailwind CSS
- Tailwind CSS 개요
- 텍스트
- 사각형
- 레이아웃
- 실습 27: Tailwind CSS 적용
14장 인증과 세션
- 웹 애플리케이션 인증
- JWT 인증
- OAuth2 인증
- 실습 28: 주문 관리 예제 시스템 JWT 인증 구현

책 속으로

리액트 프로그래밍에 자바스크립트와 타입스크립트 등 두 개의 프로그래밍 언어를 사용할 수 있다. 원래 리액트 라이브러리는 자바스크립트 언어를 주로 지원하였지만, 최근에 리액트가 리액트 프레임워크로서 넥스트와 함께 사용되도록 변경되면서 타입스크립트 언어 사용이 더욱 확산되고 있다. 넥스트는 1차 언어로 타입스트립트를 사용하고 2차 언어로 자바스크립트를 지원한다. 자바스크립트는 이미 보편적으로 많이 사용되고 있기 때문에 처음 리액트를 시작할 때 타입스크립트보다는 접근하기 용이하다는 이점을 갖는다.
또한 넥스트가 리액트 프레임워크로서 함께 사용되도록 변경되었기 때문에 넥스트 프레임워크가 제공하는 기능도 함께 알아야 한다. 하지만 처음에 시작할 때 리액트와 넥스트 프레임워크를 함께 학습하는 것보다는 리액트를 먼저 학습하여 리액트에 대한 지식을 기반으로 넥스트 프레임워크를 학습하는 것이 이해하기 훨씬 더 쉽다.
따라서 이 책에서는 먼저 주로 자바스크립트 언어로 리액트 프로그래밍을 학습하고, 그 다음에 자바스크립트 언어로 작성된 리액트 프로그램을 타입스크립트 언어를 사용하도록 마이그레이션한 후에 타입스크립트 언어로 넥스트 프레임워크를 학습하는 투 트랙 접근 방식을 취하였다.
이 책은 리액트와 넥스트 프로그래밍 기술과 기법에 집중한다. 특별히 넥스트는 프레임워크로 막후에서 빌드와 컴파일 등과 같은 리액트에 필요한 도구를 자동적으로 설정함으로써 개발자들이 설정에 시간을 들이지 않고 애플리케이션을 개발하는데 집중할 수 있게 한다. 따라서 컴파일러나 번들링 도구를 설정하는데 관심을 기울이기 보다는, 이러한 설정은 넥스트 프레임워크에 맡겨두고 우리는 넥스트 프레임워크와 함께 리액트 애플리케이션을 개발하는 기법에 대해 집중하는 것이 바람직하다.
이 책에서 설명하는 리액트와 넥스트 프로그래밍 기술 요소는 실제로 실무에서 사용되는 것으로 선택하였다. 무조건 이해하기 쉽도록 가벼운 내용만 설명하는 것이 아니라, 조금은 이해하기 어렵더라도 실무에서 활용할 수 있는 것은 최선을 다해 이해하기 쉽도록 코드와 함께 설명하였다.
또한 이 책은 개념적으로만 리액트 프로그래밍을 설명하지 않는다. 실제로 동작하는 프로그램을 작은 것에서부터 실제로 만들어가면서 작동하는 코드로 리액트 프로그래밍에 사용되는 기술과 기법을 설명한다. 그리고 온라인 주문 관리 예제 시스템을 구축하는 과정이 포함된 28개의 실습을 통해서 여러분들이 리액트를 사용하여 실무 수준의 애플리케이션을 구현하는 경험을 가질 수 있도록 하였다.

출판사 서평

개발자와 아키텍트, 컨설턴트로서 30여 년간 현업에서 다양한 프로젝트를 수행하며 얻은 경험과 30여 권의 저서와 7권의 번역서를 저술하고 강의하면서 쌓은 지식과 노하우를 바탕으로 새로운 10년을 준비하면서, 이제 막 개발자와 프로그래머로서 첫걸음을 시작하는 사람들이 실무 프로젝트에서 작업을 할 수 있을 만큼의 능력을 갖출 수 있도록 핵심 지식과 기술을 꾹꾹 눌러 담아 먼저 다섯 권의 책으로 묶었다. 여기에는 자바스크립트와 자바 그리고 SQL 등 핵심 프로그래밍 언어 3종 세트와 JSP 서블릿과 스프링 프레임워크를 활용하는 웹 애플리케이션 개발의 핵심 기술이 포함된다. 그리고 다섯 권의 책에서 이들 프로그래밍 언어와 기술을 각각 독립적으로 학습할 수 있을 뿐만 아니라 유기적으로 결합하여 체계적으로 학습할 수 있게 하였다. 그리고 이들 책을 교재로 온라인에서 저자의 유료 강의를 수강하여 프로그래밍 지식의 완성도를 더욱더 높일 수 있게 하였다.
온라인 강의 사이트: www.realdev-learning.com
이메일 : [e-mail]
유튜브 : www.youtube.com/@realdev.learning

작가정보

저자(글) 전병선

30여 년간 현업에서 개발자와 아키텍트, 컨설턴트로 다양한 프로젝트를 수행하였으며 30여 권의 저서와 7권의 번역서를 출간하고 폭 넓은 독자 층을 갖고 있는 베스트 셀러 저자다.
금융, 제조, 조선, 통신, 국방, 정부 연구 기관 등 다양한 도메인 분야에서 아키텍트이자 컨설턴트로 프로젝트를 수행하였으며, 최근에는 막 개발자와 프로그래머로서 첫걸음을 시작하는 사람들이 실무 프로젝트에서 작업을 할 수 있을 만큼의 능력을 갖출 수 있도록 핵심 지식과 기술을 묶어 자바스크립트 프로그래밍, 자바 프로그래밍 기초, SQL 프로그래밍, JSP 서블릿 웹 프로그래밍, 스프링 웹 프로그래밍 등 다섯 권의 책을 출간하였다. 객체지향 이야기 개정판과 나는 개발자다 개정판도 출간하였다.
또한 이들 책을 교재로 온라인 강의 사이트(www.realdev-learning.com)에서 체계적인 강의를 제공하고 있으며, 이러한 노력은 자바에서 닷넷으로, 객체지향 언어에서 함수형 언어로, 컴포넌트에서 마이크로서비스로, 모노리식 애플리케이션에서 반응형 분산 컴퓨팅 분야로 이동하면서 끊임 없이 새로운 기술과 언어에 관한 저술과 강의 할동을 계속 이어갈 예정이다.
유튜브(www.youtube.com/@realdev.learning)에서 독자들과의 소통에도 힘쓰고 있다.