Django, Vue, GraphQL을 이용한 블로그 프로젝트 2

cathy·2024년 5월 2일

Projects

목록 보기
2/10
post-thumbnail

Step2. Django 관리자 생성

장고 프로젝트의 기초가 마련되었다. 블로그의 핵심 로직을 만들어보자. 이번 단계에서는 블로그 콘텐츠를 작성하고 관리하기위한 데이터 모델과 관리 구성을 만든다.

Django 블로그 애플리케이션 생성

블로그의 기능들을 별도의 Django 애플리케이션으로 분리해야한다. startapp 관리명령을 사용하여 애플리케이션을 생성하자.

(venv) yeryeongseo@seoyelyeong-ui-MacBookPro back_end % python3 manage.py startapp blog

이제 blog/ 디렉토리가 생성되었고, backend/폴더에 있는 파일과 유사한 여러 파일이 포함되었다.
이제 backend/ 프로젝트 앱에서 일부 변경 및 추가를 수행해야한다.

Django 블로그 애플리케이션 활성화

장고 애플리케이션을 생성하면 프로젝트에서 기본적으로 사용 할 수 없다. 프로젝트가 새로운 애플리케이션을 알 수 있도록 설치된 애플리케이션 목록에 추가해야한다. backend/settings.py 에서 INSTALLED_APPS 변수를 업데이트하자.

vi편집기를 이용하여 'blog.apps.BlogConfig'를 추가해주었고, 이를 통해 Django가 해당 앱을 알게된다. 앱의 설정 클래스를 명시적으로 지정하면 INSTALLED_APPS가 해당 앱에 대한 데이터 모델 및 URL 패턴과 같은 정보를 검색하는데 도움이 된다.

Django 블로그 데이터 모델 생성

이제 장고는 블로그 앱을 인식 할 수 있으므로 데이터 모델을 만들 수 있다. 세 가지 모델을 만들어볼것이다.

  • Profile : 블로그 사용자에 대한 추가 정보 저장
  • Tag : 블로그 게시물을 그룹화하는 카테고리
  • Post : 각 블로그 게시물의 콘텐츠 및 메타데이터 저장

각 모델을 blog/models.py에 추가할것이다. 모든 모델은 Django의 models.Model 클래스를 상속한다.

Profile 모델

프로필 모델은 사용자 정보를 포함하는 세가지 필드를 가진다.

  • user - 해당 프로필이 연관된 장고 사용자와의 1:1 연결
  • website - 사용자에 대해 더 자세히 알아볼 수 있는 선택적인 URL
  • bio - 사용자에 대한 짧은 텍스트로 선택적

blog/models.py를 열고 settings 모듈을 가져오는 import문을 추가하자.

.str()메소드는 만든 프로필 객체가 관리자 사이트에서 사용자 이름을 표시하게한다.

Tag 모델

블로그 게시물을 작성 할 때 해당 게시물에 태그를 추가 할 수 있다. 이러한 태그를 사용하면 독자가 이후에 특정 태그로 게시물을 필터링 할 수 있다. Tag 모델에는 name 이라는 하나의 필드만 있으며, 이 필드는 태그의 짧고 고유한 이름을 저장한다.

Post 모델

블로그의 핵심인 게시물 모델이다. Post 모델은 실제 블로그 게시물을 나타내며 작성한 내용과 추가한 메타 정보를 포함하며 다음과 같은 여러 필드가 있다.

일반적으로 가장 최근 게시물이 먼저 표시되므로 정렬도 게시된 날짜를 기준으로 가장 최근것이 먼저 표시되도록 설정한다. 이제 Post 모델도 만들어보자.

author(작성자)에 대한 on_delete=models.PROTECT 인수는 게시물이 있는 작성자를 실수로 삭제하지 않도록한다. Tag에 대한 ManyToManyField 관계를 사용하면 게시물을 영구적으로, 여러 태그와 연결 할 수 있다. 또한 각 태그는 여러 게시물에 연결 될 수 있다.

모델 관리자 구성 생성

모델이 설정되었으니 장고에게 이 모델들이 어떻게 관리자 인터페이스에 표시되어야하는지 알려주어야한다. blog/admin.py에서 Django의 admin 모듈과 모델들을 가져온다.

프로펠과 태그에 대한 모델 관리자 클래스 생성 및 등록

프로필과 태그 모델에 대한 관리자 클래스를 생성하고 등록한다. 단순히 모델을 지정하면된다.

게시물에 대한 모델 관리자 클래스 생성 및 설정

게시물은 많은 정보를 포함하므로 인터페이스를 혼잡하게 만들지 않으면서 특정 정보만 표시하는것이 도움된다. 이를 위해 게시물에 대한 관리자 클래스를 생성한다. 이 클래스에는 특정 변수들이 사용되며, 이를 통해 게시물의 상세 정보를 사용자 정의 할 수 있다.

  • list_display : 각 게시물에 대한 정보만을 표시한다.이를 통해 게시물 목록이 보다 간결히 표시되고 사용자가 필요한 정보를 쉽게 확인 할 수 있다.
  • list_filter : 게시물 목록을 게시된 게시물 또는 게시되지 않은 게시물, 게시 날자에 따라 필터링 할 수 있도록한다. 이를 통해 특정 기준에 따라 게시물을 신속하게 찾을 수 있다.
  • list_editable : ID를 제외한 모든 표시된 필드를 편집 할 수 있도록 허용한다. 이를 통해 관리자가 게시물 목록 페이지에서 직접 필요한 정보를 수정 할 수 있다.
  • search_fields : 제목, 부제목, 슬러그 및 본문을 사용하여 게시물을 검색 할 수 있도록 허용한다. 이를 통해 사용자는 특정 키워드나 문구를 포함하는 게시물을 빠르게 찾을 수 있다.
  • prepopulated_fields : 슬러그 필드를 제목과 부제목을 사용하여 미리 채운다. 이를 통해 슬러그 필드를 자동으로 채우고 사용자가 수동으로 입력하는 번거로움을 줄일 수 있다.
  • date_hierarchy : 모든 게시물의 게시 날짜를 사용하여 브라우저에서 탐색 가능 한 날짜 계층을 생성한다. 이를 통해 사용자는 특정 날짜 범위에 해당하는 게시물을 빠르게 찾을 수 있다.
  • save_on_top : 목록 상단에 변경 사항을 저장하는 버튼을 표시한다. 이를 통해 사용자는 목록의 다른 부분으로 이동하지 않고도 변경사항을 즉시 저장 할 수 있다.

모델 마이그레이션 생성 및 적용

Django는 블로그 내용을 관리하고 유지 할 수 있는 모든 정보를 가지고있지만 이러한 변경 사항을 지원하는 데이트베이스를 업데이트해야한다. 이제 모델들에 대한 마이그레이션을 생성하고 실행한다. makemigrations 명령을 사용하여 마이그레이션을 생성하고 migrate 명령을 사용하여 이를 실행한다.

(venv) yeryeongseo@seoyelyeong-ui-MacBookPro back_end % python3 manage.py makemigrations
(venv) yeryeongseo@seoyelyeong-ui-MacBookPro back_end % python3 manage.py migrate

이제 중지했던 장고 서버를 다시 시작해 관리자 페이지에 다시 접속한다.
태그, 프로필 및 게시물 목록에 대한 링크와 추가/편집이 가능한 링크가 있다. 이제 직접 게시물을 추가하고 편집하여 관리자 인터페이스가 어떻게 반응하는지 보자.

Step 3 Graphene-Django 설정

GraphQL을 사용하면 필요한 데이터만 검색 할 수 있으므로 RESTful API에서 일반적인 대용량 응답과 비교하여 사용 할 수 있다. 이는 데이터를 투영하는데 유연성을 제공하므로 GraphQL API를 제공하는 서비스의 로직은 변경하지않고 새로운 방식으로 데이터를 검색 할 수 있다. 지금까지의 작업물을 GraphQL API에 통합하기위해 Graphene-Django를 사용할것이다.

Graphene-Django 설치

먼저 프로젝트의 requirements 파일에 추가한다.
그런 다음 업데이트된 requirments 파일을 사용하여 설치한다.

(venv) yeryeongseo@seoyelyeong-ui-MacBookPro back_end % python3 -m pip install -r requirements.txt

설치가 잘 된것을 확인 할 수 있다. 이제 settings.py의 INSTALLED_APPS 변수에 "graphene_django"를 추가하여 프로젝트의 settings.py 모듈에서 장고가 이를 찾을 수 있도록 한다.

위와 같이 추가해주었고, Graphene-Django를 작동시키기위해 몇 가지 구성을 수행한다. settings.py를 업데이트하여 프로젝트가 GraphGL 정보를 찾을 위치를 알 수 있도록 하고, GraphQL API 및 GraphiQL(탐색 가능한 GraphQL 인터페이스)을 제공하기 위해 URL 패턴을 추가한다. GRAPHENE 설정은 프로젝트가 GraphQL 스키마를 찾을 특정 위치를 구성한다. settings.py에서 스키마를 blog.shcema.schema Python 경로로 지정하면된다.

GraphQL 및 GraphiQL을 위한 URL 패턴 추가

이제 backend/urls.py에 새 URL 패턴을 추가해야한다. URL을 Graphene-Django의 GraphQLView로 지정한다.

graphiql = True 인수는 Graphene-Django에게 GraphiQL 인터페이스를 사용 할 수 있게한다.

GraphQL 스키마생성

스키마는 각각 특정 Django 모델과 중요한 유형의 쿼리를 해결하는 방법을 지정하는 몇 가지 클래스로 구성된다.


back_end/blog/shcema.py 모듈을 생성하여 Graphene-Django의 DjangoObjectType, 블로그 모델 및 get_user_model()을 가져온다.


이제 각 모델 및 사용자 모델에 대한 해당 클래스를 만든다. 각 클래스는 GraphQL 유형을 나타내므로 이름이 Type으로 끝나야한다.

이제 다시 서버에 연결하고, 블로그에 직접 글을 등록해보자..

세 개의 예시 포스트를 등록해보았다.

Graphene-Django 설치하기

프로젝트의 requirements 파일에 Graphene-Django를 추가해야한다.

(venv) yeryeongseo@seoyelyeong-ui-MacBookPro backend % vi requirements.txt

코드를 입력하세요

(venv) yeryeongseo@seoyelyeong-ui-MacBookPro backend % cat requirements.txt
Django==5.0.2
graphene-django==3.2.0

이제 프로젝트의 settings.py 모듈에 INSTALLED_APPS 변수에 "graphene_django"를 추가하여 Django가 그것을 찾을 수 있도록한다.

Graphene-Django 구성하기

settings.py를 업데이트하여 프로젝트가 GraphQL 스키마를 찾는 위치를 알 수 있도록 한다.

back_end/backend/settings.py
# ...

GRAPHENE = {
  "SCHEMA": "blog.schema.schema",
}

0개의 댓글