[ Django ] Django로 간단한 짭스타그램 만들기! (3)

안녕하세요 돌백😊 입니다.

저번에는 장고 어드민을 통해서 스토리 포스트 데이터를 직접 생성 해봤습니다.

 

🎯이번에는 장고 템플릿을 사용해서 실제 눈에 보여지는 웹 페이지를 구성 해보도록 하겠습니다!

1. 장고 템플릿이란?

장고 템플릿은 HTML과 파이썬 코드를 함께 사용해 동적인 웹 페이지를 생성합니다. 일반적인 HTML로 고정된 내용을 작성하는 대신, 템플릿 태그와 필터를 사용해 동적으로 데이터를 표현할 수 있습니다.

 

그럼 장고 템플릿을 본격적으로 사용 해보도록 하겠습니다.

우선 루트 디렉토리에 templates 라는 디렉토리를 생성 해주시기 바랍니다.

디렉토리 구조

그리고 config의 settings.py 를 열어주시고 

TEMPLATES

이렇게 생긴 코드단을 찾아주시기 바랍니다!

 

저게 장고 템플릿을 사용하기 위해 옵션등을 세팅 하는 부분 입니다.

근데 보시면 DIRS 부분에 [] 이렇게 내용이 비어있잖아요? 여기에 템플릿 기능을 활용할 디렉토리를 적어서 세팅 하는 것입니다.

 

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": [BASE_DIR / 'templates'],
        "APP_DIRS": True,
        "OPTIONS": {
            "context_processors": [
                "django.template.context_processors.debug",
                "django.template.context_processors.request",
                "django.contrib.auth.context_processors.auth",
                "django.contrib.messages.context_processors.messages",
            ],
        },
    },
]

 

이렇게 DIRS 안을 채워주시기 바랍니다. 이제 저희는 BASE_DIR 의 templates 폴더를 사용하겠다고 설정 한것입니다!

 

❓여기서 잠깐!  BASE_DIR 이란?

settings.py 상단을 보시면, 아래와 같은 코드가 있을것입니다.

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

이것은 해당 프로젝트의 가장 높은 부분에 위치하는 디렉토리 즉 루트디렉토리를 base_dir 이라는 이름의 변수로 초기화 하는것 입니다.

 

그럼 계속해서 template을 사용하기 위한 세팅은 완료 했으니 바로 사용 해봅시다!

 

우선 templates 폴더 안에 story_post_list.html 파일을 생성 해주세요

 

템플릿 디렉토리

 

그리고 전에 만들었던 jjapstagram 의 views 의 index 파일을 수정 해서, story_post_list 를 웹에 랜더링 해보겠습니다.

 

views 의 index 함수를 아래와 같이 수정 해주시기 바랍니다.

 

def index(request):
	# 전체 StoryPost 모델의 쿼리셋을 가져오는것 입니다.
    story_post_list = models.StoryPost.objects.all()
    context = {'story_post_list': story_post_list}
    # 가져온 쿼리셋을 오브젝트 형식으로 story_post_list에 랜더링 시켜줄 것입니다.
    return render(request, 'story_post_list.html', context)

 

 

좋습니다. 이제 다시 story_post_list.html 파일로 돌아가서 내부에 아래에 해당하는 코드를 작성 해주시기 바랍니다.

 

<div class="border">
	
    {% for story_post in story_post_list %}
        <div>
            {{story_post.content}}
        </div>
    {% endfor %}
</div>

 

이코드를 보면 다른 프레임워크로 개발경험이 있으시다면 생소한 html 태그 코드들이 있을것 입니다.

이것은 장고에서 지원하는 파이썬 템플릿 코드로, html 파일을 렌더링 할때, 파이썬 코드를 통해 조건문, 반복문 등의 기능을 수행 할 수 있게 해주는 것 입니다.

 

코드를 설명 드리면, 반복문으로 좀전에 뷰에서 가져온 StoryPost 의 전체 쿼리셋을 돌려서 돌릴때마다 storypost의 content 값을 <div> 안에 텍스트로 입력 해서 랜더링 하는 것 입니다.

 

네 여기까지 따라오셨다면!  꼭 저장 하시고 브라우저에서  http://localhost:8000/jjapstagram/ 주소로 접속 해보시기 바랍니다.

 

페이지 랜더링

 

짠!! 🎉🎉🎉

드디어 모델을 만들고 데이터를 넣고, 생성한 데이터로 웹페이지에 랜더링 까지 성공 하셨습니다 정말 축하드립니다!

 

아...근데 아직 아쉬워요 그쵸? 저희가 원했던건 이런 텍스트 띡 몇개 올라오는게 아니라 이쁘게 디자인된 스토리 블록들이 올라오는거잖아요?

 

그렇다면 다음시간에는 데이터를 불러와서 랜더링한 페이지를 디자인 하고! 이쁘게 꾸미는 작업을 해보도록 하겠습니다

미리 말씀드리자면 저는 tailwind css 를 사용해서 페이지 디자인을 입힐것 입니다.

 

긴글 봐주셔서 너무너무 갑사드리고! 다음 포스팅에서 찾아뵙도록 하겠습니다. 모두 행복코딩 하시기 바랍니다~

 

이전 포스팅 ( 짭스타그램 2 ):

[ Django ] Django로 간단한 짭스타그램 만들기! (2)

 

다음 포스팅 ( 짭스타그램 4 ):

[ Django ] Django로 간단한 짭스타그램 만들기! (4)