[Django] Static/Media

송수빈·2026년 5월 9일
@mediadjangostatic

SSAFY

목록 보기
10/15

Static files

  • Static files (정적 파일)
    • 서버 측에서 변경되지 않고 고정적으로 제공되는 파일
    • 대표적인 종류: CSS 파일, JavaScript 파일, 이미지 파일, 폰트 파일

웹 서버와 정적 파일

  • 웹 서버의 기본 역할
    • 요청 받은 주소(URL)에 해당하는 자원을 찾아 응답해주는 것
  • 정적 파일과 URL의 관계
    • 웹 서버가 제공하는 가장 기본적인 자원이 바로 정적 파일(Static Files)
    • 정적 파일 제공
      • 웹 서버는 요청 받은 URL을 보고, 서버 컴퓨터의 특정 폴더에 저장된 CSS, JS, 이미지 같은 정적 파일을 찾아 제공
    • URL의 필요성
      • 결국 정적 파일이 사용자에게 보이려면, 그 파일에 접근할 수 있는 고유한 주소(URL)가 반드시 필요하다는 의미
  • 처리 과정 요약
    1. 사용자: 브라우저에 http://example.com/images/logo.png 라는 주소를 입력하며 이미지를 요청
    2. 웹 서버: /images/logo.png라는 URL을 확인하고, 서버에 미리 약속된 폴더에서 logo.png 파일을 찾음
    3. 웹 서버: 찾은 이미지 파일을 HTTP 응답에 담아 사용자에게 전송
    4. 사용자: 브라우저가 응답 받은 이미지 파일을 화면에 보여줌
  • Static files 경로의 종류
    • 기본 경로
    • 추가 경로

Static files 기본 경로

  • Static files 기본 경로
    • app폴더/static/
  • 기본 경로 CSS 스타일 제공하기
    • articles/static/stylesheets/ 경로에 CSS 파일 배치하기
    • 메인 페이지에서 CSS 파일 불러오기
      <!-- articles/index.html -->

{% load static %}
<link rel="stylesheet" href="{% static 'stylesheets/style.css' %}">
      • static files 경로는 DTL의 static tag를 사용해야 함
      • built-in-tag가 아니기 때문에 load tag를 사용해 import 후 사용 가능
    • CSS가 적용된 것을 확인
      • static tag가 어떤 주소를 만들어 냈는지 확인
  • STATIC_URL
    • 정적 파일의 웹 주소 (기본값: 'static/')
    • 웹 페이지에서 정적 파일에 접근할 때 사용할 URL의 시작 부분(접두사)를 지정하는 설정
    • 이는 서버 컴퓨터에 저장된 실제 파일 경로가 아니라, 오직 웹(브라우저)에서만 사용되는 주소
    • 마치 서버의 정적 파일 폴더에 ‘static/’이라는 웹 주소 별명을 붙여주는 것과 같음
  • 기본 경로 이미지 파일 제공하기
    • articles/static/images/ 경로에 이미지 파일 배치하기
    • DTL의 static tag를 사용해 이미지 경로 작성하기
      <!-- articles/index.html -->

<img src="{% static 'images/sample-1.png' %}" alt="sample image">
  • 정적파일 URL이 만들어지기까지

Static files 추가 경로

  • Static files 추가 경로
    • STATICFILES_DIRS에 문자열로 추가 경로를 설정
    • STATICFILES_DIRS이란 기본 경로 외에 추가적으로 탐색할 경로의 목록을 지정하는 리스트
  • STATICFILES_DIRS 설정
    # settings.py

STATICFILES_DIRS = [
	BASE_DIR / 'static',
]
    • Django는 기본 경로인 각 앱의 static/ 폴더를 모두 확인한 후, 프로젝트 최상위 폴더에 있는 static/ 폴더도 추가로 탐색하게 됨
  • 추가 경로 이미지 파일 제공하기
    • 설정한 추가 경로에 이미지 파일 배치하기
    • DTL의 static tag를 사용해 이미지 경로 작성하기
      <!-- articles/index.html -->

<img src="{% static 'sample-2.png' %}" alt="sample image">
  • 정적 파일의 핵심 원리: 주소(URL)가 있어야 찾아갈 수 있다.
    • 컴퓨터에 파일이 존재하는 것만으로는 웹 페이지에 보일 수 없음
    • 브라우저가 파일을 찾아올 수 있도록 반드시 웹 주소를 달아줘야 함

Media files

  • Media files (미디어 파일)
    • 사용자가 웹사이트를 통해 직접 업로드하는 파일

이미지 업로드

  • ImageField()
    class Article(models.Model):
	image = models.ImageField(upload_to='images/', blank=True)
    • 이미지 파일을 업로드하기 위해 사용하는 Django 모델 필드
      • blank=True 속성을 작성해 빈 문자열이 저장될 수 있도록 제약 조건 설정
      • 게시글 작성 시 이미지 첨부 없이도 작성할 수 있도록 하기 위함
    • 데이터베이스 저장 방식
      • 가장 중요한 특징은 이미지 파일 자체가 데이터베이스에 저장되는 것이 아니라는 점
      • 데이터베이스에는 upload_to 경로를 기준으로 한 이미지 파일의 경로(문자열)만 저장되고, 실제 파일은 서버의 특정 폴더(MEDIA_ROOT)에 저장
  • 미디어 파일을 제공하기 전 준비사항
    • settings.py에 MEDIA_ROOT, MEDIA_URL 설정
      MEDIA_ROOT = BASE_DIR / 'media'

MEDIA_URL = 'media/'
    • 작성한 MEDIA_ROOT, MEDIA_URL에 대한 URL 지정
      from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
	path('admin/', admin.site.urls),
	path('articles/', include('articles.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
  • MEDIA_ROOT와 MEDIA_URL 설정
    • MEDIA_ROOT는 파일을 저장하고 관리하기 위한 서버의 실제 경로이고,
    • MEDIA_URL은 그 파일을 웹에서 보여주기 위한 가상의 주소
  • Pillow 설치 후 migrations 재진행
    • Pillow란 파이썬에서 이미지를 열고, 크기 조절이나 필터 적용 같은 다양한 편집 작업을 수행한 후 저장할 수 있게 해주는 필수 이미지 처리 라이브러리
  • form 요소의 enctype 속성 추가
    <h1>CREATE</h1>
<form action="{% url 'articles:create' %}" method="POST" enctype="multipart/form-data">
  {% csrf_token %}
  {{ form }}
  <input type="submit">
</form>
    • enctype 속성이란 form 데이터가 서버로 제출될 때, 해당 데이터가 어떤 형식으로 인코딩 될지 지정하는 속성
    • 파일 업로드 시에는 반드시 multipart/form-data로 설정해야 함
  • ModelForm의 2번째 인자로 요청 받은 파일 데이터 작성
    def create(request):
	if request.method == 'POST':
		form = ArticleForm(request.POST, request.FILES)
		...
    • ModelForm의 상위 클래스인 BaseModelForm의 생성자 함수의 2번째 위치 인자로 파일을 받도록 설정되어 있음
  • 이미지 업로드 후 DB 확인
    • 이미지 파일 자체가 데이터베이스에 저장되는 것이 아닌 upload_to 경로를 기준으로 한 이미지 파일의 경로(문자열)만 저장
    • 이 방식은 데이터베이스의 용량을 가볍게 유지하고 성능을 높이는 데 매우 효율적임

업로드 이미지 제공

  • 게시글 상세 페이지에 업로드 한 이미지 제공하기
    {% if article.image %}
	<img src="{{ article.image.url }}" alt="image">
{% endif %}
    • ImageField의 .url 속성
      • 업로드 파일의 웹 주소
      • ImageField나 FileField에 저장된 파일 객체에서 .url 속성을 사용하면, 해당 파일을 웹에서 접근할 수 있는 전체 URL 주소를 얻을 수 있음

업로드 이미지 수정

  • 수정 페이지 form 요소에 enctype 속성 추가
    <!-- articles/update.html -->

<h1>UPDATE</h1>
<form action="{% url 'articles:update' article.pk %}" method="POST" enctype="multipart/form-data">
	{% csrf_token %}
	{{ form }}
	<input type="submit">
</form>
  • update view 함수에서 업로드 파일에 대한 추가 코드 작성
    # articles/views.py

def update(request, pk):
    article = Article.objects.get(pk=pk)
    if request.method == 'POST':
        form = ArticleForm(request.POST, request.FILES, instance=article)
        ...

참고

upload_to 활용

  • 단순한 문자열 경로 외에도, 업로드 경로를 동적으로 생성하는 두 가지 유용한 방법을 제공

  1. 날짜를 이용한 경로 구성

    • strftime()의 형식 코드를 사용하여 파일이 업로드된 날짜를 기준으로 폴더를 자동으로 생성할 수 있음
      class Photo (models.Model):
    # 2100년 1월 1일에 업로드하면 '2100/01/01/' 폴더에 저장됨
    image = models.ImageField(blank=True, upload_to='%Y/%m/%d/')
      • %Y: 4자리 연도, %m: 2자리 월, %d: 2자리 일

  2. 함수를 이용한 동적 경로 생성

    • 더 복잡한 로직으로 경로를 만들고 싶을 때는, upLoad_to에 함수를 직접 전달할 수 있음
      def articles_image_path(instance, filename):
    # instance.user.username을 통해 게시글 작성자의 이름을 가져옴
    # 예: 'images/ssafy_user/my_photo.jpg' 와 같은 경로를 반환
    return f'images/{instance.user.username}/{filename}'

class Article(models.Model):
    user = ...
    image = models.ImageField(blank=True, upload_to=articles_image_path)
    • 이 함수는 두 가지 인자를 받음
      • instance: 파일이 첨부된 모델의 인스턴스 (해당 게시글 객체 등)
      • filename: 업로드 된 파일의 원본 이름 # 경로 생성 함수 정의

AWS 인프라 이해하기

  • AWS (Amazon Web Services)

    • 아마존이 제공하는 클라우드 컴퓨팅 플랫폼
    • 서버, 스토리지, 데이터베이스 같은 IT 인프라를 직접 구매하지 않고, 인터넷을 통해 필요한 만큼 빌려 쓰는 서비스

  • AWS 핵심 서비스 3가지

    서비스역할설명
    EC2가상 서버클라우드에 생성하는 고성능 컴퓨터
    53파일 저장소이미지, 동영상 등 모든 파일을 보관하는 객체 스토리지
    RDS데이터베이스데이터를 체계적으로 관리하는 관계형 데이터베이스

  • EC2, S3, RDS를 활용한 웹 서비스 구축

    • EC2 (서버)
      • 웹 애플리케이션(Django)이 실행되는 컴퓨터의 역할
    • S3 (파일 저장소)
      • 사용자가 올린 이미지나 사이트의 로고 등 정적 파일을 보관하는 외부 창고 역할
    • RDS (데이터베이스)
      • 회원 정보, 게시글 등 중요한 데이터를 기록하고 관리하는 장부 역할

  • 클라우드 컴퓨팅 플랫폼을 사용하는 이유

    • 비용 절감
      • 물리 장비를 직접 구매할 필요 없이, 사용한 만큼만 비용을 지불
    • 유연성과 확장성
      • 필요에 따라 서버 사양이나 저장 공간 용량을 몇 번의 클릭만으로 자유롭게 조절할 수 있음
    • 글로벌 서비스
      • 전 세계에 위치한 데이터 센터를 통해 어떤 국가의 사용자에게도 빠르고 안정적인 서비스를 제공할 수 있음
profile
송수빈
🌱 🐜
이전 포스트

[Django] Django Form

다음 포스트

[Django] Authentication System

0개의 댓글