전체 프로세스 설명
우리가 구축하려는 시스템은 상품 목록을 보여주는 웹 페이지입니다. 이 예시에서는 상품 데이터를 데이터베이스에 저장하고, 이를 API를 통해 프론트엔드로 전달하는 방식으로 진행됩니다.
1. 백엔드에서 API 구축 (서버 측 코드)
백엔드는 상품 데이터를 처리하고 저장하며, 이 데이터를 프론트엔드에 제공하기 위한 API를 구현합니다. API는 상품 데이터를 데이터베이스에서 가져오거나 추가하는 역할을 합니다.
백엔드 흐름:
- 서버 생성: Node.js와 Express로 서버를 만듭니다.
- API 만들기: 상품 데이터를 제공하는 API를 만듭니다.
- 데이터베이스에 상품 정보 저장: 데이터베이스(MySQL, MongoDB 등)에 상품 정보를 저장하고 관리합니다.
- 프론트엔드로 데이터 제공: 프론트엔드가 요청할 때, 상품 데이터를 JSON 형식으로 반환합니다.
백엔드 코드 예시 (Node.js + Express + MongoDB)
// 백엔드 코드: Express를 이용하여 API를 만들기
const express = require('express');
const mongoose = require('mongoose');
const app = express();
const port = 3000;
// MongoDB 연결
mongoose.connect('mongodb://localhost:27017/shop', { useNewUrlParser: true, useUnifiedTopology: true })
.then(() => console.log('MongoDB 연결 성공'))
.catch(err => console.log('MongoDB 연결 실패', err));
// 상품 데이터 모델 정의
const Product = mongoose.model('Product', {
category: String,
brand: String,
product: String,
price: String
});
// 상품 데이터를 가져오는 API 엔드포인트
app.get('/api/products', async (req, res) => {
try {
const products = await Product.find(); // MongoDB에서 상품 데이터를 가져옵니다.
res.json(products); // 상품 데이터를 JSON 형식으로 반환합니다.
} catch (error) {
res.status(500).json({ error: '상품 데이터를 가져오는데 실패했습니다.' });
}
});
// 서버 실행
app.listen(port, () => {
console.log(`서버가 http://localhost:${port}에서 실행되고 있습니다.`);
});- MongoDB는 상품 데이터를 저장하는 데이터베이스입니다.
- **API (/api/products)**는 이 데이터를 요청하는 프론트엔드에게 제공하는 역할을 합니다.
2. 프론트엔드에서 API 호출 (클라이언트 측 코드)
프론트엔드는 백엔드에서 제공하는 API를 호출하여 데이터를 받아옵니다. 그리고 받아온 데이터를 HTML 테이블에 출력합니다.
프론트엔드 흐름:
- 프론트엔드 HTML 페이지 생성: HTML 테이블과 입력 폼을 만들고, 조회 버튼을 클릭하면 데이터를 불러옵니다.
- API 호출: **JavaScript (Fetch API)**를 사용하여 백엔드 API를 호출하고 데이터를 받아옵니다.
- 데이터 표시: 받아온 데이터를 동적으로 HTML 테이블에 삽입합니다.
프론트엔드 코드 예시 (HTML + JavaScript)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상품 목록</title>
</head>
<body>
<div>
<h3>신규 등록 상품</h3>
<!-- 상품 목록 테이블 -->
<table id="product_table">
<thead>
<tr>
<th>카테고리</th>
<th>브랜드</th>
<th>상품명</th>
<th>가격</th>
</tr>
</thead>
<tbody id="product_data_Table">
<!-- 여기서 API로 불러온 데이터가 표시됩니다 -->
</tbody>
</table>
<!-- 조회 버튼 -->
<button id="loadBtn">조회</button>
</div>
<script>
// 버튼을 클릭하면 상품 목록을 불러오는 함수
document.getElementById('loadBtn').addEventListener('click', () => {
fetch('http://localhost:3000/api/products') // 백엔드 API 호출
.then(response => response.json()) // JSON 형식으로 응답 받기
.then(data => {
const table = document.getElementById('product_data_Table');
table.innerHTML = ''; // 기존 테이블 내용 지우기
// 받아온 데이터로 테이블 행 추가
data.forEach(item => {
const row = table.insertRow(); // 새로운 행 추가
row.insertCell(0).innerHTML = item.category;
row.insertCell(1).innerHTML = item.brand;
row.insertCell(2).innerHTML = item.product;
row.insertCell(3).innerHTML = item.price;
});
})
.catch(error => console.error('Error:', error)); // 에러 처리
});
</script>
</body>
</html>3. 전체 흐름 요약
백엔드 (서버 측)
- API 서버 생성: Node.js와 Express로 서버를 구축합니다.
- 데이터베이스: 상품 정보를 MongoDB와 같은 데이터베이스에 저장합니다.
- API 제공: /api/products 같은 엔드포인트를 만들어, 프론트엔드가 요청할 때 상품 데이터를 JSON 형식으로 응답합니다.
프론트엔드 (클라이언트 측)
- HTML 페이지: 테이블과 조회 버튼을 만들어 사용자가 데이터를 확인할 수 있게 합니다.
- API 호출: **JavaScript (Fetch API)**를 사용하여 백엔드 API에서 상품 데이터를 가져옵니다.
- 동적 데이터 표시: 받아온 데이터를 HTML 테이블에 동적으로 삽입하여 화면에 출력합니다.
4. 기술 스택 요약
- 백엔드 (서버 측):
- Node.js: JavaScript로 서버를 구축합니다.
- Express: API 서버를 쉽게 만들 수 있게 도와주는 웹 프레임워크입니다.
- MongoDB: 데이터를 저장하고 관리하는 NoSQL 데이터베이스입니다.
- 프론트엔드 (클라이언트 측):
- HTML: 페이지 구조를 만듭니다.
- CSS: 스타일링을 담당합니다.
- JavaScript (Fetch API): API 호출을 통해 백엔드에서 데이터를 받아오고, HTML에 데이터를 동적으로 삽입합니다.
실제로 사용자가 쓰는 웹 페이지 흐름
- 사용자가 웹 페이지에 접속합니다.
- 조회 버튼을 클릭하면, 프론트엔드에서 백엔드 API를 호출합니다.
- 백엔드 서버는 데이터베이스에서 상품 데이터를 가져와 JSON 형식으로 프론트엔드에 전달합니다.
- 프론트엔드는 받은 데이터를 테이블에 동적으로 표시합니다.
'기술블로그' 카테고리의 다른 글
| 자체 서버 운영하기 (0) | 2025.04.10 |
|---|---|
| 백엔드 주요학습 목표 (250402) (0) | 2025.04.02 |
| 📌Database 인덱스가 필요한 이유(MySQL) (0) | 2025.03.27 |
| 📌 Django와 PostgreSQL의 관계 (0) | 2025.03.27 |
| 📌 [SQL 분석] JOIN 순서 바꿔도 될까? – rental vs customer 기준 차이 완전 정리! (0) | 2025.03.26 |