![따라하며 배우는 리액트 A-Z[19버전 반영]Hình thu nhỏ khóa học](https://cdn.inflearn.com/public/courses/329170/cover/223c54c0-9220-4937-836d-70a36be3eb1c/329170-eng.png?f=avif&w=420)
따라하며 배우는 리액트 A-Z[19버전 반영]
John Ahn
이 강의를 통해 리액트 기초부터 중급까지 배우게 됩니다. 하나의 강의로 개념도 익히고 실습도 하며, 리액트를 위해 필요한 대부분의 지식을 한번에 습득할 수 있도록 만들었습니다.
Cơ bản
React, Next.js, TypeScript
学習した受講者のレビュー
こんなことが学べます
Reduxの基礎概念
Redux関連のコアライブラリ
Redux Toolkit の使い方
ミニプロジェクトを通じたReduxベースのウェブアプリケーション開発
🚨講義提供中止案内🚨
こんにちは、ソープルです。
「初めて会った Redux 」講義の Inflearn 提供が中断されました。
既存の受講生の方は Inflearn で講義を受講でき、
講義に関する質問は下記のリンクに残していただければ確認して回答させていただきます 😀
きちんとした講義資料、細かい説明で
簡単に学ぶリダックス講義です。 👨🏫
リダックスの世界へ
招待します💫
Redoxは、オープンソースのJavaScriptステータス管理ライブラリです。
状態管理ライブラリの中で圧倒的に最も多く使われており、
リアクトに連動してアプリケーションの状態を効果的に管理できます。
なぜRedux
学ぶべきですか？ 🤔
最近はMobX、Recoil、Zustand、Jotaiなど様々な状態管理ライブラリがありますが、Reduxは世界に出てから10年以上の状態管理ライブラリの先祖のような存在です。つまり、状態管理の核心的なコンセプトと構造について基盤を固めたと見ることができるのです！
上の図は、代表的な状態管理ライブラリのnpm trendを示しています。他のヘルスケアライブラリが下から飛び上がっていますが、まだReduxが圧倒的に多く使用されていることがわかります。
だから、比較的使いやすいRecoilやZustandを使う前に、ぜひReduxを通じて状態管理の基礎を固めることが大切です！
講義の特徴
お知らせします🔎
- Reduxコンポーネントを1つずつ直接作成し、基礎の概念を習得します。
- Reduxに関連するコアライブラリの使い方を学びます。
- Redux Toolkitの使い方を学びます。
- ミニプロジェクトを通じて、実際のReduxベースのWebアプリケーションを開発します。
文書を通して
学習内容を整理📖
講義の内容をいつでも再度復習できるように文書の形で提供します。
気になる部分を見直してリダックスを完璧に身につけてみてください！
講義を聞いた後、受講生の変化🙋♂️
Reduxの基礎
よく固めることができます！
コアライブラリ
使えます！
Redux Toolkit
使えます！
本番プロジェクトの経験
積むことができます！
学習内容を垣間見る 📚
セクション0 [準備]
- redux-devtoolsについて学びます。
- 練習用の開発環境設定とredux-devtoolsをインストールします。
セクション1、2 [Reduxについて、はじめに]
- Reduxの誕生プロセスと原則を学びます。
- Reduxのコンポーネントと不変性について学びます。
セクション 3 [Store]
- StoreとDispatcherの概念について学びます。
- ストアに関連する関数について学習します。
セクション 4 [Action and 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]
- 佐賀の概念とその使用理由を学びます。
- Generator Functionについて学びます。
- redux-sagaについて学びます。
- ThunkとSagaの違いを学びます。
セクション 13 [redux-persist]
- Persistの概念について学びます。
- redux-persistについて学びます。
- ストレージとデータの保存と復元プロセスについて学びます。
セクション 14 [Redux Toolkit (RTK)]
- Redux Toolkitについて学びます。
- Sliceの概念と使い方を学びます。
- immer 使用パターンについて学習します。
セクション 15 [Redux Hooks]
- useSelector() フックについて学習します。
- useDispatch() フックについて学習します。
- useStore() フックについて学習します。
セクション16 [ミニプロジェクト]
- これまでに学んだことをまとめて、ReduxベースのTODOアプリケーションを一緒に作成しましょう。
予想される質問 Q&A 💬
Q. JavaScriptをよく知らなくても聞ける講義ですか？
JavaScriptの基礎文法に関する内容は別々に含まれていないので、まず学習して聞くことをお勧めします。
Q.リアクトについてよく知らなくても聞ける講義ですか？
リアクト開発も含まれていますので、リアクト基礎内容をまず学習して聞くことをお勧めします。
下の私の無料リアクト講義を先に聞いてきたら一番いいです！
Q.リダックスを学ぶと何がいいですか？
Redoxを使用すると、アプリケーション全体で状態を効果的に管理できます。
学習関連資料💡
講義内容整理文書
🔗 初めて出会ったReduxドキュメント
2強～15強。練習ソースコード
🔗 https://github.com/soaple/first-met-redux-practice
16強。ミニプロジェクトソースコード
🔗 https://github.com/soaple/first-met-redux-todo
こんな方に
おすすめです
学習対象は
誰でしょう？
ステート管理の基礎を築きたい方
Reduxを初めて触る方
Reduxを使った状態管理に関心のある方
前提知識、
必要でしょうか？
JavaScriptの基礎
Reactの基礎
안녕하세요, 소플입니다.
2025년 3월부로 인프런에서의 지식공유자 활동을 마무리하고 새로운 출발을 합니다.
앞으로는 아래 사이트에서 제 강의와 컨텐츠들을 만나보실 수 있습니다.
소플이 만든 프론트엔드 지식 포털 - FrontOverflow
カリキュラム
全体
118件 ∙ (5時間 50分)
4. Reduxの誕生
04:21
5. Flux Architecture
03:31
7. Redux Data Flow
00:43
8. ぜひReduxを使うべきですか？
02:01
9. 講義のまとめ
01:38
10. Reduxコンポーネント
03:28
11. Immutability
02:33
15. 講座のまとめ
01:57
講座掲載日:
最終更新日:
受講レビュー
全体
18件
5.0
18件の受講レビュー
dldldksl受講レビュー 3
∙
平均評価 5.0
5
100% 受講後に作成redux의 동작 원리, redux와 관련된 여러 기술이 등장한 이유, 개념들과 사용법에 대한 쉽고 상세한 설명, 해당 기술의 최근 사용 여부까지,, 중간에 들게 되는 의문에 대한 답도 강의를 따라가며 자연스럽게 알 수 있었습니다. 하지만 redux는 기본적으로 상태관리를 위해 다소 번거로운 과정을 거쳐야 하는구나 라는 불편함을 느꼈고, 여러 기술들이 서로 헷갈리기도 했습니다. 강의의 문제가 아니라 기술 자체가 그렇게 느껴졌네요... 그래도 강사님이 하나하나 이해하기 쉽게 알려주셨고, 완강을 할 수 있었습니다. 강사님이 마지막에 말씀하신 것처럼, React 공부는 즐거웠는데 Redux를 배우며 꽤 좌절했었던 것 같습니다. 하지만 이런 말도 덧붙여 주셨습니다. 개발자에게 중요한 것은 끈기와 성실함이다. 포기하지 않고 꾸준히, 반복적으로 공부한다면 훌륭한 개발자가 되어 있을 것이다. 처음 개발에 입문했을 때 무엇이든 정말 어렵게 느꼈고, 이해가 되지 않는 부분이 너무 많았었습니다. 예전이나 지금이나 배우고 배워서 알게 된 점이 많아져도 배울 것은 여전히 끝없이 많다고 느껴지고는 합니다. 그래도 물론 처음엔 무엇이든 대부분 어렵게 느껴지지만, 시간이 흐르며 쌓인 지식과 경험들이 다시금 새로운 기술을 접했을 때 굉장히 큰 도움이 된다는 것 또한 다시 느꼈습니다. Redux를 잘 공부해서 상태 관리에 대해 더 깊이 이해하고, 앞으로 다른 상태관리 라이브러리들을 공부할 때에도 분명 도움이 될 수 있을 것이라 기대하고 있습니다. 좋은 강의는 물론 질문도 빠르고 친절하게 답변해주셔서 감사드립니다. 다음 강의를 내주신다면 또 꼭 듣고 싶습니다.
- Inje Lee (소플)知識共有者
dldldksl님 상세한 수강평 남겨주셔서 감사합니다. Redux 강의는 중간중간 입문자들을 좌절시킬만한 지점들이 존재하는데, 이렇게 끝까지 완강하신 것만 해도 굉장히 큰 관문을 하나 통과하신 것이라고 생각합니다. Redux를 잘 익힌 이후에 다른 상태 관리 라이브러리들을 사용하게 되면, 아주 쉽고 간편하게 사용하실 수 있을겁니다. 만약 이해가 잘 되지 않았던 부분이 있다면 다시 반복적으로 학습하시길 바라고, 이론으로만 학습하는것이 아닌 실제로 나만의 애플리케이션을 꼭 개발해보시는 것을 추천합니다. 개인적으로 프로젝트를 하면서 생기는 궁금증은 언제든지 FrontOverflow에 남겨주시면 조금 늦더라도 꼭 답변을 드리도록 하겠습니다. https://www.frontoverflow.com/ 그리고 코드 리뷰가 필요하다면 GitHub에 코드를 올리고 제 이메일 주소로 부담없이 연락을 주셔도 됩니다. 아무쪼록 제 강의를 통해 리덕스 기초를 잘 다지셨기를 바랍니다!😀
- rockrock82
受講レビュー 1
∙
平均評価 5.0
5
6% 受講後に作成그동안 리덕스 공부하려고 이것저것 찾아보고 코드도 짜보고 했는데 그래도 이해되지 않은 채로 쓰는 듯한 찜찜함이 있었어요..😂 리덕스만 제대로 다룬 강의가 별로 없어서 답답했는데 신규 강의 뜬 거 보고 바로 구매해서 이제 완강했네요 ㅎㅎ 전보다 개념이 좀 잡힌 거 같고 ‘아 그래서 그때 그런 코드를 작성했구나’라는 생각이 듭니다~ 좋은 강의 감사드립니다!!
- Inje Lee (소플)知識共有者
rockrock82님 상세한 수강평 남겨주셔서 감사합니다. 제 강의를 통해 리덕스를 사용하시는데 도움이 되셨기를 바랍니다!
- 미숫가루
受講レビュー 3
∙
平均評価 5.0
5
100% 受講後に作成소플님의 처음 만난 리액트부터 처음 만난 리덕스까지 모두 들었습니다. 사실 리액트까지 학습 후 블로그를 찾아보면서 요즘은 간단하게 나온 상태관리 라이브러리가 많다고 해서 리덕스까지 듣지 않을 뻔 하였는데 강의소개에 나와있는 [꼭 Redux를 통해 상태관리의 기초를 다지는 것이 중요합니다!] 이 문구 덕분에 리덕스까지 학습하게 되었습니다. 지금 생각하면 참 다행인 부분이죠. 섹션 1부터 마지막 미니 프로젝트까지 진행하는 동안 리덕스의 제일 시초(?)적인 모습부터 그 부분의 단점을 보완하기 위해서 덕스, thunk, slice, saga 등으로 나아가는 것을 배울 수 있습니다. 단순해진 부분부터 배웠다면 그냥 주입식 학습이 되었을 텐데 차례대로 발전해 나가는 모습을 배울 수 있어서 단기간에 리덕스랑 친숙해지기 좋은 강좌라고 생각합니다. 다만, 난이도가 "초급"으로 되어 있는 만큼 입문 단계라고 생각하면 조금 벅찰 것 같습니다. 저는 리액트는 처음이지만 백엔드로는 경력이 있어 눈치껏(?) 배울 수 있었기 때문입니다. 일단 이해 안되더라도 편하게 칼럼 듣듯이 쭉 듣고, 대신 프로젝트는 꼭 직접 해봤습니다. 그리고 다시 문서를 확인하고 하는 방식으로 학습하였습니다. 다만 초반에는 이해안되도 그냥 그렇구나~ 하고 들어보면 다음 섹션에서 그 부분을 보완하는게 나와서 자연스럽게 한 번 더 이해할 수 있는 시간을 주는 것도 좋은 부분입니다. 리액트는 굉장히 발전이 빠른 라이브러리인 것 같습니다. 앞으로도 소플님의 많은 강의가 나오길 바랍니다!
- Inje Lee (소플)知識共有者
미숫가루님 이렇게 자세한 수강평을 남겨주셔서 감사합니다. 말씀해주신대로 '처음 만난 리덕스' 강의는 리덕스의 오래전 사용방식부터 현재의 사용방식까지 하나씩 직접 실습을 해보면서 배우는 형태로 구성되어 있습니다. 이 부분은 요즘 입문자 분들이 곧바로 Redux Toolkit을 사용하게 되면서, 내부의 구성과 작동 원리를 잘 이해하지 못하고 사용하는 경우가 있어서 이렇게 구성하게 되었습니다. 이 과정이 리덕스를 이해하는데 도움이 되셨다니 제가 의도한 대로 된 것 같아서 뿌듯하네요ㅎㅎ 그리고 아무래도 강의 주제가 Redux이다보니 초급 강좌이지만 어렵게 느껴지는 부분들이 있을 수 있다고 생각합니다. 이런 부분들은 저도 여러가지 피드백을 통해서 어떤 부분이 어렵게 느껴지는지 이해하고, 향후에는 조금 더 쉽게 설명할 수 있도록 개선해보도록 하겠습니다. 앞으로도 리액트, 리덕스 등 프론트엔드와 관련해서 학습하시면서 궁금한 점은 언제든지 질문해주시고, 빠르게 성장하시길 응원하겠습니다!
- greenspace
受講レビュー 1
∙
平均評価 5.0
5
31% 受講後に作成소플 강의는 저에게 최고의 힘이 되는 강의입니다.
- Inje Lee (소플)知識共有者
greenspace님 수강평 남겨주셔서 감사합니다. 제 강의를 좋게 평가해주셔서 너무 뿌듯하네요ㅎㅎ 끝까지 꼭 완강하시기 바라고 학습 중에 궁금한 점이 있으면 언제든지 질문해주시기 바랍니다!😀
- 79blog
受講レビュー 2
∙
平均評価 5.0
5
100% 受講後に作成설명을 재밌고 쉽게 해주셔서 이해도 잘되고 재밌게봤네요 ㅎㅎ
- Inje Lee (소플)知識共有者
79blog님 수강평 남겨주셔서 감사합니다. 제 강의를 통해 리덕스 기초를 잘 다지셨기를 바랍니다! 😀
公開していない講座のため、受講が制限されます。
非公開講座
似ている講座
同じ分野の他の講座を見てみましょう！
![[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)Hình thu nhỏ khóa học](https://cdn.inflearn.com/public/files/courses/338156/cover/01k4c77bftwd8ec4k0yakavbrc?f=avif&w=420)
![[리뉴얼] React로 NodeBird SNS 만들기Hình thu nhỏ khóa học](https://cdn.inflearn.com/public/course-325637-cover/d5fd6216-71d1-490e-8759-594cbbdc1973?f=avif&w=420)
![[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)Hình thu nhỏ khóa học](https://cdn.inflearn.com/public/files/courses/336817/cover/01jwx9ttbwnetdsbt5qrxgxb3x?f=avif&w=420)
