129,000원
수강 신청이런 경험, 있지 않나요?
리액트 강의 3개째인데, 막상 혼자서 컴포넌트 하나도 못 만들겠어요
AI한테 코드 달라고 하면 주긴 하는데, 왜 이렇게 짰는지 하나도 모르겠어요
퍼블리셔로 5년째인데, 이제 리액트 못 하면 자리가 없을 것 같아요
컴포넌트가 뭔지는 알겠는데, 어디서부터 쪼개야 하는 건지...
같은 AI를 써도, 결과가 달라집니다
지금
"로그인 페이지 만들어줘"
수강 후
"useState로 폼 상태 관리하고, 유효성 검사는 onSubmit에서 처리해줘"
지금
AI 코드를 그대로 복붙하고 기도한다
수강 후
AI 코드에서 불필요한 useEffect를 찾아내고 직접 수정한다
지금
에러 나면 에러 메시지를 통째로 AI에 던진다
수강 후
콘솔을 읽고 어느 컴포넌트에서 문제인지 직접 좁혀간다
이런 것을 배웁니다
퍼블리셔도 리액트를 해야 하는 이유
프론트엔드 생태계가 변하고 있습니다. 더 이상 HTML/CSS만으로는 경쟁력을 유지하기 어렵습니다. 이 강의는 퍼블리셔의 기존 역량을 살리면서 리액트를 자연스럽게 익히도록 설계되었습니다.
HTML을 작성하듯 컴포넌트를 만듭니다
JSX는 HTML과 거의 같습니다. 여러분이 이미 알고 있는 마크업 지식을 그대로 활용해서 리액트 컴포넌트를 만드는 방법을 배웁니다.
State와 이벤트로 인터랙션 구현
useState, 이벤트 핸들링, 폼 처리까지. 화면을 동적으로 바꾸는 핵심 개념을 실습과 함께 익힙니다.
React Router로 페이지 전환
SPA에서 페이지를 이동하는 방법, 동적 라우트, 중첩 레이아웃까지 실무에서 바로 쓰는 라우팅 패턴을 배웁니다.
API 연동과 데이터 패칭
fetch로 외부 데이터를 불러오고, 로딩과 에러 상태를 처리하는 실전 패턴을 학습합니다.
실전 프로젝트로 완성하는 포트폴리오
포트폴리오 사이트, 쇼핑몰 상품 페이지, 대시보드 UI — 실무에서 바로 쓸 수 있는 3개 프로젝트를 처음부터 끝까지 함께 만듭니다.
커리큘럼
총 6개 파트 · 117강
Section 00. 리액트 시작하기
리액트가 왜 필요한지 이해하고, 개발 환경을 세팅하고, 첫 프로젝트를 만들어봅니다.
00. 리액트 시작하기
10.1-리액트예제 소개
무료05:34
20.2-리액트설치
무료08:51
30.3-리액트 폴더정리
무료09:38
Section 01. 리액트 기본문법
JSX, 컴포넌트, Props, 이벤트, 조건부 렌더링 등 리액트의 핵심 문법을 익힙니다.
01. 리액트 기본문법
11.1-JSX로 마크업하기
06:36
21.2-컴포넌트
05:58
31.3-컴포넌트 기본규칙
13:38
41.4-props, children
14:57
51.5-UI분기처리
04:41
61.6-반복 UI출력
07:35
71.7-이벤트연결
05:41
81.8-웹폰트 아이콘 적용
08:40
91.9-실습-Header,Footer
17:41
101.10-실습-공통 레이아웃 적용
20:23
111.11-실습-메인페이지 레이아웃 분기처리
05:50
Section 02. 리액트 라우터
React Router로 SPA 페이지 전환, 동적 라우트, 중첩 레이아웃을 구현합니다.
02. 리액트 라우터
12.2-리액트 라우터로 웹 페이지 나누기
07:55
22.3-페이지 이동 메뉴 활성화
13:48
32.4-상세페이지 연결
09:58
42.5-실습-페이지 컴포넌트 분리
08:16
52.6-실습-페이지 이동메뉴 활성화
03:04
62.7-실습-유튜브 상세페이지
04:48
72.8-실습-브래드크럼
14:21
Section 03. Tailwind CSS
Tailwind CSS로 빠르고 일관된 UI를 만드는 실무 패턴을 배웁니다.
03. Tailwind CSS
13.1-리액트에서 테일윈드가 좋은 이유
04:52
23.2-실습예제 둘러보기
06:42
33.3-tailwind 설치 및 환경설정
16:04
43.4-리액트에서의 스타일링
04:05
53.5-텍스트 관련 유틸리티
25:14
63.6-크기, 여백 유틸리티
07:39
73.7-배경 유틸리티
11:53
83.8-테두리 유틸리티
05:38
93.9-투명도, 넘침처리, 그림자
10:58
103.10-요소변형
11:12
113.11-3d 요소변형
06:33
123.12-flex
07:57
133.13-grid
07:17
143.14-columns
12:26
153.15-filter
14:18
163.16-가상선택자
18:07
173.17-전환효과
16:07
183.18-애니메이션
06:50
193.19-oklch 색상
12:28
203.20-포지셔닝
06:58
213.21-반응형
09:16
223.22-테마변수
11:19
233.23-레이어스타일
11:22
243.24-커스텀유틸리티
06:53
253.25-다크모드
07:34
263.26-tailwind-merge
11:34
273.27-모션관련 접근성 향상
07:35
283.28-테일윈드 구문 관리
23:56
293.29-실습-테일윈드 환경설정
20:40
303.30-실습-아토믹디자인패턴
11:21
313.31-실습-Logo
17:26
323.32-실습-Gnb
07:37
333.33-실습-Sns
02:15
343.34-실습-Header
09:05
353.35-실습-Home
08:18
363.36-실습-Layout
15:29
373.37-실습-Footer
26:14
383.38-실습-InfoBox
25:09
393.39-실습-Pic
21:50
403.40-실습-Ceo
12:12
413.41-실습-GridList
28:56
423.42-실습-Card
23:23
433.43-실습-Team
19:14
443.44-실습-Table
32:34
453.45-실습-Class
09:33
463.46-실습-Instructor
10:36
473.47-실습-Slogan
12:31
483.48-실습-FoldingBox
19:45
493.49-실습-QuickNav
17:49
Section 04. 리액트 훅
useState, useEffect, useRef 등 리액트 훅을 깊이 이해하고 활용합니다.
04. 리액트 훅
14.1-리액트훅의 개념 및 필요성
11:00
24.2-이번장 실습예제 소개
06:47
34.3-상태관리, 생명주기, 돔접근 개념정리
04:02
44.4-useState 상태관리
29:29
54.5-콜백을 통한 상태변경
06:30
64.6-상태값을 const 방식으로 지정하는 이유
05:55
74.7-JSX vs HTML
04:17
84.8-가상돔
06:10
94.9-리액트에서의 렌더 개념
05:19
104.10-리액트에서의 불변성
08:35
114.11-useEffect
24:36
124.12-useRef
17:25
134.13-useRef vs 변수 vs useState
08:45
144.14-다양한 폼 제어컴포넌트 1
17:05
154.15-외부데이터 상태관리
24:49
164.16-실습-ToggleTheme
25:38
174.17-실습-ToggleMenu
17:35
184.18-실습-GnbMobile
33:00
194.19-실습-Masonry
14:04
204.20-실습-Spinner
05:24
214.21-실습-갤러리
19:30
224.22-실습-모달
19:18
234.23-실습-유튜브 목록
21:36
244.24-실습-유튜브 상세페이지
25:04
254.25-실습-페이지 상단 이동 스크롤 -
02:41
264.26-실습-폼메일 전송
19:59
274.27-실습-Contact 스타일링
09:55
284.28-실습-지도 컴포넌트
24:24
294.29-실습-동적으로 script요소 삽입
16:33
304.30-실습-전역 객체에서 리사이즈 이벤트 핸들러 제거
13:59
Section 05. 리액트 모션
Framer Motion으로 자연스러운 애니메이션과 인터랙션을 구현합니다.
05. 리액트 모션
1실습1-기본 페이지 전환모션
06:56
2실습2-마스크 전환효과 추가
16:33
3실습3-Slogan에 모션 적용
16:54
4실습4-QuickNav 모션추가
03:16
5실습5-레이아웃, 브레드크럼 모션
16:43
6실습6-InfoBox 모션적용
09:29
7실습7-Pic 모션 적용
03:25
8실습8-Ceo 모션
03:44
9실습9-Table모션
05:49
10실습10-Class모션
03:13
11실습11-Masonry모션
13:00
12실습12-Modal모션
09:19
13실습13-useMemo로 모션 컴포넌트 캐싱
16:18
14실습14-GridList 모션
08:41
15실습15-Card모션
12:22
16실습16-MailForm모션
06:38
17실습17-Contact 모션
04:25
강사 소개
김
김디코드
프론트엔드 개발자 · 전 웹에이전시 퍼블리셔10년차 프론트엔드 개발자. 웹퍼블리셔로 시작해 React, Next.js 전문 개발자로 전향한 경험을 바탕으로, 퍼블리셔 관점에서 가장 이해하기 쉬운 리액트 강의를 만들었습니다.