강의

N
챌린지

멘토링

N
클립

커뮤니티

BEST
Programming

/

Front-end

ブートキャンプで教えてくれないもの（リアクト）1

カスタムフック、TDD、コンテキストAPI、リファクタリング、複雑な状態管理など、React開発の複雑な部分をマスターします。

（4.6）受講レビュー 13件

受講生 491名

難易度 中級以上

受講期間 無制限

  • aftercamp
react
react
tdd
tdd
jest
jest
클린코드
클린코드
React
React
React Context
React Context
TDD
TDD
Jest
Jest
Software Test
Software Test
react
react
tdd
tdd
jest
jest
클린코드
클린코드
React
React
React Context
React Context
TDD
TDD
Jest
Jest
Software Test
Software Test

学習した受講者のレビュー

学習した受講者のレビュー

4.6

5.0

이양구

100% 受講後に作成

テストコードからリファクタリングまでのぞくことができる講義でした。 まさに現業で適用するというより今後、このような姿勢にしなければならないと思いました！

5.0

K1

100% 受講後に作成

確かに完全初心講義より良いようで、実務にすぐに適用するのは少し不足だが、そんな部分は自ら満たしていけばいいようです。

5.0

이승훈

100% 受講後に作成

タイプスクリプトに続き、リアクトの深化講義もよく聞きました。 Best Caseについて紹介する部分が良かったです。私のやり方が果たして正しいのか疑問に思う時がありますが、その方向を提示する講義だったようです。

受講後に得られること

  • 再利用可能なコンポーネントの作成方法

  • クリーンコードのためのカスタムフックの作り方

  • リアクトコードでタイプスクリプトコードを書く方法

  • ミスを防ぐテスト主導開発方法（TDD）

  • ブートキャンプで試してみなかったリアクトAPI

現業リアクト開発でぜひとも悩む、
この講義で解決します！

ブートキャンプで教えてくれないこと✅

リアクト（React）開発の実務で必ず体験する複雑で難しい問題、この講義ですべて取り上げます！

🤔シューティングゲームがないので、汚れた構造のコードだけを書きませんか？

👍単純useEffect 、 useStateを超えてカスタムフック、TDD、リファクタリングを学び、複雑な要件のアプリケーションを作成できます！

🤔複雑な状態管理の中で迷子になったと感じたり、プロパティの掘削に苦労したことがありますか？

😆以前は難しく感じられたuseReducer 、 useContextを理解し、複雑な状態管理ができるようになります。

🤔新しい機能コードだけを書くと、常にバグが発生しませんか？

✌️TDDの方法論と目的を理解することで、信頼性が高くバグのないコードを書くことができます。

講義カリキュラム
確認してください📚

講義の特徴✨

理論よりも実際の応用を強調し、さまざまな実例を提供し、重要なReact原則の強力な基礎を提供することに焦点を当てた実践中心の講義です。

  • テスト主導開発（TDD）、カスタムフック、コンテキストAPI、リファクタリングのためのFlockingルール、React hookなどを深くカバーしています。
  • Codesandboxを提供して、講義の内容に簡単に従うことができます。

この講義を行ったアフターキャンプは、

  • ブートキャンプ修了した方のためのコミュニティを運営しています。
  • 単純な開発者の供給だけを増やす政策に反対し、良質の後学を養成したいという夢を持っています。

Q&A 💬

Q. 講義の難易度はどのくらいですか？

リアクトを通じてある程度開発された方のための中級講座です（最低3ヶ月以上のリアクト開発経験）

Q. タイプスクリプトを一度も使ったことがありません 😭

講義内容がリアクト+タイプスクリプトで作成されていますが、従わないほどではありません。

Q. この講義が他の講義と違う点は何ですか？

ジュニア開発者たちを教えてみながら、彼らが必ず知ってほしいことを講義に溶かしました。

こんな方に
おすすめです

学習対象は
誰でしょう？

  • ブートキャンプを修了した方

  • 会社に射手がいなくて不安な方

  • リアクトコードをもう少しきれいに書きたい人

  • TDDを学びたい人

前提知識、
必要でしょうか？

  • 基本的なタイプスクリプトの知識

  • 基本的なリアクトの概念 (useState, useEffect)

こんにちは
です。

1,871

受講生

100

受講レビュー

84

回答

4.8

講座評価

6

講座


## 이력서, 포폴 첨삭 등 강의 외 문의사항이 있으시면 이곳으로 문의 주세요

👉 morishjs@gmail.com

강사 깃헙: https://github.com/morishjs

지식저장소: https://wiki.after-camp.com/Home

🎨 포트폴리오: https://morish.dev

📜 이력: https://shorturl.at/gKU68


부트캠프 수료했는데 앞으로 뭘 공부해야 할지 막막하시죠?

👊 부트캠프에서는 취업률 90%라고 하는데... 전 취업이 잘 안돼요! 😢

👊 취업은 했는데 사수가 없어서 너무 불안해요! 🤑

👊 작성한 코드가 동작은 하는데 이렇게 작성하는지 모르겠어요! 🤯

애프터캠프에서는 다음이 가능합니다!

👌 CTO 2번 경험, 다수의 프로젝트를 경험한 풀스택 개발자가 직접 코칭합니다.

👌 코드 리뷰, 커리어 방향성 고민을 같이 해드립니다.

👌 애프터캠프에는 한국, 미국 실리콘밸리 예비 개발자, 현직자가 모인 곳입니다.

 

 

カリキュラム

全体

26件 ∙ (3時間 59分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

13件

4.6

13件の受講レビュー

  • leeyanggoo님의 프로필 이미지
    leeyanggoo

    受講レビュー 4

    ∙

    平均評価 5.0

    5

    100% 受講後に作成

    テストコードからリファクタリングまでのぞくことができる講義でした。 まさに現業で適用するというより今後、このような姿勢にしなければならないと思いました！

    • kdeveloper870738님의 프로필 이미지
      kdeveloper870738

      受講レビュー 3

      ∙

      平均評価 4.3

      5

      100% 受講後に作成

      確かに完全初心講義より良いようで、実務にすぐに適用するのは少し不足だが、そんな部分は自ら満たしていけばいいようです。

      • aftercamp
        知識共有者

        受講していただきありがとうございます！

    • 0214kbs9651님의 프로필 이미지
      0214kbs9651

      受講レビュー 4

      ∙

      平均評価 5.0

      5

      100% 受講後に作成

      どのようにコードを書くのが良いコードなのか悩みが多かったのに役に立ちました。

      • aftercamp
        知識共有者

        レビューありがとうございます！助けてくれて嬉しいです:)

    • shleecloud님의 프로필 이미지
      shleecloud

      受講レビュー 6

      ∙

      平均評価 5.0

      5

      100% 受講後に作成

      タイプスクリプトに続き、リアクトの深化講義もよく聞きました。 Best Caseについて紹介する部分が良かったです。私のやり方が果たして正しいのか疑問に思う時がありますが、その方向を提示する講義だったようです。

      • aftercamp
        知識共有者

        講義評価を残してくれてありがとう！ 最適なパターンを適用する上で、私の講義が引き続き良い指針になれば幸いです。

    • tyui31852224님의 프로필 이미지
      tyui31852224

      受講レビュー 2

      ∙

      平均評価 5.0

      5

      38% 受講後に作成

      例は本当に実用的です👍最近決済注文書フォームを作成しながら、プロップス掘削、インプット重複コードの問題のために悩まされていました。例で大部分を扱ってくれて本当に助けになりました。 Flocking Rule、Context API、useReducer ともになぜ書くべきかを論理的に次々と教えてくれて理解が上手になりました。 私は概念は分かっても応用ができない場合が多いようですㅠㅠアドバイスを求めたくてよかったです。

      • aftercamp
        知識共有者

        まず、講義内容について肯定的なフィードバックをいただきありがとうございます！ 応用能力を育てるのは、多くの開発者が着実に練習して悩む部分のひとつで、私も年次が低いときに悩みが多かったのですが、会社内で上手な開発者の方々のコードを見るのもいいだろうが、個人的に実力をたくさん上げられたきっかけはオープンソースコードを分析してからだったようです。 どんなオープンソースプロジェクトが良いかも選別するのが少し難しいでしょうが、悩みのある部分を私のプロフィールにあるメールで書いていただければお手伝いします😎

    ￥3,468

    aftercampの他の講座

    知識共有者の他の講座を見てみましょう！

    クローンコーディングで知らないこと（セキュリティ、DDD、マイクロサービス）강의 썸네일

    クローンコーディングで知らないこと（セキュリティ、DDD、マイクロサービス）

    aftercamp

    ドメイン主導開発（DDD）方式で体系的なバックエンド設計とこれをマイクロサービスに適用しましょう！

    중급이상

    중급이상

    DDD, Node.js

    クローンコーディングで知らないこと（セキュリティ、DDD、マイクロサービス）강의 썸네일

    クローンコーディングで知らないこと（セキュリティ、DDD、マイクロサービス）

    aftercamp

    実践練習で身につける高度なタイプスクリプト技術강의 썸네일

    実践練習で身につける高度なタイプスクリプト技術

    aftercamp

    TypeScriptの機能を正しく活用してください。

    중급이상

    중급이상

    TypeScript

    実践練習で身につける高度なタイプスクリプト技術강의 썸네일

    実践練習で身につける高度なタイプスクリプト技術

    aftercamp

    クローンコーディングで教えてくれないもの（システム理論とDB）강의 썸네일

    クローンコーディングで教えてくれないもの（システム理論とDB）

    aftercamp

    クローンコーディング講義を見ながら、なぜこのような技術を使用するのか疑問に思いましたか？バックエンド開発の大きな絵を描きます！

    입문

    입문

    DBMS/RDBMS, systems

    クローンコーディングで教えてくれないもの（システム理論とDB）강의 썸네일

    クローンコーディングで教えてくれないもの（システム理論とDB）

    aftercamp

    リッセルボットの原理で学ぶサイプレス강의 썸네일

    リッセルボットの原理で学ぶサイプレス

    aftercamp

    自動ログイン、自動商品購入の動作原理をCypressを通じて学びます

    초급

    초급

    Cypress, Software Test

    リッセルボットの原理で学ぶサイプレス강의 썸네일

    リッセルボットの原理で学ぶサイプレス

    aftercamp

    ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）강의 썸네일

    ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）

    aftercamp

    Reactレンダリングの原則、最適化を習得し、実践的な活用とインタビューの準備をしましょう！

    중급이상

    중급이상

    React, react-usememo, Tech Interview

    ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）강의 썸네일

    ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）

    aftercamp

    似ている講座

    同じ分野の他の講座を見てみましょう！

    フォローして学ぶリアクトテスト [2023.11アップデート]강의 썸네일

    フォローして学ぶリアクトテスト [2023.11アップデート]

    John Ahn

    このレッスンでは、リアクトアプリケーションをテストする方法を学びます。

    초급

    초급

    React, React Context, Web Application

    フォローして学ぶリアクトテスト [2023.11アップデート]강의 썸네일

    フォローして学ぶリアクトテスト [2023.11アップデート]

    John Ahn

    ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）강의 썸네일

    ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）

    aftercamp

    Reactレンダリングの原則、最適化を習得し、実践的な活用とインタビューの準備をしましょう！

    중급이상

    중급이상

    React, react-usememo, Tech Interview

    ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）강의 썸네일

    ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）

    aftercamp

    1日でCypressで書くJavaScript E2Eテストコード강의 썸네일

    1日でCypressで書くJavaScript E2Eテストコード

    makerjun

    フロントエンドはユーザーとの接点が行われるところなので、開発者の立場ではなく、ユーザーの立場でのテストが非常に重要です。 E2Eテストでユーザーシナリオが正常に動作していることを確認し、私のコードについて恐怖に自信を持って体験してください！

    초급

    초급

    Cypress, Software Test

    1日でCypressで書くJavaScript E2Eテストコード강의 썸네일

    1日でCypressで書くJavaScript E2Eテストコード

    makerjun

    Python/Djangoウェブサービス開発完璧ガイド with React (Django 4.2基準)강의 썸네일

    Python/Djangoウェブサービス開発完璧ガイド with React (Django 4.2基準)

    pyhub

    Python/Djangoを使ったウェブサービス開発の基礎をしっかりと固めましょう。Djangoの学習には時間がかかりますが、繰り返しの開発の中で皆さんの生産性を最大化できます。皆さんの想像を現実のものにしてください。

    초급

    초급

    Python, Django, React

    Python/Djangoウェブサービス開発完璧ガイド with React (Django 4.2基準)강의 썸네일

    Python/Djangoウェブサービス開発完璧ガイド with React (Django 4.2基準)

    pyhub

    TDD開発方法論を活用したReact Nativeアプリの開発강의 썸네일

    TDD開発方法論を活用したReact Nativeアプリの開発

    huedonghopark0024

    簡単なReactNativeアプリをTDD方法論で開発しながら、TDDの概念を確実に習得し、ReactNativeモバイルアプリ開発に適用できるように練習します。

    초급

    초급

    JavaScript, React, React Native

    TDD開発方法論を活用したReact Nativeアプリの開発강의 썸네일

    TDD開発方法論を活用したReact Nativeアプリの開発

    huedonghopark0024

    SW 역량テスト合格 A型 with C++ (Advanced Algorithm)강의 썸네일

    SW 역량テスト合格 A型 with C++ (Advanced Algorithm)

    bloodstrawberry

    CodeTreeの過去問と、過去問を解くためのアルゴリズムとヒントをお伝えします。 C++を使用しますが、ライブラリを使用しないため、他の言語を使用する方も受講可能です。（Pythonコード提供）

    입문

    입문

    C++, Coding Test, Algorithm

    SW 역량テスト合格 A型 with C++ (Advanced Algorithm)강의 썸네일

    SW 역량テスト合格 A型 with C++ (Advanced Algorithm)

    bloodstrawberry

    Next.jsとSpring Boot강의 썸네일

    Next.jsとSpring Boot

    zk202308a5410

    従来のReact開発方式とNext.jsを利用して開発する方式は全く異なります。この講義は最新のNext.js 16の核心を貫き、「本物の」Next.jsらしい開発方式をお教えします。就職ポートフォリオから実務プロジェクトまで、パフォーマンスと効率の両方を掴む方法を体験してください。 Next.jsらしく開発しましょう!Next.jsの機能をどのように適用すべきか、実際の例題を作りながら体で学べるように構成されています。サーバーコンポーネントを中心に見て、サーバーアクションとキャッシング戦略などを理論よりも実際にコードを通してより速く学習します。 講義の目標はできるだけ早くNext.jsの雰囲気についていくことであるため、講義自体はJavaScriptを利用して進行します。しかし、各講義の例題はTypescriptで制作されたものを追加で授業資料として提供します。 2025年12月18日 - Next.js 16バージョンにアップデート

    중급이상

    중급이상

    JavaScript, React, Spring Boot

    Next.jsとSpring Boot강의 썸네일

    Next.jsとSpring Boot

    zk202308a5410

    フォローして学ぶTDD開発[2023.11アップデート]강의 썸네일

    フォローして学ぶTDD開発[2023.11アップデート]

    John Ahn

    このレッスンでは、テスト主導開発（TDD）を使用してNode.jsアプリケーションを作成します。

    초급

    초급

    TDD, Node.js, Express

    フォローして学ぶTDD開発[2023.11アップデート]강의 썸네일

    フォローして学ぶTDD開発[2023.11アップデート]

    John Ahn

    ストーリーブックと自動化テストを組み合わせたコンポーネント主導のフロントエンド開発강의 썸네일

    ストーリーブックと自動化テストを組み合わせたコンポーネント主導のフロントエンド開発

    inflearn

    입문

    입문

    frontend, Software Test, storybook

    ストーリーブックと自動化テストを組み合わせたコンポーネント主導のフロントエンド開発강의 썸네일

    ストーリーブックと自動化テストを組み合わせたコンポーネント主導のフロントエンド開発

    inflearn

    ソフトウェア テスト入門 - C++강의 썸네일

    ソフトウェア テスト入門 - C++

    drmoon

    この講座では、開発したコードに自信を持つためのテストの基本を習得します。

    초급

    초급

    Software Test, TDD, C++

    ソフトウェア テスト入門 - C++강의 썸네일

    ソフトウェア テスト入門 - C++

    drmoon

    # [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）강의 썸네일

    # [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）

    dakgangjung123

    React, Electron, Zustandを活用しタイマーアプリを直接制作、クロスプラットフォーム（Windows、macOS、Linux）へデプロイまで行う実践講義です。 慣れ親しんだReactウェブ開発を皮切りに、Zustandを通じたグローバル状態管理と最終的なGUIデプロイまで、デスクトップアプリ開発の全体的な流れを学ぶことができます！

    초급

    초급

    React, Electron, GUI

    # [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）강의 썸네일

    # [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）

    dakgangjung123

    ソフトウェア開発の7つの基本原則：最高のプログラマーになる方法강의 썸네일

    ソフトウェア開発の7つの基本原則：最高のプログラマーになる方法

    drajin

    ソフトウェアの品質は習慣です！この講義では、企業が望む最高のプログラマーになる方法を学ぶことができます。

    초급

    초급

    Algorithm, C, software-design

    ソフトウェア開発の7つの基本原則：最高のプログラマーになる方法강의 썸네일

    ソフトウェア開発の7つの基本原則：最高のプログラマーになる方法

    drajin

    誰よりも早く学ぶSpringboot + React RestAPI掲示板作り강의 썸네일

    誰よりも早く学ぶSpringboot + React RestAPI掲示板作り

    Neo

    誰よりも早く学ぶSpringboot + React RestAPI掲示板作り Springbootでサーバーを開発し、Reactで自分だけの掲示板を作ってみましょう!!

    초급

    초급

    React, Java, Kotlin

    誰よりも早く学ぶSpringboot + React RestAPI掲示板作り강의 썸네일

    誰よりも早く学ぶSpringboot + React RestAPI掲示板作り

    Neo

    フルスタックリアクトトイプロジェクト - REST, GraphQL (for FE開発者)강의 썸네일

    フルスタックリアクトトイプロジェクト - REST, GraphQL (for FE開発者)

    jaenam

    ReactベースのシンプルなSNSサービスを作成しながら、REST APIとGraphQLを練習します。 フロントエンド開発のためのバックエンド環境を簡単かつ簡単にする方法を紹介します。

    초급

    초급

    REST API, GraphQL, React

    フルスタックリアクトトイプロジェクト - REST, GraphQL (for FE開発者)강의 썸네일

    フルスタックリアクトトイプロジェクト - REST, GraphQL (for FE開発者)

    jaenam

    テスト主導開発（TDD）で作るNodeJS APIサーバー강의 썸네일

    テスト主導開発（TDD）で作るNodeJS APIサーバー

    jeonghwan

    この講義では、Javascript言語でバックエンド開発ができるNodeJSを学習し、テスト主導開発（TDD）方式でNodeJSを利用してAPIサーバー開発を行うことができます。また、NodeJSの代表的なWebフレームワークExpressJSの基本原理を理解し、モバイルやWebサービスで使用するREST APIの開発方法を学ぶことができます。

    초급

    초급

    TDD, Node.js, Express

    テスト主導開発（TDD）で作るNodeJS APIサーバー강의 썸네일

    テスト主導開発（TDD）で作るNodeJS APIサーバー

    jeonghwan

    [PROKIT] フロントエンドプロジェクトキット：タイマーアプリを作る강의 썸네일

    [PROKIT] フロントエンドプロジェクトキット：タイマーアプリを作る

    nybs

    フロントエンドプロジェクトのミッションコンテンツです。DevTimeというタイマーアプリを直接実装しながらプロジェクト実習ができるよう、PRD企画書、Figmaデザイン、APIエンドポイントを提供します。実際のサービスと同等レベルのプロジェクトを実装しながら、これまで学習した知識を完璧に自分のものにしてみましょう 🚀

    입문

    입문

    React

    [PROKIT] フロントエンドプロジェクトキット：タイマーアプリを作る강의 썸네일

    [PROKIT] フロントエンドプロジェクトキット：タイマーアプリを作る

    nybs

    ISTQB AI Testing - ベストプラクティスを学び試験に備える강의 썸네일

    ISTQB AI Testing - ベストプラクティスを学び試験に備える

    edu

    AI技術の現在と未来を理解し、機械学習などのAIモデルのテスト過程を体験し、テスターの役割を学びます。 AIベースのシステムテスト戦略の策定からテストケースの設計・実行、またテスト支援のためのAI活用方法まで幅広く習得します。 本コースはISTQBのAI Testingシラバスに基づいて進められ、ISTQB AI Testing資格試験を完璧に準備できる機会を提供します。

    입문

    입문

    ISTQB, Software Test, AI

    ISTQB AI Testing - ベストプラクティスを学び試験に備える강의 썸네일

    ISTQB AI Testing - ベストプラクティスを学び試験に備える

    edu

    Flutterテスト基礎강의 썸네일

    Flutterテスト基礎

    survivalcoding

    フラッターでのユニットテスト、UIテスト、統合テスト方法について公式文書の内容に基づいて説明する講義です。

    초급

    초급

    Flutter, Software Test, integration-tests

    Flutterテスト基礎강의 썸네일

    Flutterテスト基礎

    survivalcoding

    完全なフルスタックPython開発者ロードマップ：FastAPI、React、データベース設計API アーキテクチャを学ぶ강의 썸네일

    完全なフルスタックPython開発者ロードマップ：FastAPI、React、データベース設計API アーキテクチャを学ぶ

    IT s Dev

    完全なエンドツーエンド開発者ジャーニー — FastAPI、React、そしてVibe Coding技術を使用して、超高速API、モダンフロントエンドインターフェース、実際のプロジェクト、認証システム、ダッシュボード、そして完全なデプロイメントを構築する。

    입문

    입문

    React, React Native, react.js

    完全なフルスタックPython開発者ロードマップ：FastAPI、React、データベース設計API アーキテクチャを学ぶ강의 썸네일

    完全なフルスタックPython開発者ロードマップ：FastAPI、React、データベース設計API アーキテクチャを学ぶ

    IT s Dev

    SpringAI + Reactで作る自分だけの感情日記サービス강의 썸네일

    SpringAI + Reactで作る自分だけの感情日記サービス

    Neo

    SpringAI + Reactで作る私だけの感情日記サービス Neo + Essentialと一緒に作る4番目のプロジェクトの時間です!

    초급

    초급

    React, Kotlin, Spring Boot

    SpringAI + Reactで作る自分だけの感情日記サービス강의 썸네일

    SpringAI + Reactで作る自分だけの感情日記サービス

    Neo