Static (정적 파일) 역할

한 마디로

"변하지 않는 파일들을 서빙하는 곳" 이에요!

---

Static 파일이란?

static/
  ├── css/
  │   └── style.css     ← 디자인 스타일
  ├── js/
  │   └── script.js     ← 동작 스크립트
  └── images/
      └── logo.png      ← 이미지

---

동적 vs 정적 차이

동적 파일 (Dynamic)
→ 요청할 때마다 내용이 바뀜
→ ex) 유저 목록, 게시글, 상품 정보

정적 파일 (Static)
→ 항상 똑같은 내용
→ ex) CSS, JS, 이미지, 폰트

---

Django 설정

# settings.py

# 정적 파일 URL 경로
STATIC_URL = "/static/"

# 정적 파일 폴더 위치
STATICFILES_DIRS = [
    BASE_DIR / "static"   # 👈 static 폴더 위치
]

# 배포시 한곳에 모으는 폴더
STATIC_ROOT = BASE_DIR / "staticfiles"

Django 폴더 구조

my_project/
  ├── static/             ← 개발용 static
  │   ├── css/
  │   │   └── style.css
  │   ├── js/
  │   │   └── script.js
  │   └── images/
  │       └── logo.png
  ├── staticfiles/        ← 배포용 (collectstatic)
  └── settings.py

Django HTML에서 사용

{% load static %}   <!-- static 로드 -->

<!-- CSS 적용 -->
<link rel="stylesheet" href="{% static 'css/style.css' %}">

<!-- JS 적용 -->
<script src="{% static 'js/script.js' %}"></script>

<!-- 이미지 적용 -->
<img src="{% static 'images/logo.png' %}">

---

FastAPI 설정

# main.py
from fastapi.staticfiles import StaticFiles

app = FastAPI()

# static 폴더 마운트
app.mount(
    "/static",                        # URL 경로
    StaticFiles(directory="static"),  # 실제 폴더
    name="static"
)

FastAPI 폴더 구조

fastapi_project/
  ├── static/
  │   ├── css/
  │   │   └── style.css
  │   ├── js/
  │   │   └── script.js
  │   └── images/
  │       └── logo.png
  └── main.py

FastAPI HTML에서 사용

<!-- CSS 적용 -->
<link rel="stylesheet" href="/static/css/style.css">

<!-- JS 적용 -->
<script src="/static/js/script.js"></script>

<!-- 이미지 적용 -->
<img src="/static/images/logo.png">

---

브라우저에서 접근

http://localhost:8000/static/css/style.css   ✅
http://localhost:8000/static/js/script.js    ✅
http://localhost:8000/static/images/logo.png ✅

---

Django vs FastAPI 비교

항목	Django	FastAPI
설정 위치	settings.py	main.py
설정 방법	STATIC_URL	app.mount()
HTML 사용	{% static %} 태그	/static/ 직접 경로
배포 명령	collectstatic	별도 없음

---

정리

Static 파일 = 서버에서 그대로 전달하는 파일

CSS    → 디자인  🎨
JS     → 동작    ⚙️
이미지 → 그림    🖼️
폰트   → 글꼴    🔤

💡 API 서버만 만들 때는 static 거의 안써요!
React/Vue 같은 프론트엔드가 따로 있으면
프론트에서 static을 관리하고
FastAPI는 데이터만 주고받아요!