1.1 How does a web service work?
Hello! Do you use KakaoTalk, watch YouTube, and shop on Coupang with your smartphone every day? But have you ever wondered how these apps work?
Today, we will uncover the secret of web services that we use naturally!
A web service is like a 3-story house
Let's compare a web service to a 3-story house. Different people work on each floor.
┌─────────────────────────────────────┐
│ 3rd floor: Database │
│ Warehouse for storing all information│
│ - Member information, product information, order history│
├─────────────────────────────────────┤
│ 2nd floor: Backend │
│ Invisible workers │
│ - Calculation, processing, business logic│
├─────────────────────────────────────┤
│ 1st floor: Frontend │
│ Beautiful screen we see │
│ - Buttons, images, user interface│
└─────────────────────────────────────┘
1st floor: Frontend - The beautiful screen we see
The 1st floor is the Frontend. This is where we can directly see and touch.
- Smartphone app screen: buttons, images, text, etc.
- Website screen: Naver main page, YouTube video screen
- Design: pretty colors, fonts, animations
In terms of a house, it's like the front door and living room. It's the space where guests (users) first see!
2nd floor: Backend - The invisible workers
The 2nd floor is the Backend. This is where the real work happens, but it's invisible to us.
- Calculations and processing: login verification, product search, payment processing
- Business logic: "Can this user buy this product?", "Should a discount be applied?"
- Traffic management: processing requests from many users in order
In terms of a house, it's like the kitchen. It's where delicious cooking (data processing) happens, but guests can't enter directly!
3rd floor: Database - The warehouse that remembers everything
The 3rd floor is the Database. Here, all information is neatly organized and stored.
- Member information: name, email, password, address
- Product information: price, stock, description, image
- Records: order history, payment information, delivery status
In terms of a house, it's like the warehouse and library. All important items and records are systematically stored!
Real example: Ordering "Wireless Earphones" on Coupang
Now, let's follow the process of ordering wireless earphones on Coupang and see what happens on each floor!
Journey of data: Searching for "Wireless Earphones"
User Web service 3-story house
┌─────────────────────────┐
"Wireless Earphones" │ 3rd floor: Database │
Search! ──────┐ │ SELECT * FROM Products │
│ │ WHERE Product Name LIKE │
↓ │ │ '%Wireless Earphones%'... │
│ ├─────────────────────────┤
Display on screen│ │ 2nd floor: Backend │
the results ←─────┘ │ • Search processing │
│ • Sorting & filtering │
│ • Discount calculation │
├─────────────────────────┤
│ 1st floor: Frontend │
│ • Search bar │
│ • Loading screen │
│ • Results screen │
└─────────────────────────┘
Step 1: Enter "Wireless Earphones" in the search bar!
Frontend (1st floor):
- You touch the search bar
- Enter "Wireless Earphones"
- Press the search button
- A loading screen saying "Just a moment, searching for results..." appears
Step 2: Backend is working hard!
Backend (2nd floor):
Backend: "Oh, someone is looking for wireless earphones!"
Backend: "Hey Database, could you find some wireless earphone products?"
Backend: "Oh, and pick some products that this user might like!"
Backend: "Also, sort them in order of low prices!"
Step 3: Database responds!
Database (3rd floor):
```sql
Database: "Let me search for a moment..."
SELECT Product Name, Price, Image, Rating, Stock Quantity
FROM Product List
WHERE Product Name LIKE '%Wireless Earphones%'
AND Stock Quantity > 0
ORDER BY Price ASC;
Database: "Found it! There are a total of 347 products!"
```
Step 4: Backend nicely packages the results!
Backend (2nd floor):
Backend: "347 is too many. Let's pick only 20 popular products"
Backend: "Calculate the discount information, check the shipping fee..."
Backend: "Calculate the estimated delivery date based on the user's location!"
Backend: "Now, let's send it to the 1st floor!"
Step 5: Show it on the beautiful screen!
Frontend (1st floor):
- The product list appears neatly sorted
- Photos, prices, ratings of each product are shown
- Tags like "Rocket Delivery," "Free Shipping" are attached
- Scroll down to see more products
Step 6: Click on a product to add it to the cart!
This process also happens in the order of 1st floor → 2nd floor → 3rd floor → 2nd floor → 1st floor!
User Web service processing
┌─────────────────────┐
"Add to Cart" │ 3rd floor: Database │
Click! ──────1──→ │ UPDATE Stock SET │
│ Quantity = Quantity - 1 │
↓ │ INSERT INTO Cart │
├─────────────────────┤
"Added!" ←──5── │ 2nd floor: Backend │
Display message │ • Check stock ←──3─┘│
│ • Check authorization ──4──→│
│ • Calculate coupons │
├─────────────────────┤
│ 1st floor: Frontend │
│ • Detect button click ──2─┘│
│ • Display success message │
└─────────────────────┘
- 1st floor: Click on the "Add AirPods Pro to Cart" button
- 2nd floor: "Can this user buy this product? Is there stock?"
- 3rd floor: "Deduct one stock, add to the cart table!"
- 2nd floor: "Check for discount coupons, calculate the total amount!"
- 1st floor: "Added to the cart!"
Why is it divided into such complexity?
You might think, "Can't it just be made into one program?" However, there are reasons for this division!
1. Efficiency through role division!
- Designer: Create a beautiful screen on the 1st floor (Frontend)
- Backend developer: Implement business logic on the 2nd floor
- Database expert: Design data structure on the 3rd floor
By focusing on each specialty, better results are achieved!
2. Quick problem resolution!
If the screen is slow?
- Is it a problem on the 1st floor (Frontend)?
- Is it a problem on the 2nd floor (Backend)?
- Is it a problem on the 3rd floor (Database)?
It's easy to find and fix!
3. Easy scalability!
If the number of users increases?
- Prepare more servers for the 2nd floor (Backend)
- Replace the 3rd floor (Database) with a faster one
- Leave the 1st floor (Frontend) as it is!
Just upgrade the necessary parts.
4. Enhanced security!
- Important information (passwords, payment information) is stored only on the 2nd and 3rd floors
- Only necessary information is shown on the 1st floor
- Even if hacked, damage can be minimized
What does a backend developer do?
So, what specific tasks does a backend developer perform?
1. Creating APIs
Establish rules for communication with the frontend.
"Get user information" → GET /user/123
"Search for products" → GET /products?search=wireless earphones
"Place an order" → POST /orders
2. Implementing business logic
if (User is a VIP customer) {
Discount rate = 20%;
} else if (First-time customer) {
Discount rate = 10%;
} else {
Discount rate = 0%;
}
3. Communicating with the database
-- Create an order
INSERT INTO Orders (CustomerID, ProductID, Quantity, TotalAmount)
VALUES (123, 456, 1, 89000);
-- Deduct stock
UPDATE Products SET StockQuantity = StockQuantity - 1 WHERE ProductID = 456;
4. Performance optimization
- Identify slow parts and make them faster
- Ensure it can handle many users accessing simultaneously
- Save on server costs
5. Managing security
- Allow only logged-in users to access
- Prevent hacking attempts
- Encrypt personal information
In conclusion...
A web service is like a 3-story house:
- 1st floor Frontend: The beautiful screen we see
- 2nd floor Backend: Where the actual work happens (invisible to us)
- 3rd floor Database: The warehouse where all information is stored
These three floors communicate with each other to create the amazing apps and websites we use!
And the fact that you are reading this book... means you are preparing to become a part of this amazing world!
In the next section, we will explore why databases are so important and necessary. Are you ready?