Stage 1 - 코멘트 모델링
Stage5에서 뉴스피드 관련 모델인 Article을 만들 때 배웠지만 간단히 말해, Database를 만드는 작업이라 설명드렸습니다. 보존하고 싶은 데이터를 체계적으로 정리해두는게 목적이었죠.
이번에는 코멘트 모델을 함께 만들어보겠습니다.
views.py# 코멘트 모델class Comment(models.Model):article = models.ForeignKey(Article, on_delete=models.CASCADE, related_name='comments')author = models.CharField(max_length=120)text = models.TextField()password = models.CharField(max_length=120)created_at = models.DateTimeField(auto_now_add=True)def __str__(self):return self.text
모델 관련 작업을 한 후에는 장고에게 변화를 알려주기 위해, 반드시 위 2개의 명령문을 실행해주어야 합니다.
데이터베이스(즉 모델)에 대한 설명서라 할 수 있는 models.py와 앞서 보여드린 엑셀시트를 비교해보겠습니다.
각 필드들이 models.py의 Comment 안쪽 한줄 한줄에 대응되는 것을 확인하실 수 있습니다. Comment class 안에 있는 article, author, text... 들이 바로 각각의 필드 속성과 같습니다.
이때 처음보는 형태의 article = models.ForeignKey(Article, on_delete=models.CASCADE, related_name='comments')가 있는데요. 이 부분을 제외한 모든 부분은 Stage5에서 Article을 설명드렸을 때와 같습니다.
필드의 종류를 정리해드리겠습니다.
field 종류 | 용도 |
CharField | 짧은 텍스트(e.g 글 제목) |
TextField | 긴 텍스트(e.g 글 내용) |
DateTimeField | 날짜 |
ForeignKey | 다른 모델과의 관계 설명 (ex 코멘트는 게시글에 포함된다.) |
만약 전화번호부 모델을 만드는데, 친구 메모란을 긴글 텍스트로 필드를 설정하고 싶다면 memo = models.TextField()라는 줄을 추가해주시면 됩니다.
방금 생성한 Comment 모델을 관리자페이지에 연결하여 봅시다.
admin.pyfrom django.contrib import admin# 중략from facebook.models import Commentadmin.site.register(Comment)
Comment 모델이 잘 등록되었는지 확인하고 추후 실습에 도움이 되도록 글을 추가해봅시다.
아직까지 우리의 facebook에는 코멘트 보기부분이 존재하지 않습니다. 멋스러운 코멘트 리스트도 추가해볼까요?
detail_feed.html에 추가될 부분<div class="comment_list"><div class="comment"><span class="name">코멘트 글쓴이</span> 코멘트 내용</div><div class=“comment__date">코멘트 생성일 <a href="코멘트삭제주소"><img src="/static/ic_delete.png" height="16px"></a></div></div>
detail_feed.html<style>/* 이 밑으로는 코멘트와 관련된 스타일입니다. *//* 이 안에 둘러쌓인 글은 프로그램에 영향을 미치지 않는 메모입니다. */.comment_list {background-color: #f0f1f4;border-bottom: 1px solid #bcbdc3;padding-top: 0.1px;}.comment {background-color: #fff;border-radius: 30px;margin: 15px;padding: 15px;margin-bottom: 0;}.comment__date {margin: 0 15px;padding: 8px 15px;padding-bottom: 0px;font-size: 13px;}.name {font-weight: bold;color: #445994;}.form-wrapper {padding: 15px;}/* 똑같은 스타일을 적용하고 싶으면 ,를 입력해주면 됩니다. */.form-wrapper input,.form-wrapper textarea {border: 1px solid #ddd;width: 100%;padding: 5px;font-size: 14px;box-sizing: border-box;border-radius: 5px;margin-top: 2px;margin-bottom: 5px;}button {border: 1px solid #405ea3;background-color: #4967ad;color: #fff;font-weight: 500;font-size: 15px;padding: 3px 16px;border-radius: 2px;}</style>
추가한 스타일은 그동안 배운 내용을 응용해서 만들었습니다. 너비, 높이를 변경하거나 색을 변경하는 수준의 단순한 스타일만 사용되었으므로 코드를 천천히 살펴보면서 이해하시기 바랍니다.
각 스타일이 어떤 div 혹은 tag 요소에 적용되고 있는지 파악하고 값을 변경하며 style이 변화되는 모습을보는게 가장 좋은 방법입니다.
