728x90
반응형
Django + alpine.js + HTMX + tailwind.css + vite 개발 환경
이 조합은 django 가 두뇌와 심장 역할을 하고, HTMX 는 네트워크 통신, Alpine.js 는 작은 반사신경, Tailwind.css 는 옷차림(디자인), Vite 는 운동신경(개발 속도 및 빌드) 를 담당하는 구조이다.
Django 프로젝트 생성 (백엔드)
django-admin startproject backend
Django 정적 파일 설정
backend/settings.py
# settings.py
import os
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, '../static'), # Vite 빌드 결과를 포함
]
TEMPLATES[0]['DIRS'] = [os.path.join(BASE_DIR, '../templates')]
Vite 프로젝트 생성 (프론트엔드)
npm create vite@latest frontend -- --template vanilla
Vite 진입점 설정
frontend/main.js
import Alpine from 'alpinejs'
import 'htmx.org'
window.Alpine = Alpine
Alpine.start()
Vite 빌드 설정
* outupt -> django static 디렉토리로 이전
frontend/vite.config.js
import { defineConfig } from 'vite'
import { resolve } from 'path'
export default defineConfig({
build: {
outDir: '../static', // 빌드 결과 위치
emptyOutDir: true
},
root: '.',
})
Django 템플릿 예시
templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vite + Django + HTMX</title>
{% load static %}
<script type="module" src="{% static 'assets/index.js' %}"></script>
</head>
<body>
<h1 x-data="{ count: 0 }">
Count: <span x-text="count"></span>
<button @click="count++">+</button>
</h1>
<div hx-get="/hello/" hx-trigger="click" hx-target="#result">
<button>Load Hello</button>
</div>
<div id="result"></div>
</body>
</html>
Django View 예시(HTMX 용)
backend/app/views.py
from django.http import HttpResponse
def hello(request):
return HttpResponse("<p>Hello from HTMX!</p>")
urls.py
from django.urls import path
from app import views
urlpatterns = [
path("hello/", views.hello),
]
개발 및 빌드 실행
1. Vite 개발 서버
cd frontend
npm run dev
* 개발 때는 localhost:5173 에서 hot reload 개발 가능.
* 실제 Django 에서 쓰기 전에 'npm run build' 실행해야 함.
2. Vite 빌드 -> Django 반영
cd frontend
npm run build
이후, Django 서버 실행
cd backend
python manage.py runserver
개발 언어 및 도구 소개
| 도구 | 역할 | 주요 기능 |
| Django | 백엔드 프레임워크 | - 라우팅, 모델, DB 처리 - 템플릿 렌더링 - HTMX 응답 처리 (HTML 조각 반환 등) |
| Vite | 프론트엔드 번들러/개발 서버 | - 빠른 개발 서버 (HMR) - Alpine.js, Tailwind 빌드 - Django용 정적 파일 생성 |
| Tailwind CSS | 유틸리티 기반 CSS 프레임워크 | - CSS 없이 빠르게 UI 구성 - 반응형, 테마, 다크 모드 등 |
| Alpine.js | 마이크로 프론트엔드 상호작용 라이브러리 | - x-data, x-on, x-show 등 - React 없이도 프론트 동적 처리 가능 |
| HTMX | HTML 기반 AJAX 통신 | - 버튼 클릭 시 백엔드로 요청 - HTML 조각을 받아서 DOM에 삽입 - JS 없이 AJAX UI 구성 |
728x90
반응형
'코딩' 카테고리의 다른 글
| django-vite - HTMX, Alpine.js and TailwindCSS Plugin Installation (0) | 2025.06.26 |
|---|---|
| 명령어로 영상, 오디오 및 이미지 추출하기 (1) | 2025.06.25 |
| django 프로젝트 자동화 도구; Fabric (0) | 2025.06.21 |
| Django and Alpine.js - Introduction to Alpine.js (2) | 2025.02.07 |
| 코딩 가상환경의 중요성 (1) | 2025.02.06 |
