블로그는 create, read, update, delete 작업을 포함한다. 이 프로젝트에서는 Django로 CRUD 작업을 수행하고 블로그 데이터에 대한 GraphQL API를 제공하는데 중점을 둔다. Vue는 반응형 데이터 바인딩과 관리하기 쉬운 컴포넌트로 인해 동적 인터페이스를 쉽게 생성 할 수 있다. 또한 GraphQL API 데이터를 처리하므로 Vue Apollo 플러그인을 활용 할 수 있다.
🌵 목표
1. Django 모델을 GraphQL API로 변환
2. Django 서버와 Vue 애플리케이션 동시 실행
3. Django 관리자로 블로그 게시물 관리
4. Vue에서 GraphGL API를 사용하여 브라우저에서 데이터 표시
작성자는 여러개의 게시물 작성 가능하다.
게시물에는 여러개의 태그가 있을 수 있다.
🍄 Project Overview
⚒️ 💻 environment & tools : macOS, Python IDLE, terminal
- Backend - Djanggo
---(GraphQL)--- - Frontend - Vue.js 3️⃣
Step 1. 개발환경 구축
yeryeongseo@seoyelyeong-ui-MacBookPro Documents % mkdir dvg/
yeryeongseo@seoyelyeong-ui-MacBookPro Documents % cd dvg/Django-Vue-GraphQL의 약어인 dvg/라는 새 프로젝트 디렉토리를 생성했다. 이는 프로젝트 코드를 구성한 디렉토리이다.
yeryeongseo@seoyelyeong-ui-MacBookPro dvg % mkdir back_end/
yeryeongseo@seoyelyeong-ui-MacBookPro dvg % cd back_end/프론트엔드 및 백엔트 코드를 완전히 분리 할 것이므로 프로젝트 디렉토리 내에 백엔드 디렉토리를 생성했다.
Django 설치
yeryeongseo@seoyelyeong-ui-MacBookPro back_end % python3 -m venv venv
yeryeongseo@seoyelyeong-ui-MacBookPro back_end % source venv/bin/activate
(venv) yeryeongseo@seoyelyeong-ui-MacBookPro back_end %
파이썬의 내장 venv 모듈을 사용하여 venv라는 이름의 가상 환경을 만들고 활성화한다. 프롬포트 앞의 (venv)는 가상환경이 성공적으로 활성화되었음을 나타낸다.
이제 back_end/디렉토리에 파일을 생성하고 첫 번째 요구사항을 정의해본다.
(venv) yeryeongseo@seoyelyeong-ui-MacBookPro back_end % echo "Django==5.0.2" > requirements.txt
(venv) yeryeongseo@seoyelyeong-ui-MacBookPro back_end % python -m pip install -r requirements.txt
이제 Django 프로젝트를 생성 할 준비가 되었다.
Django 프로젝트 생성
(venv) yeryeongseo@seoyelyeong-ui-MacBookPro back_end % django-admin startproject backend .이때 마지막 점(.)을 빠뜨리지 않도록 주의해야한다. 점을 추가하면 장고가 백엔드 프로젝트에 중첩된 프로젝트 디렉토리를 만들지 않는다.
현재 디렉토리의 구조는 다음과 같다.
dvg/
└── back_end/
├── manage.py
├── requirements.txt
└── backend/
├── __init__.py
├── asgi.py
├── settings.py
├── urls.py
└── wsgi.py
Django 마이그레이션 실행
특정 내용을 추가하기 전에 Django의 초기 마이그레이션을 실행해야한다.
(venv) yeryeongseo@seoyelyeong-ui-MacBookPro back_end % python3 manage.py migrate
위의 그림처럼 마이그레이션을 실행하면 각각의 마이그레이션에 대해 OK가 표시된 긴 목록이 나타난다. Django 마이그레이션을 실행하면 db.sqlite3 이라는 SQLite 파일이 생성된다. 이 파일은 프로젝트의 데이터베이스다. 즉 프로젝트의 데이터를 저장하며, 이 작업 중 생성하는 모든 블로그 게시물은 이 파일에 저장된다.
Super User 생성
이제 데이터베이스가 준비되었으므로 슈퍼유저를 생성 할 수 있다. 이 슈퍼유저로 나중에 Django 관리자 인터페이스에 로그인 할 수 있다. createsuperuser 관리 명령을 사용해 하나를 생성해본다.
(venv) yeryeongseo@seoyelyeong-ui-MacBookPro back_end % python3 manage.py createsuperuser
createsuperuser 관리 명령을 실행하면 사용자 이름, 이메일, 비밀번호를 설정하는 프롬포트가 표시된다. 이 필드에 본인의 데이터를 입력하고 기억해야한다. 이 인증정보는 Django 관리자 인터페이스에 로그인하는데 필요하다.
이제 Django 애플리케이션이 준비되었으니 장고 개발 서버를 시작하고 브라우저에서 확인해보자. 기본적으로 포트 8000번에서 runserver 관리 명령을 사용하여 서버를 시작한다.
(venv) yeryeongseo@seoyelyeong-ui-MacBookPro back_end % python3 manage.py runserver
이제 브라우저에서 http://localhost:8000 을 방문하면 Django 스플래시 페이지가 표시된다. 또한 http://localhost:8000/admin 을 방문하여 로그인 폼을 볼 수 있다. 슈퍼 유저를 위해 사용자 이름과 비밀번호로 장고 관리자에 로그인한다.
(로그인 전 화면) 
(로그인 후 화면)
로그인 성공 시 장고 관리자 인터페이스로 이동한다. 현재는 비어있는상태이다.
