백엔드와 프론트엔드의 상호작용 (250402)

2025. 4. 2. 12:46·기술블로그
목차
  1. 전체 프로세스 설명
  2. 3. 전체 흐름 요약
  3. 4. 기술 스택 요약
  4. 실제로 사용자가 쓰는 웹 페이지 흐름

전체 프로세스 설명

우리가 구축하려는 시스템은 상품 목록을 보여주는 웹 페이지입니다. 이 예시에서는 상품 데이터를 데이터베이스에 저장하고, 이를 API를 통해 프론트엔드로 전달하는 방식으로 진행됩니다.

1. 백엔드에서 API 구축 (서버 측 코드)

백엔드는 상품 데이터를 처리하고 저장하며, 이 데이터를 프론트엔드에 제공하기 위한 API를 구현합니다. API는 상품 데이터를 데이터베이스에서 가져오거나 추가하는 역할을 합니다.

백엔드 흐름:

  1. 서버 생성: Node.js와 Express로 서버를 만듭니다.
  2. API 만들기: 상품 데이터를 제공하는 API를 만듭니다.
  3. 데이터베이스에 상품 정보 저장: 데이터베이스(MySQL, MongoDB 등)에 상품 정보를 저장하고 관리합니다.
  4. 프론트엔드로 데이터 제공: 프론트엔드가 요청할 때, 상품 데이터를 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 테이블에 출력합니다.

프론트엔드 흐름:

  1. 프론트엔드 HTML 페이지 생성: HTML 테이블과 입력 폼을 만들고, 조회 버튼을 클릭하면 데이터를 불러옵니다.
  2. API 호출: **JavaScript (Fetch API)**를 사용하여 백엔드 API를 호출하고 데이터를 받아옵니다.
  3. 데이터 표시: 받아온 데이터를 동적으로 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. 전체 흐름 요약

백엔드 (서버 측)

  1. API 서버 생성: Node.js와 Express로 서버를 구축합니다.
  2. 데이터베이스: 상품 정보를 MongoDB와 같은 데이터베이스에 저장합니다.
  3. API 제공: /api/products 같은 엔드포인트를 만들어, 프론트엔드가 요청할 때 상품 데이터를 JSON 형식으로 응답합니다.

프론트엔드 (클라이언트 측)

  1. HTML 페이지: 테이블과 조회 버튼을 만들어 사용자가 데이터를 확인할 수 있게 합니다.
  2. API 호출: **JavaScript (Fetch API)**를 사용하여 백엔드 API에서 상품 데이터를 가져옵니다.
  3. 동적 데이터 표시: 받아온 데이터를 HTML 테이블에 동적으로 삽입하여 화면에 출력합니다.

4. 기술 스택 요약

  • 백엔드 (서버 측):
    • Node.js: JavaScript로 서버를 구축합니다.
    • Express: API 서버를 쉽게 만들 수 있게 도와주는 웹 프레임워크입니다.
    • MongoDB: 데이터를 저장하고 관리하는 NoSQL 데이터베이스입니다.
  • 프론트엔드 (클라이언트 측):
    • HTML: 페이지 구조를 만듭니다.
    • CSS: 스타일링을 담당합니다.
    • JavaScript (Fetch API): API 호출을 통해 백엔드에서 데이터를 받아오고, HTML에 데이터를 동적으로 삽입합니다.

실제로 사용자가 쓰는 웹 페이지 흐름

  1. 사용자가 웹 페이지에 접속합니다.
  2. 조회 버튼을 클릭하면, 프론트엔드에서 백엔드 API를 호출합니다.
  3. 백엔드 서버는 데이터베이스에서 상품 데이터를 가져와 JSON 형식으로 프론트엔드에 전달합니다.
  4. 프론트엔드는 받은 데이터를 테이블에 동적으로 표시합니다.

'기술블로그' 카테고리의 다른 글

자체 서버 운영하기  (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
  1. 전체 프로세스 설명
  2. 3. 전체 흐름 요약
  3. 4. 기술 스택 요약
  4. 실제로 사용자가 쓰는 웹 페이지 흐름
'기술블로그' 카테고리의 다른 글
  • 자체 서버 운영하기
  • 백엔드 주요학습 목표 (250402)
  • 📌Database 인덱스가 필요한 이유(MySQL)
  • 📌 Django와 PostgreSQL의 관계
Chansman
Chansman
안녕하세요! 코딩을 시작한 지 얼마 되지 않은 초보 개발자 찬스맨입니다. 이 블로그는 제 학습 기록을 남기고, 다양한 코딩 실습을 통해 성장하는 과정을 공유하려고 합니다. 초보자의 눈높이에 맞춘 실습과 팁, 그리고 개발하면서 겪은 어려움과 해결 과정을 솔직하게 풀어내려 합니다. 함께 성장하는 개발자 커뮤니티가 되기를 바랍니다.
  • Chansman
    찬스맨의 프로그래밍 스토리
    Chansman
  • 전체
    오늘
    어제
    • 분류 전체보기 (582) N
      • Python (31)
      • 프로젝트 (43)
      • 과제 (25)
      • Database (40)
      • 멘토링 (10)
      • 특강 (26)
      • 기술블로그 (196) N
      • AI 분석 (3)
      • HTML & CSS (31)
      • JavaScript (17)
      • AWS_Cloud (21)
      • 웹스크래핑과 데이터 수집 (14)
      • Flask (42)
      • Django (58)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
Chansman
백엔드와 프론트엔드의 상호작용 (250402)

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.