Pre - 실습 코드 복사
반복적이거나 타이핑의 양이 많아 효율성을 저하시키는 코드를 모아 필요시 복사&붙여넣기할 수 있도록 준비하였습니다. 시간이 충분하다면 처음부터 끝까지 직접 타이핑하며 완성하는게 좋습니다. 주로 시간이 한정되어있는 스터디 중에 이용됩니다.

Stage 1 - 코멘트 모델링

코멘트 모델링

강의자료 7page

models.py에 추가될 부분
1
# 코멘트 모델
2
class Comment(models.Model):
3
article = models.ForeignKey(Article, on_delete=models.CASCADE, related_name='comments')
4
author = models.CharField(max_length=120)
5
text = models.TextField()
6
password = models.CharField(max_length=120)
7
created_at = models.DateTimeField(auto_now_add=True)
8
9
def __str__(self):
10
return self.text
Copied!

Stage 2 - 살아있는 코멘트

코멘트 보기 부분 html 작성

강의자료 12page

detail_feed.html에 추가될 부분
1
<div class="comment_list">
2
<div class="comment"><span class="name">코멘트 글쓴이</span> 코멘트 내용</div>
3
<div class="comment__date">코멘트 생성일 <a href="/코멘트삭제주소"><img src="/static/ic_delete.png" height="16px"></a></div>
4
</div>
Copied!

강의자료 13page

이미 기존 코드에 <style></style>이 있을 겁니다. 그 태그 밑에 또 새로운 <style></style>을 삽입해주세요. 삽입할 코드는 아래와 같습니다.
detail_feed.html의 style 부분
1
<style>
2
/* 이 밑으로는 코멘트와 관련된 스타일입니다. */
3
/* 이 안에 둘러쌓인 글은 프로그램에 영향을 미치지 않는 메모입니다. */
4
.comment_list {
5
background-color: #f0f1f4;
6
border-bottom: 1px solid #bcbdc3;
7
padding-top: 0.1px;
8
}
9
10
.comment {
11
background-color: #fff;
12
border-radius: 30px;
13
margin: 15px;
14
padding: 15px;
15
margin-bottom: 0;
16
}
17
18
.comment__date {
19
margin: 0 15px;
20
padding: 8px 15px;
21
padding-bottom: 0px;
22
font-size: 13px;
23
}
24
25
.name {
26
font-weight: bold;
27
color: #445994;
28
}
29
30
.form-wrapper {
31
padding: 15px;
32
}
33
34
/* 똑같은 스타일을 적용하고 싶으면 ,를 입력해주면 됩니다. */
35
.form-wrapper input,
36
.form-wrapper textarea {
37
border: 1px solid #ddd;
38
width: 100%;
39
padding: 5px;
40
font-size: 14px;
41
box-sizing: border-box;
42
border-radius: 5px;
43
margin-top: 2px;
44
margin-bottom: 5px;
45
}
46
47
button {
48
border: 1px solid #405ea3;
49
background-color: #4967ad;
50
color: #fff;
51
font-weight: 500;
52
font-size: 15px;
53
padding: 3px 16px;
54
border-radius: 2px;
55
}
56
</style>
Copied!

코멘트 쓰기 폼 만들기

강의자료 20page

detail_feed.html에 추가될 부분
1
<div>
2
<span>Comments</span>
3
<form action="" method="POST">
4
{% csrf_token %}
5
<input type="text" name="author" placeholder="이름" /><br/>
6
<input type="password" name="password" placeholder="비밀번호" /><br/>
7
<textarea name="text" placeholder="코멘트 내용"></textarea>
8
<button type="submit">등록</button>
9
</form>
10
</div>
Copied!

코멘트 쓰기 로직 연결

강의자료 24page

views.py에 수정될 부분
1
def detail_feed(request, pk):
2
article = Article.objects.get(pk=pk)
3
4
if request.method == 'POST': # new comment
5
Comment.objects.create(
6
article=article,
7
author=request.POST['author'],
8
text=request.POST['text'],
9
password=request.POST['password']
10
)
11
12
return redirect(f'/feed/{ article.pk }')
13
14
return render(request, 'detail_feed.html', {'feed': article})
Copied!

Stage 3 - 배포 준비

배포를 위한 코드 수정

강의자료 29page

1
ALLOWED_HOSTS = ['localhost', '127.0.0.1', '.pythonanywhere.com']
Copied!
1
<meta name="viewport" content="width=device-width, user-scalable=no">
Copied!

git 저장소 생성하고 저장하기

강의자료 31page

.gitignore
1
*.pyc
2
*~
3
__pycache__
4
myvenv
5
venv
6
django_venv
7
django_env
8
db.sqlite3
9
/static
10
.DS_Store
Copied!

Stage 4 - 배포/재배포 방법

python anywhere에서 배포하기

강의자료 42page

wsgi.py
1
import os
2
import sys
3
4
path = '/home/자신의pythonanywhere이름/django_facebook'
5
if path not in sys.path:
6
sys.path.append(path)
7
8
os.environ['DJANGO_SETTINGS_MODULE'] = 'main.settings'
9
10
from django.core.wsgi import get_wsgi_application
11
from django.contrib.staticfiles.handlers import StaticFilesHandler
12
application = StaticFilesHandler(get_wsgi_application())
Copied!
Last modified 3yr ago