리액트 입문 마스터 클래스: 처음부터 실전 앱까지

02

1-2차시 간단한 리액트 앱 빠르게 만들기

03

1-3차시 랜덤 강아지 앱 완성하기

04

2-1차시 웹 앱 구축의 구식 vs 신식 이해하기 - SPA

05

2-2차시 바닐라 JS의 해결책으로서 리액트 사용의 동기

06

2-3차시 리액트란 무엇인가 - 작동 원리

07

2-4차시 개발 환경 설정 - VS Code, 크롬 브라우저 및 Node.js 설치

08

2-5차시 중요한 확장 프로그램 설치 - VS Code

09

2-6차시 Vite로 리액트 프로젝트 생성 및 실행 - 전체 개요

10

2-7차시 리액트 프로젝트 파일 및 폴더 탐색

11

2-8차시 리액트에서 첫 번째 컴포넌트 만들기

12

2-9차시 JSX와 리액트의 DOM 처리 방식 - 개요

13

2-10차시 Babel.js - JSX를 자바스크립트로 컴파일하기

14

2-11차시 app, main, index - 주요 파일 이해하기

15

2-12차시 JSX 코드 내에서 자바스크립트 작성하기 - Book 컴포넌트

16

2-13차시 Props 소개 - Book 컴포넌트를 Props 사용으로 리팩토링

17

2-14차시 책 배열 추가 및 배열에서 데이터 가져오기 - 수동으로

18

2-15차시 map 함수를 사용하여 책 목록을 반복하고 표시하기

19

2-16차시 리액트 Key Prop 이해하기

20

2-17차시 Props와 단방향 데이터 흐름 - 개요

21

2-18차시 Props 비구조화

22

2-19차시 섹션 요약 - 리액트 기초 및 소개

23

2-20차시 사용자 프로필 카드 챌린지 및 해결책

24

3-1차시 리액트의 상태 관리, 폼 및 상호작용 소개

25

3-2차시 프로젝트 구조 변경 - 컴포넌트 폴더 생성 및 Book과 UserProfile 컴포넌트를 별도 파일로 추가

26

3-3차시 다른 데이터 파일에서 책 데이터 가져오기

27

3-4차시 리액트의 상태 소개 - 상태 변경의 잘못된 방법

28

3-5차시 상태 관리 문제 해결을 위한 리액트 Hook useState 사용

29

3-6차시 리액트에서 상태 작동 방식 개요

30

3-7차시 랜덤 인용구 앱 - 설정

31

3-8차시 랜덤 인용구 앱 - 철저한 설정 - 최종 제품

32

3-9차시 리액트에서 상태 작동 방식 - 복습

33

3-10차시 컴포넌트 스타일링 - 프로젝트 내 CSS 파일 개요

34

3-11차시 Bootstrap 설치 및 인용구 앱에서 사용하기

35

3-12차시 또 다른 상태 추가 - 랜덤 색상

36

3-13차시 상태 끌어올리기 - 리액트 패턴 개요

37

3-14차시 상태 끌어올리기 - 실습 - 랜덤 인용구

38

3-15차시 상태 끌어올리기 - 실습 - 간단한 카운터

39

4-1차시 폼

40

4-2차시 간단한 폼 및 입력 설정

41

4-3차시 폼 및 preventDefault 메서드

42

4-4차시 폼 - 제어된 요소

43

4-5차시 폼 입력 데이터를 상태 목록에 추가하고 페이지에 목록 항목 표시

44

4-6차시 다중 입력 폼 설정 - 실습

45

4-7차시 다중 폼 입력 데이터 및 handleChange 이벤트 핸들러 설정

46

4-8차시 제출 처리 - 간단한 유효성 검사 추가 및 개인 데이터가 포함된 카드 표시

47

4-9차시 실습: 우리가 만들 앱 - 장바구니 앱 - 데모

48

4-10차시 실습 - 장바구니 컴포넌트 - 가짜 데이터 추가 및 목록 표시

49

4-11차시 푸터 및 내비게이션 컴포넌트 생성

50

4-12차시 장바구니 항목 스타일링

51

4-13차시 장바구니 폼 추가

52

4-14차시 폼 초기화 문제 수정

53

4-15차시 Bootstrap 아이콘 추가

54

4-16차시 toggleBought를 Prop으로 전달하기 - 1부

55

4-17차시 토글 구현 - 콘솔에서 테스트 - 작동함

56

4-18차시 클릭 시 원 색상 및 항목 텍스트 변경 - 취소선

57

4-19차시 항목 제거를 위한 handleRemoveItem Prop 및 함수 추가

58

4-20차시 푸터 컴포넌트에 통계 추가

59

4-21차시 폼 - 섹션 요약

60

5-1차시 백엔드 연결 - 부작용, 훅 및 useEffect 이해하기 - 개요

61

5-2차시 서버에서 데이터를 잘못 가져오기

62

5-3차시 useEffect 훅을 사용하여 백엔드에서 데이터를 올바르게 가져오기

63

5-4차시 로딩 상태 설정

64

5-5차시 의존성 배열 사용 및 부작용을 제어하는 값 추가 - 실습

65

6-1차시 리액트의 폼 소개 - 개요

66

6-2차시 내비게이션 바 컴포넌트 설정

67

6-3차시 푸터 컴포넌트 생성

68

6-4차시 API에서 책 가져오기

69

6-5차시 URL 검색 쿼리 설정

70

6-6차시 검색 바 및 Props 설정

71

6-7차시 검색어가 올바르게 업데이트되는지 확인하기 - 디버깅

72

6-8차시 화면에 책 표시하기

73

6-9차시 로딩 상태 추가

74

6-10차시 검색 폼 초기화

75

6-11차시 api-client 파일 설정 및 fetchBooks 구현

76

6-12차시 커스텀 훅 및 커스텀 훅 만들기 - useBooks

77

6-13차시 AbortController 인터페이스 추가

78

6-14차시 책 상세 컴포넌트 - 1부

79

6-15차시 &&를 사용한 조건부 렌더링 - 선택된 책 테스트

80

6-16차시 모달에서 책 세부정보 표시 - 작동 중

81

6-17차시 누락된 책 API 필드 처리

82

7-1차시 Vercel 구축 및 설정 및 앱 배포

83

7-2차시 GitHub 레포지토리 연결 및 배포 자동화

84

7-3차시 책장 앱 및 섹션 요약

85

8-1차시 강의 마무리