소득공제
베스트셀러
리액트 잘하는 개발자 되기
리액트, 리덕스, 주스탠드, 파이어베이스와 40여 가지 예제로 배우는 React 프론트엔드 입문자를 위한 풀 패키지
- 베스트
- 웹사이트 34위 웹사이트 top20 2주
이미 소장하고 있다면 판매해 보세요.
- 국내배송만 가능
- 문화비소득공제 신청가능
이 상품의 태그
상세 이미지
책소개
목차
|
00장 프론트엔드 개발자가 알아두면 좋은 지식
_0.1 웹의 동작 원리 __0.1.1 클라이언트와 서버 __0.1.2 요청과 응답의 흐름 __0.1.3 상태 코드로 결과 확인 _0.2 HTML, CSS, 자바스크립트의 기본 역할 __0.2.1 HTML : 콘텐츠의 구조 담당 __0.2.2 CSS : 콘텐츠의 스타일 담당 __0.2.3 자바스크립트 : 웹페이지의 동작 담당 _0.3 웹 표준과 접근성 __0.3.1 웹 표준이란? __0.3.2 웹 접근성이란? _0.4 브라우저 렌더링과 성능 최적화 __0.4.1 브라우저 렌더링 과정 이해하기 __0.4.2 리플로와 리페인트의 차이 __0.4.3 성능에 영향을 주는 요소들 _0.5 개발 환경과 워크플로 __0.5.1 필수 개발 도구 __0.5.2 최고의 품질을 위한 자동화 시스템 __0.5.3 빌드 도구와 트랜스파일링, 번들링 _0.6 현대 프론트엔드 트렌드와 감각 __0.6.1 반응형 디자인 __0.6.2 UI/UX 설계 원칙 __0.6.3 최신 프론트엔드 키워드 _학습 마무리 _연습문제 [LEVEL 1] 처음 만나는 리액트 01장 리액트 개발 환경 준비하기 _1.1 윈도우에 리액트 설정하기 __1.1.1 Node.js 설치하기 __1.1.2 VSCode 설치하기 _1.2 맥OS에 리액트 설정하기 __1.2.1 Node.js 설치하기 __1.2.2 VSCode 설치하고 프로젝트 폴더 설정하기 _1.3 VSCode 환경 설정하기 __1.3.1 VSCode에서 작업 공간 설정하기 __1.3.2 확장 프로그램 설치하기 __1.3.3 기본 터미널 변경하기 : 윈도우 __1.3.4 코드 입력 시 탭 크기 4에서 2로 변경하기 __1.3.5 자동 저장 켜기 02장 리액트 프로젝트 생성하기 _2.1 비트로 프로젝트 생성하기 _2.2 프로젝트 정리하기 _2.3 리액트 개발을 위한 크롬 확장 프로그램 설치 _학습 마무리 _연습문제 [LEVEL 2] 리액트의 기초 배우기 03장 리액트 컴포넌트 _3.1 리액트 컴포넌트 알아보기 _3.2 컴포넌트 구조 살펴보기 _3.3 JSX란 무엇인가요? _3.4 컴포넌트는 어떻게 표시해야 할까? _3.5 프로젝트 생성 및 HTML로 기초 화면 구성하기 _3.6 리액트 컴포넌트로 교체하기 _3.7 컴포넌트 작성해보기 _학습 마무리 _연습문제 04장 프롭스 _4.1 프롭스 알아보기 _4.2 프롭스 사용해보기 __4.2.1 반복되는 요소에 중복되지 않는 key prop 추가하기 _4.3 프롭스 여러 개 사용해보기 __4.3.1 구조 분해 할당으로 프롭스 여러 개 사용해보기 _학습 마무리 _연습문제 05장 리액트 이벤트 처리 _5.1 리액트 이벤트 처리 알아보기 _5.2 이벤트 핸들러 onClick에 함수 전달하기 _5.3 FrontComp, BackComp에서 무엇이 달랐을까? __5.3.1 태그의 이벤트 처리 시 기본 동작을 차단하는 preventDefault( ) 함수 _학습 마무리 _연습문제 06장 컴포넌트 모듈화 _6.1 컴포넌트 모듈화의 필요성 _6.2 export default로 컴포넌트 내보내기 _6.3 import로 컴포넌트 가져오기 _학습 마무리 _연습문제 07장 상태 _7.1 상태 알아보기 _7.2 상태 사용해보기 _학습 마무리 _연습문제 08장 스타일과 이미지 _8.1 리액트에서 스타일을 적용하는 방법 _8.2 이미지를 삽입하는 방법 _8.3 CSS 파일 작성하기 _8.4 CSS와 이미지 적용하기 _학습 마무리 _연습문제 09장 폼값 전송 _9.1 폼값 전송하기 _학습 마무리 _연습문제 10장 얕은 비교 _10.1 얕은 비교와 깊은 비교 알아보기 _10.2 얕은 비교 실습하기 _학습 마무리 _연습문제 11장 라우터 _11.1 라우터 알아보기 _11.2 프로젝트 생성 및 React Router DOM 설치하기 _11.3 라우팅 처리해보기 _11.4 Outlet 컴포넌트 알아보기 _11.5 Outlet 컴포넌트로 공통 레이아웃으로 사용할 컴포넌트 만들기 _11.6 라우터 훅 알아보기 _11.7 라우터 훅 사용해보기 _학습 마무리 _연습문제 12장 생명주기 _12.1 생명주기 알아보기 _12.2 클래스형 컴포넌트에서의 생명주기 _12.3 함수형 컴포넌트와 useEffect 훅 _12.4 로컬 JSON 파일과 통신하기 _12.5 외부 API 통신하기 __12.5.1 randomuser.me 살펴보기 _학습 마무리 _연습문제 [LEVEL 3] 리액트 훅 13장 성능 최적화를 위한 훅 _13.1 프로젝트 생성하기 _13.2 useRef 훅 알아보기 _13.3 useMemo 훅 알아보기 _13.4 useCallback 훅 알아보기 _13.5 useId 훅 알아보기 _학습 마무리 _연습문제 14장 전역 상태 관리를 위한 훅 _14.1 프로젝트 생성하기 _14.2 useReducer 훅 알아보기 _14.3 useContext 훅 알아보기 _학습 마무리 _연습문제 15장 고급 기능을 위한 확장 훅 _15.1 프로젝트 생성하기 _15.2 useOptimistic 훅 알아보기 _15.3 useActionState 훅 알아보기 _15.4 useFormStatus 훅 알아보기 _학습 마무리 _연습문제 [LEVEL 4] 리액트 에코시스템 16장 리덕스 툴킷 _16.1 리덕스 툴킷 알아보기 _16.2 리덕스 툴킷의 아키텍처 _16.3 프로젝트 생성하기 _16.4 리덕스 툴킷의 기본 사용법 익히기 _16.5 간단한 할 일 관리 앱 만들기 _학습 마무리 _연습문제 17장 주스탠드 _17.1 주스탠드 알아보기 _17.2 주스탠드 기본 사용법 익히기 _17.3 간단한 출결 관리 앱 만들기 __17.3.1 logger 미들웨어 _학습 마무리 _연습문제 18장 파이어베이스 _18.1 파이어베이스 알아보기 _18.2 파이어베이스 시작하기 _18.3 파이어스토어 데이터베이스 사용해보기 __18.3.1 파이어스토어 데이터베이스 만들기 __18.3.2 프로젝트 생성 및 기본 설정 __18.3.3 연결 및 입력 테스트 __18.3.4 회원 정보 관리 게시판 _18.4 리얼타임 데이터베이스 사용해보기 __18.4.1 리얼타임 데이터베이스 만들기 __18.4.2 프로젝트 생성 및 기본 설정하기 __18.4.3 CRUD 기능 제작하기 __18.4.4 리스너 제작하기 __18.4.5 실시간 채팅 만들기 _18.5 스토리지 사용해보기 __18.5.1 스토리지 만들기 __18.5.2 프로젝트 생성 및 기본 설정하기 __18.5.3 파일 업로드 기능 구현하기 __18.5.4 파일 목록 및 삭제 기능 구현하기 _학습 마무리 _연습문제 [LEVEL 5] 리액트 프로젝트 19장 게시판 제작 1(객체형 배열 사용) _19.1 프로젝트 생성 후 게시판 기본 화면 만들기 __19.1.1 게시판 기본 화면 HTML로 만들기 __19.1.2 게시판 기본 화면 컴포넌트로 제작하기 __19.1.3 제작한 컴포넌트 App 컴포넌트에 반영하기 _19.2 게시글 목록 표현하기 __19.2.1 App 컴포넌트 수정하기 __19.2.2 ArticleList 컴포넌트 수정하기 _19.3 화면 전환하기 __19.3.1 App 컴포넌트 구조 살펴보고 수정하기 __19.3.2 NavList, NavView 컴포넌트 수정하기 _19.4 작성 기능 추가하기 _19.5 열람 기능 추가하기 _19.6 삭제 기능 추가하기 _19.7 수정 기능 추가하기 __19.7.1 수정 1단계 : 수정 폼에 내용 불러오기 __19.7.2 수정 2단계 : 수정 처리하기 _학습 마무리 _연습문제 20장 게시판 제작 2(REST API 사용) _20.1 프로젝트 생성하기 __20.1.1 애플리케이션의 골격 만들기 _20.2 API Key 발급하기 _20.3 목록 기능 구현하기 _20.4 작성 기능 구현하기 _20.5 열람 기능 구현하기 _20.6 수정 기능 구현하기 _20.7 삭제 기능 구현하기 _학습 마무리 _연습문제 21장 모달창 이용한 댓글 구현하기 with 로컬스토리지 _21.1 프로젝트 생성하기 _21.2 기본 UI 작성 및 기능 구현하기 _학습 마무리 _연습문제 22장 스코어보드 만들기 with 주스탠드 _22.1 프로젝트 생성하기 _22.2 기본 UI 생성 및 기능 구현하기 _학습 마무리 _연습문제 23장 카카오톡 만들기 with 파이어베이스 _23.1 프로젝트 생성 _23.2 기본 UI 작성 및 기능 구현하기 _학습 마무리 _연습문제 24장 깃허브 페이지로 배포하기 _24.1 리액트 애플리케이션 배포본 만들기 _24.2 웹 서버로 배포 시 라우팅 오류 해결하기 _24.3 깃허브 페이지로 배포하기 _학습 마무리 _연습문제 ※ PDF 별책 보너스 부록 《리액트를 위한 자바스크립트 핵심 문법 익히기》 제공 |
저자 소개1
월드컵으로 뜨거웠던 2002년에 웹개발을 시작한 후 다양한 웹 사이트와 모바일 앱을 개발했습니다. 최근 10년은 여러 교육기관에서 자바웹, 풀스택, 빅데이터, 클라우드, AI 등을 강의하고 있습니다. 저서로는 출간 후 약 7천여 권이 판매된 스테디셀러 《Must Have 성낙현의 JSP 자바 웹 프로그래밍》(1판)(2판)이 있습니다.
- 내 코드를 부탁해(디스코드) discord.com/invite/BYRpaDrfbH
- 내 코드를 부탁해(카톡방) open.kakao.com/o/ggK7EAJh
- 리액트(카톡방) open.kakao.com/o/gZtC4ASh
성낙현의 다른 상품
관련 분류
품목정보
- 발행일
- 2025년 11월 07일
- 쪽수, 무게, 크기
- 492쪽 | 183*235*23mm
- ISBN13
- 9791194383536
출판사 리뷰
|
★ 풍부한 그림과 도표 + 연습문제 125문항 + 핵심 정리 117가지!
★ 체계적인 레벨별 학습 코스, 실무에 바로 적용 가능한 프로젝트 진행까지! ★ 프론트엔드 만들고 ? DB 붙이고 ? 깃허브로 배포하는 전과정 수록! 바이브 코딩 시대, 리액트는 프론트엔드라는 마지막 오아시스입니다. 직접 모든 걸 하지는 않지만, AI가 생성한 코드를 분석하고 코드를 수정할 줄 알아야 합니다. 구조를 파악하는 능력도 필요합니다. 그래서 리액트를 제대로 배워야 합니다. 모던 프론트엔드는 리액트가 필수입니다. 그렇다면 리액트 어떻게 제대로 배울 수 있을까요? ‘이론 + 예제 + 실제 프로젝트’라는 삼박자가 맞아야 합니다. 이 책은 다음과 같이 세 가지 핵심적인 특징으로 여러분이 리액트 프론트엔드 개발자로 성장하도록 돕습니다. _첫째, 웹 개발의 기초부터 최신 트렌드까지 한 번에 잡는 탄탄한 이론 이 책은 리액트 문법만 다루는 것을 넘어, 웹의 기본 동작 원리(클라이언트/서버, HTTP)부터 최신 프론트엔드 트렌드(SPA, CSR/SSR/SSG 등)까지 폭넓게 설명합니다. 이러한 배경지식은 실무에서 문제의 원인을 더 빨리 찾고 해결하는 능력을 길러주며, 복잡한 개념을 쉬운 비유로 설명하여 실무 감각을 키우는 데 도움을 줍니다. 결과적으로, 웹 개발의 전체적인 흐름 속에서 리액트를 이해하며 원리 중심의 튼튼한 기반을 다질 수 있습니다. _둘째, 컴포넌트의 개념과 재사용성을 체감하며 배우는 실습 중심 학습 단순히 코드를 따라 치는 것을 넘어, 먼저 HTML로 화면을 구성한 뒤 이를 리액트 컴포넌트로 전환하는 과정을 통해 컴포넌트의 장점과 재사용성을 직접 체감하도록 안내합니다. 각 장마다 배운 핵심 개념을 게시판, 스코어보드, 채팅 앱 등 실용적인 미니 프로젝트에 바로 적용하며 지식을 응용하는 능력을 기를 수 있습니다. 이처럼 실습 중심의 체계적인 학습 로드맵은 리액트의 핵심인 컴포넌트 기반 사고방식을 자연스럽게 익히도록 돕습니다. _셋째, 리덕스, 주스탠드, 파이어베이스 등 실무 에코시스템까지 확장 리액트 자체에만 머무르지 않고, 실무에서 필수적으로 사용되는 전역 상태 관리 라이브러리인 리덕스 툴킷(Redux Toolkit)과 주스탠드(Zustand)를 심도 있게 다룹니다. 또한, 별도의 백엔드 서버 없이도 사용할 수 있는 데이터베이스(Firestore, Realtime Database)와 스토리지 기능을 구현할 수 있는 파이어베이스(Firebase) 연동 방법을 학습합니다. 이를 통해 단순한 UI 개발을 넘어, 실제 서비스에 가까운 완성도 높은 애플리케이션을 직접 구축하며 리액트 생태계 전반에 대한 이해를 넓힐 수 있습니다. ★ 리액트 입문자를 위한 웹 배경지식 ★ 리액트를 잘 쓰려면 꼭 알아야 하는 40가지 실습 ★ 리액트 개발을 핵심 기술 4대장으로 확실하게 알려드려요〈/B〉 이 책은 이러한 성장을 위해 웹의 기초부터 리액트 핵심까지 체계적인 이론을 제시하고, 게시판, 스코어보드, 카카오톡 유사 실시간 채팅 앱 등 다채로운 실전 프로젝트를 포함한 총 40개 이상의 풍부한 실습 예제를 통해 깊이 있는 학습 경험을 제공합니다. 또한 다음과 같은 4가지 주요 기술을 통해 이론과 실습을 겸비하며 실력 있는 리액트 개발자로 성장할 수 있도록 돕습니다. _[1대장] 리액트 컴포넌트 및 훅 웹 UI를 효율적으로 구축하는 라이브러리인 리액트와 재사용 가능한 컴포넌트를 배웁니다. useState, useEffect 등 다양한 훅을 활용하여 상태 관리, 생명주기 제어, 성능 최적화 등 현대 리액트 개발의 핵심 역량을 키울 수 있습니다. _[2대장] 라우팅 (Routing) react-router-dom 라이브러리를 활용하여 SPASingle Page Application에서 여러 페이지를 가진 것처럼 경로를 관리하고 화면을 전환하는 방법을 배웁니다. 이를 통해 URL 관리, 브라우저 이력 기능 등 실제 웹 애플리케이션에 필수적인 사용자 경험을 제공할 수 있습니다. _[3대장] 전역 상태 관리 라이브러리 복잡한 애플리케이션에서 여러 컴포넌트가 공유하는 데이터를 효율적으로 관리하기 위한 필수 기술입니다. 리덕스 툴킷(Redux Toolkit)과 주스탠드(Zustand)를 통해 상태를 중앙에서 체계적으로 다루는 방법을 익힐 수 있습니다. _[4대장] 파이어베이스 파이어베이스는 구글에서 제공하는 서버리스 백엔드 서비스 플랫폼으로, 직접 서버를 구축할 필요 없이 데이터베이스, 실시간 통신, 파일 스토리지 등 강력한 백엔드 기능을 리액트 앱에 연동할 수 있습니다. ★ 디스코드 & 카톡방으로 QnA 제공합니다 ★ 실습에 필요한 코드를 제공합니다 ★ 보너스 PDF 〈리액트를 위한 자바스크립트 핵심 문법 익히기〉도 드립니다 ★ 실습 및 코드에 궁금한 점이 있다면, 깃허브 이슈란에 코멘트를 남겨보세요〈/B〉 리액트를 확실히 익힐 수 있게 챙겨드립니다. 학습을 하다 보면 혼자 고민하기보다는 누군가와 함께 이야기 나누고 싶을 때가 있습니다. 진도를 나가며 막히는 부분이나 더 깊이 있는 내용을 함께 연구하고 싶다면, 디스코드 & 오픈 카톡방 & 깃허브 이슈란에서 자유롭게 의견을 나눠보세요. 여러 언어를 현업에 오가며 사용하면, 가끔 문법이 헷갈릴 때가 있습니다. 그래서 〈리액트를 위한 자바스크립트 핵심 문법 익히기〉를 무료 PDF로 제공합니다. 리액트에 필요한 거의 모든 것을 진심으로 제공합니다. 여러분의 레벨업을 응원합니다! ★ 이 책을 읽고 나면 얻어지는 놀라운 효과를 체험하세요!〈/B〉 이 책을 성실하게 학습하면 다음과 같이 7가지 핵심 역량을 얻게 됩니다. _1. 웹의 기본 원리 및 최신 프론트엔드 환경 구축 능력 : 웹의 기본 원리를 이해하고, Node.js, VSCode, ESLint 등 최신 프론트엔드 개발 환경을 완벽하게 구축할 수 있습니다. _2. 리액트 핵심 문법을 이용한 동적 UI 구현 능력 : 컴포넌트, JSX 문법, 프롭스, useState 훅을 활용하여 동적으로 변화하는 리액트 UI를 구성할 수 있습니다. _3. 컴포넌트 간 상호작용 및 데이터 처리 능력 : 컴포넌트를 모듈화하고, 이벤트 핸들러 및 폼값 전송 기능을 구현하며 부모-자식 간 유연한 상호작용을 처리할 수 있습니다. _4. 브라우저 렌더링 이해 및 성능 최적화 능력 : 브라우저 렌더링 과정을 이해하고, useMemo와 useCallback을 사용해 불필요한 연산과 함수 재생성을 방지하며 성능을 최적화할 수 있습니다. _5. 라우팅 및 고급 상태 관리 구조 설계 능력 : react-router-dom으로 URL 라우팅을 구현하고, useReducer와 useContext를 활용해 복잡한 상태 로직 및 전역 상태 공유 구조를 설계할 수 있습니다. _6. 전문적인 전역 상태 관리 및 고급 UX 기능 구현 능력 : 리덕스 툴킷 또는 주스탠드로 전문적인 전역 상태를 관리하며, useOptimistic 등 확장 훅으로 사용자 경험을 높이는 고급 기능을 구현할 수 있습니다. _7. 실제 프로젝트 제작 및 배포 능력 (풀스택 경험) : 객체형 배열 게시판, REST API 연동 게시판, Firebase를 활용한 실시간 앱을 제작하고 최종적으로 GitHub Pages에 배포할 수 있습니다. ★ 이론과 실전을 이어줄 최강의 레시피 ★ 이 책에서 다루는 40가지 실습을 소개합니다〈/B〉 이 책에서 다루는 예제 목록은 다음과 같습니다. 각 예제를 통해 실용적인 리액트 개발 기술을 습득할 수 있습니다. [PART 1] 처음 만나는 리액트 01. hello-react-project : Vite(비트)를 사용하여 리액트 프로젝트를 처음 생성하고 실행해보는 기본 예제로, 숫자 카운터 기능이 포함되어 있습니다(2장). [PART 2] 리액트의 기초 배우기 02. react01-basic(HTML로 기초 화면 구성) : 리액트를 사용하기 전, 순수 HTML만으로 게시판의 기본 UI(프론트엔드/백엔드 기술 목록 및 입력 폼)를 구성하는 예제입니다(3장). 03. react01-basic(리액트 컴포넌트로 교체) : HTML로 만든 게시판 UI를 리액트의 기본 단위인 컴포넌트(App.jsx)로 변환하는 방법을 보여주는 예제입니다(3장). 04. react01-basic(컴포넌트 작성 및 재사용) : 게시판 UI를 FrontComp, BackComp, FormComp 등 여러 개의 작은 컴포넌트로 분리하고, 이를 조합하여 재사용하는 방법을 학습하는 예제입니다(3장). 05. react01-basic(프롭스를 이용한 데이터 전달) : 부모 컴포넌트(App)에서 자식 컴포넌트(FrontComp, BackComp)로 배열 데이터를 프롭스로 전달하여 동적으로 목록을 생성하는 예제입니다(4장). 06. react01-basic(이벤트 처리) : 컴포넌트 내의 링크(〈a〉 태그) 클릭 시 onClick 이벤트를 처리하고, 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하는 방법을 다루는 예제입니다(5장). 07. react01-basic(스테이트(state)를 이용한 화면 전환) : useState 훅을 사용하여 mode 상태를 만들고, 이 상태값에 따라 '프론트엔드', '백엔드', 또는 '전체' 컴포넌트를 조건부로 렌더링하는 예제입니다(7장). 08. react01-basic(스타일과 이미지 적용) : 인라인 스타일, CSS 파일(className), 다양한 이미지 삽입 방식(import, public 폴더, URL)을 사용하여 컴포넌트를 꾸미는 방법을 학습합니다(8장). 09. react01-basic(폼값 전송 및 처리) : onSubmit 이벤트 리스너를 통해 폼 데이터를 받아 부모 컴포넌트로 전달하고, 입력값 유효성을 검증하여 상태를 업데이트하는 예제입니다(9장). 10. react01-basic(얕은 비교 실습) : 객체 상태를 직접 수정할 때와 복사본을 만들어 수정할 때의 차이를 비교하며, 리액트의 얕은 비교 원리와 리렌더링 최적화 방법을 학습합니다(10장). [PART 3] 리액트 훅(Hooks) 11. react02-router(라우팅 기본 예제) : react-router-dom을 설치하고 Routes, Route를 이용해 Home, 잘못된 URL(NotFound) 등 기본적인 페이지 라우팅을 설정하는 예제입니다(11장). 12. react02-router(Outlet을 이용한 중첩 라우팅) : 공통 레이아웃(CommonLayout) 안에 Outlet을 배치하여, 하위 경로에 따라 다른 자식 컴포넌트(LayoutIndex)가 렌더링되도록 구성하는 예제입니다(11장). 13. react02-router(라우터 훅 사용) : useLocation 훅으로 현재 URL 정보를, useSearchParams 훅으로 쿼리스트링(?mode=list&pageNum=1)을 읽고 수정하는 방법을 다루는 예제입니다(11장). 14. react03-lifecycle(useEffect 생명주기 관리) : useEffect 훅의 의존성 배열을 변경해가며 컴포넌트의 마운트, 업데이트, 언마운트 시점에 코드를 실행하는 방법을 학습하는 예제입니다(12장). 15. react03-lifecycle(로컬 JSON 파일 통신) : fetch 함수와 useEffect를 사용하여 프로젝트 내부에 있는 로컬 JSON 파일의 데이터를 비동기적으로 불러와 화면에 목록과 상세 내용을 표시합니다(12장). 16. react03-lifecycle(외부 API 통신) : 외부 API(randomuser.me)에 데이터를 요청하여 무작위 사용자 목록을 받아오고, 클릭 시 상세 정보를 경고창으로 보여주는 예제입니다(12장). 17. react04-hook-optimization(useRef로 값 저장 및 DOM 접근) : useRef를 사용하여 리렌더링과 무관하게 값을 유지하는 방법과 특정 DOM 요소(input)에 직접 접근하여 포커스를 제어하는 방법을 학습합니다(13장). 18. react04-hook-optimization(useMemo로 연산 최적화) : 계산 비용이 큰 함수(소수 판별)의 결과를 useMemo로 메모이제이션하여 불필요한 재연산을 방지하고 성능을 개선하는 예제입니다(13장). 19. react04-hook-optimization(useCallback으로 함수 최적화) : 자식 컴포넌트에 전달하는 함수를 useCallback으로 메모이제이션하여 불필요한 함수 재생성과 자식 컴포넌트의 리렌더링을 방지합니다(13장). 20. react04-hook-optimization(useId로 고유 ID 생성) : useId 훅을 사용하여 폼 요소(〈label〉, 〈input〉)에 접근성을 위한 고유하고 일관된 ID를 자동으로 생성하는 방법을 다룹니다(13장). 21. react05-hook-global-state(useReducer로 상태 관리) : useState 대신 useReducer를 사용하여 입출금 로직과 같이 복잡한 상태 변경 규칙을 컴포넌트 외부에서 관리하는 방법을 보여줍니다(14장). 22. react05-hook-global-state(useContext로 전역 상태 공유) : useContext를 사용하여 다크/라이트 모드 테마 상태를 여러 하위 컴포넌트에서 프롭스(props) 전달 없이 직접 공유하는 예제입니다(14장). 23. react06-hook-enhanced(useOptimistic으로 낙관적 업데이트) : 메시지 전송 시 서버 응답을 기다리지 않고 useOptimistic을 통해 UI에 즉시 반영하여 사용자 경험을 향상시키는 예제입니다(15장). 24. react06-hook-enhanced(useActionState로 폼 상태 관리) : useActionState를 사용하여 폼 제출(로그인)의 비동기 처리 결과(성공/실패)를 상태로 관리하고 UI에 피드백을 제공하는 예제입니다(15장). 25. react06-hook-enhanced(useFormStatus로 폼 제출 상태 추적) : useFormStatus를 사용하여 폼 제출 중일 때 버튼을 비활성화하거나 로딩 텍스트를 표시하는 등 UI를 동적으로 제어하는 예제입니다(15장). [PART 4] 리액트 에코시스템 26. react07-redux-toolkit(리덕스 툴킷 기본 사용법) : 리덕스 툴킷의 createSlice, configureStore를 사용하여 전역 상태로 숫자 카운터를 만들고, useSelector, useDispatch로 상태를 제어합니다(16장). 27. react07-redux-toolkit(할 일 관리 앱) : 리덕스 툴킷을 이용해 할 일(Todo) 목록을 추가, 완료, 삭제하는 기능을 구현하며 실용적인 전역 상태 관리 방법을 학습합니다(16장). 28. react08-zustand(주스탠드 기본 사용법) : 주스탠드(Zustand)를 사용하여 최소한의 설정으로 숫자 카운터 전역 상태를 만들고 컴포넌트에서 사용하는 방법을 보여줍니다(17장). 29. react08-zustand(출결 관리 앱) : 주스탠드를 활용해 학생 목록을 관리(추가, 삭제, 출석 토글)하고, 미들웨어(persist, devtools, logger)를 적용하는 방법을 다룹니다(17장). 30. react09-firestore(파이어베이스 Firestore CRUD 게시판) : 파이어베이스의 Firestore 데이터베이스와 연동하여 회원 정보를 입력(Create), 조회(Read), 수정(Update), 삭제(Delete)하는 게시판 예제입니다(18장). 31. react10-realtime(파이어베이스 Realtime Database CRUD) : 파이어베이스의 실시간 데이터베이스를 사용하여 데이터를 실시간으로 입력, 조회, 수정, 삭제하는 기본적인 CRUD 기능을 구현합니다(18장). 32. react10-realtime(Realtime Database 리스너) : onValue 리스너 함수를 사용하여 실시간 데이터베이스의 데이터 변경을 실시간으로 감지하고 화면에 자동으로 반영하는 예제입니다(18장). 33. react10-realtime(실시간 채팅 앱) : 실시간 데이터베이스의 실시간 동기화 기능을 활용하여 여러 사용자가 동시에 대화할 수 있는 기본적인 채팅 애플리케이션을 제작합니다(18장). 34. react11-storage(파이어베이스 스토리지 파일 업로드/목록) : 파이어베이스 스토리지를 사용하여 이미지 파일을 특정 폴더에 업로드하고, 저장된 파일 목록을 조회 및 삭제하는 기능을 구현합니다(18장). [PART 5] 리액트 프로젝트 35. project01-board-array(객체 배열을 이용한 게시판) : 외부 서버 없이 순수 리액트 useState와 객체 배열만으로 게시판의 CRUD(생성, 읽기, 수정, 삭제) 기능을 모두 구현하는 종합 실습 예제입니다(19장). 36. project02-board-api(REST API를 이용한 게시판) : 외부 REST API와 fetch 함수를 사용하여 실제 서버와 데이터를 주고받으며 게시판의 CRUD 기능을 구현하는 실무 중심의 예제입니다(20장). 37. project03-live-comments(로컬 스토리지를 이용한 댓글 기능) : 부트스트랩 모달창 UI와 브라우저의 로컬 스토리지를 활용하여 댓글을 작성, 수정, 삭제하고 '좋아요' 기능을 구현합니다(21장). 38. project04-scoreboard(주스탠드를 이용한 스코어보드) : 전역 상태 관리 라이브러리 주스탠드를 사용하여 여러 컴포넌트에 걸쳐 플레이어 점수와 정보를 관리하는 스코어보드를 제작합니다(22장). 39. project05-kakaotalk(파이어베이스를 이용한 카카오톡) : 파이어베이스의 실시간 데이터베이스와 스토리지를 연동하여 프로필 사진 업로드 기능이 포함된 실시간 채팅 애플리케이션을 제작합니다(23장). 40. project05-kakaotalk(깃허브 페이지로 배포하기) : npm run build로 프로젝트를 빌드하고, 라우팅 문제를 해결(HashRouter)하여 완성된 카카오톡 앱을 깃허브 페이지에 배포하는 과정을 다룹니다(24장). [작가의 말]〈/B〉 환영합니다. 리액트를 잘하고 싶은데 어떻게 할지 모르겠는 분이라면, 잘 찾아오셨습니다. 이 책은 리액트 학습 전에 필요한 웹의 기본 원리부터 최신 리액트 훅까지 체계적으로 안내하여 탄탄한 기초 지식을 제공합니다. 총 40개 이상의 다채로운 실전 프로젝트와 풍부한 실습 예제를 통해 이론을 실무에 바로 적용하며 문제 해결 능력을 키울 수 있습니다. 또한 리덕스 툴킷, 주스탠드, 파이어베이스 등 현대 웹 개발에 필수적인 기술들을 함께 익혀 완성도 높은 리액트 애플리케이션 개발자로 성장하도록 돕습니다. 이 책은 리액트 코드를 작성하기 전에, 프론트엔드 개발자로서 반드시 알아야 할 웹의 기본 원리와 핵심 개념부터 충실하게 설명합니다. 클라이언트와 서버의 동작 방식, HTML/CSS/JS의 역할, 브라우저 렌더링 과정, SPA, CSR, SSR, SSG와 같은 핵심 개념 등을 먼저 학습하여, 원리 중심의 튼튼한 기반을 다질 수 있게 합니다. 이러한 배경지식은 실무에서 문제의 원인을 더 빨리 찾고, 더 효율적이고 안정적인 웹사이트를 만드는 데 밑거름이 됩니다. 리액트는 문법도 중요하지만 개념이 중요합니다. 핵심 개념은 ‘상태’, ‘상태 관리’입니다. 그래서 전역 상태 관리에 활용하는 리덕스 툴킷과 주스탠드를 모두 다루고, 별도의 백엔드 없이도 데이터베이스와 스토리지를 구현할 수 있는 파이어베이스 연동까지 학습합니다. 이를 통해 단순 UI 개발을 넘어, 실제 서비스에 가까운 완성도 높은 애플리케이션을 직접 구축하며 리액트 생태계 전반에 대한 이해를 넓힐 수 있습니다. 최종적으로는 직접 만든 앱을 깃허브 페이지에 배포하는 과정까지 다루어, 개발부터 실제 서비스 공개까지의 전체 흐름을 경험하게 설계했습니다. 독자 여러분의 어려움을 풀어주고자 온라인에서 질문과 답변을 할 수 있는 채널을 마련해두었습니다. 〈리액트를 위한 자바스크립트 핵심 문법 익히기〉도 무료 PDF로 제공합니다. 이 책이 실력 있는 프론트엔드 개발자로 성장하는 발판이 되길 희망합니다. |
추천평
|
“리액트를 공부하다 보면 문법은 익혔지만 실무에서는 막히는 순간이 찾아옵니다. 《리액트 잘하는 개발자 되기》는 그런 개발자들을 위한 친절한 길잡이입니다. 기본 개념부터 훅, 라우터, 파이어베이스와 같은 실전 시스템까지 자연스럽게 연결하며, 직접 프로젝트를 완성해보는 과정을 통해 진짜 ‘리액트’를 익힐 수 있습니다. 초급 개발자는 물론 리액트를 다시 탄탄히 다지고 싶은 모든 프론트엔드 개발자에게 강력 추천합니다.” - 강이화 (안다미컴퍼니 매니저)
|
|
“《리액트 잘하는 개발자 되기》는 제목 그대로, 리액트를 제대로 배우고 싶은 개발자에게 꼭 맞는 책입니다. 다양한 예제와 실무에 유용한 확장 프로그램을 폭넓게 다루며, 리액트의 핵심 개념부터 실전 활용까지 단계적으로 안내합니다. 각 챕터마다 실습 문제를 통해 기본기를 탄탄히 다질 수 있고, 풍부한 예제 그림이 이해를 한층 쉽게 만들어줍니다. 초보자에게는 친절한 입문서로, 실무자에게는 실력을 한 단계 끌어올릴 수 있는 훌륭한 길잡이입니다.” - 고요한 (오산개발자 운영진 및 닷넷코리아 운영)
|
|
“이 책은 막연한 공부에 확실한 기준점을 제시합니다. 단순 문법이나 예제 중심이 아니라 실무에서 바로 써먹을 수 있는 포인트 위주라서 훨씬 와닿았고요. 리액트를 처음 시작하는 사람에게는 이 책은 필독서입니다. 저도 이 책 덕분에 자신 있게 ‘리액트 잘할 수 있다’라고 말할 수 있게 되었습니다.” - 김동수 (넥스트시스템 대리)
|
|
리액트는 단순한 UI 라이브러리를 넘어, 현대 프론트엔드 개발의 표준이자 사고방식이 되었습니다. 이 책은 리액트의 본질인 “상태와 데이터 흐름을 예측 가능하게 관리하며, 사용자 경험을 설계하는 기술”을 가장 실용적으로 보여줍니다.
단순히 문법이나 API를 나열하는 데 그치지 않고, 컴포넌트 설계 → 프롭스와 이벤트 전달 → 상태 관리와 렌더링 최적화 → 모듈화와 라우팅 → 스타일링과 이미지 처리로 이어지는 자연스러운 흐름 속에서 리액트의 사고방식을 몸으로 익히게 합니다. 특히 리액트 훅을 활용한 선언형 상태 관리, 리덕스 툴킷과 주스탠드를 활용한 복합 상태 설계, 파이어베이스를 이용한 인증 및 실시간 데이터 연동 등은 현업에서도 즉시 적용 가능한 수준으로 다뤄집니다. 또한 이론에 머무르지 않고, 게시판 제작, 모달 창 구현, 메신저 구현, 그리고 깃허브 페이지에 배포까지 현실적인 프로젝트를 단계적으로 완성하며 ‘실무형 리액트 개발자’로 성장할 수 있도록 구성되어 있습니다. 이 책은 초보 개발자에게는 리액트의 전 과정을 한눈에 조망할 수 있는 등대가 되고, 경험 많은 개발자에게는 ‘리액트를 더 잘 사용하는 법’을 다시 생각하게 하는 나침반이 될 것입니다. - 김동현 (삼성SDS 시스템개발운영 프로 ) |
|
“이 책은 리액트를 처음 접하는 사람도 기술적 어려움 없이 이해할 수 있도록 쉽게 풀어 설명하고 있습니다. 더불어 책의 예제에는 상세한 주석이 달려 있어, 각 코드가 사용되는 명확한 이유를 보여줍니다. 리액트뿐 아니라 코딩할 때 구조와 개념을 잡는 데도 큰 도움이 되므로, 리액트를 처음 접하거나 IT를 입문하는 분들에게 강력히 추천합니다.” - 김용민
|
|
“현장에서 AI와 풀스택을 가르치고 있는 교육자로서, 기본이 탄탄한 리액트 교재를 찾던 중 이 책을 만나게 되었습니다. 길고 복잡한 예제 코드 대신, 각 기술의 핵심에 집중한 간결한 예제와 군더더기 없는 설명이 특히 인상 깊었습니다. 또한 예제 파일 이름에 번호를 붙여 순서대로 따라가다 보면 자연스럽게 개념이 잡히도록 구성된 점도 매우 마음에 들었습니다. 리액트를 처음 배우거나 체계적으로 복습하고자 하는 분께 자신 있게 추천드리며, 저희 교육센터의 정식 교재로도 채택할 계획입니다.” - 김형수 (천재IT교육센터 전임강사)
|
|
“수많은 리액트 서적 중에서 이 책은 현장의 실제 경험과 체계적인 이론이 절묘하게 결합된 보기 드문 서적입니다. 특히 최신 트렌드와 사례 중심의 설명은 현업에서도 즉시 활용할 만합니다. 리액트를 처음 배우는 학습자에게 ‘왜 이렇게 동작하는가’를 자연스럽게 이해시켜주는 책입니다. 예제와 설명의 균형이 탁월하며, 초보자도 한 단계씩 성장할 수 있도록 설계되어 있습니다. 특히 Hooks, Context API, 상태 관리 등 실습 중심으로 다룬 점이 매우 인상적입니다. 실제 코드 구조와 개발 흐름 속에서 리액트의 진짜 활용법을 보여줍니다. 초급부터 중급 개발자로 성장하고자 하는 모든 분께 강력히 추천합니다. 리액트를 다루는 사람이라면 반드시 곁에 두어야 할 책입니다.” - 복광현 (웹 에이전시 제이씨앤씨 개발 팀장)
|
|
“이 책은 리액트뿐만 아니라 연관 도구와 웹 기본기까지 다루어 프론트엔드의 전체적인 그림을 그리는 데 도움을 줍니다. 실습을 통해 프론트엔드 개발이 실제로 어떻게 이루어지는지 배울 수 있어, 초심자도 실전감각과 탄탄한 기초를 동시에 갖출 수 있는 입문서 이상의 책입니다.” - 송진섭 (풀스택 개발 프리랜서 )
|
|
“리액트를 체계적으로 배우고 실무에 바로 적용하고 싶은 개발자에게 강력히 추천합니다. 이 책은 웹의 기본 원리부터 리액트 핵심 문법, 다양한 훅 활용, 컴포넌트 구조 이해까지 단계별로 구성되어 있어 기초를 탄탄히 다질 수 있습니다. 또한 상태 관리, API 연동, 라우팅, 배포 등 실무에서 필수적인 기술을 실제 프로젝트를 통해 익힐 수 있어 단순 이론을 넘어 실질적인 개발 역량을 키우는 데 큰 도움이 됩니다. 기초부터 실전까지 확실하게 정복하고 싶은 분들에게 완벽한 가이드가 되어줄 책입니다.” - 이석곤 ((주)아이알컴퍼니 부설연구소 팀장)
|
|
“리액트를 이미 쓰고 있지만 기본기를 다시 돌아보고 싶을 때가 있습니다. 이 책은 단순 문법 정리가 아니라 컴포넌트, 상태, 훅 같은 핵심 개념을 단순히 소개하는 데 그치지 않고, 실제 서비스 구조 속에서 왜 필요한지 다시 생각하게 만듭니다. 특히 리덕스, 주스탠드, 파이어베이스로 이어지는 흐름은 실무에서 마주치는 고민과 자연스럽게 맞닿아 있습니다. 게시판이나 카카오톡 같은 예제를 따라가다 보면 ‘사용하는 코드’가 아닌 ‘이해하고 선택하는 코드’를 깨닫게 됩니다. 리액트를 처음 배우는 사람이든 한 번쯤 정리하고 싶은 실무자든 곁에 두고 펼쳐보기 바랍니다.” - 이호철 (신세계아이앤씨 개발자)
|
|
“이 책은 리액트의 기본 개념부터 실습 예제까지 체계적으로 구성되어 있어, 빠르게 이해하고 실전에 적용할 수 있도록 돕는 훌륭한 가이드 도서입니다. 실무에서 리액트를 처음 접하시거나 리액트 개발자를 꿈꾸는 분들이라면 꼭 추천하고 싶습니다. 이 책을 따라 차근차근 프로젝트를 완성해나가다 보면, 더욱 견고한 실무 감각을 갖추고 완성도 높은 포트폴리오를 만들어, 뛰어난 리액트 개발자로 성장할 수 있을 것입니다.” - 장예근 (개발자)
|
|
“이 책은 리액트를 사용해온 개발자에게 '이해'의 즐거움을 선사합니다. 기초 원리부터 생명주기·훅·상태관리까지 체계적으로 다루어, 실무 감각과 개념을 함께 기를 수 있습니다. 비전공자부터 리액트 실력을 한 단계 더 높이고 싶은 개발자까지 모두에게 강력히 추천합니다.” - 최낙현 (스타트업 팀장 프론트엔드 개발자 )
|
|
“오랜 시간 개발을 해왔지만 웹 개발에는 서툴렀고, 특히 리액트는 나에게 마의 기술처럼 느껴졌습니다. 리액트를 더 이상 미룰 수 없는 상황에서 이 책을 베타테스터로 만난 것은 정말 천운이었습니다. 이 책은 처음으로 리액트에 대해 개념을 넘어 실제 코드로 구현할 수 있을 정도로 이해하게 해주었습니다. 아직 웹 개발 초보라 실무에서 많은 난관이 있겠지만, 이제는 도전할 용기가 생겼습니다.” - 최종천 (LIG시스템)
|
|
“이 책은 리액트를 처음 접하는 개발자나 초급 개발자에게 특히 적합한 책이라고 생각합니다. 우선 실습 예제 구성이 잘 되어 있어, 책을 보며 하나씩 직접 코딩하면서 학습하거나 제공된 전체 소스를 활용해 주석을 풀며 익힐 수 있도록 구성되어 있습니다. 내용 또한 실제 개발에 필요한 핵심 부분에 초점을 맞춰 설명하고 있으며, 개인적으로 가장 만족스러웠던 부분은 상태 관리 파트입니다. 리액트 에코시스템 중 주스탠드에 대한 설명이 명확하고 이해하기 쉽게 되어 있어 학습에 큰 도움이 되었습니다. 또한 파이어베이스와와 주스탠드를 활용해 게시판, 스코어보드, 카카오톡 만들기 등 다양한 프로젝트를 완성해 나가는 과정은 실무 감각을 익히는 데에도 유익하며, 나중에 포트폴리오로 활용하기에도 충분한 가치가 있습니다.” - 황재원 (알오지스틱스 프로)
|
30,600원
총 1개
30,600원
