• 목표 :

✔︎ Django를 이용한 AI Image 갤러리형 블로그 개발

✔︎ 유저들이 Stable Diffusion API를 통해 AI Image 생성후 업로드 및 공유하며 AI Image와 관련 정보 공유

• 배경:

✔︎ Stable Diffusion, Dalle 등 AI Image의 기술의 발달

✔︎ AI 이미지에 대한 관심과 AI이미지용 블로그 주제가 많이 없다고 생각되어 해당 주제로 블로그 개발

• CRUD, 로그인/회원가입, 댓글, 이미지 업로드, 조회수 기능 구현
• 블로그 포스팅
• 댓글 기능
• 태그 및 카테고리 분류

• UI 스타일링
• 클래스형 뷰 및 함수형 뷰 중 택 개발
• 데이터 베이스 구조 설계
• 모놀로그식 장고

• 0단계: Django Admin을 이용한 게시글 읽기 및 메인페이지 구현하기
• 1단계: 블로그 CRUD 기능 구현하기
• 2단계: 로그인/회원가입 기능을 이용하여 블로그 구현하기
• 3단계: 블로그 기능 외 추가 기능 작성 및 배포

• 4개의 앱(main, accounts, blog(메인 갤러리형 게시판), boardapp(보조형 자유게시판))으로 구성

• 클래스뷰 및 함수형뷰

  • 클래스 뷰는 제너릭뷰, 믹스인뷰을 사용할 수 있는 '확장성'과 '재사용성'이라는 장점으로 주요 앱(main, accounts,blog) 는 클래스형으로 작성
  • 함수형 뷰는 '간결'하고 '직관'적인 특징으로 간편하게 쓰일 수있는 보조형 자유게시판에서 작성

• 포스트 기능으로 좋아요, 태그, 대댓글, 카테고리 등을 사용 함

  • 댓글은 메인 갤러리형 블로그는 대댓글형
  • 보조 자유 게시판은 일반 댓글형 구현

[FE]:

[BE]:

[API]:

[ENV]:

• 부트스트랩은 Startbootstrap에서 테마를 따옴
• 특이사항으로는 tawk.to라는 실시간 채팅솔루션과 StableDiffusion API로 이미지 생성 가능하게 함(배포 버젼에서는 현재는 토큰수 소진으로 생성이 안되는 상황)
• Github에 업로드한 레파지토리를 AWS lightsail에 clone 하여 배포

• 프로젝트 구조는 아래와 같이 accounts, blog, boardapp, main 4개로 구성됨

📦mysite
 ┣ 📂accounts
 ┃ ┣ 📜models.py
 ┃ ┣ 📜urls.py
 ┃ ┣ 📜views.py
 ┣ 📂blog
 ┃ ┣ 📜models.py
 ┃ ┣ 📜urls.py
 ┃ ┣ 📜views.py
 ┣ 📂boardapp
 ┃ ┣ 📜models.py
 ┃ ┣ 📜urls.py
 ┃ ┣ 📜views.py
 ┣ 📂main
 ┃ ┣ 📜urls.py
 ┃ ┣ 📜views.py
 ┣ 📂templates
 ┃ ┣ 📂accounts
 ┃ ┣ 📂blog
 ┃ ┣ 📂boardapp
 ┃ ┣ 📂main
 ┣ 📂static
 ┃ ┣ 📂css
 ┃ ┣ 📂js
 ┃ ┃ ┗ 📜scripts.js
 ┣ 📂media
 ┃ ┣ 📂blog
 ┃ ┃ ┣ 📂images
 ┣ 📂tutorialdjango
 ┃ ┣ 📜settings.py
 ┃ ┣ 📜urls.py
 ┗ 📜manage.py

• main

• accounts

• boardapp

• blog

• 메인 페이지
• 설명 페이지
• 이미지생성 페이지

• 게시판형 블로그 페이지

• 갤러리형 블로그 페이지

• 로그인/회원가입 페이지 등

• users, Post, Comment, Tag, PostLikes, PostTags, UserProfile, Board, BoardComment, Boardlikes(총 10개의 테이블)

• Post와 Board의 id 필드는 users 테이블의 id 필드와 연결
• 다대다 관계 : PostLikes ↔ (Post 와 User) / PostTags ↔ (Post 와 Tag)
• 다대일 관계 : BoardComment - Board / Boardlikes - User

📌 메인페이지 구현

• 페이지 제목과 블로그 입장하기 버튼
• 회원가입/로그인 버튼
• 회원가입 버튼을 클릭하면 회원가입 페이지로 이동
• 로그인 버튼을 클릭하면 로그인 페이지로 이동

📌 회원가입 / 로그인 기능 구현

• 회원가입을 할 수 있는 페이지
• 입력받는 값은 id, password
• 로그인을 할 수 있는 페이지
• 입력받는 값은 id, password

📌 게시글 작성 기능 구현

• 로그인을 한 유저만 해당 기능을 사용 할 수 있음
• 게시글 제목과 내용을 작성 할 수 있는 페이지가 있음
• 작성한 게시글이 저장되어 게시글 목록에 보여야 함
• 사진 업로드가 가능하도록 함
• 게시글 조회수가 올라갈 수 있도록 함

📌 게시글 목록 기능 구현

• 모든 사용자들이 게시한 블로그 게시글들의 제목을 확인 함

📌 게시글 상세보기 기능 구현

• 게시글의 제목/내용을 보는 기능

📌 게시글 검색 기능 구현

• 주제와 태그에 따라 검색이 가능
• 검색한 게시물은 최신순에 따라 정렬

📌 게시글 수정 기능 구현

• 로그인을 한 유저만 해당 기능 사용 가능
• 본인의 게시글이 아니라면 수정이 불가능
• 게시글의 제목 또는 내용을 수정 하는 기능
• 수정된 내용은 게시글 목록보기/상세보기에 반영

📌 게시글 삭제 기능 구현

• 로그인을 한 유저만 해당 기능을 사용 할 수 있음
• 본인의 게시글이 아니라면 수정이 불가
• 게시글을 삭제하는 기능
• 삭제를 완료한 이후에 게시글 목록 화면으로 돌아감
• 삭제된 게시글은 게시글 목록보기/상세보기에서 접근이 불가

📍 회원 관련 추가 기능(UI 직접 구현 필요)

• 비밀번호 변경기능
• 프로필 수정
• 닉네임(Username) 추가

📍 댓글 기능(UI 직접 구현 필요)

• 댓글 추가
• 댓글 편집/삭제
• 대댓글

📍 부가 기능

• 정적 파일 모으기 (collectstatic)

# settings.py

# 정적 파일 기본 URL
STATIC_URL = '/static/'

# 추가적인 정적 파일 디렉토리 (개발 환경에서 사용)
STATICFILES_DIRS = [
    BASE_DIR / 'static',
]
#(운영환경에서 사용)
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

서버에서 python manage.py collectstatic 명령 입력

• 공지사항 기능
  • 관리자만 관리자페이지에서 설정 가능
  • 모델에서 is_notice 설정
  • views.py에서 get_context_data 메서드를 사용하여 공지사항과 일반 게시글을 분리

# models.py
class Post(models.Model):
# <생략>
    is_notice = models.BooleanField(default=False, verbose_name="공지사항 여부")
# views.py
class BlogListView(ListView):
# <생략>
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        notice_list = Post.objects.filter(is_notice=True).order_by('-created_at')
        regular_post_list = Post.objects.filter(is_notice=False).order_by('-created_at')
# <생략> 

• Tawk API를 활용한 실시간 채팅기능(About 페이지)

🎈 Link : https://www.tawk.to/

• Stable Diffusion을 활용한 AI 이미지 생성 화면(Generator 페이지)

🎈 Link : https://stablediffusionapi.com/docs/stable-diffusion-api/text2img

📍 (선택) AWS Lightsail로 배포

🎈 Link : https://aws.amazon.com/ko/lightsail/

• RDBMS Postgre를 사용하여 Django와 연결후 post 쿼리 조회

# settings.py
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'tutorialdjango',
        'USER': 'postgres',
        'PASSWORD': '1234',
        'HOST': 'localhost',
        'PORT': '5432',
    }
}

🛠IntegrityError

• 에러명: 'IntegrityError'
• 문제상황: 모델 필드가 null 값을 허용 안함
• 해결방안: 해당 필드에 'null=True' 옵션 추가

# models.py
summary = models.TextField(null=True)

💡 클래스형 뷰 목록

• 제너릭뷰

  • ListView: 게시목록을 보여 줌
  • DetailView: 게시물 상세 정보 보여 줌
  • CreateView: 새로운 객체를 생성
  • UpdateView: 기존 객체를 수정
  • DeleteView: 객체를 삭제할 때 사용
  • TemplateView: 정적 페이지를 렌더링

• 믹스인(Mixins)

  • LoginRequiredMixin: 사용자가 로그인 해야만 접근 할 수 있는 뷰
  • UserPssesTextMixin: 사용자가 특정 텍스트를 통과해야만 뷰에 접근

💡 django-widget-tweaks

• Django의 폼 필드의 HTML을 보다 쉽게 제어할 수 있게 해주는 라이브러리 CSS 클래스 추가, 속성 변경 가능

{% load widget_tweaks %}
<form method="post">
    {% csrf_token %}
</form>

{% render_field form.field_name class="form-control" %} # 필드 특정 조건에 따라 렌더링하고 싶을 때 사용
{{ field|add_class:"form-control" }} # | 기호는 필터를 의미 이 필터는 지정된 필드에 클래스를 추가

본 프로젝트에서는 두 번째 방식으로 클래스에 부트스트랩 클래스를 추가하여 디자인 하였음

💡 대댓글 구현 방식

• Comment 모델의 parent 필드를 통해 구현
• 사용자가 B라는 댓글을 달 때 A의 대댓글로 지정하려는 경우, A라는 대댓글 ID는 parent_pk 파라미터로 전달
• CommentCreateView 에서 이를 확인하여 B 댓글의 부모댓글 'parent' 댓글로 A를 설정
• 이렇듯 parent 필드를 통해 부모-자식간의 관계가 형성됨
• 템플릿에서는 주댓글에 대한 루프를 돌면서 replies 관계 형성

{% for reply in comment.replies.all %}
{% endfor %}

• Django의 편리함과 Python의 강력함을 느낄 수 있었던 유익한 프로젝트였음
• 스프링부트 자바 강의를 조금씩 듣고 있는데 많은 경험이 있는건 아니지만 따른 프레임 워크에 비해 효율적이고 빠르게 게시판을 만들 수 있음을 느낌
• 함수형과 클래스형 뷰 코드를 모두 사용해보기 위해 앱 개수가 늘어나다 보니 URL이 복잡해졌지만, 둘의 차이점에 대해 알 수 있었음
• 장고의 다양한 기능과 코드 방식에 대해 깊이 연구 할 수 있는 기회가 됨
• AWS 배포를 통해 아마존 웹 서비스를 처음 활용 해볼 수 있는 좋은 기회가 됨

📖 Velog : https://han.gl/btewiM

❤️ EST soft : 대상 수상 프로젝트(https://url.kr/br6yg7)