「画像と同じファイルはどこにどのように保存すればいいの？ データベースに保存？ それともサーバーのハードディスク？ サーバーの負荷を減らすにはどうすればいいの？ ぎくしゃくすることなく、たくさんの画像をすばやく読み込むにはどうすればいいの？ AWS S3？ CDN？！ 単に画像を保存して読み込むだけなのに、なぜこんなに要素が多いの？ どの要素がどのような役割を果たし、どのように組み合わせればいいの？」 画像ファイルに関連する必要な要素をフルスタックで最初から最後まで整理して説明します :)
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,693
受講生
185
受講レビュー
261
回答
4.7
講座評価
3
講座
현재 공동창업한 작은 스타트업 Ninjalerts에서 CTO역할로 일하고 있습니다. Ninjalerts는 이더리움 블록체인 데이터를 기반으로 NFT 거래 정보들을 실시간으로 알려주는 서비스에요!
전에 만나씨이에이에서 개발 팀장으로 있었어요. 시작은 기획자였는데 개발자가 부족한 탓에 외주를 맡기려다가 직접 개발할 기회가 생기면서 운 좋게 개발자로 전향했어요. 이후 자사몰을 자체 개발하면서 이커머스 개발팀장을 맡았어요.
온라인에 나온 다양한 좋은 자료들 덕분에 빠르게 성장할 수 있었어요. 제 노하우가 여러분들에게도 도움이 되길 바랍니다 :) Linkedin 프로필
全体
93件 ∙ (14時間 12分)
全体
50件
4.5
50件の受講レビュー
受講レビュー 3
∙
平均評価 5.0
5
좋은 강의 잘 들었습니다. 강의 들으면서 불편한점도 있었지만, 그럼에도 불구하고 많은 것을 배워갑니다. 몽고디비,nodejs 선수지식이 없음에도 불구하고 강의 듣는데 큰 탈은 없었습니다. 소스코드가 제공된다면 오탈자나 다른 문제를 찾는데 조금은 도움이 되지 않을까 생각듭니다. 강사님의 다른강의도 기대하고있습니다. 강사님의 몽고db강의 구매하러 가보겠습니다 ^_^ 이번강의를 통해 배운 지식을 활용해서 만들 프로젝트를 생각하면 벌써 신나는군요
와 bi9choi님 그렇게 말씀해주셔서 너무나도 감사합니다!! 저도 아쉬운 점들이 많아서 속상했는데 앞으로 더 좋은 강의들 완성도 있게 신경써서 만들어보겠습니다!
受講レビュー 4
∙
平均評価 5.0
受講レビュー 5
∙
平均評価 5.0
受講レビュー 6
∙
平均評価 5.0
5
몽고디비 강의도 들었었는데, 하나하나 구축해나가는 과정을 알기쉽게 해주셔서 이번 강의도 리액트 부분까지 개념을 잡으면서 배우고 있습니다. 접근하는 방법론이나 깊이가 너무 좋습니다. 감사합니다. 다만 섹션 2, useState 강의 6:41분에서 5초 정도는 편집해도 될 것 같아요.
젊음의돌님 안녕하세요 :) 좋은 피드백 감사합니다! 해당 영상 확인 후 조치하도록 할게요!
受講レビュー 16
∙
平均評価 4.8
修正済み
期間限定セール、あと1日日で終了
￥57,750
25%
￥9,250
知識共有者の他の講座を見てみましょう！
同じ分野の他の講座を見てみましょう！
![GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]講義サムネイル](https://cdn.inflearn.com/public/courses/329186/cover/a63c6c95-2318-4e7a-a4f0-34d4512b3ae6/329186-eng.png?f=avif&w=420)
