Django로 인스타그램 만들기

참고문서

static, templates폴더 생성 및 CSS파일 복사

Terminal

cd ~/projects/instagram-project/instagram/
mkdir static
mkdir templates
cd static
mkdir css
cd css
wget https://gist.githubusercontent.com/LeeHanYeong/36ebc5fa6923c00048ab97e15e0d6d3f/raw/dcbb1a44cb1df10cada311f556137a8e1d54cc0a/bootstrap.min.css
wget https://gist.githubusercontent.com/LeeHanYeong/36ebc5fa6923c00048ab97e15e0d6d3f/raw/8df3c57f3614c3f2dbf3cd051b2a1c9587e75907/style.css

CSS작성은 이 강의에서 다루지 않는다. 여기서는 부트스트랩 CSS파일과 미리 작성한 CSS파일을 가져와 사용한다.
wget명령어가 없다면 설치 후 사용한다.

프로젝트 구조

instagram-project/
  instagram/
    config/
    member/
    post/
    # 프로젝트의 정적 파일(CSS, JS...)들을 저장
    static/
    # 프로젝트에서 사용할 템플릿(HTML) 파일들을 저장
    templates/

STATICFILES_DIRS설정

config/settings.py

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

STATIC_URL로 시작하는 요청은 STATICFILES_DIRS에 정의된 경로 목록에서 파일을 검색해 응답으로 돌려준다.

TEMPLATES설정의 DIRS값 설정

config/settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'templates'),
        ],
...
...

템플릿 파일을 불러올 때는 TEMPLATES설정의 DIRS내의 경로 목록에서 파일을 검색해 가져온다.

포스트 목록을 위한 view, template, url설정 및 Root urls.py에서의 include

post/views.py

from django.shortcuts import render

from .models import Post


def post_list(request):
    posts = Post.objects.all()
    context = {
        'posts': posts,
    }
    return render(request, 'post/post_list.html', context)

전체 Post목록을 가져와 posts라는 키로 템플릿 렌더링 함수에 전달한다

templates/post/post_list.html

{% load static %}
<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
	<link rel="stylesheet" href="{% static 'css/style.css' %}">
	<title>Instagram</title>
</head>
<body>
	<div class="container">
		<h1>Post List</h1>

		{% for post in posts %}
			<div class="panel panel-default post-item">
				<img src="{{ post.photo.url }}" alt="" class="post-image">
				<div class="panel-body">
				</div>
			</div>
		{% endfor %}
	</div>
</body>
</html>

post/urls.py

from django.conf.urls import url

from . import views

urlpatterns = [
    url(r'^$', views.post_list, name='post_list'),
]

config/urls.py

from django.conf import settings
from django.conf.urls import url, include
from django.conf.urls.static import static
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^post/', include('post.urls', namespace='post')),
]
urlpatterns += static(
    settings.MEDIA_URL,
    document_root=settings.MEDIA_ROOT
)

include함수는 다른 urls모듈을 가져와 첫 번째 인수로 주어진 URL의 뒤쪽에 패턴들이 매칭되도록 한다.

namespace에 이름을 붙이면, 각각의 urls모듈을 템플릿이나 뷰에서 사용할 때 같은 URL이름도 모듈별로 분리된 이름을 가질 수 있도록 해준다.

현재까지 결과

PostList