44,000원
초급자를 위해 준비한
[프론트엔드] 강의입니다.
블로그 프로젝트를 통해 리액트 기초를 배울수 있습니다
✍️
이런 걸
배워요!
이런 걸
배워요!
리액트 기초
리액트 훅스
리덕스
리덕스 툴킷
하루 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
안녕하세요
코지 코더 입니다.
코지 코더 입니다.
커리큘럼
총 87 개
˙ 9시간 5분의 수업
이 강의는 영상이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강좌 소개 및 개발 환경 세팅
3 강
∙ 12분
섹션 1. 리액트 기초
7 강
∙ 32분
섹션 2. 블로그 포스트 생성 폼 만들기
5 강
∙ 26분
10 Input State 바인딩
08:46
11 Textarea State 바인딩
03:48
12 json-server 설치
03:49
13 DB에 데이터 저장
06:54
14 db 실행 명령어 스크립트에 넣기
02:48
섹션 3. React Router로 페이지 추가하기
10 강
∙ 56분
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. 블로그 리스트
13 강
∙ 1시간 13분
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. 블로그 디테일 페이지
5 강
∙ 27분
35 블로그 페이지 라우트 추가
06:27
36 블로그 db에서 받아와서 화면에 보여주기
07:29
37 의존성 배열
06:16
38 블로그 리스트에 링크 연결
02:10
39 블로그 생성된 시간 추가
05:18
섹션 6. 블로그 수정 페이지
6 강
∙ 37분
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. 블로그 리스 페이지 수정
5 강
∙ 18분
46 비공개 블로그 리스트에서 제거
01:33
47 admin 페이지 route 추가 및 BlogList 컴포넌트 만들기
06:38
48 admin permission
05:48
49 카드 컴포넌트 수정
03:18
50 블로그 생성후 admin으로 이동
00:58
섹션 8. Pagination
11 강
∙ 1시간 14분
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. 검색 기능
2 강
∙ 18분
61 검색 기능 1
08:15
62 검색 기능 2
09:48
섹션 10. Form Validation
1 강
∙ 9분
63 Form Validation
09:18
섹션 11. Toast Notification
10 강
∙ 1시간 38분
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으로 전환하기
10:32
72 Toast Notification 9 - Redux toolkit으로 전환하기 2
10:26
73 Toast Notification 10 - Redux toolkit으로 전환하기 3
09:26
섹션 12. Auth
3 강
∙ 18분
74 auth redux slice 만들기
07:13
75 Protected Route
07:53
76 메모리 정리 useEffect
03:29
섹션 13. Error Handling
5 강
∙ 27분
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
섹션 14. React Router 업그레이드
1 강
∙ 15분
82 React Router 업그레이드
15:08
강의 게시일 : 2022년 11월 22일
(마지막 업데이트일 : 2023년 01월 10일)
수강평
총 28개
수강생분들이 직접 작성하신 수강평입니다.
4.8
28개의 수강평
5점
4점
3점
2점
1점
VIEW
추천 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
영상 끊기는 부분.. 중복되는 부분이 해결된다면 깔끔하고 좋은 강의 였습니다.. 1.5 완강 했습니다.
2023-01-06
천천히 설명 해주셔서 이해 하기 좋습니다.
2022-11-29
와 지금까지 들은 강의 중에서 젤 돈이 안아깝네요. 아직 초반이긴 하지만 프로젝트를 하면서 바로바로 적용을 하니 이해하기 쉬웠어요. 베리굿ㅋ
2022-11-30
급하게 리액트 공부 해야하는 상황에서 딱 리액트에만 집중할 수 있도록 알려주십니다!
원래 리뷰 잘 안쓰는데 안쓸 수 없게만드 셨습니다.
진짜 군더더기 없이 리액트에 집중해서 기본 CRUD를 만들수 있게되네요 더 많은 강의 만들어주시면 좋겠습니다! 감사해요!
다음에도 리액트 강의 나오면 무조건 구매할 것 같습니다! 너무 만족스럽습니다
2022-12-01
인프런 리액트 강좌들은 평점,인기순으로 거의다 듣고있는 사람입니다. 인프런 강좌들을 많이듣다보니
수강평을 무시못하겠더라고요. 저역시 수강평을 참고하여 강좌를 구독하는 사람중 한명이니까요.
수강평 쓰는거 별로 좋아하지는 않는대요. 코지코더님 수강평에 아무도 글이 없어서 한번써봅니다.
짧게 쓸께요~^^
30%할인해서 3만원 대에 구독중이지만.... 이강좌를 금액으로 평가하면, 30만원도 아깝지 않네요
강사님 말투가 약간 서툴고, 기계적인 말투가 아니라서 오히려 그게 더 장점일 수 도있지만,
별것도아닌 유튜브에 다나와있는 기초적인 강좌를 10만원넘게 받아먹는 돈충이 강사들보다,
훨씬 몇백배 도움되니, 들어보세요.
2022-11-25