타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

Chapter 01
준비하기

리액트 학습을 시작하기 전에 필요한 환경 설정을 배웁니다.
각각의 OS별로 VSCode를 설치하는 방법을 살펴보고
Prettier 및 익스텐션을 설치하여 학습 준비를 합니다.

Chapter 02
시작하기

이 챕터에서는 리액트 애플리케이션을 최신 방식으로 시작하는 방법을 다룹니다. Create React App(CRA)을 대체하는 Vite 기반 개발 환경을 구성하며, 리액트 개발에 필요한 필수 설정을 익히게 됩니다.

• CRA의 한계와 Vite의 장점 비교

• Webpack과 Vite의 차이점과 생태계 흐름 이해

• Vite를 활용한 빠르고 직관적인 리액트 프로젝트 세팅

• 스니펫과 유저 스니펫을 통한 코드 생산성 향상

• 초기 프로젝트 구조 정리와 npm run dev 실행 흐름 파악

또한, 리액트에서 가장 중요한 JSX 문법의 개념과 특징을 소개합니다. JSX가 어떻게 HTML과 JavaScript를 결합하는지, 어떤 문법적 특징이 있는지를 이해하면서 이후 컴포넌트 학습을 위한 기초를 다지게 됩니다.

Chapter 03
컴포넌트 기본

리액트에서 컴포넌트는 UI를 구성하는 가장 작은 단위이자 핵심 개념입니다. 이 챕터에서는 컴포넌트가 무엇인지, 어떻게 동작하고 어떻게 구성되는지를 실제 코드와 함께 단계적으로 학습합니다.

• 컴포넌트란 무엇인가? 그리고 왜 중요한가?

• 함수형 컴포넌트의 작성 조건과 구성 방식

• React.Fragment를 이용한 불필요한 DOM 제거

• 새로운 컴포넌트를 만드는 방법과 폴더 구조 설계

• 루트 컴포넌트와 컴포넌트 트리 구조의 개념 이해

또한, 실습을 통해 직접 컴포넌트를 생성하고 적절한 위치에 배치하면서 컴포넌트 기반 설계에 대한 감각을 익히게 됩니다.
이 과정을 통해, 컴포넌트를 보는 눈이 달라지고, 이후의 복잡한 리액트 구조도 자연스럽게 이해할 수 있는 기반을 마련할 수 있습니다.

Chapter 04
컴포넌트의 데이터와 Props

이제 리액트의 핵심 개념 중 하나인 Props(속성)를 본격적으로 다룹니다. 이 챕터에서는 컴포넌트 간에 데이터를 어떻게 전달하고 활용하는지를 다양한 예제와 실습을 통해 익히게 됩니다.

• 리액트에서 컴포넌트 간 관계 이해: 조상-부모-자식 구조

• JSX 내에서 기본 타입과 참조 타입 데이터를 출력하는 방법

• 태그 속성에 값을 전달하는 기본 원리

• Props를 통해 데이터를 전달하는 다양한 방식과 패턴

• 비구조화 할당을 활용한 props 분리와 가독성 향상

• 타입스크립트를 기반으로 props의 타입을 쉽게 추론하고 명확히 정의하는 방법

• 전개 연산자(...)를 활용한 props 전달 방식 이해

• children이라는 특별한 prop을 활용한 컴포넌트 재사용성 확장

• props와 children의 역할 차이 비교

이 챕터를 통해, 리액트 컴포넌트 간의 데이터 흐름을 자연스럽게 이해하고, 타입 안정성과 가독성을 동시에 고려한 props 설계 역량을 키우게 됩니다.

Chapter 05
컴포넌트와 이벤트

리액트 애플리케이션에서 이벤트 처리는 사용자와의 상호작용을 구현하는 핵심입니다. 이 챕터에서는 버튼 클릭부터 이벤트 전파까지, 리액트에서 이벤트를 어떻게 다루는지 체계적이고 실용적인 관점으로 학습합니다.

• JSX 문법을 통한 이벤트 연결 방식

• 이벤트 속성과 이벤트 핸들러 함수의 작성 패턴

• 핸들러에 매개변수를 전달하는 다양한 방법과 추천 방식

• 핸들러 내부에서 props를 읽는 흐름과 실전 예시

• 상위 컴포넌트에서 핸들러를 props로 전달하는 구조

• 이벤트 객체(SyntheticEvent)의 구조 및 활용법

• target, currentTarget의 차이점과 용도

• 이벤트 전파 개념: 버블링과 캡처링의 이해

• 이벤트의 기본 동작 차단 방법 (e.preventDefault())

마지막으로 버튼 컴포넌트를 직접 만들고, 다양한 이벤트를 처리하는 실습을 통해 이벤트 처리 패턴을 자연스럽게 내재화합니다.

Chapter 06
컴포넌트 상태 - useState 훅

리액트의 상태 관리는 컴포넌트가 사용자와의 상호작용에 따라 반응하고 변화하도록 만드는 핵심 기능입니다. 이 챕터에서는 useState와 useReducer를 중심으로 상태 관리의 개념, 활용법, 실전 적용까지 폭넓게 다룹니다.

• 상태가 필요한 이유와 상태값의 기본 개념

• useState 훅의 기초적인 사용법부터 실전 적용까지

• 객체 및 배열 상태를 다룰 때 주의할 점과 리렌더링 동작 방식

• setState의 업데이트 방식과 함수형 업데이트

• 상태의 독립성 개념과 상태 끌어올리기(lifting state up)

• 캡슐화(encapsulation)를 통한 상태 관리 책임 분리

• 카운터 앱을 직접 만들어보며 상태 관리 실력을 점진적으로 강화

• useReducer를 이용한 복잡한 상태 로직의 구조화

• reducer 패턴으로의 전환 및 실전 미션 수행

이 챕터를 마치면, 단순한 상태 변경부터 복잡한 데이터 흐름까지 안정적으로 관리할 수 있는 리액트 개발자로 한층 성장하게 됩니다.

Chapter 07
반복&조건 렌더링

실제 사용자 인터페이스(UI)는 상황에 따라 화면이 조건적으로 바뀌고, 여러 데이터를 반복적으로 렌더링하는 구조로 이루어져 있습니다. 이 챕터에서는 리액트에서 이런 UI를 어떻게 구현하는지 집중적으로 다룹니다.

🔹 조건부 렌더링

• if, switch, 삼항 연산자(? :), 논리 연산자(&&) 등 다양한 조건 표현 방식

• 각 조건 방식의 사용 시점과 장단점 비교

• 트래픽 신호등, 로그인 상태, 메시지 출력 등 실제 시나리오 기반 실습

• 중첩 조건, 가독성, 컴포넌트 분리 전략 등 실전 팁 제공

🔹 반복 렌더링

• 배열 데이터를 기반으로 map()을 이용한 컴포넌트 반복 출력

• 반복 렌더링에서의 key 속성 중요성 및 유효 범위 이해

• filter() 등을 활용한 데이터 선별 및 조건부 렌더링의 결합

• 레시피 목록 렌더링 등의 실전 과제를 통해 반복 패턴을 체득

이 챕터를 마치면, 리액트로 복잡한 조건과 반복을 자연스럽게 구현할 수 있으며, 가독성 좋은 동적 UI를 설계할 수 있는 실력을 갖추게 됩니다.

Chapter 08
스타일링

이 챕터에서는 리액트에서 컴포넌트를 스타일링하는 다양한 기법들을 폭넓게 학습합니다.
단순한 인라인 스타일부터 CSS-in-JS, Tailwind, 이미지 스타일링까지 실제 프론트엔드 개발에서 자주 마주치는 모든 스타일링 기법을 실습과 함께 익히게 됩니다.

🔹 스타일링의 기본

• 인라인 스타일과 전역 CSS 활용법

• CSS 모듈을 통한 컴포넌트 단위의 스타일 캡슐화

• classnames 유틸을 활용한 동적 클래스 관리

• 🧩 미션: 버튼 그룹 UI 구현을 통해 다양한 스타일 방식 비교 체험

🔹 CSS-in-JS — styled-components

• styled-components의 문법과 기본 사용 방법

• props를 활용한 동적 스타일링

• keyframes, as 등의 고급 기능과 헬퍼 함수 및 믹스인 사용법

• 전역 스타일 관리와 팁 모음

• 🧩 미션: styled-components로 신호등 UI 만들기

🔹 Tailwind CSS — 유틸리티 퍼스트 스타일링

• Tailwind의 핵심 철학과 지시어 체계

• 조건부 클래스 적용 방법과 실전 적용 전략

• 🧩 미션: Tailwind로 계산기 UI 완성하기

• 🧩 보너스 미션: Tailwind의 실전 감각을 더해 고급 UI 도전!

🔹 이미지 & 폰트 스타일링

• 이미지 렌더링 시 고려사항 및 CSS 조정 방법

• 🧩 미션: 램프에 불이 들어오는 애니메이션 UI 구현

• 구글 웹폰트 적용법까지 함께 정리

이 챕터를 통해, 어떤 스타일링 도구가 프로젝트에 적합한지 판단할 수 있는 눈을 기르고, 미려하고 유지보수 가능한 UI를 구현할 수 있는 실전 감각을 갖추게 됩니다.

Chapter 09
계산기 만들기

이 챕터는 지금까지 학습한 내용을 바탕으로 실제 작동하는 계산기 애플리케이션을 직접 구현하는 실습 중심의 프로젝트입니다. 컴포넌트 설계, 상태 관리, 이벤트 처리, 타입 분리, UI 구성까지 전부 직접 경험하게 됩니다.

🛠 프로젝트 기반 학습

• 프로젝트 시작 전, 계산기 동작 원리와 구조에 대한 개요

• UI 설계 및 컴포넌트 구조화

• 리팩토링 과정을 통해 컴포넌트 역할과 책임을 정리

• 🧩 타입스크립트를 활용해 상태와 연산자 타입을 명확히 분리

• 숫자, 연산자, 마침표, 클리어 등 주요 기능을 직접 구현

• 실전에서 자주 마주치는 버그 처리 및 디버깅 흐름 학습

🧪 개발 도구 활용

• React Developer Tools 설치 및 활용법을 통해 상태 변화 흐름 시각화

• 실시간 상태 추적과 컴포넌트 구조 분석 능력 향상

이 챕터를 마치면, 단순한 기능 구현을 넘어서 컴포넌트 분리, 상태 설계, 디버깅, 타입 관리까지 한 번에 경험하게 되며,“내가 직접 만든 기능이 동작하는 기쁨”을 통해 리액트에 대한 자신감을 갖게 됩니다.

Chapter 10
폼다루기

이 챕터에서는 리액트에서 폼을 어떻게 다룰 것인가에 대한 실전적인 고민을 담았습니다. 단순한 입력 처리를 넘어, 리액트 19의 새로운 기능(ref 전달), 커스텀 훅을 통한 폼 로직 재사용, 유효성 검사까지 총망라합니다.

🔹 제어 컴포넌트

• input, checkbox, radio, textarea 등 제어 컴포넌트 전반 실습

• 상태와 연결된 입력 처리 흐름과 리렌더링 이해

• 🧩 미션: 다양한 제어 입력을 조합한 폼 UI 구현

🔹 비제어 컴포넌트

• ref를 통한 입력값 접근과 DOM 기반 제어 방식

• 제어/비제어 방식의 장단점 비교 및 통합 전략

• 🧩 미션: 비제어 방식으로 다중 입력 일괄 처리하기

🔹 리액트 19 고급 폼 제어

• ref를 props로 전달하는 새로운 패턴 (리액트 19)

• 복잡한 입력 처리를 커스텀 훅으로 분리하고 재사용성 높이기

• 커스텀 훅 심화: 내부 상태 추상화, 커스텀 벨리데이션 연동

🔹 유효성 검사 (Validation)

• 필수값, 길이, 포맷 등의 기본 벨리데이션 구현 패턴

• 커스텀 벨리데이션 함수 작성 및 훅 통합

• 🧩 미션: 로그인 폼 완성하기
  → 입력 제어 + 벨리데이션 + 상태 처리까지 총체적 폼 실습

이 챕터를 마치면 단순한 입력 처리에서 한 걸음 나아가,
복잡한 폼 흐름을 구성하고, 깔끔하게 유지보수 가능한 구조로 관리하는 역량을 얻게 됩니다.
실무 수준의 입력 제어 경험과 최신 리액트 기술까지 함께 체득할 수 있는 결정적 기회입니다.

Chapter 11
할 일 관리 앱

이 챕터에서는 지금까지 배운 리액트의 핵심 개념들을 바탕으로, 실제로 동작하는 할일 관리(Todo) 애플리케이션을 구현합니다.
컴포넌트 분리, 상태 관리, 이벤트 처리, 리스트 렌더링, 수정/삭제 등 실전 리액트 개발 흐름을 처음부터 끝까지 경험할 수 있는 챕터입니다.

🛠 실전 구현 내용

• 프로젝트 세팅부터 시작해 기본 구조 잡기

• 입력 폼을 통한 할일 등록 기능 구현

• 리스트 렌더링으로 할일 목록 표시하기

• 체크박스를 통한 할일 완료 표시 및 삭제 기능 추가

• 🧩 할일 수정 기능 구현을 통해 상태 업데이트와 UI 제어 로직 숙련

✅ 실습을 통해 얻는 것

• 단순한 API 이해를 넘어, 여러 컴포넌트 간의 역할 분리와 데이터 흐름을 설계

• 상태를 중심으로 동작하는 리액트 앱의 구조와 흐름을 처음부터 끝까지 스스로 구현

• 미션에 가까운 완성형 프로젝트로 작은 규모의 CRUD 앱을 직접 만들어본 경험

이 챕터를 마치면, 리액트의 다양한 기능을 조합해 하나의 앱을 설계하고 완성하는 자신감 있는 첫 프로젝트 경험을 갖게 됩니다.

Chapter 12
사이드 이펙트와 컴포넌트 최적화 기법

이 챕터는 리액트 컴포넌트가 단순히 “렌더링”만 하는 것을 넘어서, 비동기 작업, 브라우저 이벤트, 외부 API 처리 등 사이드 이펙트 관리와 불필요한 렌더링을 줄이는 최적화 전략까지 함께 다룹니다.

🔹 사이드 이펙트 관리 (useEffect, useId 등)

• useId 훅을 활용한 접근성 향상 및 고유 식별자 생성

• 🧩 할일 관리 앱에 useId를 적용해 실무 접근성 감각 체득

• useEffect의 동작 시점, 의존성 배열의 원리 등 이론 + 실습

• 🧩 Todo 앱에 useEffect를 적용해 외부 데이터, 상태 변화 반응 처리 구현

🔹 컴포넌트 최적화 (React.memo, useCallback, useMemo)

• React.memo를 통한 불필요한 리렌더링 방지

• 메모이제이션이 언제 풀리는지, 그리고 그 이유 분석

• useCallback과 useMemo의 차이와 적용 시점

• 🧩 할일 관리 앱에 React.memo와 useCallback을 적용하여 최적화 체감

🔹 고급 렌더링 전략 (lazy, suspense, error-boundary)

• 컴포넌트를 지연 로딩하는 lazy()와 Suspense의 기본 개념

• 로딩 대기 중의 UI 구성과 사용자 경험 향상 전략

• 에러 발생 시 앱을 무너지지 않게 보호하는 ErrorBoundary 처리 방식

이 챕터를 마치면, 복잡한 컴포넌트 구조 속에서도 성능과 유지보수를 고려한 설계를 직접 구현할 수 있으며,
실제 서비스에서 요구하는 수준의 리액트 앱 운영 감각을 갖추게 됩니다.

Chapter 13
Context API

컴포넌트 간 깊은 데이터 전달을 깔끔하게 처리하고 싶다면? Context API가 그 해답입니다.
이 챕터에서는 전역 상태 관리의 기초로 Context API의 핵심 개념과 사용법을 학습하고, 실전 프로젝트에 적용하며 구조화된 앱 개발 능력을 기릅니다.

🔹 전역 상태의 필요성과 Context API 기본

• props drilling 문제를 해결하기 위한 전역 상태의 필요성

• createContext, useContext를 활용한 기본 전역 상태 설계

• 불필요한 렌더링 문제와 구조 개선 방법 (memo, context 분리)

• reducer와 결합하여 복잡한 전역 상태도 효율적으로 관리

• ✅ 두 개 이상의 Context를 함께 사용하는 패턴 실습 포함

🧩 실전: UserProfile 상태 관리 프로젝트

• 초기 UserProfile 코드 분석 → 컨텍스트 객체로 상태 분리

• 🧩 글자 크기, 테마, 알림 설정, 언어 설정(i18n.ts) 등 사용자 환경 설정을 전역 상태로 관리

• useLayoutEffect를 함께 활용해 렌더 순서 및 레이아웃 반응성 제어

• ✅ Context API + 커스텀 훅 설계를 통한 확장성 높은 전역 상태 구조 학습

🧩 미션: Todo 앱에 Context API 적용

• 기존 할일 앱에 전역 상태 도입 → 컴포넌트 간 상태 공유 구조 개선

• 여러 컴포넌트가 동일한 상태를 활용할 수 있도록 구성하며 실전 설계 능력 강화

이 챕터를 통해 단순한 컴포넌트 단위의 상태에서 벗어나,
앱 전체를 바라보는 전역 상태의 흐름과 관리 전략을 실제로 구현할 수 있게 됩니다.

Chapter 14
Redux ToolKit

Context API로 전역 상태의 개념을 잡았다면, 이제는 리덕스 툴킷(RTK)으로 보다 확장 가능하고 유지보수하기 쉬운 전역 상태 관리 구조를 경험해봅니다.
이 챕터는 복잡한 상태를 체계적으로 관리할 수 있도록 리덕스 툴킷의 핵심 기능을 실습 중심으로 학습합니다.

🔹 Redux Toolkit 이론 + 구조 잡기

• Redux Toolkit의 등장 배경과 기존 Redux와의 차이점

• 스토어 생성 및 createSlice를 통한 슬라이스 구조화

• 상태 변경 흐름, 액션 디스패치, 리렌더링 흐름 이해

• ✅ Redux DevTools 연동을 통한 상태 디버깅

• 매개변수 전달, thunk를 활용한 비동기 처리 로직까지 확장

• ✅ 슬라이스를 여러 개로 분리하고 병합하여 관리하는 고급 구조 실습

🧩 실전: UserProfile 상태 관리 with Redux

• UserProfile 상태를 Redux 기반으로 재구성

• 🧩 글자 크기, 알림 설정, 테마 상태 등을 슬라이스 단위로 구조화

• Context API 대비 더 강력한 구조적 통제력과 유지보수성 비교 체험

🧩 미션: 할일 앱에 Redux 적용

• 기존 할일 관리 앱을 Redux Toolkit 기반으로 전환

• ✅ Todo 상태, 추가/삭제/수정 로직을 슬라이스 단위로 구현

• 실전에서의 컴포넌트-스토어 분리 전략과 코드 관리 경험 강화

이 챕터를 마치면, 단순한 상태 관리에서 한 걸음 나아가
“슬라이스 단위의 구조화된 전역 상태 관리”를 직접 구현할 수 있는 수준에 도달하게 됩니다.
실무에서 Redux Toolkit을 어떻게 쓰는지 궁금했던 분들에게도 강력 추천되는 실전 챕터입니다.

Chapter 15
Zustand

복잡한 설정 없이 빠르게 전역 상태를 만들고 싶다면?
이 챕터에서는 가볍고 직관적인 전역 상태 관리 라이브러리인 Zustand를 학습합니다.
Redux보다 가볍고 Context보다 강력한 구조로, 실무에서도 점점 주목받고 있는 상태 관리 대안입니다.

🔹 Zustand 기초부터 실전까지

• Zustand의 개념과 철학: “Global store with minimal boilerplate”

• 기본 사용법과 상태 정의 방식

• 상태에 매개변수를 전달하고, 파생 상태를 쉽게 만들 수 있는 구조

• ✅ persist 기능으로 로컬스토리지 등 영속성 저장

• ✅ subscribeWithSelector를 이용한 리렌더링 최적화

• ✅ immer를 통해 불변성 관리를 직관적으로

• ✅ devtools 연동으로 디버깅까지 손쉽게 처리

🧩 실전: UserProfile 상태 구현

• UserProfile 상태를 Zustand 기반으로 다시 구현

• Redux/Context와 비교했을 때 코드 양, 직관성, 확장성 차이 체험

🧩 미션: Todo 앱 Zustand 리팩토링

• 기존 할일 앱을 Zustand 기반으로 전환

• ✅ 컴포넌트가 글로벌 상태를 사용하는 다양한 방법 직접 구현

• 상태 변경 → UI 렌더 → 저장/복구 흐름을 최소 코드로 구현하는 경험 제공

이 챕터를 마치면, 세 가지 상태 관리 도구(Context API, Redux Toolkit, Zustand)를 모두 체험한 실력자로서
상황에 맞는 전역 상태 도구를 판단하고 선택할 수 있는 실무 기준과 감각을 얻게 됩니다.

Chapter 16
데이터 통신

이제 리액트 앱을 “살아 있는 앱”으로 만들어야 할 시간입니다.
이 챕터에서는 실제 서버와 통신하는 방법을 학습하고, 이를 PostBrowser 미니 프로젝트에 직접 연결해보며 리액트 앱의 실전 통신 구조를 완성해갑니다.

🔹 데이터 패칭의 기초

• HTTP 통신의 기본 개념과 구조

• json-server로 로컬 API 서버 구성 → 🛠 실습 기반 API 환경 구축

• Thunder Client를 활용한 API 테스트 자동화

• 📝 db.json 파일 구성 노트 제공으로 실습 기반 완비

🔹 fetch를 활용한 CRUD 실습

• 기본 요청 (GET, POST, PUT, DELETE) 구조 익히기

• ✅ 로딩 상태, 에러 핸들링, 요청 취소(AbortController) 등 실전 요소까지 반영

• 🧩 실전 중심 CRUD 작업을 fetch로 전부 구현하며 리액트 연동 흐름 이해

🔹 axios를 활용한 고급 패칭

• axios 기본 사용법부터 CRUD 전체 흐름 정리

• ✅ axios.create()를 통한 공통 인스턴스 구성

• ✅ 인터셉터, 에러 핸들링, 응답 구조 통합 등 실무 전략 소개

🧩 실전 프로젝트: PostBrowser 앱

• 기본 코드 제공 → 리액트 앱에 데이터 연동 적용

• 게시글 렌더링 → 페이징 구현 → 검색 기능 추가까지 순차적 완성

• ✅ 실습을 통해 상태 관리, 패칭 흐름, UI 업데이트 흐름 전부 종합적으로 경험

이 챕터를 마치면, 단순한 컴포넌트를 넘어서 API와 통신하는 실전형 리액트 애플리케이션을 직접 설계하고 구현할 수 있는 능력을 갖추게 됩니다.
이후 TanStack Query나 고급 상태 관리로 확장할 수 있는 확실한 기반을 다지는 파트입니다.

Chapter 17
데이터 통신 심화

이 챕터는 리액트 19에서 도입된 폼/비동기 관련 API들을 중심으로,
데이터 통신을 사용자 경험 관점에서 어떻게 최적화할 수 있는지를 기능별 실습 + TMDB 실전 프로젝트를 통해 배우게 됩니다.

🔹 리액트 19의 폼 처리와 비동기 흐름

• useTransition을 이용한 스무스한 UI 상태 전환 처리

• 🧩 Transition 적용 전후 비교 실습을 통해 체감형 학습

• useActionState, form action, useFormStatus를 통한
  → 폼 처리의 새로운 방식과 서버 액션 흐름 학습

🔹 최신 UX 기능 활용

• useOptimistic으로 낙관적 UI 구현

• ✅ 비동기 작업 전 응답 없이도 UI를 먼저 반영하는 최신 UX 설계

• use()를 통한 Promise 기반 데이터 직접 처리 및 Suspense 연계

• ErrorBoundary와 Suspense 조합으로 에러 + 로딩 대응 전략 구성

🧩 실전: TMDB 영화 앱 개발

• 영화 목록 렌더링 → 페이징 → 무한스크롤 구현까지 전개

• 🧩 Suspense + use() + ErrorBoundary 조합으로 실전 완성도 높은 영화 앱 구성

• ✅ 회원가입 흐름까지 통합한 서버와의 통신 전체 사이클 경험

이 챕터를 마치면, 단순한 fetch나 axios 수준을 넘어
리액트 19 시대의 데이터 UX를 선도하는 기능들을 실전 앱에 자연스럽게 녹여낼 수 있는 수준에 도달하게 됩니다.
사용자 중심의 UI 응답성과 실시간성 있는 앱 구현을 원하는 분들에게 강력히 추천되는 파트입니다.

Chapter 18
React Router v7

리액트 애플리케이션에서 라우터는 페이지 구조, 데이터 흐름, 사용자 이동 경험을 책임지는 핵심입니다.
이 챕터에서는 React Router v7의 최신 API들을 기반으로 SPA 구조를 설계하고,
라우팅 + 데이터 로딩 + 에러 핸들링까지 완전한 전환 흐름을 구축해봅니다.

🔹 라우팅 기초와 구조화

• 기본 설치 및 라우터 설정

• 중첩 라우트, 인덱스 라우트, 레이아웃 라우트 구성

• ✅ 라우트 프리픽스, 동적/옵셔널 세그먼트, 스플랫 등 실무형 경로 패턴 학습

• NavLink, Link를 활용한 UI 중심의 이동 제어

🔹 폼 & 내비게이션 동작

• <Form> 컴포넌트로 리액트 라우터 기반 폼 처리 이해

• navigate() 함수를 활용한 프로그래밍 방식 이동 처리

• ✅ 전통적인 form 제출 방식과 라우터 기반 접근의 차이 체험

🔹 데이터 패칭 + 로딩 + 에러 핸들링

• loader 속성을 통한 라우트 단위 데이터 패칭 흐름 설계

• loader에서 발생하는 비동기 요청 → 로딩 처리 → 에러 핸들링

• ✅ loader + suspense, loader + errorElement 등 실전 구조 구현

이 챕터를 마치면, 리액트 앱의 페이지 설계부터 데이터 흐름, 사용자 경험까지
전반적인 SPA 구조를 스스로 설계하고 운영할 수 있는 프론트엔드 설계력을 얻게 됩니다.

Chapter 19
Final Project - SULOG

지금까지 학습한 컴포넌트 설계, 상태 관리, 데이터 통신, 사용자 경험 최적화, 인증 처리, 배포까지
모든 내용을 집약한 리액트 기반 풀스택 프로젝트의 완성 단계입니다.
이 챕터에서는 실제 서비스처럼 동작하는 블로그형 웹 애플리케이션을 직접 구현하고 배포까지 경험합니다.

🛠 백엔드 + 인증 구현

• MongoDB 설정 및 백엔드 API 연동

• ✅ 카카오 로그인 구현: 애플리케이션 등록부터 OAuth 플로우 전체 구성

• ✅ 자체 회원가입/로그인 구현: 폼 구성 + 서버 연동 + 상태 관리

• 토큰 인증, 에러 처리, 인증 흐름 디버깅 실습

🧩 게시글 기능 전체 구현

• 게시글 등록 → 이미지 첨부 프리셋 연동

• ✅ 수정, 삭제, 상세 보기 기능까지 모든 CRUD 흐름 실현

• 댓글 작성, 삭제, 렌더링 로직 → 상태 연동 및 리렌더링 처리

• ✅ 백엔드 수정 내용은 강의 노트로 함께 제공

🔁 페이지네이션 + 리스트 최적화

• 메인 게시글 목록을 페이지 단위로 불러오기

• ✅ 페이지네비게이션 컴포넌트를 직접 설계하여 실전 감각 강화

• 무한스크롤이 아닌 정형화된 페이징 처리 전략 이해

🎯 UI 다듬기 + 오류 보완 + 실제 배포

• 사용자 흐름에 맞춘 UI/UX 개선과 미비점 보완

• ✅ 프론트엔드 & 백엔드 각각 Vercel을 통한 실제 배포 실습

• 실 서비스 기준으로 도메인 구성, 이미지 최적화, 최종 점검까지

이 파이널 챕터를 마치면, 단순한 연습을 넘어
“스스로 사용자 인증 기반 웹 서비스를 구축하고 운영할 수 있는 개발자”가 됩니다.
강의를 통해 배운 모든 것을 완성된 하나의 서비스로 통합해보며 실력을 검증하세요!

다양한 실습

챕터별 수준에 맞게 구성된 최적화된 실습

디자인이 적용되지 않은 실습만 빼고, 디자인이 적용된 것만 소개할게요!

신호등(chapter 08)

램프(chapter 08)

계산기(chapter 09)

로그인(chapter 10)

할일 관리 앱(chapter 11)

사용자 설정(chapter 13)

Post Browser(chapter 16)

TMDB(chapter 17)

파이널(chapter 19) - 용량문제로 움짤 불가..ㅠ

디자인이 적용안된 예제까지 하면 수십개 +

이러한 밀도 높은 모든 예제들이 여러분들의 단계적인 학습을

완벽하게 도와줄 것이라고 자신합니다.

잠시만요!

강의에도 나와 맞는 '결'이 있다는 거 아시나요?

누구에게나 인정받는 대작 게임이 나에게는 재미없을 수 있는 것처럼,
강의도 모두에게 똑같이 맞는 건 아닙니다.

아무리 칭찬이 자자한 강의라도 나와 맞지 않을 수 있고,
반대로 누군가에겐 평범한 강의가 나에겐 최고의 강의가 될 수 있죠.

그래서 제 모든 강의는 최소 10% 이상 무료로 공개되어 있습니다.
직접 들어보고, 저와 스타일의 ‘결’이 맞는지 확인해 보세요!

만약 저와 결이 잘 맞는다면,
프런트엔드 개발자로 가는 가장 빠른 지름길을 안내해 드리겠습니다.
믿고 따라오세요! 🚀