Pre - 실습 코드 복사

반복적이거나 타이핑의 양이 많아 효율성을 저하시키는 코드를 모아 필요시 복사&붙여넣기할 수 있도록 준비하였습니다. 시간이 충분하다면 처음부터 끝까지 직접 타이핑하며 완성하는게 좋습니다. 주로 시간이 한정되어있는 스터디 중에 이용됩니다.
Stage 1 - 코멘트 모델링
코멘트 모델링
강의자료 7page 
models.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
Stage 2 - 살아있는 코멘트
코멘트 보기 부분 html 작성
강의자료 12page 
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>
강의자료 13page 
이미 기존 코드에 <style></style>이 있을 겁니다. 그 태그 밑에 또 새로운 <style></style>을 삽입해주세요. 삽입할 코드는 아래와 같습니다.
detail_feed.html의 style  부분
<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>
코멘트 쓰기 폼 만들기
강의자료 20page 
detail_feed.html에 추가될 부분
<div>
    <span>Comments</span>
    <form action="" method="POST">
        {% csrf_token %}
        <input type="text" name="author" placeholder="이름" /><br/>
        <input type="password" name="password" placeholder="비밀번호" /><br/>
        <textarea name="text" placeholder="코멘트 내용"></textarea>
        <button type="submit">등록</button>
    </form>
</div>
코멘트 쓰기 로직 연결
강의자료 24page 
views.py에 수정될 부분
def detail_feed(request, pk):
    article = Article.objects.get(pk=pk)
​
    if request.method == 'POST':  # new comment
        Comment.objects.create(
            article=article,
            author=request.POST['author'],
            text=request.POST['text'],
            password=request.POST['password']
        )
​
        return redirect(f'/feed/{ article.pk }')
​
    return render(request, 'detail_feed.html', {'feed': article})
Stage 3 - 배포 준비
배포를 위한 코드 수정
강의자료 29page 
ALLOWED_HOSTS = ['localhost', '127.0.0.1', '.pythonanywhere.com']
<meta name="viewport" content="width=device-width, user-scalable=no">
git 저장소 생성하고 저장하기
강의자료 31page 
.gitignore
*.pyc
*~
__pycache__
myvenv
venv
django_venv
django_env
db.sqlite3
/static
.DS_Store
Stage 4 - 배포/재배포 방법
python anywhere에서 배포하기
강의자료 42page 
wsgi.py
import os
import sys
​
path = '/home/자신의pythonanywhere이름/django_facebook'
if path not in sys.path:
    sys.path.append(path)
​
os.environ['DJANGO_SETTINGS_MODULE'] = 'main.settings'
​
from django.core.wsgi import get_wsgi_application
from django.contrib.staticfiles.handlers import StaticFilesHandler
application = StaticFilesHandler(get_wsgi_application())
STEP UP 2 - 타임라인에 댓글을 달고 배포하기
Stage 1 - 코멘트 모델링
Last updated 1 year ago