장고

개발 일지 26 - 프로필 이미지 추가

sorecord 2024. 9. 9. 10:21

이미지를 추가하는 작업을 하는 과정은 생각만으로 복잡할 것 같아서 미뤄왔던 작업이다.

 

일단 장고에서 이미지를 어떻게 가져올 수 있는지 부터 알아야 한다.

 

setting.py에 추가할 요소인 아래 2 요소에 대해 먼저 알아야 한다. 

  • MEDIA_URL: 미디어 파일에 접근하기 위한 URL 경로를 설정. 사용자가 업로드한 파일을 웹에서 접근 할 수 있게 한다.
  • MEDIA_ROOT: 실제로 미디어 파일이 저장될 파일 시스템의 경로를 설정. 사용자가 업로드한 파일은 이 경로에 저장된다.
MEDIA_URL = '/media/'  # 미디어 파일에 접근하기 위한 URL
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')  # 실제 파일이 저장될 경로

 

경로를 저장하는 방법은 다양하겠지만 난 os를 사용해서 경로를 만들었다. 

 

BASE_DIR = Path(__file__).resolve().parent.parent

print("BASE_DIR:", BASE_DIR)

 

만약, base_dir의 경로를 알고 싶다면 setting.py내에서 그냥 print를 하면 알 수 있다. 

 

정리

vscode에서 장고를 사용하는데 이미지를 추가하게 되면 media라는 폴더가 생기고 그 안에 이미지가 들어가게 된다. 그게 ROOT경로이다.

 

그리고 그 ROOT안에 있는 이미지 값을 사용하기 위해서는 url을 이용해야 한다는 것이다.

 

 

그리고 url.py에 추가해야 할 코드가 있다. 

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [......]
# 미디어 파일 제공을 위한 설정
if settings.DEBUG:  # DEBUG 모드에서만 미디어 파일을 제공
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

 

아래 static은 주어진 URL 경로(MEDIA_URL)로 들어오는 요청을 실제 파일 시스템의 디렉토리(MEDIA_ROOT)와 연결한다. 

 

처음에는 다른 url경로와 경로 충돌 같은 것이 발생하지 않을까? 걱정했지만 MEDIA_URL을 고유한 경로로 설정하여 다른 URL 패턴과 겹치지 않도록 한다면 문제가 없다고 한다. 

{% load static %}
    <div class="profile-pic">
        <form method="post" action="{% url 'upload_profile_pic' %}" enctype="multipart/form-data">
            {% csrf_token %}
            <img 
                src="{% if user_profile.profile_image %}{{ user_profile.profile_image }}{% endif %}" 
                alt="Profile Picture" 
                style="cursor: pointer; width: 100px; height: 100px; border-radius: 50%;" 
                onclick="document.getElementById('file-input').click();"
            >
            <input 
                type="file" 
                id="file-input" 
                name="profile_pic" 
                accept="image/*" 
                onchange="this.form.submit();"
            >
		</form>

 

장고에서 이미지를 첨부해주기 위해서는 type="file"이라는 요소를 쓰면 본인의 컴퓨터에 저장된 이미지를 사용할 수 있다. accept는 이미지의 확장자이다. 난 어떤 이미지 형식도 다 들어올 수 있게 설정을 해두었다. 

 

<img>로 내가 원하는 프로필 사이즈로 깍아내고 프로필이미지를 클릭시 이미지를 바꿀 수 있게끔 구현을 하고 싶어서 onclick와 onchange를 사용했다. 

 

위의 코드는 이미지를 클릭했을 때 view.py에 있는 upload_profile_pic으로 넘어가게 해둔 코드이다. 

 

뷰 파이에 대한 부분은 다음 글에서 작성하도록 하겠다.