📘 Chapter 06. [블로그] 댓글 기능 만들기 - Static Files 설정과 Bootstrap 적용
🎯 목표
Django 블로그 프로젝트에서 댓글 기능 구현 전, 정적 파일(Static Files)을 구성하고 Bootstrap을 적용해 기본 레이아웃을 정리합니다.
1️⃣ Static Files란?
💡 Django의 Static Files는 HTML에 연결되는 정적인 CSS, JS, 이미지 등의 자산을 의미합니다.
- 서버에서 별도 로직 없이 클라이언트로 전달됩니다.
- STATICFILES_DIRS를 통해 여러 정적 파일 폴더를 등록할 수 있습니다.
2️⃣ 설정 흐름 따라가기
✅ (1) static 디렉토리 생성 및 설정
- 프로젝트 최상위에 static/ 폴더 생성
- config/settings.py에 설정 추가
# settings.py
STATIC_URL = 'static/'
STATIC_DIR = BASE_DIR / 'static'
STATICFILES_DIRS = [
STATIC_DIR
]
# 배포용 정적 파일 경로
STATIC_ROOT = BASE_DIR / '.static_root'
📌 STATICFILES_DIRS는 개발 중 정적 파일을 읽어올 디렉토리,
STATIC_ROOT는 collectstatic 명령으로 정적 파일을 모으는 목적입니다.
✅ (2) Bootstrap 파일 다운로드 및 위치 지정
- Bootstrap 공식 사이트에서 CSS/JS를 다운로드
- static/css/bootstrap.css, static/js/bootstrap.bundle.js 경로로 저장
✅ (3) base.html에 정적 파일 로드하기
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>블로그 프로젝트</title>
<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
</head>
<body>
<nav class="d-flex justify-content-between">
<div>
<a href="{% url 'blog:list' %}">홈</a>
</div>
<div style="text-align: right">
{% if request.user.is_authenticated %}
<form action="{% url 'logout' %}" method="POST" style="display: inline">
{% csrf_token %}
<button>로그아웃</button>
</form>
{{ request.user.username }}
{% else %}
<a href="{% url 'signup' %}">회원가입</a>
<a href="{% url 'login' %}">로그인</a>
{% endif %}
</div>
</nav>
{% block content %}{% endblock %}
<footer></footer>
<script src="{% static 'js/bootstrap.bundle.js' %}"></script>
{% block js %}{% endblock %}
</body>
</html>
🧩 static 템플릿 태그로 정적 경로를 HTML에 삽입하고, 부트스트랩 클래스(d-flex, justify-content-between 등)를 적용해 UI를 개선합니다.
💡 실무 팁
- STATICFILES_DIRS에 여러 폴더 등록 가능 (assets/, media/ 등)
- HTML에서 Bootstrap을 활용하면 빠르게 반응형 UI 구현 가능
- 배포 시에는 python manage.py collectstatic 명령으로 .static_root에 정리
✅ 요약
- Django 정적 파일 구조를 세팅하고,
- Bootstrap을 적용해 base.html을 레이아웃 템플릿으로 구성했습니다.
- 다음 단계에서는 댓글 입력 폼과 모델을 만들어봅니다!
'Django' 카테고리의 다른 글
| Chapter 6-3 댓글 기능 시작하기 - 모델과 관리자 설정 (0) | 2025.05.09 |
|---|---|
| Chapter 6-2 Bootstrap 적용으로 블로그 UI 개선하기 (0) | 2025.05.09 |
| Chapter 5-8 📌 Mini Project - Admin 권한으로 모든 게시글 수정/삭제 가능하게 만들기 (0) | 2025.05.08 |
| Chapter 5-7 📌 Django URL 구조 정리 - include와 앱 네임스페이스로 FBV/CBV 분리하기 (0) | 2025.05.08 |
| Chapter 5-6 📌 Django CBV로 블로그 글 삭제 기능 구현하기 (0) | 2025.05.08 |