DJango, ExtJs를 사용한 ToDoList 예제(진행 중)

• 회사에서 ExtJs라는 상용 JS 라이브러리를 사용할 일이 생겨 급하게 예시를 만들어 공부하는 와중에 정리하게 되었음

• 개발은 Window 환경, backend는 Python Django를 사용하고 frontend는 ExtJs를 사용

• ExtJs 공식 Document 참조
  (https://docs.sencha.com/extjs/6.6.0/modern/Ext.html)

• Django 5.1.4, ExtJs 6.6.0, djangorestframework 3.15.2, 기본 SQLite 사용

1. 환경 세팅

1. 가상환경 생성 및 활성화

cd '프로젝트 경로'
python -m venv venv

.\venv\Scripts\activate

2. 패키지 설치

pip install django
pip install djangorestframework

2. Backend

1. Django 프로젝트 및 앱 생성

django-admin startproject backend .

2. ToDoList 앱 생성

python manage.py startapp todolist

# settings.py에 앱 추가:
INSTALLED_APPS = [
    'todolist',
]

3. Django 모델

# todolist\models.py
from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField(blank=True)
    completed = models.BooleanField(default=False)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.title

# 마이그레이션 생성 및 적용:
python manage.py makemigrations todolist
python manage.py migrate

3. ExtJS 프론트엔드 설정

• 여기에서 약간의 문제가 생긴다 . 본인은 SenchaCmd-6.6.0.13-windows-64bit를 받아 cmd를 설치하였는데

• 이것만으로는 세팅이 되지 않는 다는 사실을 여러번의 착오끝에 알게 되었다.
  ExtJS가 유료 라이브러리다 보니 정보가 제한적이다

• 본인은 ext-6.6.0를 따로 다운로드 받아
  C:\Users\사용자이름\sencha-sdks\ext-6.6.0 으로 ext js를 따로 받아놓았다.
  

• 다른 사람들은 Sencha CMD로 Ext JS를 명령어로 설치해서 시작할 수 있다고 하는데 본인은 실패하여서 따로 받은 ext js로 경로를 설정 하였다.

1. Sencha 프로젝트 생성

# ExtJS 앱 생성:
sencha app generate extjs-todo C:\Users\사용자이름\Desktop\project\Django_Extjs_TodoListEx\frontend

4. Django Views 및 URL 구성

# todolist\serializers.py
from rest_framework import serializers
from .models import Task

class TaskSerializer(serializers.ModelSerializer):
    class Meta:
        model = Task
        fields = '__all__'

todolist\views.py