강의

멘토링

커뮤니티

BEST
Programming

/

Full-stack

イメージ管理フルスタック (feat. Node.js、React、MongoDB、AWS)

「画像と同じファイルはどこにどのように保存すればいいの? データベースに保存? それともサーバーのハードディスク? サーバーの負荷を減らすにはどうすればいいの? ぎくしゃくすることなく、たくさんの画像をすばやく読み込むにはどうすればいいの? AWS S3? CDN?! 単に画像を保存して読み込むだけなのに、なぜこんなに要素が多いの? どの要素がどのような役割を果たし、どのように組み合わせればいいの?」 画像ファイルに関連する必要な要素をフルスタックで最初から最後まで整理して説明します :)

  • sihoon
Lambda
Node.js
React
MongoDB
AWS

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

受講後に得られること

  • AWS S3、CloudFront、presignedUrl

  • 画像のサイズ変更と AWS Lambda

  • IntersectionObserver を利用した無限スクロール

  • セッションベースの認証と認可

  • Node.js、Express

  • React, React Hooks

  • MongoDB

画像管理ノウハウを私の手に! 💾
楽しいフルスタックの例を一緒にしてください。

node.js(노드), mongodb(몽고db), react(리액트), amazon web services(아마존 웹 서비스)


イメージ管理者
サービス完成度を左右するとは?

画像の読み込み速度が遅すぎる場合は?

サービスの使いやすさを損なって、ユーザー体験に致命的でしょう。

画像管理を取り巻く数々の悩み 🤔

  • 画像をどのように転送して送受信できますか?
  • イメージをそれぞれサーバー/バックエンド/クラウドに保存すると、どのような違いがありますか?
  • 画像をアップロードするときにファイルのプレビューや読み込み状況を表示することはできませんか?
  • ページネーション、無限スクロールの実装もする必要がありますが...

スピードとスケーラビリティ
どちらも見逃せません。

Webやアプリケーションを開発するとき、開発者が望むものは大きく2つと言えます。

まず、速くなければなりません。

10年余り前、Amazonで発表した資料によると、ロード速度が100ms増えるたびに売上に1%ずつの損失が発生したそうです。アマゾンのような大企業の立場で1%だとすごい損失ですね。

第二に、拡張性が良いはずです。

サービスユーザー数が増えてもロード速度が遅くなると意味がないでしょう。誰でも本当に多くの人が使うサービスを作りたいからです。


ここで画像のようなファイルは速度とスケーラビリティに非常に大きな影響を与えることができます。上で見たようにページローディング自体はすべてになったのですが、いざイメージを素早く読み込めずにぶら下がって苦労したことがありました。画像などのファイルを効果的に扱えない場合は、他のバックエンド/フロントエンド要素と比較して初めからすぐにティーが表示されます。そして間違えれば、メインバックエンドサーバーに不必要に大きな負荷を与える可能性があります。

根本的な原因を考えてみましょうか?画像ファイルは容量が非常に大きいです。通常、フロントエンドがバックエンドに呼び出すときに受け取るデータ量は大きくてもキロバイト(KB)単位です。イメージのようなファイルは数十メガバイト(MB)までも行けます。こんなに大きなイメージを呼んでくるとサービスが遅くなるしかありません。

だから、画像ファイルをうまく処理して管理するのがサービス開発にとって非常に重要な要因だと見ることができます。


直接体験しながら感じた
ノウハウを教えてください。

私が以前にEコマース開発をしていた時、この問題をきちんと経験しました。ページの読み込み時間がかなり長く、問題になったことがあります。調べてみるとデザイナーたちが載せる詳細画像はもちろん、お客様が後期に載せる画像まで一つ一つ容量がかなり出てきました。

どんなにDBとバックエンドを最適化しても意味がありませんでした。イメージロードがボトルネックになったんです。自社モールを新たに構築しながら、この問題を最適な方法で解決しました。

ところが意外にも周辺にもこの解決策を完全に知らない方が多かったです。部分的に解決策を構築している方は多いのですが、AWS Lambdaを活用したResizing 、そして特にAWS S3 presignedUrl機能を知らない方が多かったです。インフラを一度正しく構築すれば良いのですが、問題は面倒な過程が多く、間違えればクラウドセキュリティに脆弱になることもあります。情報を探そうとしても珍しく散らばっているので、最初は把握することも容易ではありません。このように破片化された情報を一つの精製された資料で見ることができればいいと思って講義を作ることに決めました。

そこで今回の講義はクラウドはもちろんバックエンド/フロントエンドまでフルスタックで製作されました。ただし、フルスタック自体に焦点を当てた講義ではありません。イメージ管理をしっかりするには、フロントエンド - バックエンド - インフラ(クラウド)ともに気をつけなければならない部分がありますので、構造をきちんと把握する次元でフルスタック講義で製作することになりました😊フォーカスはイメージ管理ということを心に留めてください!


この講義だけ
特徴をお知らせします。

Backend + Frontend + Infra = Fullstack

画像管理の
すべてを扱う
フルスタック講義!

実戦に合う
問題解決力
育てます。

コア中心!
必ず必要な内容のみ
コンパクトに。

画像管理に焦点を当てた講義です。

このレッスンは、バックエンド、フロント、インフラストラクチャ(クラウド)をカバーするフルスタックレッスンです。講義で使用される技術は概念を説明しようとしますが、焦点は「イメージ管理」ということに留意してください。

講義では、ノード(Node.js)、モンゴル(MongoDB)、リアクト(React)など、さまざまな技術を使用しています。サービス開発に入門される方にも全体的なフルスタックフローを見るのに良いと思いますよ🙂

小さな問題から大きな問題まで解決してみてください。

解決策の役割を果たす優れた開発者であれば、問題の原因を正しく把握し、与えられた時間(リソース)でそれに合った最適な解決策を作ることができなければなりません。したがって、単に解決策を暗記するように学ぶことは意味がありません。

代表的な例として、マイクロサービスアーキテクチャ(Microservice Architecture、MSA)があると思います。あちこちで使っていいという話を聞いて漠然と始めるサービスに取り入れれば災いが来るかもしれません。むしろ、逆効果が発生する可能性があります。

だから、この講義では最初から完璧な解決策を教えていません。皆さんが共感できる小さな問題から始めましょう。そして次第に難易度を一つずつ上げながら究極の問題解決法を示します。

画像管理の中核を込めました。

このレッスンでは、画像管理を教えてくれるために必要な技術だけを取り上げます。たとえば、CSSフレームワークを使用したり、自分でスタイリングしたりすると、かなりのWebサイトを作成できます。でもイメージ管理を学ぶのとは全く無関係なので、デザインが這っても本当に最小限のスタイリングだけを適用しました。講義に沿って知っている重要な必須ノウハウを学びましょう!


こんな方へ
おすすめです。

画像を使う
Webまたはモバイルアプリ
開発したい方

フルスタック開発
一度軽く
味わいたい方

AWS(Amazon Webサービス)
クラウド
活用してみたい方

画像など
大容量ファイル管理
ちゃんとしたい方


楽しい例として
フォローして学びましょう。

写真を多用する簡単なフォトブックページを作成し、クラウドへの展開までを行います。
多くの画像も軽く読み込むWebアプリを最初から最後まで実装してみてください!

講義に従って学びましょう!

✅ Multerを活用した、一番基本的な画像保存
✅セッションベースの認証認可とフォトブック機能の開発
✅初めて会うMongoDBの魅力!
✅ 性能を左右するページネーション(Pagination)、
そしてこれを補完した無限スクロール(Infinite Scroll)実装
✅サーバーでもデータベースでもなく、AWS S3ファイルストレージクラウドでファイルを管理する方法
✅ AWS Lambdaを活用して画像サイズを縮小

講義で作成するフォトブックサービスはこのように構成されています。


予想される質問 Q&A

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,706

受講生

186

受講レビュー

261

回答

4.7

講座評価

3

講座

현재 공동창업한 작은 스타트업 Ninjalerts에서 CTO역할로 일하고 있습니다. Ninjalerts는 이더리움 블록체인 데이터를 기반으로 NFT 거래 정보들을 실시간으로 알려주는 서비스에요!

전에 만나씨이에이에서 개발 팀장으로 있었어요. 시작은 기획자였는데 개발자가 부족한 탓에 외주를 맡기려다가 직접 개발할 기회가 생기면서 운 좋게 개발자로 전향했어요. 이후 자사몰을 자체 개발하면서 이커머스 개발팀장을 맡았어요.

온라인에 나온 다양한 좋은 자료들 덕분에 빠르게 성장할 수 있었어요. 제 노하우가 여러분들에게도 도움이 되길 바랍니다 :) Linkedin 프로필

カリキュラム

全体

93件 ∙ (14時間 12分)

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

受講レビュー

全体

50件

4.5

50件の受講レビュー

  • bi9choi4514님의 프로필 이미지
    bi9choi4514

    受講レビュー 3

    平均評価 5.0

    5

    100% 受講後に作成

    良い講義はよく聞きました。講義聞きながら不便な点もありましたが、それにもかかわらず多くのことを学びます。 モンゴディビ、nodejs選手知識がないにもかかわらず、講義を聞くのに大きな乗り心地はありませんでした。 ソースコードが提供されれば、誤字や他の問題を探すのに少しは役に立たないかと思います。 講師様の他の講義も期待しています。講師のモンゴルdb講義の購入に行きましょう^_^ 今回の講義を通じて学んだ知識を活用して作るプロジェクトを考えると、すでにエキサイティングですね。

    • sihoon
      知識共有者

      わあ、bi9choiさん、そう言っていただき本当にありがとうございます!!反省することも多くて悔しい思いをしましたが、今後はより良い講義ができるよう頑張ります!

  • k989908108480님의 프로필 이미지
    k989908108480

    受講レビュー 4

    平均評価 5.0

    5

    100% 受講後に作成

    リアクト+ノード+モンゴルdbの組み合わせでプロジェクトを作ってみたかったのに多くのお役に立ちました。 パート別に分けるから理解もしやすかったし、各セクション序盤に紹介映像はそのセクションの全体を理解するのに良かったです!質問も残ったらすぐに答えてくれてエラーを解決できてよかったです。

    • seungwoo님의 프로필 이미지
      seungwoo

      受講レビュー 6

      平均評価 5.0

      5

      92% 受講後に作成

      まだ1/3しか聞こえなかったけど、 良い内容がたくさんあります。 画像のアップロード、ログインなど全般的な内容を一度試してみることができます。 もちろん基礎知識がある程度あれば講義の内容に従うことに問題がないようですね! AWS Lambdanaの後半の講義までもっと聞くと良い経験になりそうです

      • mydufao9962님의 프로필 이미지
        mydufao9962

        受講レビュー 6

        平均評価 5.0

        5

        44% 受講後に作成

        モンゴディビ講義も聞きましたが、一つ一つ構築していく過程をわかりやすくしてくれて、今回の講義もリアクト部分まで概念をつかみながら学んでいます。アプローチする方法論や深さがとても良いです。ありがとうございます。 ただしセクション2、useState講義の6:41分から5秒程度は編集してもいいと思います。

        • sihoon
          知識共有者

          若者の石こんにちは:)良いフィードバックありがとうございます!該当映像確認後に対処させていただきます!

      • holali님의 프로필 이미지
        holali

        受講レビュー 16

        平均評価 4.8

        修正済み

        3

        100% 受講後に作成

        よく聞いています! 講義をjsで進められていますが、tsに変更するなどの様々な試みをしながらたくさん学んでいます!

        ¥9,528

        sihoonの他の講座

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

        似ている講座

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