Thumbnail
개발 · 프로그래밍 프론트엔드

처음 만난 리덕스(Redux) 대시보드

(5)
9개의 수강평 ∙  178명의 수강생
99,000원

월 19,800원

5개월 할부 시
지식공유자: Inje Lee (소플)
총 118개 수업 (5시간 50분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

상태관리의 기초 개념과 함께 리덕스의 기초를 탄탄하게 다질 수 있습니다.

✍️
이런 걸
배워요!
Redux 기초 개념
Redux 관련 핵심 라이브러리
Redux Toolkit 사용 방법
미니 프로젝트를 통한 Redux 기반 웹애플리케이션 개발

깔끔한 강의자료, 꼼꼼한 설명으로
쉽게 배우는 리덕스 강의입니다. 👨‍🏫

리덕스의 세계로
초대합니다 💫

리덕스는 오픈소스 자바스크립트 상태관리 라이브러리입니다.
상태관리 라이브러리 중에서 압도적으로 가장 많이 사용되고 있으며,
리액트에 연동해서 애플리케이션의 상태들을 효과적으로 관리할 수 있어요.

 

왜 Redux를
배워야 할까요? 🤔

최근에는 MobX, Recoil, Zustand, Jotai 등 다양한 상태관리 라이브러리들이 있지만, Redux는 세상에 나온 지 10년이 훨씬 넘은 상태관리 라이브러리의 조상님 같은 존재입니다. 즉, 상태관리의 핵심적인 컨셉과 구조에 대해서 기반을 다졌다고 볼 수 있는 것이죠!

상태관리 라이브러리 npm trend
위 차트는 대표적인 상태 관리 라이브러리들의 npm trend를 나타낸 것인데, 여기서 빨간색으로 표시된 것이 바로 Redux입니다. 다른 상태관리 라이브러리들이 밑에서 치고 올라오고 있지만, 여전히 Redux가 압도적으로 많이 사용되는 것을 볼 수 있습니다.

그래서 상대적으로 사용하기 쉬운 Recoil이나 Zustand를 사용하기 전에, 꼭 Redux를 통해 상태관리의 기초를 다지는 것이 중요합니다!


강의의 특징을

알려드려요 🔎

  • Redux 구성 요소들을 하나씩 직접 만들어 보며 기초 개념을 익힙니다.
  • Redux와 관련된 핵심 라이브러리 사용법을 익힙니다.
  • Redux Toolkit 사용법을 익힙니다.
  • 미니 프로젝트를 통해 실제 Redux 기반 웹 애플리케이션을 개발합니다.

 

문서를 통해
학습 내용을 정리 📖

강의 내용을 언제든지 다시 복습할 수 있도록 문서 형태로 제공합니다.
궁금한 부분을 다시 찾아보면서 리덕스를 완벽하게 익혀보세요!

FrontOverflow_redux_document

🔗 처음 만난 리덕스(Redux) 문서

 

강의를 들은 후 수강생의 변화 🙋‍♂️

Redux의 기초를
잘 다질 수 있어요!

핵심 라이브러리들을
사용할 수 있어요!

Redux Toolkit을
사용할 수 있어요!

실전 프로젝트 경험을
쌓을 수 있어요!


학습 내용 엿보기 📚

섹션 0 [준비하기]

  • redux-devtools에 대해 학습합니다.
  • 실습을 위한 개발환경 설정 및 redux-devtools를 설치합니다.

섹션 1, 2 [Redux 소개, 시작하기]

  • Redux의 탄생 과정과 원칙들에 대해 학습합니다.
  • Redux의 구성 요소들과 불변성에 대해 학습합니다.

섹션 3 [Store]

  • Store와 Dispatcher의 개념에 대해 학습합니다.
  • Store와 관련된 함수들에 대해 학습합니다.

섹션 4 [Action과 Action Creator]

  • Action과 Action Creator의 개념에 대해 학습합니다.

섹션 5 [Reducer]

  • Reducer의 개념과 규칙에 대해 학습합니다.
  • Immutable Update의 개념을 학습합니다.
  • rootReducer를 만드는 방법에 대해 학습합니다.

섹션 6 [Redux와 UI]

  • Redux와 UI의 관계에 대해 학습합니다.
  • Redux와 UI를 연동하는 방법에 대해 학습합니다.

섹션 7 [Container]

  • Container의 개념에 대해 학습합니다.
  • react-redux 패키지와 주요 API에 대해 학습합니다.

섹션 8 [Ducks Pattern]

  • Duck의 개념과 Ducks 패턴에 대해 학습합니다.

섹션 9 [redux-actions]

  • Flux Standard Action에 대해 학습합니다.
  • redux-actions에 대해 학습합니다.

섹션 10 [Redux와 Async Logic]

  • Async Logic과 Side Effect에 대해 학습합니다.
  • Redux에서의 Async Logic에 대해 학습합니다.

섹션 11 [redux-thunk]

  • Thunk의 개념과 사용하는 이유에 대해 학습합니다.
  • redux-thunk에 대해 학습합니다.
  • Thunk 함수 작성 방법과 패턴에 대해 학습합니다.

섹션 12 [redux-saga]

  • Saga의 개념과 사용하는 이유에 대해 학습합니다.
  • Generator Function에 대해 학습합니다.
  • redux-saga에 대해 학습합니다.
  • Thunk와 Saga의 차이점에 대해 학습합니다.

섹션 13 [redux-persist]

  • Persist의 개념에 대해 학습합니다.
  • redux-persist에 대해 학습합니다.
  • Storage와 데이터 저장 및 복원 과정에 대해 학습합니다.

섹션 14 [Redux Toolkit (RTK)]

  • Redux Toolkit에 대해 학습합니다.
  • Slice의 개념과 사용 방법에 대해 학습합니다.
  • immer 사용 패턴에 대해 학습합니다.

섹션 15 [Redux Hooks]

  • useSelector() 훅에 대해 학습합니다.
  • useDispatch() 훅에 대해 학습합니다.
  • useStore() 훅에 대해 학습합니다.

섹션 16 [미니 프로젝트]

  • 지금까지 배운 내용들을 종합하여 Redux 기반의 TODO 애플리케이션을 함께 만들어 봅니다.


예상 질문 Q&A 💬

Q. 자바스크립트를 잘 몰라도 들을 수 있는 강의인가요?

자바스크립트 기초 문법에 대한 내용이 따로 포함되어 있지 않기 때문에, 먼저 학습하고 들으시는 것이 좋습니다.

Q. 리액트에 대해 잘 몰라도 들을 수 있는 강의인가요?

리액트 개발도 포함되기 때문에, 리액트 기초 내용을 먼저 학습하고 들으시는 것이 좋습니다.
아래 제 무료 리액트 강의를 먼저 듣고 오시면 제일 좋습니다!

🔗 [무료] 처음 만난 리액트

Q. 리덕스를 배우면 뭐가 좋은가요?

리덕스를 통해 애플리케이션 전체에 걸쳐서 상태들을 효과적으로 관리할 수 있습니다.


학습 관련자료 💡

강의 내용 정리 문서
🔗 처음 만난 리덕스(Redux) 문서

2강 ~ 15강. 실습 소스코드
🔗 https://github.com/soaple/first-met-redux-practice

16강. 미니 프로젝트 소스코드
🔗 https://github.com/soaple/first-met-redux-todo


이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
상태관리에 대한 기초를 쌓고 싶으신 분
Redux를 처음 접하시는 분
Redux를 이용한 상태관리에 관심있는 분
📚
선수 지식,
필요할까요?
JavaScript 기초
리액트 기초

안녕하세요
Inje Lee (소플) 입니다.
Inje Lee (소플)의 썸네일

이인제(소플)

개발을 사랑하는 개발자이자 1인 스타트업의 창업자입니다.
오래 전부터 소프트웨어 교육에 관심을 가지고 꾸준히 활동하고 있습니다 😀 

 

커리큘럼 총 118 개 ˙ 5시간 50분의 수업
이 강의는 영상이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 준비하기
redux-devtools 소개 미리보기 00:50
(실습) 개발환경 설정하기 03:48
(실습) redux-devtools 설치하기 00:59
섹션 1. Redux 소개
섹션 2. Redux 시작하기
섹션 3. Store
Store 02:33
Dispatcher 01:17
Store 관련 함수 06:30
(실습) TODO 애플리케이션 04:25
(실습) State Logging 버튼 만들기 01:57
(실습) Middleware 적용해보기 02:12
3강 요약 01:13
섹션 4. Action과 Action Creator
Action 02:04
Action Creator 01:02
(실습) TODO 애플리케이션에 다양한 Action 정의하기 02:01
(실습) Action Creator 만들기 01:51
4강 요약 00:45
섹션 5. Reducer
Reducer 02:34
Rules of Reducers 02:54
Immutable Update 03:46
combineReducers() 01:51
(실습) TODO 애플리케이션에 MEMO 기능 추가하기 05:22
5강 요약 01:39
섹션 6. Redux와 UI
Redux와 UI의 관계 01:27
Redux와 UI 연동 03:24
(실습) 신호등 애플리케이션 만들기 04:27
6강 요약 01:16
섹션 7. Container
Container 03:08
react-redux 01:43
react-redux의 주요 API 01:50
mapStateToProps() 03:56
mapDispatchToProps() 02:29
connect() 04:17
Redux와 React 연동하기 02:45
(실습) create-react-app을 사용해서 리액트 프로젝트 생성하기 02:27
(실습) Redux와 React 연동하기 03:11
(실습) TODO 애플리케이션 만들기 07:44
(실습) redux-devtools 연동하기 03:02
7강 요약 01:33
섹션 8. Ducks Pattern
Pattern 01:01
Ducks Pattern 02:02
Duck 03:54
(실습) TODO 애플리케이션에 Ducks 패턴 적용하기 02:51
8강 요약 00:45
섹션 9. redux-actions
FSA (Flux Standard Action) 02:02
redux-actions 00:49
redux-actions 주요 API 05:21
(실습) TODO 애플리케이션에 redux-actions 적용하기 04:04
9강 요약 01:11
섹션 10. Redux와 Async Logic
Async Logic 02:56
Side Effects 01:03
Redux와 Async Logic 01:52
Async Function Middleware 02:09
Redux Async Data Flow 02:15
(실습) Async Function Middleware 만들기 03:22
10강 요약 01:36
섹션 11. redux-thunk
Thunk 01:22
Thunk를 사용하는 이유 01:40
redux-thunk 00:56
Thunk 함수 작성 방법 02:22
Thunk 사용 패턴 09:49
(실습) redux-thunk 연동해서 Thunk 사용해보기 03:50
11강 요약 01:34
섹션 12. redux-saga
Saga 01:54
Generator Function 04:02
redux-saga 06:13
redux-saga 사용 방법 02:34
Thunk vs Saga 01:32
(실습) Generator Function 사용해보기 01:45
(실습) redux-saga 연동해서 Saga 사용해보기 07:35
(실습) 다양한 Effect Creator 사용해보기 03:12
12강 요약 02:09
섹션 13. redux-persist
Persist 00:48
redux-persist 01:02
Storage 04:50
데이터 저장 및 복원 과정 04:23
redux-persist 사용 방법 03:13
Migration 01:48
(실습) TODO 애플리케이션에 redux-persist 연동하기 04:11
(실습) Session Storage 연동하기 02:39
(실습) Migration 적용해보기 02:03
13강 요약 02:39
섹션 14. Redux Toolkit (RTK)
Redux Toolkit 01:56
Slice 01:26
Redux Toolkit 주요 API 06:55
immer 사용 패턴 03:43
(실습) TODO 애플리케이션에 Redux Toolkit 적용하기 05:46
(실습) Reducer 내에서 state 출력하기 02:22
14강 요약 01:54
섹션 15. Redux Hooks
useSelector() 04:07
useDispatch() 02:05
useStore() 00:49
(실습) Redux Container를 Hook을 사용하도록 변경하기 03:25
15강 요약 01:11
섹션 16. 미니 프로젝트
프로젝트 기획하기 02:27
(실습) 프로젝트 생성하기 01:15
(실습) 필요한 패키지 설치하기 01:54
(실습) 컴포넌트 구성하기 01:54
(실습) 프로젝트 폴더 구성하기 03:10
(실습) App 컴포넌트 구현하기 01:37
(실습) React와 Redux 연동하기 02:01
(실습) Slice 만들기 06:58
(실습) Board UI 구현하기 05:51
(실습) Todo UI 구현하기 08:19
(실습) Thunk 연동하기 04:34
(실습) redux-saga 연동하기 10:01
(실습) redux-persist 연동하기 04:52
16강 요약 02:19
강의 게시일 : 2023년 06월 27일 (마지막 업데이트일 : 2023년 06월 27일)
수강평 총 9개
수강생분들이 직접 작성하신 수강평입니다.
5
9개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
dldldksl thumbnail
5
redux의 동작 원리, redux와 관련된 여러 기술이 등장한 이유, 개념들과 사용법에 대한 쉽고 상세한 설명, 해당 기술의 최근 사용 여부까지,, 중간에 들게 되는 의문에 대한 답도 강의를 따라가며 자연스럽게 알 수 있었습니다. 하지만 redux는 기본적으로 상태관리를 위해 다소 번거로운 과정을 거쳐야 하는구나 라는 불편함을 느꼈고, 여러 기술들이 서로 헷갈리기도 했습니다. 강의의 문제가 아니라 기술 자체가 그렇게 느껴졌네요... 그래도 강사님이 하나하나 이해하기 쉽게 알려주셨고, 완강을 할 수 있었습니다. 강사님이 마지막에 말씀하신 것처럼, React 공부는 즐거웠는데 Redux를 배우며 꽤 좌절했었던 것 같습니다. 하지만 이런 말도 덧붙여 주셨습니다. 개발자에게 중요한 것은 끈기와 성실함이다. 포기하지 않고 꾸준히, 반복적으로 공부한다면 훌륭한 개발자가 되어 있을 것이다. 처음 개발에 입문했을 때 무엇이든 정말 어렵게 느꼈고, 이해가 되지 않는 부분이 너무 많았었습니다. 예전이나 지금이나 배우고 배워서 알게 된 점이 많아져도 배울 것은 여전히 끝없이 많다고 느껴지고는 합니다. 그래도 물론 처음엔 무엇이든 대부분 어렵게 느껴지지만, 시간이 흐르며 쌓인 지식과 경험들이 다시금 새로운 기술을 접했을 때 굉장히 큰 도움이 된다는 것 또한 다시 느꼈습니다. Redux를 잘 공부해서 상태 관리에 대해 더 깊이 이해하고, 앞으로 다른 상태관리 라이브러리들을 공부할 때에도 분명 도움이 될 수 있을 것이라 기대하고 있습니다. 좋은 강의는 물론 질문도 빠르고 친절하게 답변해주셔서 감사드립니다. 다음 강의를 내주신다면 또 꼭 듣고 싶습니다.
2024-03-07
지식공유자 Inje Lee (소플)
dldldksl님 상세한 수강평 남겨주셔서 감사합니다. Redux 강의는 중간중간 입문자들을 좌절시킬만한 지점들이 존재하는데, 이렇게 끝까지 완강하신 것만 해도 굉장히 큰 관문을 하나 통과하신 것이라고 생각합니다. Redux를 잘 익힌 이후에 다른 상태 관리 라이브러리들을 사용하게 되면, 아주 쉽고 간편하게 사용하실 수 있을겁니다. 만약 이해가 잘 되지 않았던 부분이 있다면 다시 반복적으로 학습하시길 바라고, 이론으로만 학습하는것이 아닌 실제로 나만의 애플리케이션을 꼭 개발해보시는 것을 추천합니다. 개인적으로 프로젝트를 하면서 생기는 궁금증은 언제든지 FrontOverflow에 남겨주시면 조금 늦더라도 꼭 답변을 드리도록 하겠습니다. https://www.frontoverflow.com/ 그리고 코드 리뷰가 필요하다면 GitHub에 코드를 올리고 제 이메일 주소로 부담없이 연락을 주셔도 됩니다. 아무쪼록 제 강의를 통해 리덕스 기초를 잘 다지셨기를 바랍니다!😀
2024-03-07
rockrock82 thumbnail
5
그동안 리덕스 공부하려고 이것저것 찾아보고 코드도 짜보고 했는데 그래도 이해되지 않은 채로 쓰는 듯한 찜찜함이 있었어요..😂 리덕스만 제대로 다룬 강의가 별로 없어서 답답했는데 신규 강의 뜬 거 보고 바로 구매해서 이제 완강했네요 ㅎㅎ 전보다 개념이 좀 잡힌 거 같고 ‘아 그래서 그때 그런 코드를 작성했구나’라는 생각이 듭니다~ 좋은 강의 감사드립니다!!
2023-08-01
지식공유자 Inje Lee (소플)
rockrock82님 상세한 수강평 남겨주셔서 감사합니다. 제 강의를 통해 리덕스를 사용하시는데 도움이 되셨기를 바랍니다!
2023-08-01
미숫가루 thumbnail
5
소플님의 처음 만난 리액트부터 처음 만난 리덕스까지 모두 들었습니다. 사실 리액트까지 학습 후 블로그를 찾아보면서 요즘은 간단하게 나온 상태관리 라이브러리가 많다고 해서 리덕스까지 듣지 않을 뻔 하였는데 강의소개에 나와있는 [꼭 Redux를 통해 상태관리의 기초를 다지는 것이 중요합니다!] 이 문구 덕분에 리덕스까지 학습하게 되었습니다. 지금 생각하면 참 다행인 부분이죠. 섹션 1부터 마지막 미니 프로젝트까지 진행하는 동안 리덕스의 제일 시초(?)적인 모습부터 그 부분의 단점을 보완하기 위해서 덕스, thunk, slice, saga 등으로 나아가는 것을 배울 수 있습니다. 단순해진 부분부터 배웠다면 그냥 주입식 학습이 되었을 텐데 차례대로 발전해 나가는 모습을 배울 수 있어서 단기간에 리덕스랑 친숙해지기 좋은 강좌라고 생각합니다. 다만, 난이도가 "초급"으로 되어 있는 만큼 입문 단계라고 생각하면 조금 벅찰 것 같습니다. 저는 리액트는 처음이지만 백엔드로는 경력이 있어 눈치껏(?) 배울 수 있었기 때문입니다. 일단 이해 안되더라도 편하게 칼럼 듣듯이 쭉 듣고, 대신 프로젝트는 꼭 직접 해봤습니다. 그리고 다시 문서를 확인하고 하는 방식으로 학습하였습니다. 다만 초반에는 이해안되도 그냥 그렇구나~ 하고 들어보면 다음 섹션에서 그 부분을 보완하는게 나와서 자연스럽게 한 번 더 이해할 수 있는 시간을 주는 것도 좋은 부분입니다. 리액트는 굉장히 발전이 빠른 라이브러리인 것 같습니다. 앞으로도 소플님의 많은 강의가 나오길 바랍니다!
2023-07-13
지식공유자 Inje Lee (소플)
미숫가루님 이렇게 자세한 수강평을 남겨주셔서 감사합니다. 말씀해주신대로 '처음 만난 리덕스' 강의는 리덕스의 오래전 사용방식부터 현재의 사용방식까지 하나씩 직접 실습을 해보면서 배우는 형태로 구성되어 있습니다. 이 부분은 요즘 입문자 분들이 곧바로 Redux Toolkit을 사용하게 되면서, 내부의 구성과 작동 원리를 잘 이해하지 못하고 사용하는 경우가 있어서 이렇게 구성하게 되었습니다. 이 과정이 리덕스를 이해하는데 도움이 되셨다니 제가 의도한 대로 된 것 같아서 뿌듯하네요ㅎㅎ 그리고 아무래도 강의 주제가 Redux이다보니 초급 강좌이지만 어렵게 느껴지는 부분들이 있을 수 있다고 생각합니다. 이런 부분들은 저도 여러가지 피드백을 통해서 어떤 부분이 어렵게 느껴지는지 이해하고, 향후에는 조금 더 쉽게 설명할 수 있도록 개선해보도록 하겠습니다. 앞으로도 리액트, 리덕스 등 프론트엔드와 관련해서 학습하시면서 궁금한 점은 언제든지 질문해주시고, 빠르게 성장하시길 응원하겠습니다!
2023-07-13
승민 thumbnail
5
2024-04-16
Gavin thumbnail
5
2024-04-27
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!