[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)
코드캠프
10분만에 바이브코딩으로 만들 수 있는 단순한 서비스는 이제 버리세요! '진짜' 실무적용 바이브코딩을 배울 수 있습니다. 기획과 디자인대로 실서비스 수준의 고도화된 서비스를 커서AI NCOP로 만들어보시죠. No Code, Only Prompt
중급이상
React, Next.js, cursor
1年間で300人以上の開発者を輩出した「本物の」ブートキャンプの濃縮カリキュラムです。この講義1つで、実務のジュニア開発者レベルまで成長し、フロントエンド技術スタックの活用能力と知識を得ることができます。[InflearnXコードキャンプ]は、社会、経済、教育の背景に関係なく、誰もがキャリアを積めるように準備しました :)
受講生 1,891名
実務ポートフォリオ2つ
最新のテクノロジー スタックを活用した 8 つのプロジェクトの実装
開発サイクル全体を完全に理解する
実務コミュニケーション能力の向上
+α バックエンドの基本CRUDまで習得
ノーベース非専攻者も
フロントエンド開発者としてキャリアジャンプ! ⭐
2025年のための新しいフロントエンドブートキャンプ講義がより強力で、より細かい内容で新たにオープンしました!
なんと4つのパーツで構成された「完璧なフロントエンドコース」で、素早く実践的な学習内容に成長してみてください。
[スタートフリーキャンプ]、[CSS&Javascript Master]。 [Web Front-end Bootcamp]、[Hybrid App Bootcamp]
完全にサッチョからハイブリッドアプリのコースまで、150時間を超える高濃縮フロント講義を続けています:)
2025年より高いキャリアジャンプをしてみてください🚀
コードキャンプはあなたの成長を応援します。
💥 Attention!
この講義は、コーディングブートキャンプで実際に使用する講義で、ノーベースから非専攻者、そしてジュニア開発者まですべて受講可能なカリキュラムで構成されています。
✅勉強も実務のように!実務に適用する方法を教えてくれる実務中心講義
✅非専攻者から専攻者まで皆が理解できるカスケードカリキュラム
✅ [React, Next.js, Graphql]最新技術の言語学習とプロジェクトの実装
✅ 就職率92%の認定された「本物」ブートキャンプのカリキュラムに進む
✅ノーベースも可能な完全基礎から開発者就職レベルまで成長
A to Z、
プロの講義をしたい。
開発..?何も知らないけど
就職レベルまで成長したいです。
実務で使用する技術と
本物のノウハウを学びたいです。
Next.jsはReactライブラリのフレームワークです。 Reactとは異なり、デフォルトでNext.jsはServer-Side Rendering(SSR)を行うため、検索エンジン最適化(SEO、Search Optimiziation)に最適です。また、プレレンダリングにより、あらかじめデータがレンダリングされたページをインポートできるようにしてくれるので、ユーザー体験の面でも有利です。
これに加えて、ページベースのルーティング、イメージの最適化、built-in-cssなどを提供することでプロジェクトのパフォーマンスを向上させ、開発者が開発しやすい環境を提供するので、効率的でパフォーマンスの高い開発ができます。
「コーディングの「鼻」者も知らない私…開発者として就職できるか?」そんな心配はすぐに入れておいてください。今回の講義では、初心者も現業開発者レベルに成長できるよう、しっかりした基礎講義から始めますから!
🧩基礎のステップstep01。
コーディングは何ですか?プログラムのインストールから基礎を築く
Web・アプリ開発の基礎の中で、基礎、HTML・CSS・Javascriptの基本的な文法と活用方法を学び、学んだ内容に基づいて会員登録とミニホームページを実装します。
🧩 基礎を打つstep02。
60以上の最新のプロパティでCSS!
今日学んだ内容は今日復習しよう!講義の受講後、十分な練習を通じて完全に私のものに吸収するのに役立ちます。
🧩基礎のステップstep03。
JavascriptでWebページの機能をより豊かに。
一緒に使うツールとJavascriptが動作する原理、コードの書き方を中心に学習し、d-day counterとto-do listを実装し、学んだ内容を完全な私にする時間です。
#01. Reactの基礎
Reactの基礎から始めましょうか?まず、各種パッケージをインストールします。そしてJavascriptランタイム環境であるNode.jsを理解し、Reactでプロジェクトを作成します。
#02.データ通信
Rest-APIとGraphQLの違いを理解し、Apollo Clientを介してバックエンドとの通信方法を学びます。
#03.ルーティングと再レンダリング
ページ移動方式であるRouterとDynamic Routingの違いを理解して活用できます。
#04.フォルダ構造・props・コンポーネントの再利用性
Container/Presenter パターンを理解し、コンポーネントを再利用する方法で効率を高めます。
#05.タイプスクリプト
タイプスクリプトのさまざまなタイプを理解し、私のポートフォリオに適用します。
#06.フレームワーク/ライブラリとレイアウト
構造
Webページを飾る様々なライブラリ。それらの活用法を学び、使いやすさのためのページネーションと無限スクロールを実装します。
#07.コンポーネントとライフサイクル
クラスコンポーネントのライフサイクルと関数型コンポーネントのライフサイクルの違いを理解し、それを元に活用する方法を学習します。
#08.バックエンド構造とファイアベース
APIを直接作ってみて、バックエンドの基礎を理解できますよ。また、BAASサービスであるFirebaseを活用してみましょう。バックエンドを理解するフロントエンド開発者とは!あまり魅力的ではありませんか?
#09.画像のアップロード
「ホームページにきれいな画像を載せたい!」画像アップロードのプロセスを理解し、検証を通じて直接アップロードできます。
#10.検索
Webページに検索機能は欠かせません。検索プロセスを理解し、デバウンスを適用して自分のWebページを最大限に高めます。
#11.ログインと権限の分岐
JWTトークン方式のログインプロセスを理解します。また、ログインの有無で権限分岐を設定し、Recoilを活用してGlobalstateを管理できます。
#12.フォームライブラリ
React-Hook-Formとyupを活用して既存のコードをリファクタリングして、より効率的にサービスを改善できます。
#13.カスタムフック
構造分解割り当てとタイプスクリプトのジェネリックタイプを活用してカスタムフックを作成できます。
#14.カカオの地図とウェブエディタ
SSRとCSRを知っていますか?この違いを理解し、カカオマップとウェブエディタの使い方を学びます。
#15.お支払いとイベントループ
E-commerce platformの中核!お支払いプロセスを理解して実装してみてください。また、JavaScriptの駆動原理についてより正確に理解していきます。
#16. refresh Token
refresh Tokenを使って、実務でも利用できるログインプロセスを学習します。
#17.パフォーマンスの最適化
useMemoとuseCallback、イメージ一時URLを活用して、既存のコードをまるで実務のようにリファクタリングできます。
*個別のクラス用APIを提供します。
#18.テストコードと配布
jestとcypressを活用してテストコードを作成しましょう。これにより、ユニットテストと統合テストを進めて私のコードをテストする時間です。
☝🏻アップバウトフリーボード
ブログ、コミュニティなど、ウェブのどこからでも抜けない掲示板を直接実装できます。コーディングを理論だけ知っているということは不可能です!プロジェクトの練習を通じて、ページネーション、無限スクロールなど、いくつかの機能で独自のコードを埋めていきます。しかも私の個性に合ったUIで飾ることができるので興味だけでなく実力も上がりますよね?
✌🏻掲示板で作るイコマースプラットフォーム
「もし..にんじんはありますか?会員登録、ログイン、決済、コミュニティなど多くの機能を含んでいるE-commerceウェブサイトを私の手で実装できます。まだ幕を閉じるが、この講義を受講したら素敵なポートフォリオが作られているんです。
🎯この講義で得られるポートフォリオです。
· 01. フリーボード- UI・リストアップ・ページネーション・投稿の修正や削除など、Webの最も重要な機能を実装し、これをもとに一つのポートフォリオを完成します。
· 02. 中古マーケット- 最初のポートフォリオで製作した掲示板を中古マーケットに高度化するポートフォリオです。ログイン・権限分岐・決済・画像処理などの機能を実装します。
複数の言語を一度に理解するのは難しいことです。この講義では、プロジェクトを通じてJavascript、Typescript、React、Next.js、Graphqlなど様々なスタックを直接活用し、独自のWebページを完成します。一つの機能を実現するために有機的に連結された言語の使い方を習得し、自然に理解することになるでしょう。
本当の実務では様々な言語を適切に使用し、最高の効率を出すことができるはずですから!
* version : 受講時に使用するバージョンです。 (必要に応じて参考にしてください!)
- next 12.1.0 - react": 17.0.2 - react-dom": 17.0.2 - typescript": ^4.8.4 - @types/node": 17.0.2 - @types/react": 17.0.2 - @apollo/client": ^3.6.9 - @emotion/styled": ^11.10.0 - @material-ui/core": 4.12.4 - antd": ^4.22.8 - eslint": ^8.0.1 - prettier": 2.7.1
「Version」とその技術スタックの理解がなくても大丈夫です。講義で丁寧で親切に説明します:)
📑セクション別学習資料
講義を受講しながら内容の理解を助ける資料です。実際のブートキャンプの受講生も使う資料だけにうまく活用すれば、逃した部分があっても大きな助けになるでしょう。
📑セクション別の課題資料
今日学んだ内容は今日復習しよう!講義の受講後、十分な練習を通じて完全に私のものに吸収するのに役立ちます。
📑 セクション別ポートフォリオ
各セクションで学んだ機能を活用してポートフォリオを作成する際に参考にできる資料です。このレッスンで私のポートフォリオに2つのプロジェクトを追加してください!
🎨 Artipul
美大生の作品を簡単に購入できるサービスです。メインページだけでなく決済オープンAPIでポイント充電、決済を可能にし、Socket.ioを使ってリアルタイム入札機能まで実装しました。
📙 Flog
旅行スケジュール・家計簿・旅行ログで構成される旅行ガイドブックサービスです。 drag&drop機能で旅行スケジュールを組むとリアルタイムでDBに保存され、使いやすさが高まりました。さらに、他のユーザーとスケジュールを共有できるように実装しました!
🙆🏻♀️実務にすぐに活用できるポートフォリオ2個
👨🏻🎓自分で成長できる頑丈な開発知識を構築
💁🏻♀️実務でスムーズなコミュニケーションを行うジュニア開発者
👨🏻💻他の部署とのコラボレーション能力に優れたフロントエンド開発者
🙋🏻♀️ 自分でもできるE-commerce Platformの開発
💡コンピュータの仕様を確認してください。
・Mac OSは仕様に無関係です。
· Window OSを使用する場合は、git-bashのインストールが必要です。
- 授業資料 > 環境設定を参考にしてください。
- Intel Core i5 9世代以上 / AMD RYZEN 5 2世代以上
- RAM 16GB以上推奨
💡日課表を作って定期的に着実に学習することをお勧めします。
💡学習資料を受け取るためにコラボレーションツール「Notion」アカウントを作成してください。
💡受講に必要な学習資料はノッション(リンク)で提供されます。
※学習資料の著作権はコードキャンプにあります。不正盗用・配布・複製を禁止します。
Q. 何の知識もなく受講してもいいですか?
はい。コーディングの「鼻」者も知らなくても大丈夫です。より深く広く理解できるように、HTML・CSS・Javascriptのサッキ秒プロセスが含まれています。
Q. 別の教材がありますか?
ノッションでお届けする「講義資料」を活用してください!本資料は実際のブートキャンプで使用するままの資料です。無断盗用・配布・複製を禁止します。
Q. 基礎講義(スタートはプリキャンプ、CSS、Javascript)の授業資料リストが混乱します。
Q. 受講中に気になる点がありました。
コミュニティに質問を残してください。コードキャンプチームはすぐに素早くクールな答えを捧げます:)
学習対象は
誰でしょう?
専門的なカリキュラムで正しく成長したいすべての人
国費または他の講義に不足を感じた方
最新の技術スタックを使用して開発サイクルを完了したいジュニア開発者
トレンドに合ったポートフォリオで就職したい就職希望者
体系的にコーディングを勉強したい大学生
前提知識、
必要でしょうか?
コーディングへの情熱と意志💪🏻
15,202
受講生
416
受講レビュー
216
回答
4.8
講座評価
14
講座
"Try anything, Try everything!"
코드캠프는 유능한 개발자를 양성하며 개발의 미래를 바꾸고자 하는 목표를 가지고 있습니다. 사회적, 경제적, 교육적 배경에 상관없이 누구에게나 커리어 전환의 기회를 제공하기 위해 인프런에 나타났답니다. 코캠과 함께 커리어 점프에 도전하세요!
全体
341件 ∙ (128時間 6分)
5. ▶ ウェブ・アプリサービスとは?
03:22
9. ▶ HTMLの核心
42:26
10. ▶ 技術スタックを理解する
06:15
12. ▶ CSS学習
25:29
13. ▶ CSS整列
20:44
14. ▶ サイワールド作り第1弾
43:25
17. ▶ 変数と定数
17:08
18. ▶ 配列
24:31
19. ▶ オブジェクト
20:41
20. ▶ サイワールド作成第2弾
39:43
22. ▶ データ型と演算子
17:30
23. ▶ 条件文
19:54
24. ▶ 繰り返し文
22:19
25. ▶ 数学オブジェクト
06:44
26. ▶ DOM
10:42
27. ▶ サイワールド作り第3弾
27:31
29. ▶ 関数
09:14
30. ▶ 関数の作成方法
14:21
31. ▶ 組み込み関数
24:09
32. ▶ サイワールド作成第4弾
23:31
34. ▶ 組み込み関数レビュー
11:00
35. ▶ イベント変更検知
16:05
36. ▶ サイワールド作成第5弾
43:25
38. ▶ final課題
07:56
39. ▶ Git/Github
22:02
41. ▶ CSSとは?
03:38
42. ▶ CSS 基本用法
02:12
43. ▶ CSS適用方式
03:36
44. ▶ セレクタ1
05:18
45. ▶ フォント基本スタイル
16:42
46. ▶ ボックスモデル
24:12
48. ▶ 実習1
48:17
50. ▶ レイアウトとは?
02:02
51. ▶ セレクタ2
07:22
52. ▶ cssレイアウトの流れ
05:02
53. ▶ float レイアウト
52:47
54. ▶ flexレイアウト
23:20
55. ▶ 実習2
17:14
57. ▶ セレクタ3
33:22
58. ▶ flexレイアウト2
11:19
59. ▶ 実習3
08:35
61. ▶ css 継承
11:23
62. ▶ ウェブフォント
15:29
63. ▶ フォント
26:31
64. ▶ 単位
06:59
66. ▶ カスケーディング
16:33
67. ▶ 背景
17:39
68. ▶ 色彩
04:28
69. ▶ 単位2
03:00
71. ▶ 単位深化
31:15
72. ▶ position
24:45
73. ▶ トランジション
10:35
75. ▶ transform
17:57
76. ▶ transform 重複適用
06:30
79. ▶ animationの原理
05:16
80. ▶ keyframes
02:34
81. ▶ アニメーション
09:29
82. ▶ animation 実習
42:20
84. ▶ gridレイアウト
05:24
85. ▶ grid プロパティ
18:39
86. ▶ gridレイアウト実習
08:04
87. ▶ flexとgridの違い
06:39
89. ▶ レスポンシブウェブとは?
08:42
90. ▶ メディアクエリ
13:10
91. ▶ breakPoint
12:06
92. ▶ レスポンシブ実習
01:00:30
全体
80件
4.5
80件の受講レビュー
受講レビュー 1
∙
平均評価 5.0
5
안녕하세요. 1년차 주니어 백엔드 개발자입니다. 회사의 필요와 개인적인 욕심으로 프론트 분야도 학습을 하는 중이었는데 마침 이 강의를 만나게 되어 바로 구매 후 수강중입니다. 확실히 백엔드 분야와는 다른 흐름이 눈에 띄어서 처음에는 낯설게 느껴졌지만, 자바스크립트라고 하는 언어의 원리와 사용법까지도 함께 알려주시니 점점 재미와 속도가 붙네요. 원리만 학습하는 것이 아니라 함께 만들어 가면서 공부하는 방식인 덕분에 이해가 잘 되지 않을 때에도 이것저것 혼자서 만져보며 학습할 수 있어서 더 좋은 것 같습니다. 좋은 커리큘럼 덕분에 이 강의를 모두 듣고나면, 최소한 프론트엔드의 로직을 이해할 수 있는 백엔드 개발자라는 포지션. 그 이상을 가져갈 수 있을 것이라 기대가 되네요. 좋은 강의 감사합니다.
受講レビュー 5
∙
平均評価 5.0
5
원두 멘토님..... 인프런에 강림해주시다니요. 믿고듣는 원두 멘토님 강의 ㅠㅠㅠ 엉엉 잘 지내시죠? 너무 보고싶어요. 멘토님 덕분에 프론트엔드 개발자로 취업하고 1년째 회사 잘 다니고 있어요ㅠㅠ! 인프런 구경하다가 강의 갑자기 올라와서 호다닥 강의 결제했어요! 프론트엔드는 소장하구 백엔드는 공부해보려구요❤️ 첫 부분 조금 다시 들었는데 멘토님 목소리와 얼굴 너무 향수병 유발하는 것... 이렇게라도 뵐 수 있어 너무 좋습니다!!! 멘토님 따라서 다시 한 번 열공해서 풀스택으로 점프업해볼게요!!!!! 조만간 인사드리러 가겠습니다! 존경합니다 멘토님!😍
受講レビュー 2
∙
平均評価 5.0
5
오프라인으로 코드캠프 풀스택 과정 수료한 수료생입니다! 문자로 원두 멘토님의 강의가 인프런에 올라온다는 썰을 듣고 달려왔습니다. 개발자가 된 이후 개발자의 시선으로 이 커리큘럼을 말씀 드리자면 프로젝트의 성능을 고려하는 주니어가 되고싶다면 완벽한 커리큘럼인 것 같습니다! 주니어도 흔히 접할 수 있는 react에서 사용하는 memoization뿐만 아니라, 브라우저 렌더링 원리를 기반으로 한 repaint, reflow도 배우다 보니 확실히 리팩토링 할 때 고려할 수 있는 폭이 넓어졌습니다! 그리고 유지보수에 조금 더 유리한 방면으로 코드를 짤 수 있는 패턴들을 알려주시고, 팁들을 주셔서 개인적으로 잘 활용해보고 있습니다! 이 강의를 다시 보게되다니ㅠ 원두멘토님 절 기억하실지 모르겠지만, 보고싶습니다ㅜㅜㅜ 노원두! 노게인! 포에버!
受講レビュー 5
∙
平均評価 5.0
5
웹 프론트엔드 개발자가 되기 위해 준비중인 학생입니다. 인프런 코드캠프 HTML, CSS, 자바스크립트까지 다 듣고 프론트엔드 코스까지 있어 같이 구매했습니다!!!!! 앞부분 리액트 강의 듣고 있는데, 너무 재미있어요~~~!!!!!!! 아직까지 어려운 부분은 없는데, 뒤로 갈수록 점점 어려워질까봐 조금 걱정이 되지만! 열심히 들어볼 에정입니다! 일단 노션 자료가 너무 좋아요ㅠㅠㅠㅠㅠ 제 마음에 쏙 들어요ㅠㅠㅠㅠㅠ 이해안되는 부분들은 무한 반복으로 돌려보면 되겠죠..?????ㅎㅎㅎ 감사합니다!!!!!! 화이팅 꼭 수강 완료해서 포트폴리오 완성시켜 보겠습니다 화이팅
受講レビュー 3
∙
平均評価 5.0
5
노원두 멘토님께 오프라인 강의를 들어 본 학생입니다! 혼자 듣기 아까운 퀄리티의 강의여서 주변 친구들에게도 이미 추천을 많이 했었는데, 이렇게 인프런에서 뵙게 되다니 너무 반가워요ㅠㅠ 보고 싶었어요 ㅠㅠ 이전에 다른 강사님의 수업도 들어봤지만, 실습 없이 이론 위주의 수업이 대부분이어서 막상 직접 코딩을 하려고 하면 막막하기만 했습니다.. 반면 노원두 멘토님은 실무에서 사용되는 기술 위주로 이해하기 쉽게 알려주시고, 원리를 파악한 후 스스로 직접 구현까지 해보도록 수업이 진행되어 실무에서도 바로 적용할 수 있을 정도의 수준을 만들어 주셨습니다. 수업에서 다루지 않은 기술을 마주하게 되어도 배운 원리들을 적용해서 파악할 수 있게 되었습니다. 또한 수업 중간중간에 해주시는 조언들을 통해 개발자로서 가져야 하는 마인드도 배울 수 있었습니다. 멘토님께서 개발을 진심으로 즐기고 사랑하시는 마음이 느껴져서 저도 덩달아서 개발 공부가 즐거워진 부분도 있습니다. ㅎㅎ 노원두 멘토님은 정말 저의 은사님이십니다,,💕 하루가 다르게 변하는 프론트 업계답게🥲 제가 아직 배우지 않은 새로운 기술과 내용이 많아 보여서 수강하려 합니다! 다른 수업도 열리면 바로 또 들으러 올게여ㅎㅎㅎ
¥47,000
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!