쇼핑몰 상품 페이지

쇼핑몰 기본 페이지

쇼핑몰 기본 페이지를 만들어봅니다.

메인 화면

상품 목록

상품 상세

프로젝트 구조

Django 프로젝트의 기본 디렉토리 구조는 다음과 같습니다:

이 구조는 Django의 표준 프로젝트 레이아웃을 따르며, 정적 파일, 미디어 파일, 템플릿 등이 체계적으로 구성되어 있습니다.

graph TD;
    A["메인 페이지 (main.html)"] --> B["상품 목록 (product_list.html)"];
    B --> C["상품 상세 (product_detail.html)"];
    
    D["Models"] --> E["Product"];
    E --> F["name"];
    E --> G["price"];
    E --> H["description"];
    E --> I["image"];
    
    J["Views"] --> K["main()"];
    J --> L["product_list()"];
    J --> M["product_detail()"];
    
    N["URLs"] --> O["/ (main)"];
    N --> P["/products/ (list)"];
    N --> Q["/products/<pk>/ (detail)"];
Mermaid
복사

위의 구조도는 Django 프로젝트의 기본 구조와 주요 컴포넌트들 간의 관계를 보여줍니다. 메인 페이지에서 상품 목록으로, 그리고 상품 상세 페이지로 이어지는 사용자 흐름과 함께 모델, 뷰, URL의 구성을 표현하고 있습니다.

개발 프로세스

프로젝트 환경 설정

•

가상환경 생성 및 활성화

•

Django 및 필요한 패키지 설치

•

프로젝트 생성

기본 구조 설정

•

앱 생성

•

settings.py 설정

•

URL 매핑

프론트엔드 구성

•

Bootstrap 설치

•

기본 템플릿 구조 작성

•

static 파일 설정

백엔드 개발

•

모델 설계 및 구현

•

뷰 로직 작성

•

폼 작성

테스트 및 배포

•

단위 테스트 작성

•

통합 테스트

•

배포 준비

주요 명령어 및 코드

1. 프로젝트 환경 설정

가상환경 생성

python -m venv venv
Python
복사

가상환경 활성화

venv\Scripts\activate
Python
복사

Django 설치

pip install django
Python
복사

프로젝트 생성

django-admin startproject shop_project .
Python
복사

2. 앱 생성 및 설정

앱 생성

python manage.py startapp shop
Bash
복사

settings.py에서 앱과 템플릿 설정:

# settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'shop',
    'bootstrap5',  # Bootstrap 5 사용
]

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
Python
복사

3. URL 매핑

# shop_project/urls.py
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('shop.urls')),
]

# shop/urls.py
from django.urls import path
from . import views

app_name = 'shop'

urlpatterns = [
    path('', views.main, name='main'),
    path('products/', views.product_list, name='product_list'),
    path('products/<int:pk>/', views.product_detail, name='product_detail'),
]
Python
복사

각 URL 패턴에 대한 설명:

1. 메인 페이지 URL

path('', views.main, name='main')
Python
복사

•

빈 문자열('')은 루트 URL을 의미합니다 (예: http://example.com/)

•

views.main 함수를 호출하여 메인 페이지를 표시합니다

•

name='main'은 이 URL 패턴의 이름으로, 템플릿에서 {% url 'shop:main' %}과 같이 참조할 수 있습니다

2. 상품 목록 URL

path('products/', views.product_list, name='product_list')
Python
복사

•

'products/' URL에 매핑됩니다 (예: http://example.com/products/)

•

views.product_list 함수를 호출하여 전체 상품 목록을 표시합니다

•

name='product_list'로 이름이 지정되어 있어 템플릿에서 {% url 'shop:product_list' %}로 참조 가능합니다

3. 상품 상세 URL

path('products/<int:pk>/', views.product_detail, name='product_detail')
Python
복사

•

'products/숫자/' 형식의 URL에 매핑됩니다 (예: http://example.com/products/1/)

•

<int:pk>는 URL 패턴의 동적 부분으로, 정수형 primary key를 캡처합니다

•

views.product_detail 함수에 pk 매개변수로 전달되어 특정 상품의 상세 정보를 표시합니다

•

템플릿에서 {% url 'shop:product_detail' product.pk %}와 같이 사용할 수 있습니다

4. 기본 템플릿 구조

<!-- templates/base.html -->
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}쇼핑몰{% endblock %}</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <!-- 네비게이션 바 내용 -->
    </nav>

    <div class="container mt-4">
        {% block content %}
        {% endblock %}
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
HTML
복사

6. 템플릿 작성

•

main.html

•

product_list.html

•

product_detail.html

main.html

<!-- templates/shop/main.html -->
{% extends 'base.html' %}

{% block title %}메인 페이지{% endblock %}

{% block content %}
<div class="jumbotron">
    <h1>Welcome to Our Shop</h1>
    <p>최고의 상품을 최저가로 만나보세요!</p>
    <a href="{% url 'shop:product_list' %}" class="btn btn-primary">상품 보러가기</a>
</div>
{% endblock %}
HTML
복사

product_list.html

<!-- templates/shop/product_list.html -->
{% extends 'base.html' %}

{% block title %}상품 목록{% endblock %}

{% block content %}
<h2>상품 목록</h2>
<div class="row">
    {% for product in products %}
    <div class="col-md-4 mb-4">
        <div class="card">
            {% if product.image %}
            <img src="{{ product.image.url }}" class="card-img-top" alt="{{ product.name }}">
            {% endif %}
            <div class="card-body">
                <h5 class="card-title">{{ product.name }}</h5>
                <p class="card-text">{{ product.price }}원</p>
                <a href="{% url 'shop:product_detail' product.pk %}" class="btn btn-primary">상세보기</a>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}
HTML
복사

product_detail.html

<!-- templates/shop/product_detail.html -->
{% extends 'base.html' %}

{% block title %}{{ product.name }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-6">
        {% if product.image %}
        <img src="{{ product.image.url }}" class="img-fluid" alt="{{ product.name }}">
        {% endif %}
    </div>
    <div class="col-md-6">
        <h2>{{ product.name }}</h2>
        <p class="lead">가격: {{ product.price }}원</p>
        <hr>
        <p>{{ product.description }}</p>
        <button class="btn btn-primary">장바구니에 담기</button>
    </div>
</div>
{% endblock %}
HTML
복사

5. 모델 작성

# shop/models.py
from django.db import models

class Product(models.Model):
    name = models.CharField(max_length=200)
    price = models.DecimalField(max_digits=10, decimal_places=2)
    description = models.TextField()
    image = models.ImageField(upload_to='products/')
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.name
Python
복사

각 모델 필드에 대한 설명:

•

name: 상품명을 저장하는 CharField, 최대 200자까지 입력 가능

•

price: 가격을 저장하는 DecimalField, 최대 10자리 숫자와 소수점 2자리까지 지원

•

description: 상품 설명을 저장하는 TextField, 길이 제한 없음

•

image: 상품 이미지를 저장하는 ImageField, 'products/' 디렉토리에 업로드됨

•

created_at: 상품 생성 시간을 자동으로 저장하는 DateTimeField

•

updated_at: 상품 정보 수정 시간을 자동으로 업데이트하는 DateTimeField

# settings.py
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'upload')
Python
복사

실제로 __file__은 현재 파일(settings.py)의 경로만을 가리킵니다. os.path.dirname을 두 번 사용하여:

•

첫 번째 dirname: settings.py가 있는 디렉토리(shop_project)의 경로를 얻음

•

두 번째 dirname: 프로젝트 루트 디렉토리의 경로를 얻음

따라서 BASE_DIR = os.path.dirname(os.path.dirname(file))와 같이 설정하면 더 명확할 것 같습니다:

이렇게 하면 프로젝트 루트 디렉토리에 'upload' 폴더가 생성됩니다. 실제 경로는 프로젝트가 있는 위치에 따라 달라질 수 있습니다.

장고 프로젝트의 URLs에서 미디어 파일을 서빙하기 위한 설정:

# urls.py (프로젝트 메인)
from django.conf import settings
from django.conf.urls.static import static

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Python
복사

업로드 폴더 생성

C:\
└── ~
    └── shop_project\
        ├── manage.py
        ├── shop_app\
        ├── shop_project\
        └── 📦 upload\        ← 여기에 생성 (수동)
Python
복사

모델 생성 후 마이그레이션:

마이그레이션이란 (Migration)?

마이그레이션은 데이터베이스의 구조를 변경하는 작업을 체계적으로 관리하는 Django의 기능입니다. 주요 특징은 다음과 같습니다:

•

데이터베이스 스키마 버전 관리: 모델 변경사항을 추적하고 데이터베이스 스키마를 안전하게 업데이트

•

협업 지원: 여러 개발자가 동시에 작업할 때 데이터베이스 변경사항을 일관되게 관리

•

롤백 가능: 문제 발생 시 이전 상태로 되돌릴 수 있는 기능 제공

•

자동 SQL 생성: 개발자가 직접 SQL을 작성하지 않아도 Django가 적절한 SQL 명령어를 생성

마이그레이션은 두 단계로 이루어집니다:

makemigrations: 모델의 변경사항을 감지하여 마이그레이션 파일을 생성

migrate: 생성된 마이그레이션 파일을 실제 데이터베이스에 적용

•

마이그레이션 파일 생성

python manage.py makemigrations
Bash
복사

이 명령어는 모델의 변경사항을 감지하고 새로운 마이그레이션 파일을 생성합니다. 마이그레이션 파일은 데이터베이스 스키마를 변경하기 위한 Python 코드입니다.

•

마이그레이션

python manage.py migrate
Bash
복사

이 명령어는 생성된 마이그레이션 파일을 실제 데이터베이스에 적용합니다. 이를 통해 모델에서 정의한 테이블이 데이터베이스에 생성됩니다.

마이그레이션은 데이터베이스 스키마 변경을 추적하고 관리하는 Django의 방법입니다. 이를 통해 여러 개발자가 협업하거나 데이터베이스 변경 이력을 관리할 수 있습니다.