Chapter 7-1 Django 블로그 이미지 업로드 기능 만들기

🌟 Chapter 07. Django 블로그 이미지 업로드 기능 만들기

Summernote 기반 Rich Text Editor 통합 및 이미지 업로드 처리 방법

---

✅ 1. Rich Text Editor란?

🎨 리치 텍스트 편집기(Rich Text Editor) 는 사용자가 일반 텍스트뿐만 아니라
굵게, 기울임, 이미지 삽입, 글머리기호 등 다양한 서식을 직접 적용할 수 있게 도와주는 도구입니다.

• 대표 예시: Summernote, TinyMCE, CKEditor
• HTML/CSS 기반 시각 편집 제공

🔗 공식 사이트: https://summernote.org/

---

🛠️ 2. Summernote 설치 및 설정

📦 1) 패키지 설치

poetry add django-summernote

📌 Poetry로 django-summernote 패키지를 설치하면, 프로젝트에 Summernote 기능이 추가됩니다.

---

⚙️ 2) settings.py 설정

# config/settings.py

INSTALLED_APPS = DJANGO_APPS + OWN_APPS + [
    'django_extensions',
    'django_summernote',  # ✅ Summernote 추가
]

# 미디어 파일 설정
MEDIA_URL = 'media/'
MEDIA_ROOT = BASE_DIR / 'media'

# 정적 파일 설정
STATIC_URL = 'static/'
STATICFILES_DIRS = [ BASE_DIR / 'static' ]
STATIC_ROOT = BASE_DIR / '.static_root'

📌 INSTALLED_APPS에 django_summernote를 추가하고, MEDIA 및 STATIC 경로도 설정해야 이미지 업로드가 제대로 작동합니다.

 

Migrate 해주기 

python manage.py migrate

---

🌐 3) urls.py 설정

# config/urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('blog.urls')),
    path('fb/', include('blog.fbv_urls')),
    path('accounts/', include("django.contrib.auth.urls")),
    path('signup/', member_views.sign_up, name='signup'),
    path('login/', member_views.login, name='login'),

    # ✅ Summernote URL 등록
    path('summernote/', include('django_summernote.urls')),
]

# ✅ DEBUG일 때 미디어 파일 서빙
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

📌 Summernote 관련 URL 경로를 추가하고, DEBUG 모드일 때는 업로드된 이미지 파일도 서빙할 수 있도록 설정합니다.

---

👨‍💼 3. 관리자 페이지 적용

📝 admin.py 설정

from django.contrib import admin
from django_summernote.admin import SummernoteModelAdmin
from blog.models import Blog, Comment

class CommentInline(admin.TabularInline):
    model = Comment
    extra = 1

@admin.register(Blog)
class BlogAdmin(SummernoteModelAdmin):
    summernote_fields = ['content']  # ✅ Summernote 적용 필드
    inlines = [CommentInline]

📌 SummernoteModelAdmin을 상속하면 해당 필드에 Summernote 위지윅 에디터가 적용됩니다.
📌 inlines를 통해 댓글(Comment)을 블로그 편집 페이지에서 함께 관리할 수 있도록 구성합니다.

---

⚙️ 4. 마이그레이션 및 서버 실행

python manage.py migrate
python manage.py runserver

📌 Summernote 관련 DB 마이그레이션을 수행하고 서버를 실행합니다.

• Admin에서 블로그 글 수정 시 Summernote 에디터로 전환된 화면을 확인할 수 있습니다.

---

🖼️ 5. 이미지 출력 설정

📄 blog_detail.html 수정

<p>{{ blog.content | safe }}</p>  <!-- HTML 태그 렌더링 허용 -->

📌 Summernote는 이미지나 HTML 태그를 포함하므로 | safe 필터를 통해 HTML이 실제로 렌더링되도록 설정해야 합니다.

---

📸 미리보기

이미지 테스트용 샘플:
👉 https://picsum.photos/

---

🧠 마무리 요약

항목 설명

설치 패키지	django-summernote
설정 파일	INSTALLED_APPS, MEDIA_ROOT, MEDIA_URL, urls.py
적용 위치	관리자 페이지 에디터, 상세 페이지 출력
주의 사항	`blog.content

---

필요하다면 사용자 글 작성 폼에도 Summernote 적용이 가능합니다.
원하시면 CBV/FBS용 폼 적용 예제도 정리해드릴게요.