책소개
책 소개
★ 리액트 프론트엔드 개발, 잘하고 싶으세요?
★ 40여 예제 코드와 실무형 게시판, 스코어보드, 카카오톡 프로젝트까지
★ 최신 트렌드 기술로 리액트를 당장 쓸모 있게 익히세요!
환영합니다. 리액트를 잘하고 싶은데 어떻게 할지 모르겠는 분이라면, 잘 찾아오셨습니다. 이 책은 리액트 학습 전에 필요한 웹의 기본 원리부터 최신 리액트 훅까지 체계적으로 안내하여 탄탄한 기초 지식을 제공합니다. 클라이언트와 서버의 동작 방식, HTML/CSS/JS의 역할, 브라우저 렌더링 과정, SPA, CSR, SSR, SSG와 같은 핵심 개념 등을 먼저 학습하여, 원리 중심의 튼튼한 기반을 다질 수 있게 합니다. 40여 예제를 바탕으로 리액트 입문자가 이론과 실습을 겸하여 실력 있는 프론트엔드 개발자로 성장하도록 돕습니다. 리액트의 핵심 개념인 컴포넌트, 프롭스, 스테이트부터 성능 최적화 훅과 리덕스 툴킷, 주스탠드와 같은 전역 상태 관리까지 체계적으로 다룹니다. 또한 실무형 게시판, 스코어보드, 카카오톡 앱을 직접 만들고 파이어베이스 연동 및 깃허브 배포까지 경험하며 완성도 높은 웹 서비스 구현 역량을 기를 수 있습니다.
[내코부] 채널로 오세요.
골든래빗은 함께 모여서 함께 공부하고, 토론하고, 네트워크를 쌓으며 완독하면 더 탄탄하게 성장할 수 있다고 믿습니다. 개발자 성장 프로젝트, 〈내코부, 내코드를 부탁해〉 디스코드/카톡 채널로 오세요.
- 카톡방 : open.kakao.com/o/ggK7EAJh
- 디스코드 : discord.com/invite/BYRpaDrfbH
[되기] 시리즈를 소개합니다.
[되기] 시리즈는 특정 영역의 일원으로서 알아야 하는 지식을 넓게 알려줍니다. 로드맵을 제시하고 실무에 유용한 기술만 선별하여 알려드립니다.
저자소개
월드컵으로 뜨거웠던 2002년에 웹개발을 시작한 후 다양한 웹 사이트와 모바일 앱을 개발했습니다. 최근 10년은 여러 교육기관에서 자바웹, 풀스택, 빅데이터, 클라우드, AI 등을 강의하고 있습니다. 저서로는 출간 후 약 7천여 권이 판매된 스테디셀러 《Must Have 성낙현의 JSP 자바 웹 프로그래밍》(1판)(2판)이 있습니다.
- 내 코드를 부탁해(디스코드) discord.com/invite/BYRpaDrfbH
- 내 코드를 부탁해(카톡방) open.kakao.com/o/ggK7EAJh
- 리액트(카톡방) open.kakao.com/o/gZtC4ASh
목차
목차
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 별책 보너스 부록 리액트를 위한 자바스크립트 핵심 문법 익히기 제공
