Image Management Full Stack (feat. Node.js, React, MongoDB, AWS)

Image management know-how in my hands! 💾
Join us for a fun full-stack example.

Image management
Does it affect the completeness of the service?

What if the image loading speed is too slow?

_{It would harm the usability of the service and be fatal to the user experience.}

The many concerns surrounding image management 🤔

• How can I send and receive images?
• What difference does it make if I store the images separately on the server/backend/cloud?
• Is there any way to show a file preview or loading status when uploading an image?
• I also need to implement pagination and infinite scrolling...

Speed and scalability
You can't miss them both.

When developing a web or application, there are two main things developers want.

First, it has to be fast.

According to data released by Amazon about 10 years ago, for every 100ms increase in loading speed, there was a 1% loss in sales. For a large company like Amazon, 1% is a huge loss.

Second, it must be scalable.

It would be pointless if the loading speed slowed down just because the number of service users increased, right? Everyone wants to create a service that a lot of people use.

Here, files such as images can have a huge impact on speed and scalability. As we saw above, you may have been frustrated because the page itself was loaded, but the images were not loaded quickly and were sluggish. If you can't handle files such as images effectively, it will be noticeable right from the beginning compared to other backend/frontend elements. And if you do it wrong, it can put an unnecessary large load on the main backend server.

Let's think about the root cause. Image files are very large. Normally, when the front end calls the back end, the amount of data received is in kilobytes (KB), but files like images can be up to tens of megabytes (MB). When loading such large images, the service is bound to be slow.

Therefore, we can see that handling and managing image files well is a very important factor in service development .

I felt it through my own experience
I'll tell you the know-how.

I experienced this problem when I was developing e-commerce in the past. There was a time when the page loading time was very long and it was a problem. After investigating, I found that not only the detailed images uploaded by designers, but also the images uploaded by customers in their reviews took up a lot of space.

No matter how much I optimized the DB and backend, it was meaningless. Image loading became a bottleneck. I solved this problem in the best way while building a new company mall.

But surprisingly, there were many people around me who didn't know this solution completely. Many people have partially built solutions, but many people don't know about Resizing using AWS Lambda , and especially the AWS S3 presignedUrl function. You just need to build the infrastructure properly once, but the problem is that there are many annoying processes, and if you do it wrong, you can become vulnerable to cloud security. Even if you try to find information, it's scattered here and there, so it's not easy to understand at first. I decided to make a lecture because I wanted to see this fragmented information as one refined data.

So this lecture was produced as a full-stack lecture, including the cloud as well as the backend/frontend. However, it is not a lecture that focuses on the full-stack itself. In order to properly manage images, there are parts that need to be taken care of in the frontend - backend - infrastructure (cloud), so it was produced as a full-stack lecture in order to properly understand the structure. 😊 Please keep in mind that the focus is image management !

Only for this lecture
Let me tell you the features.

_{Image management
Covering everything
Full stack lecture!}

_{Fit for real life
Problem solving skills
I will raise you.}

_{Core focus!
Only the essentials
Compactly.}

This course focuses on image management.

This course is a full-stack course covering backend, frontend, and infrastructure (cloud). The technologies used in the course will try to explain the concepts, but please keep in mind that the focus is on 'image management' .

The lecture uses various technologies such as Node.js, MongoDB, and React. I think it is good for those who are new to service development to see the overall full-stack flow 🙂

Solve problems from small to big.

A great developer who acts as a problem solver should be able to properly identify the cause of the problem and create the best solution for it within the given time (resources). Therefore, simply learning the solution by memorizing it is meaningless.

A typical example would be the Microservice Architecture (MSA). If you vaguely introduce it to a service you are starting after hearing good things about it here and there, it could be a disaster... You won't even understand why it is needed. It could even have the opposite effect.

So in this lecture, I won't teach you the perfect solution from the beginning. I'll start with a small problem that you can relate to. Then, I'll gradually increase the difficulty level and show you the ultimate problem-solving method .

Contains the essence of image management.

This lecture covers only the essential techniques for image management. For example, if you use a CSS framework or style it yourself, you can create a pretty website. However, since it has nothing to do with learning image management, I applied only the bare minimum styling, even though the design is crude. Follow the lecture and learn the essential know-how!

To these people
I recommend it.

Using images
Web or mobile app
Anyone who wants to develop

Full stack development
Lightly once
Anyone who wants to taste it

AWS(Amazon Web Services)
The cloud
Anyone who wants to use it

Images etc.
Manage high capacity files
For those who want to do it right

As a fun example
Follow along and learn.

We'll create a simple photo album page that uses a lot of photos and distribute it to the cloud.
Follow along from start to finish to create a web app that can easily load a lot of images!

_{The photo album service we will create in this lecture is structured as follows.}

Expected Questions Q&A

Knowledge sharer's
Are you curious about other lectures?

MongoDB Basics
To practice (feat. Node.js)
DB correctly
Design and use it!