Thumbnail
얼리버드 할인 중
NEW 개발 · 프로그래밍 프론트엔드

프로젝트로 배우는 React.js 대시보드

(5.0)
6개의 수강평 ∙ 35명의 수강생

30%

30,800원

44,000원
지식공유자: 코지 코더
총 86개 수업 (8시간 52분)
수강기한: 무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유
초급자를 위해 준비한
[프론트엔드] 강의입니다.

블로그 프로젝트를 통해 리액트 기초를 배울수 있습니다

✍️
이런 걸
배워요!
리액트 기초
리액트 훅스
리덕스
리덕스 툴킷

하루 10분 ⏰
리액트 입문, 효율적으로 해보세요!

블로그를 만들며 배우는 리액트 🖥️

프런트엔드 프레임워크 하면 가장 먼저 떠오르는 React.js! 이 강의는 인기 프론트엔드 프레임워크 React.js의 설치부터 함께 시작하는 입문 강의입니다.

시작과 동시에 간단한 블로그 만들기 프로젝트를 시작하게 됩니다. 프로젝트를 만들어 나가면서 필요한 리액트 기능을 배우고, 프로젝트 실습을 통해 개념을 바로 적용해봅니다. 블로그를 만들면서 페이지 생성, 삭제, 검색 등 다양한 기능을 구현해봅니다. 각 영상은 대부분 10분 미만의 짧은 영상으로 만들었습니다.

블로그를 만들면서
실용적인 기능 위주로 학습!

10분 내외의
짧은 영상들로 구성!

입문부터 활용까지,
개념부터 실습까지 한 번에!


예상 질문 Q & A 💬

Q. React.js를 전혀 몰라도 들어도 될까요?

네! React.js 기초 강좌이기 때문에 모르셔도 기초부터 배우실수 있습니다. 이 강좌가 끝내시면 React.js로 프로젝트를 혼자 하실 정도의 기본은 배우게 됩니다. 하지만 HTML, CSS, Javascript (ES6+) 기초는 아시는 분이 듣는 걸 추천합니다. 강의 중간중간에 es6+ 관련된 설명도 들어있습니다. 😊


강의 자료 소개 📜

각 영상이 끝날 때의 소스 코드를 github에 브랜치로 만들어 올려두었습니다. 에러로 막혔을 때 github에서 소스 코드를 비교하실 수 있어요. 😁 찾기 쉽도록 수업 영상 번호를 브랜치 이름으로 올려두었어요. 

Link: https://github.com/kossiecoder/react-redux-basic


지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
리액트 기초를 배우고 싶으신 분
리액트로 웹앱을 만들어 보고 싶으신 분
📚
선수 지식,
필요한가요?
html
css
javascript

안녕하세요
코지 코더 입니다.
코지 코더의 썸네일
커리큘럼 총 86 개 ˙ 8시간 52분의 수업
이 강의는 영상이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 2. 블로그 포스트 생성 폼 만들기
10 Input State 바인딩 08:46
11 Textarea State 바인딩 03:48
12 json-server 설치 04:07
13 DB에 데이터 저장 06:54
14 db 실행 명령어 스크립트에 넣기 02:48
섹션 3. React Router로 페이지 추가하기
15 React Router 설치 07:42
16 React Router - Switch & exact 03:10
17 NavBar 스타일 04:08
18 생성 Form 컴포넌트로 빼내기 05:36
19 NavBar 컴포넌트로 빼내기 02:17
20 페이지 추가 06:16
(Optional) 자바스크립트 map 함수 미리보기 06:34
21 routes 파일 만들기 09:41
22 NavLink 04:41
(Optional) React Router 작동 원리 미리보기 06:41
섹션 4. 블로그 리스트
23 블로그 리스트 데이터 받아오기 (useEffect) 08:28
24 받아온 데이터 화면에 출력하기 03:25
25 Card 컴포넌트 만들기 (props) 07:51
26 props children 05:50
27 Prop types 07:08
28 생성 버튼 03:34
29 수정 페이지로 이동 (history.push) 07:13
30 이벤트 버블링 06:51
(Optional) 자바스크립트 filter 함수 미리보기 03:54
31 블로그 삭제하기 06:27
32 블로그 포스트가 없을 경우 01:57
33 Loading Spinner 08:57
34 생성 후 리스트 페이지로 이동 01:43
섹션 5. 블로그 디테일 페이지
35 블로그 페이지 라우트 추가 06:27
36 블로그 db에서 받아와서 화면에 보여주기 07:29
37 의존성 배열 07:00
38 블로그 리스트에 링크 연결 02:10
39 블로그 생성된 시간 추가 05:18
섹션 6. 블로그 수정 페이지
40 Edit 페이지 route 추가 05:21
41 수정 페이지 폼 1 07:24
42 수정 페이지 폼 2 04:57
43 수정 페이지 폼 3 07:55
44 수정 페이지 폼 4 03:29
45 수정 페이지 폼 5 08:15
섹션 7. 블로그 리스 페이지 수정
46 비공개 블로그 리스트에서 제거 01:33
47 admin 페이지 route 추가 및 BlogList 컴포넌트 만들기 06:38
48 admin permission 05:48
49 카드 컴포넌트 수정 03:18
50 블로그 생성후 admin으로 이동 00:58
섹션 8. Pagination
51 Pagination 1 04:44
52 Pagination 2 05:58
53 Pagination 3 01:51
53-1 스프레드 연산자 (Spread Operator) 03:17
54 Pagination 4 06:09
55 Pagination 5 09:48
56 Pagination 6 07:05
57 Pagination 7 05:40
58 Pagination 8 13:06
59 Pagination 9 10:32
60 useCallback 06:06
섹션 9. 검색 기능
61 검색 기능 1 08:15
62 검색 기능 2 09:48
섹션 10. Form Validation
63 Form Validation 09:18
섹션 11. Toast Notification
64 Toast Notification 1 09:36
65 Toast Notification 2 10:05
66 Toast Notification 3 10:39
67 Toast Notification 4 - useRef 09:18
68 Toast Notification 5 - Custom Hook 14:31
69 Toast Notification 6 07:18
70 Toast Notification 7 - Redux Toolkit 설치하기 06:48
71 Toast Notification 8 - Redux toolkit으로 전환하기 11:21
72 Toast Notification 9 - Redux toolkit으로 전환하기 2 10:26
73 Toast Notification 10 - Redux toolkit으로 전환하기 3 09:26
섹션 12. Auth
74 auth redux slice 만들기 07:13
75 Protected Route 07:53
76 메모리 정리 useEffect 03:29
섹션 13. Error Handling
77 Not Found Page 03:06
78 error handling 1 05:53
79 error handling 2 10:42
80 로그인 상태 유지하기 06:40
81 블로그 삭제 후 페이지 1로 이동 01:25
강의 게시일 : 2022년 11월 22일 (마지막 업데이트일 : 2022년 11월 22일)
수강평 총 6개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
5
6개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
방종훈 thumbnail
인프런 리액트 강좌들은 평점,인기순으로 거의다 듣고있는 사람입니다. 인프런 강좌들을 많이듣다보니 수강평을 무시못하겠더라고요. 저역시 수강평을 참고하여 강좌를 구독하는 사람중 한명이니까요. 수강평 쓰는거 별로 좋아하지는 않는대요. 코지코더님 수강평에 아무도 글이 없어서 한번써봅니다. 짧게 쓸께요~^^ 30%할인해서 3만원 대에 구독중이지만.... 이강좌를 금액으로 평가하면, 30만원도 아깝지 않네요 강사님 말투가 약간 서툴고, 기계적인 말투가 아니라서 오히려 그게 더 장점일 수 도있지만, 별것도아닌 유튜브에 다나와있는 기초적인 강좌를 10만원넘게 받아먹는 돈충이 강사들보다, 훨씬 몇백배 도움되니, 들어보세요.
2022-11-25
Sue Kim thumbnail
와 지금까지 들은 강의 중에서 젤 돈이 안아깝네요. 아직 초반이긴 하지만 프로젝트를 하면서 바로바로 적용을 하니 이해하기 쉬웠어요. 베리굿ㅋ
2022-11-30
박현욱 thumbnail
천천히 설명 해주셔서 이해 하기 좋습니다.
2022-11-29
빡파송송계란 thumbnail
급하게 리액트 공부 해야하는 상황에서 딱 리액트에만 집중할 수 있도록 알려주십니다! 원래 리뷰 잘 안쓰는데 안쓸 수 없게만드 셨습니다. 진짜 군더더기 없이 리액트에 집중해서 기본 CRUD를 만들수 있게되네요 더 많은 강의 만들어주시면 좋겠습니다! 감사해요! 다음에도 리액트 강의 나오면 무조건 구매할 것 같습니다! 너무 만족스럽습니다
2022-12-01
밤동 thumbnail
가끔씩 영상이 두번씩 재생되거나 말을 버벅이시는 부분도 있었지만 강의 내용은 알차고 좋았습니다. Next.js + typescript 형태의 강의도 있었으면 좋겠습니다.
2022-12-05