Stage 1 - 코멘트 모델링

코멘트 모델링

설명

Stage5에서 뉴스피드 관련 모델인 Article을 만들 때 배웠지만 간단히 말해, Database를 만드는 작업이라 설명드렸습니다. 보존하고 싶은 데이터를 체계적으로 정리해두는게 목적이었죠.

만들고자 하는 코멘트 모델의 엑셀 버전

이번에는 코멘트 모델을 함께 만들어보겠습니다.

실습

1. facebook/models.py 파일을 열어서 아래의 함수를 추가합니다.

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. 터미널에서 python manage.py makemigrations 실행, 이어서 python manage.py migrate실행합니다.

모델 관련 작업을 한 후에는 장고에게 변화를 알려주기 위해, 반드시 위 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 모델을 관리자페이지에 연결하여 봅시다.

실습

1. facebook/admin.py를 실행한 후 다음과 같이 설정합니다.

admin.py
from django.contrib import admin
# 중략
from facebook.models import Comment
admin.site.register(Comment)

2. http://127.0.0.1:8000/admin 접속하여 확인

관리자모드에서 Comment 모델에 글 추가해보기

Comment 모델이 잘 등록되었는지 확인하고 추후 실습에 도움이 되도록 글을 추가해봅시다.

실습

1. 추가 버튼을 클릭

2. 3~4개의 글을 추가해봅니다.

코멘트 보기 부분 html 작성

아직까지 우리의 facebook에는 코멘트 보기부분이 존재하지 않습니다. 멋스러운 코멘트 리스트도 추가해볼까요?

실습

1. templates/detail_feed.html 파일을 열어 밑에 다음 내용을 추가합니다.

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>

2. 새로고침하여 중간 결과를 확인합니다.

3. <style></style> 아래에 아래 스타일 태그를 하나 더 추가합니다.

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>

4. 새로고침하여 중간 결과를 확인합니다.

5. 스타일을 수정하여 불필요 여백을 삭제해줍니다.

이해하기

결과

추가한 스타일은 그동안 배운 내용을 응용해서 만들었습니다. 너비, 높이를 변경하거나 색을 변경하는 수준의 단순한 스타일만 사용되었으므로 코드를 천천히 살펴보면서 이해하시기 바랍니다.

각 스타일이 어떤 div 혹은 tag 요소에 적용되고 있는지 파악하고 값을 변경하며 style이 변화되는 모습을보는게 가장 좋은 방법입니다.