「画像と同じファイルはどこにどのように保存すればいいの？ データベースに保存？ それともサーバーのハードディスク？ サーバーの負荷を減らすにはどうすればいいの？ ぎくしゃくすることなく、たくさんの画像をすばやく読み込むにはどうすればいいの？ AWS S3？ CDN？！ 単に画像を保存して読み込むだけなのに、なぜこんなに要素が多いの？ どの要素がどのような役割を果たし、どのように組み合わせればいいの？」 画像ファイルに関連する必要な要素をフルスタックで最初から最後まで整理して説明します :)
学習した受講者のレビュー
5.0
bi9choi
良い講義はよく聞きました。講義聞きながら不便な点もありましたが、それにもかかわらず多くのことを学びます。 モンゴディビ、nodejs選手知識がないにもかかわらず、講義を聞くのに大きな乗り心地はありませんでした。 ソースコードが提供されれば、誤字や他の問題を探すのに少しは役に立たないかと思います。 講師様の他の講義も期待しています。講師のモンゴルdb講義の購入に行きましょう^_^ 今回の講義を通じて学んだ知識を活用して作るプロジェクトを考えると、すでにエキサイティングですね。
5.0
강전욱
リアクト+ノード+モンゴルdbの組み合わせでプロジェクトを作ってみたかったのに多くのお役に立ちました。 パート別に分けるから理解もしやすかったし、各セクション序盤に紹介映像はそのセクションの全体を理解するのに良かったです！質問も残ったらすぐに答えてくれてエラーを解決できてよかったです。
5.0
itjustbong
まだ1/3しか聞こえなかったけど、 良い内容がたくさんあります。 画像のアップロード、ログインなど全般的な内容を一度試してみることができます。 もちろん基礎知識がある程度あれば講義の内容に従うことに問題がないようですね！ AWS Lambdanaの後半の講義までもっと聞くと良い経験になりそうです
AWS S3、CloudFront、presignedUrl
画像のサイズ変更と AWS Lambda
IntersectionObserver を利用した無限スクロール
セッションベースの認証と認可
Node.js、Express
React, React Hooks
MongoDB
画像管理ノウハウを私の手に！ 💾
楽しいフルスタックの例を一緒にしてください。
サービスの使いやすさを損なって、ユーザー体験に致命的でしょう。Webやアプリケーションを開発するとき、開発者が望むものは大きく2つと言えます。
10年余り前、Amazonで発表した資料によると、ロード速度が100ms増えるたびに売上に1%ずつの損失が発生したそうです。アマゾンのような大企業の立場で1％だとすごい損失ですね。
サービスユーザー数が増えてもロード速度が遅くなると意味がないでしょう。誰でも本当に多くの人が使うサービスを作りたいからです。
ここで画像のようなファイルは速度とスケーラビリティに非常に大きな影響を与えることができます。上で見たようにページローディング自体はすべてになったのですが、いざイメージを素早く読み込めずにぶら下がって苦労したことがありました。画像などのファイルを効果的に扱えない場合は、他のバックエンド/フロントエンド要素と比較して初めからすぐにティーが表示されます。そして間違えれば、メインバックエンドサーバーに不必要に大きな負荷を与える可能性があります。
根本的な原因を考えてみましょうか？画像ファイルは容量が非常に大きいです。通常、フロントエンドがバックエンドに呼び出すときに受け取るデータ量は大きくてもキロバイト（KB）単位です。イメージのようなファイルは数十メガバイト（MB）までも行けます。こんなに大きなイメージを呼んでくるとサービスが遅くなるしかありません。
だから、画像ファイルをうまく処理して管理するのがサービス開発にとって非常に重要な要因だと見ることができます。
私が以前にEコマース開発をしていた時、この問題をきちんと経験しました。ページの読み込み時間がかなり長く、問題になったことがあります。調べてみるとデザイナーたちが載せる詳細画像はもちろん、お客様が後期に載せる画像まで一つ一つ容量がかなり出てきました。
どんなにDBとバックエンドを最適化しても意味がありませんでした。イメージロードがボトルネックになったんです。自社モールを新たに構築しながら、この問題を最適な方法で解決しました。
ところが意外にも周辺にもこの解決策を完全に知らない方が多かったです。部分的に解決策を構築している方は多いのですが、AWS Lambdaを活用したResizing 、そして特にAWS S3 presignedUrl機能を知らない方が多かったです。インフラを一度正しく構築すれば良いのですが、問題は面倒な過程が多く、間違えればクラウドセキュリティに脆弱になることもあります。情報を探そうとしても珍しく散らばっているので、最初は把握することも容易ではありません。このように破片化された情報を一つの精製された資料で見ることができればいいと思って講義を作ることに決めました。
そこで今回の講義はクラウドはもちろんバックエンド/フロントエンドまでフルスタックで製作されました。ただし、フルスタック自体に焦点を当てた講義ではありません。イメージ管理をしっかりするには、フロントエンド - バックエンド - インフラ（クラウド）ともに気をつけなければならない部分がありますので、構造をきちんと把握する次元でフルスタック講義で製作することになりました😊フォーカスはイメージ管理ということを心に留めてください！
画像管理の
すべてを扱う
フルスタック講義！
実戦に合う
問題解決力
育てます。
コア中心！
必ず必要な内容のみ
コンパクトに。
このレッスンは、バックエンド、フロント、インフラストラクチャ（クラウド）をカバーするフルスタックレッスンです。講義で使用される技術は概念を説明しようとしますが、焦点は「イメージ管理」ということに留意してください。
講義では、ノード（Node.js）、モンゴル（MongoDB）、リアクト（React）など、さまざまな技術を使用しています。サービス開発に入門される方にも全体的なフルスタックフローを見るのに良いと思いますよ🙂
解決策の役割を果たす優れた開発者であれば、問題の原因を正しく把握し、与えられた時間（リソース）でそれに合った最適な解決策を作ることができなければなりません。したがって、単に解決策を暗記するように学ぶことは意味がありません。
代表的な例として、マイクロサービスアーキテクチャ（Microservice Architecture、MSA）があると思います。あちこちで使っていいという話を聞いて漠然と始めるサービスに取り入れれば災いが来るかもしれません。むしろ、逆効果が発生する可能性があります。
だから、この講義では最初から完璧な解決策を教えていません。皆さんが共感できる小さな問題から始めましょう。そして次第に難易度を一つずつ上げながら究極の問題解決法を示します。
このレッスンでは、画像管理を教えてくれるために必要な技術だけを取り上げます。たとえば、CSSフレームワークを使用したり、自分でスタイリングしたりすると、かなりのWebサイトを作成できます。でもイメージ管理を学ぶのとは全く無関係なので、デザインが這っても本当に最小限のスタイリングだけを適用しました。講義に沿って知っている重要な必須ノウハウを学びましょう！
画像を使う
Webまたはモバイルアプリ
開発したい方
フルスタック開発
一度軽く
味わいたい方
AWS（Amazon Webサービス）
クラウド
活用してみたい方
画像など
大容量ファイル管理
ちゃんとしたい方
写真を多用する簡単なフォトブックページを作成し、クラウドへの展開までを行います。
多くの画像も軽く読み込むWebアプリを最初から最後まで実装してみてください！
✅ Multerを活用した、一番基本的な画像保存
✅セッションベースの認証認可とフォトブック機能の開発
✅初めて会うMongoDBの魅力！
✅ 性能を左右するページネーション(Pagination)、
そしてこれを補完した無限スクロール(Infinite Scroll)実装
✅サーバーでもデータベースでもなく、AWS S3ファイルストレージクラウドでファイルを管理する方法
✅ AWS Lambdaを活用して画像サイズを縮小
Q. 使っている技術スタックが違っても聞くことができますか？
Web開発自体の経験が少しでもあれば、JavascriptすらよくわからないJava、PHP、Python開発者であっても十分に追いつくことができると思います。むしろ軽くNode.js、MongoDB、Reactを体験してみる良い機会だと思います。最初からそれぞれを深く勉強するには、入門自体が非常に負担になります。そしてReactが慣れていないフロントエンド開発者たちももちろん受講できると思います。そして、写真管理自体は、言語/フレームワークに関係なく共通の部分が多いと見ています。だからこの授業を通じて大きな絵を習得して、本人が使用中の技術スタックに合わせて修正しておけば良いと思います:)
Q. Pdf、映像のようなファイルも扱いますか？
このレッスンでは、イメージに焦点を当てます。しかし、Pdf、ビデオなどのファイルアップロードも画像アップロードと非常によく管理されます。つまり共通の部分がとても多いです。一番違う点は呼んで見せる方法ではないかと思います。 Pdf、映像を単にダウンロードすることもできますよ。映像のような場合 Inflearnのように画面に実行させる方法もあります。イメージに重点を置いた理由は、比較的頻繁に使用され、トラフィックの少ないサービス序盤でもUIUXに大きな悪影響を与える可能性があるからです。
Q. AWS の費用は発生しますか？
実際のサービスをローンチしてトラフィックが発生すると、使用する量に応じて当然コストが発生します。もちろん授業用として使用する際にも費用が発生することもあります。しかし、発生しても非常に少ない金額でしょう。講義で費用部分も扱うことになります。そして何より、AWSに初めてサインアップすると、提供されるクレジットがあります。そのクレジットで講義を受講するのに十分です。ただし注意事項は、講義受講後に使用していたAWSリソースをすべて削除してください。これは川の端で扱われます。
MongoDBの基礎から
実務まで（feat. Node.js）
DBを正しく
設計して使用するには！
学習対象は
誰でしょう？
画像を使用する Web またはモバイル アプリを開発したい方
軽くフルスタック開発を味わいたい方
AWS クラウドを試してみたい方
画像などのファイル管理を正しく行いたい方
前提知識、
必要でしょうか？
(推奨) 基本的な Javascript 文法
2,717
受講生
188
受講レビュー
261
回答
4.7
講座評価
3
講座
現在、共同創業した小さなスタートアップNinjalertsでCTOを務めています。Ninjalertsは、イーサリアムのブロックチェーンデータを基に、NFTの取引情報をリアルタイムで通知するサービスです！
以前、MANNA CEAで開発チーム長を務めていました。最初はプランナーとしてスタートしましたが、開発者不足のため外注を検討していたところ、直接開発する機会に恵まれ、運良く開発者へと転身しました。その後、自社モールを独自に開発しながら、Eコマース開発チーム長を務めました。
オンライン上の様々な優れた資料のおかげで、急速に成長することができました。私のノウハウが皆さんのお役に立てれば幸いです :) Linkedinプロフィール
全体
93件 ∙ (14時間 12分)
1. 講義紹介
06:22
全体
51件
4.5
51件の受講レビュー
受講レビュー 3
∙
平均評価 5.0
5
良い講義はよく聞きました。講義聞きながら不便な点もありましたが、それにもかかわらず多くのことを学びます。 モンゴディビ、nodejs選手知識がないにもかかわらず、講義を聞くのに大きな乗り心地はありませんでした。 ソースコードが提供されれば、誤字や他の問題を探すのに少しは役に立たないかと思います。 講師様の他の講義も期待しています。講師のモンゴルdb講義の購入に行きましょう^_^ 今回の講義を通じて学んだ知識を活用して作るプロジェクトを考えると、すでにエキサイティングですね。
わあ、bi9choiさん、そう言っていただき本当にありがとうございます!!反省することも多くて悔しい思いをしましたが、今後はより良い講義ができるよう頑張ります！
受講レビュー 4
∙
平均評価 5.0
受講レビュー 7
∙
平均評価 5.0
受講レビュー 6
∙
平均評価 5.0
5
モンゴディビ講義も聞きましたが、一つ一つ構築していく過程をわかりやすくしてくれて、今回の講義もリアクト部分まで概念をつかみながら学んでいます。アプローチする方法論や深さがとても良いです。ありがとうございます。 ただしセクション2、useState講義の6:41分から5秒程度は編集してもいいと思います。
若者の石こんにちは：）良いフィードバックありがとうございます！該当映像確認後に対処させていただきます！
受講レビュー 1
∙
平均評価 5.0
期間限定セール、あと1日日で終了
￥45
24%
￥9,428
知識共有者の他の講座を見てみましょう！
同じ分野の他の講座を見てみましょう！
