리액트 잘하는 개발자 되기

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 별책 보너스 부록 《리액트를 위한 자바스크립트 핵심 문법 익히기》 제공