인프런 커뮤니티 질문&답변

sunnnwo님의 프로필 이미지
sunnnwo

작성한 질문수

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

03-02 템플릿에서 데이터 렌더링하기

models.py와 _song.html의 연결에 대해서 질문있습니다.

해결된 질문

작성

·

58

0

안녕하세요 강사님.

보면 _song.html에서 models.py의 class song:을 가져다 쓰는것같습니다.

{{ song.like_count }}

html 파일안에서 이런식으로 쓰이는것같은데, 어떻게 연결을 시켰는지 알수있을까요?

감사합니다.

답변 3

1

이진석님의 프로필 이미지
이진석
지식공유자

옙. 맞습니다. 제가 좀 더 보충을 해보겠습니다.

list comprehension 문법은 아래처럼 풀어서 생각하시면 이해하시기 좋습니다. 새로운 리스트를 생성하는 데, for 키워드 앞에 지정한 식을 평가해서 리스트의 새 항목으로 append 하는 문법입니다.

image.png

 

  1. 장고는 서버 구동 시에 url patterns 리스트에 등록된 path 목록을 정리를 해두구요.

  2. 클라이언트로부터 HTTP 요청이 들어오면, 그 요청 URL에 매칭되는 path를 찾고, 그 path와 연결된 View 함수를 호출하여, 해당 요청을 처리합니다. 지금은 index 함수이구요.

  3. View 함수가 호출되어 처리되는 동안에 클라이언트는 응답을 기다립니다. 브라우저에서 모래시계가 빙글빙글 돌고 있는 상황일 것입니다.

  4. index 뷰 함수는 다양한 포맷의 응답을 할 수 있는 데요. 여기에서는 render 함수를 활용하여, HTML 포맷의 응답을 생성했습니다.

  5. render 함수의 세번째 인자로 템플릿 내에서 참조할 값 목록을 사전(dict) 타입으로 지정합니다. 어떤 타입의 값이든 템플릿 내에서 참조할 목적이라면 모두 지정할 수 있습니다.

장고 템플릿의 for 반복문 코드는 파이썬의 for 반복문과 동일한 방식으로 동작합니다.

image.png

song 은 Song 인스턴스이니까, like_count 속성이 있으니 참조하여 출력할 수 있습니다.

 

sunnnwo님의 프로필 이미지
sunnnwo
질문자

설명 너무 감사합니다. 열심히 배우도록 하겠습니다!

sunnnwo님의 프로필 이미지
sunnnwo
질문자

제가 render함수 내에 3번째 인자로 가능한 자료혈 여쭤보려다, 다른 자료형으로 내가 해보지 뭐 하면서 넘겼던 부분인데 이렇게 첨언해주셔서 감사합니다.

이진석님의 프로필 이미지
이진석
지식공유자

옙. 세번째 인자는 필히 사전 타입이어야하고, 사전 안에 원하시는 어떤 값이든 지정해서 템플릿 내에서 사용하실 수 있습니다.

사전이 아닌 다른 값을 지정하시면, render 함수가 원하는 타입이 아니라서 오류가 발생할 수 있습니다.

화이팅입니다. ;-)

1

이진석님의 프로필 이미지
이진석
지식공유자

안녕하세요.

View에서는 render 함수 호출을 통해 지정 템플릿을 통해 문자열 응답을 생성할 수 있습니다.

render 함수 호출 시에는

  • 두번째 인자 template_name 에는 사용할 템플릿 파일의 경로를 지정하구요.

  • 세번째 인자 context 에는 사전(dict) 타입으로서 템플릿 내에서 참조할 변수값 목록을 지정합니다.

song_list는 index 뷰 함수 내에서 아래의 코드로, Song 인스턴스로 구성된 리스트가 됩니다. 한 줄의 코드로 이렇게 리스트를 생성하는 문법을 list comprehension 이라고 부릅니다. 파이썬에서 사용 빈도가 높은 문법입니다.

image.png

Song 클래스의 클래스 메서드인 from_dict 코드는 아래와 같구요. 호출 시에 Song 인스턴스를 반환합니다.

image.png

그럼 song_list 는 Song 인스턴스로 구성된 리스트니깐요. 아래의 코드에서 song_list를 순회돌며, 매 Song 인스턴스가 song 변수에 할당이 될 것입니다.

image.png

이어서, hottrack/_song.html 템플릿 파일에서도 song 객체가 그대로 전달이 되구요. song 객체는 Song 클래스의 인스턴스니까,

image.png

song.like_count 와 같은 코드로 각종 속성에 접근할 수 있게 됩니다. 장고 템플릿 문법으로는 중괄호 2개로 감싸서 값을 표현합니다. 그럼 코드가 {{ song.like_count }} 처럼 됩니다.

image.png

살펴보시고 추가 질문은 댓글 남겨주세요. 화이팅입니다. :-)

sunnnwo님의 프로필 이미지
sunnnwo
질문자

list comprehension부분은 마음으로는 이해했지만, 아직 안보고는 작성하기 힘든것같습니다. 비슷한 걸로..람다식같은..

먼저 urls로 주소입력이 들어오면, 그에 맞는 path를 찾아 views안에 있는 함수 연결, 여기서는 index를 연결해줬고, index 반화값으로 render함수를 지정, 템플릿 파일지정, 템플릿이 참조할 딕셔너리 지정. 그 딕셔너리는 models의 Song class의 객체로 만든다. list comprehension으로 만든 이부분이고요.

song_list = [Song.from_dict(song_dict) for song_dict in json.loads(json_string)]

index.html에서

{%  for song in song_list %}

Song클래스의 song이라는 객체를 다시 자동 할당해서 정보를 주고,

그 이후는 _song.html에서 song.변수명 으로 호출하며 출력하고요.

제가 이해한것이 맞을까요?

자세한 설명 감사드립니다.

0

안녕하세요, 인프런 AI 인턴입니다. sunnnwo님.

_song.html 파일에서 models.pySong 클래스가 사용되는 방법에 대해 궁금해 하셨군요. Django 템플릿 안에서 모델 인스턴스를 어떻게 활용하는지 설명드릴게요.

Django에서 모델과 템플릿의 연결

  1. 뷰에서 컨텍스트로 전달: Django에서는 views.py에서 템플릿으로 데이터를 전달할 때, 모델의 인스턴스를 컨텍스트 데이터로 포함합니다. 예를 들어, views.py에서 특정 노래 인스턴스를 가져와서 템플릿에 전달할 수 있습니다.
   # views.py
   from django.shortcuts import render
   from .models import Song

   def song_detail(request, pk):
       song = Song.objects.get(pk=pk)
       return render(request, '_song.html', {'song': song})
  1. 템플릿에서 표시: 템플릿에서는 전달된 컨텍스트 데이터인 모델 인스턴스를 사용할 수 있습니다. {% ... %} 태그를 사용하여 데이터를 삽입할 수 있으며, 이는 Song 모델의 필드에 접근하는 방법입니다.
   <!-- _song.html -->
   <p>좋아요 수: {{ song.like_count }}</p>

위의 방법으로, Django 템플릿은 views.py에서 전달한 모델 데이터를 렌더링할 수 있게 됩니다. like_count 같은 필드는 Song 모델에 정의된 속성 중 하나일 것입니다.

참고 자료

더 자세한 내용은 Django의 템플릿 시스템과 관련한 공식 문서를 참고하시면 됩니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

sunnnwo님의 프로필 이미지
sunnnwo

작성한 질문수

질문하기