내일배움캠프 24일차

김서영·2022년 10월 6일
0

내일배움캠프 TIL

목록 보기
26/85

1. 인스타그램 클론 코딩 프로젝트

1) model에서 이미지 사용하기

1. settings.py에 이미지 경로를 설정하는 코드 추가

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
-> 이미지가 저장될 경로(미디어 파일은 파일을 직접 관리하기보다 경로를 통해 관리한다.)
MEDIA_URL = '/media/'
-> 이미지가 사용될 때 표현될 url(각 미디어 파일에 대한 url 의 고정값, url에 의해 미디어에 접근할 때 결정되는 값이다.)

2. models.py에 이미지 필드 추가

image = models.ImageField(upload_to='appname', null=True)

3. 서빙 규칙 추가

from django.conf import settings
from django.conf.urls.static import static
urlspatterns = [
] + static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)

MEDIA_URL에 대한 요청이 오면 MEDIA_ROOT에서 찾고, DEBUG가 True 일때만 동작하고 False라면 빈 리스트를 반환한다.

4. pillow 라이브러리 설치

pip install pillow

5. templates(html from)

<form action="{% url '목표 url' %}" method="POST" enctype="multipart/formdata">
    <input type="file" name='image'>
</form>

enctype을 'multipart/formdata'로 설정해야 정상적으로 담긴다.
이미지를 받을 수 있도록 input의 tupe은 'file'로 설정한다.

6. views.py

if 'image' in request.FILES:
    image = request.FILES['image']

views.py의 메소드에서 해당 파일을 받아와야 한다.
이미지 파일은 별도로 FILES에 작성되기 때문에 해당 위치를 통해 접근한다.
보통 if문과 함께 받아온다.

7. templates(html to)

위의 과정을 통해 담긴 image 오프젝트는 바로 접근이 불가능하고, 'image.url'로 접근해야 정상적으로 접근된다.

따라서 {%image.url%}과 같은 형식으로 받아와야 한다.(데이터 전달방법에 따라 변경될 수는 있다.)

url외에도 다른 옵션이 있지만, 일단 이미지를 출력하도록 하는 것은 image.url이다.

https://intrepidgeeks.com/tutorial/upload-save-and-display-django-photos

2) html div tag:좌우정렬하기 align:left, center, right

1. 왼쪽 정렬

DIV 영역 안에서 가로로 왼쪽 정렬하기 예시

<div align="left" style="border: 1px solid #48BAE4; height: 100px;">

2. 가운데 정렬

DIV 영역 안에서 가로로 가운데 정렬하기 예시

<div align="center" style="border: 1px solid #48BAE4; height: 100px;">

3. 오른쪽 정렬

DIV 영역 안에서 가로로 오른쪽 정렬하기 예시

<div align="right" style="border: 1px solid #48BAE4; height: 100px;">

3) DRF(Django Rest Framework)

Django안에서 RESTful API 서버를 쉽게 구축할 수 있도록 도와주는 오픈소스 라이브러리
RESTful이란 http의 url과 http method(GET, POST, PUT, DELETE)를 사용해서 API 가독성을 높인 구조화된 시스템 아키텍쳐

4) 도움이 되는 블로그

1. 댓글창 템플릿

https://hyunsix.tistory.com/entry/django-%EC%9D%B8%EC%8A%A4%ED%83%80%EA%B7%B8%EB%9E%A8-%ED%81%B4%EB%A1%A0-%EC%BD%94%EB%94%A9-3-%EB%8C%93%EA%B8%80-%EA%B8%B0%EB%8A%A5

2. 장고 인스타그램 클론코딩

https://velog.io/@suasue/Django-%EC%9D%B8%EC%8A%A4%ED%83%80%EA%B7%B8%EB%9E%A8-%ED%81%B4%EB%A1%A0-%EC%BD%94%EB%94%A93-%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EB%B3%B4%EC%95%88-%EA%B0%95%ED%99%94

3. ajax 사용법

https://araikuma.tistory.com/640

💜 오늘 느끼고 배운 점
하루종일 : 프로젝트
장고 너,,어렵다,,?? 장고 공부 다시해야지,,,

profile
개발과 지식의 성장을 즐기는 개발자

0개의 댓글