$$config title: MEME 기술서 keywords: - IT - 기술서 $$ # MEME 기술서 ## ? 개요 - 이미지 업로드 사이트 구현 ***
## ? 리포지터리 - [GITHUB](https://github.com/fmfu51/meme) ***
## ?️ 사용된 기술 ### • 버전관리 - GIT, GITHUB *** ### • 배포 - GITHUB *** ### • 개발 환경 ``` ?️- 아나콘다 - 파이참 - SQLyog - 크롬 - PIP - MariaDB - Windows 11 ``` *** ### • 서비스 환경 ``` ?️- MariaDB ``` *** ### • 기술 스택 ``` ?️- 파이썬 3 - 장고 4 - 장고 MTV - DRF - MariaDB - HTML, CSS, JS - 제이쿼리 - 테일윈드 - 부트스트랩 ``` ***
## ⚙️ 기능현황 | 기능| 구현 | 배포| 테스트 | | --- | -- | --- | --- | | 게시판 페이징 | ✔️ | ❌ | ✔️ | | 게시글 추천 | ✔️ | ❌ | ✔️ | | 제목, 내용, 태그 검색 | ✔️ | ❌ | ✔️ | | 댓글 작성 | ✔️ | ❌ | ✔️ | | 사진 업로드 | ✔️ | ❌ | ✔️ | | 글 수정, 삭제 | ✔️ | ❌ | ✔️ | | 글 작성 | ✔️ | ❌ | ✔️ | | 아이디 찾기 | ✔️ | ❌ | ✔️ | | 로그인, 로그아웃 | ✔️ | ❌ | ✔️ | | 회원가입 | ✔️ | ❌ | ✔️ | *** ## ? 요구사항 | 목록 | 화면명 | 요구사항 | 구현여부 | 비고 | | -- | --- | ---- | ---- | --- | | RQ-001 | 공통 | 네비게이션 관련 메뉴를 구성한다. 게시판과 홈 화면으로 이동할 수 있다.| ✔️ | | | RQ-002 | 공통 | 사이트의 이름과 로고가 네비바에 있다. | ✔️ | | | RQ-003 | 메인 화면 | 게시물리스트가 최신순으로 정렬되어있다. | ✔️ | | | RQ-004 | 게시판 | 네비바 우측에 검색바가 있다. | ✔️ | | | RQ-005 | 게시판 | 네비바 좌측에 글 작성 버튼이 있다. | ✔️ | | | RQ-006 | 게시글 | 게시물 하단에 추천 버튼이 있다. - 비동기 처리방식 | ✔️ | | | RQ-007 | 게시글 | 게시글 박스 아래에 댓글이 있다. 댓글 밑에 댓글 작성 폼이 있다. | ✔️ | | | RQ-008 | 로그인 | 로그인 폼이 있다.| ✔️ | | | RQ-009 | 회원가입 | 회원가입 폼이 있으며, 가입이 가능하다. | ✔️ | | | RQ-013 | 프로필 | 프로필을 업로드할 수 있으며, 프로필 이미지를 추가할 수 있다. | ✔️ | | ### • 회원 ``` - 회원가입이 가능하다. ``` ``` - 프로필 수정이 가능하다. ``` *** ### • 게시물 ``` - 회원은 본인의 글을 CRUD 할 수 있다. ``` ``` - 글 작성 시 이미지를 업로드 할 수 있다. ``` ``` - 작성한 회원의 프로필이미지가 노출된다. ``` *** ### • 해시태그 ``` - 글쓰기 작성 시 해시태그 입력이 가능하다. ``` *** ### • 댓글 ``` - 본인의 댓글을 CRUD 할 수 있다. ``` ***
## ⚙️ 기능 ### • 회원 ``` - 회원가입 ``` ``` - 프로필이미지 ``` ``` - 로그인 ``` ``` - 로그아웃 ``` ``` - 정보 수정 ``` *** ### • 게시물 ``` - 게시물 작성 ``` ``` - 게시물 조회 ``` ``` - 게시물 수정 ``` ``` - 게시물 삭제 ``` ### • 해시태그 ``` - 태그 작성 ``` ``` - 태그 수정 ``` ``` - 태그 조회 ``` ### • 댓글 ``` - 댓글 작성 ``` ``` - 댓글 조회 ``` ``` - 댓글 수정 ``` ``` - 댓글 삭제 ``` ***
## ? 주요 폴더 및 파일 ``` - accounts : 회원 앱 - articles : 프로젝트 - media : 동적으로 발생하는 정적 파일들을 담는 폴더 - static : 정적으로 발생하는 정적파일들을 담는 폴더 - tags : 태그 앱 - requirements : 의존성 - node_modules : node 패키지 - tailwind.config.js : 테일윈드 설정 ``` *** ## ? 배포 구조 ``` - 커밋, 푸시 ``` ***
## 모델링 ### • ERD ![graphviz](https://i.postimg.cc/mkbD1NBg/graphviz.png) *** ### • 소스코드 - article/model.py ``` import re from django.db import models # Create your models here. from django.urls import reverse from accounts.models import User from Tags.models import Tag class Article(models.Model): author = models.ForeignKey(User, on_delete=models.CASCADE, related_name='user') content = models.TextField(blank=True) image = models.ImageField(blank=True, upload_to='timeline_photo/%Y/%m/%d') reg_date = models.DateTimeField('등록날짜', auto_now_add=True) update_date = models.DateTimeField('갱신날짜', auto_now=True) like = models.ManyToManyField(User) tag_set = models.ManyToManyField(Tag, blank=True) def save(self, *args, **kwargs): super().save(*args, **kwargs) old_tags = self.tag_set.all() new_tags = self.extract_tag_list() delete_tags: list[Tag] = [] add_tags: list[Tag] = [] for old_tag in old_tags: if not old_tag in new_tags: delete_tags.append(old_tag) for new_tag in new_tags: if not new_tag in old_tags: add_tags.append(new_tag) for delete_tag in delete_tags: self.tag_set.remove(delete_tag) for add_tag in add_tags: self.tag_set.add(add_tag) def extract_tag_list(self) -> list[Tag, ...]: tag_name_list = re.findall(r"#([a-zA-Z\dㄱ-힣]+)", self.content) tag_list = [] for tag_name in tag_name_list: tag, _ = Tag.objects.get_or_create(name=tag_name) tag_list.append(tag) return tag_list def __str__(self): return self.content def get_absolute_url(self): return reverse("article:article_detail", args=[self.pk]) class Meta: ordering = ['-reg_date'] class Comment(models.Model): author = models.ForeignKey(User, on_delete=models.CASCADE) content = models.TextField(blank=True) reg_date = models.DateTimeField('등록날짜', auto_now_add=True) update_date = models.DateTimeField('갱신날짜', auto_now=True) article = models.ForeignKey(Article, null=True, blank=True, on_delete=models.CASCADE) ``` ***
## ?️ 기술 설명 ### • 메인페이지(게시물리스트) ![image](https://i.postimg.cc/GmYxQdvT/awefawef.jpg) #### - 템플릿 - templats/articles/article_list.html ```html {% extends 'layout.html' %} {% block content %}

{% if article_list %}

{% if article.image %} {% else %} 이미지없음 {% endif %}

{% else %} 게시물이 없습니다. {% endif %}

«
«
{{ page_number }}
{{ page_number }}
»
»

{% endblock %} ``` *** ### • 상세페이지 ![image](https://i.postimg.cc/pXQf7xsw/image.jpg) #### - 템플릿 - templats/articles/article_detail.html ```html {% extends 'layout.html' %} {% block content %}

{% if article.author.avatar %} {% else %} {% endif %} {{ article.author.name }}
{% if request.user == article.author %} 수정 삭제 {% endif %} {{ article.like.count }}　♥

{{ article.content }}
TAG -
{% for tag in article.tag_set.all %} #{{ tag_list }} {% endfor %}
{{ article.reg_date }} (수정 : {{ article.update_date }})

Comment

댓글작성

{% if article.comment_set.count > 0 %}

{% for comment in article.comment_set.all %}

{{ comment.content }} - {{ comment.author }}, {{ comment.reg_date }} {% if comment.update_date %} (수정:{{ comment.update_date }}) {% endif %} {% if request.user == comment.author %} 수정 삭제 {% endif %} {% endfor %}

{% endif %} {% endblock %}

{% block script %} {% endblock %} ``` *** ### • 회원가입 ![image](https://i.imgur.com/XkO9Pez.jpg#.YhWQVA02w8k.link) - 알고리즘 ![image](https://i.postimg.cc/6pN98fcJ/RO-2e9-G6-CNt-n-GVJRhq0-Bdu1-Es-DLXUIJ4-Dlj1he-L521-Gf-Y84591-Gtyi77m-Yxt-VV8-Gq-QWh-O3vt1-vw-WEqsmscn-Za8u-XDfr-HZq17-H.png) - join.html ```python {% extends "layout.html" %} {% load django_bootstrap5 %} {% block content %}

회원가입

{% endblock %} ``` - form.py ```python class JoinForm(UserCreationForm): def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) self.fields['email'].required = True self.fields['name'].required = True self.fields['username'].label = '아이디' self.fields['avatar'].widget.attrs['accept'] = 'image/png, image/gif, image/jpeg' class Meta(UserCreationForm.Meta): model = User fields = ['username', 'password1', 'password2', 'email', 'name', 'avatar'] def clean_email(self): email = self.cleaned_data.get('email') if email: qs = User.objects.filter(email=email) if qs.exists(): raise forms.ValidationError("이미 등록된 이메일입니다.") return email ``` *** ### • 게시물 등록 ![image](https://i.imgur.com/d9eIFoB.jpg#.YhWQ8WocPs4.link) - view.py ```python def article_create(request): if request.method == 'POST': form = ArticleForm(request.POST, request.FILES) if form.is_valid(): article = form.save(commit=False) article.author = request.user article.reg_date = timezone.now() article.save() return redirect('article:index') else: form = ArticleForm() context = {'form': form} return render(request, 'articles/article_form.html', context) ``` *** ### • 게시물 수정 ![image](https://i.postimg.cc/vmsL2kvq/2022-03-03-133021.jpg) - view.py ```python @login_required(login_url='accounts:login') def article_update(request, article_id): article = get_object_or_404(Article, pk=article_id) if request.user != article.author: messages.error(request, '수정 권한이 없습니다.') return redirect('article:detail', article_id=article.id) if request.method == "POST": form = ArticleForm(request.POST, request.FILES, instance=article) if form.is_valid(): article = form.save(commit=False) article.update_date = timezone.now() article.save() return redirect('article:detail', article_id=article.id) else: form = ArticleForm(instance=article) context = {'form': form} return render(request, 'articles/article_update.html', context) ``` *** ### • 게시물 삭제 - view.py ```python @login_required(login_url='accounts:login') def article_delete(request, article_id): article = get_object_or_404(Article, pk=article_id) if request.user != article.author: messages.error(request, '삭제 권한이 없습니다.') return redirect('article:detail', article_id=article.id) article.delete() return redirect('article:index') ``` *** ### • 댓글 작성 ![image](https://i.postimg.cc/x1yb8CK5/image.jpg) - view.py ```python def comment_create(request, article_id): article = get_object_or_404(Article, pk=article_id) if request.method == "POST": form = CommentForm(request.POST) if form.is_valid(): comment = form.save(commit=False) comment.author = request.user comment.reg_date = timezone.now() comment.article = article comment.save() return redirect('article:detail', article_id=article.id) else: form = CommentForm() context = {'form': form} return render(request, 'articles/comment_form.html') ``` *** ### • 댓글 수정 ![image](https://i.postimg.cc/25kLZDGD/image.jpg) - view.py ```python @login_required(login_url='accounts:login') def comment_update(request, comment_id): comment = get_object_or_404(Comment, pk=comment_id) if request.user != comment.author: messages.error(request, '댓글 수정 권한이 없습니다.') return redirect('article:detail', article_id=comment.article.id) if request.method == "POST": form = CommentForm(request.POST, instance=comment) if form.is_valid(): comment = form.save(commit=False) comment.update_date = timezone.now() comment.save() return redirect('article:detail', article_id=comment.article.id) else: form = CommentForm(instance=comment) context = {'form': form} return render(request, 'articles/comment_form.html', context) ``` *** ### • 댓글 삭제 - view.py ```python @login_required(login_url='accounts:login') def comment_delete(request, comment_id): comment = get_object_or_404(Comment, pk=comment_id) if request.user != comment.author: messages.error(request, '댓글 삭제 권한이 없습니다.') return redirect('article:detail', article_id=comment.article.id) else: comment.delete() return redirect('article:detail', article_id=comment.article.id) ``` *** ### • 게시물 추천 ![image](https://i.postimg.cc/25kLZDGD/image.jpg) - view.py ```python ``` ***
## ?️ 기능테스트 ### • 회원 ``` - 회원가입 : 2022-02-23 - 프로필이미지 : 2022-02-23 - 로그인 : 2022-02-23 - 로그아웃 : 2022-02-23 - 정보 수정 : 2022-02-23 ``` *** ### • 게시물 ``` - 게시물 작성 : 2022-02-23 - 게시물 조회 : 2022-02-23 - 게시물 수정 : 2022-02-23 - 게시물 삭제 : 2022-02-23 ``` ### • 해시태그 ``` - 태그 작성 : 2022-02-23 - 태그 수정 : 2022-02-23 - 태그 조회 : 2022-02-23 ``` ### • 댓글 ``` - 댓글 작성 : 2022-02-23 - 댓글 조회 : 2022-02-23 - 댓글 수정 : 2022-02-23 - 댓글 삭제 : 2022-02-23 ```