장고:사진 올리기 편집하기

{{장고}}

==개요==
사진을 올리고 관리하기 위해선 모델을 하나 만들어 개별적인 관리가 필요하다.

이미지 사용은 두가지 개념이 있다. 관리자가 static 디렉터리 안에 두고 사용하는 이미지와 사용자들이 올리는 이미지.(media)

<br />
==사전설정==

===업로드 폴더 설정===
settings.py에 MEDIA_ROOT를 다음과 같이 설정한다.(기본설정이 없기 때문에 새로 써주어야 한다.)<syntaxhighlight lang="python">
MEDIA_URL='/media/' #미디어 파일을 불러올 때 사용할 가상 url을 설정한다.

MEDIA_ROOT=BASE_DIR / 'media' #기본프로젝트 하위의 media에서 모든 업로드 매체를 관리한다.
#media 하위에 앱이름으로 디렉터리를 만들고 파일을 업로드하게 된다.
</syntaxhighlight>유저가 업로드한 파일이 모두 여기에서 관리된다.
=모델 작성=
글쓰기를 구현했다면 글쓰기 모델에 약간의 변형을 주어보자. 아래의 image필드를 추가한다.

/앱/models.py 안에 작성한다.<syntaxhighlight lang="python">
from django.contrib.auth.models import User
from django.db import models

class Question(models.Model):#세부내용은 필요에 따라..

    image=models.ImageField(upload_to='images/%Y/%m/%d', default='images/no_image.png')
#setting 값에 지정된 상대경로를 사용하기 위해 경로 처음엔 /를 두지 않는다.
</syntaxhighlight>upload_to는 저장할 경로를 정하는 것, default는 이미지 업로드가 되어있지 않을 때 사용할 것을 의미한다.

default 는 해당 미디어를 찾지 못했을 때 나타내 보여줄 것.

===pillow 설치===
모델을 반영하기 위해 makemigrations를 실행하면 에러가 뜬다. HINT로 pillow를 설치하라는 메시지가 뜬다. 메시지 그대로 <code>python -m pip install Pillow</code>를 입력하자.

<br />

==탬플릿 변경==

===등록 만들기===
이미지를 등록하기 위해 create.html을 수정한다.<syntaxhighlight lang="html+django">
<form action="", method="post" enctype="multipart/form-data">
<!--enctype="multipart/form-data"를 추가한다. 이는 파일 업로드 때 사용하는 옵션으로, 데이터를 문자열로 인코딩하지 않는다.-->    
    <input type="file" name="image" id="image" accept="image/*" value="{{ form.image.value|default_if_none:''}}">
</form>
</syntaxhighlight>수정페이지의 탬플릿도 그대로 사용하면 되는데, 필요에 따라 '등록하기'를 '수정하기'로 바꾼다든가 간단한 조작만 하면 된다.
미디어를 올릴 땐 enctype를 위와 같이 명시해주어야 한다.<br />
===상세 페이지 변경===
이미지가 보이는 곳은 상세화면이므로 detatil.html을 수정한다. 적당한 자리에 다음과 같은 형태로 끼워넣는다. image 속성 하위엔 url 속성이 있어 이를 통해 이미지를 가져온다.<syntaxhighlight lang="html+django">
  {% if question.image %}<!--이미지 속성이 있을 때에만 부른다. 없으면 에러;;-->
    <div>
        <p><img src="{{question.image.url}}" style="width:90%"></p>
    </div>
  {% endif %}
</syntaxhighlight>

==라우팅==
<nowiki>{{ user.profile.image.url }}</nowiki> 형태로 이미지를 불러오기도 한다. 모델의 속성에 이미지를 넣으면, 속성.url 형태로 내용을 불러올 수 있다.

그런데, 위처럼 url로 불러올 때엔 urls.py에 라우팅해주어야 한다.

====urls.py 수정(혹시 외부서버에 연결해 사용할 요량이라면 필요 없다.)====
보통 여기까지 하면 관리자페이지에서 사진을 올려 확인하는 과정을 거친다. 그런데, 위처럼 해서 이미지를 등록해도 이미지가 보이지 않는데, 이는 urls.py에 미디어 경로가 등록되지 않았기 때문이다.

때문에 이를 위해 최상단의 urls.py의 urlpatterns에 다음과 같은 내용을 추가해준다.(기존 urlpatterns의 하단에)<syntaxhighlight lang="python">
from django.conf.urls.static import static
from django.conf import settings

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
</syntaxhighlight>그런데, 이건 디버그모드가 True일 때에만 작동한다. 이것은 확인용으로, 외부서버와 연결한 후에는 지워버린다.
<br />

=외부서비스 연결[어째서인지, 나는 잘 안된다;;]=
많은 사용자를 감당하려면 웹 서버를 늘려야 하는데, 이미지를 관리하는 가장 간단한 방법은 별도의 서버를 두고 모두가 같은 이미지서버를 사용하게 하는 것이다.

==AWS 연동==
아마존에서 지원하는 서버이다. 여기에 가입하자. https://aws.amazon.com

서비스는 스토리지의 S3를 이용할 것이다. 버킷단위로 서비스를 제공한다. 버킷을 만들어보자.(필자는 question-pool이라고 정했다.)

만들 때 ACL관련 체크는 다 풀어주자.(허용)

===권한설정 및 사전작업===

#<code>서비스>보안,자격증명 및 규정준수>IAM</code> 에서 <code>사용자>사용자 추가</code>에서 사용자이름을 입력하고 <code>프로그래밍 방식 엑세스</code>에 체크한다.(API로 데이터를 주고받을 것이기에.)
#그룹명을 기입하고 필터에 S3를 넣으면 나오는 <code>AmazonS3FullAccess</code>를 체크하고 생성한다. 이후 API키가 나올 때까지 알아서 마무리.
#생성하면 나오는 페이지에 엑세스 키가 나오는데, 이 페이지를 벗어나면 다시 확인할 방법이 없다. csv다운로드로 다운로드 해둔다.

===장고에 연결===

*<code>pip install boto3</code>(S3을 다루는 모듈)을 설치한다.
*pip install django-storages(다양한 저장소를 사용하게 해주는 모듈)설치.
*settings.py 안의 INSTALLED_APPS 항목에 'storages'를 추가한다.
*이후 적당한 곳에 아래의 코드 추가.
<syntaxhighlight lang="python">
AWS_ACCESS_KEY_ID='유저키' #받은 유저키를 넣는다.
AWS_SECRET_ACCESS_KEY='유저비밀키' #받은 비밀키를 넣는다.
AWS_REGION='ap-northeast-2' #아마존에서 서울을 가리키는 코드. 커스텀도메인에 넣기 위한 변수.
AWS_STORAGE_BUCKET_NAME='question-pool' #아마존에서 만든 버킷명. 커스텀도메인에 넣기 위한 변수.
AWS_S3_CUSTOM_DOMAIN='%s.s3.%s.amazonaws.com' % (AWS_STORAGE_BUCKET_NAME, AWS_REGION)
AWS_S3_OBJECT_PARAMETERS={'CacheControl':'max-age-86400',}

DEFAULT_FILE_STORAGE='config.asset_storage.MediaStorage' #MediaStorage클래스로 파일저장소를 다루겠다.
#기본 미디어 위치를 지정해주기 위해 따로 지정한다.

</syntaxhighlight>

====asset_storage.py 작성====
config(장고기초폴더) 아래에 위 이름으로 파일을 작성하고 다음과 같이 기입한다.<syntaxhighlight lang="python">
from storages.backends.s3boto3 import S3Boto3Storage

class MediaStorage(S3Boto3Storage):
    location='media' #기존의 디렉터리를 지정한다.
    file_overwrite=False
</syntaxhighlight>

=이미지 리사이징 및 포멧 변경=

== imagekit ==
고용량의 이미지를 올릴 때 이미지 목록에선 이미지 전체가 아닌, 썸네일을 보여주는 편이 경제적이다. 혹은 사진을 흑백사진으로 만든다든가, 용량을 바꾼다든가, 사진의 불필요한 부분을 다듬는다든가 간단한 조작이 필요할 때 사용하는 패키지이다.
{| class="wikitable"
!과정
!설명
!방법
|-
|설치
|사전에 PIL이나 Pillow같은 이미지 조작툴이 설치되어 있어야 한다.
|pip install django-imagekit
|-
|등록
|settings.py의 app 목록에 등록한다.
|INSTALLED_APPS 하위에 'imagekit' 추가
|}
이후 

=== 모델작성 ===
다음 코드는 https://pypi.org/project/django-imagekit/<nowiki/>에서 공개된 코드를 변형한 것이다.
{| class="wikitable"
!과정
!설명
!방법
|-
|모델
|모델작성을 통해 활용하는 게 가장 쉬운 방법.
원본 이미지도 함께 저장한다.
|<syntaxhighlight lang="python">
from django.db import models  # 기존 모델에서 사용.
from imagekit.models import ImageSpecField
from imagekit.processors import ResizeToFill

class Profile(models.Model):
    avatar = models.ImageField(upload_to='avatars')
    avatar_thumbnail = ImageSpecField(source='avatar',
                                      processors=[ResizeToFill(100, 50)],
                                      format='JPEG',
                                      options={'quality': 60})

profile = Profile.objects.all()[0]
print(profile.avatar_thumbnail.url)    # > /media/CACHE/images/982d5af84cddddfd0fbf70892b4431e4.jpg
print(profile.avatar_thumbnail.width)  # > 100
</syntaxhighlight>
|-
|원본 이미지가 필요 없을 때.
|서버용량문제를 생각하면 원본이미지는 버리는 편이 좋다.
|<syntaxhighlight lang="python">
from django.db import models  # 기존 모델에서 사용.
from imagekit.models import ProcessedImageField
from imagekit.processors import ResizeToFill

class Profile(models.Model):
    avatar_thumbnail = ProcessedImageField(upload_to='avatars',
                                           processors=[ResizeToFill(100, 50)],
                                           format='JPEG',
                                           options={'quality': 60})
</syntaxhighlight>
|}

=== 탬플릿에서의 사용 ===
{| class="wikitable"
!과정
!설명
!방법
|-
|탬플릿에 삽입
|기존 이미지 사용과 동일하다.
|<nowiki><img src="{{ 모델.이미지가담김필드명.url }}" /></nowiki>
|}

=== 이외 사용 ===
위에선 이미지 처리를 모델에서 수행했는데, form에서 처리하고 모델에선 일반 이미지 필드를 사용할 수도 있다.