오늘은 Django 하나 만으로 프론트엔드와 백엔드를 구현하고자 하는 사람들을 위해
Django에서 어떻게 html을 렌더링하고 static 파일을 불러오는지 알아보고 실습을 해보기로 하겠다.
우선 기본 프로젝트 구조는 이러하다.
django_project/
├── django_project/
├── app1/
├── app2/
└── manage.py1. templates 디렉토리, static 디렉토리 생성
우선 html 파일과 static 파일을 모아놓기 위해 각 디렉토리를 생성하도록 하겠다.
root 폴더 아래에 만들면 되고, 위치는 manage.py, 앱과 같은 위치이다.
앱을 만들 때 createapp을 하는 것 처럼 명령어로 만들 필요는 없고 그냥 만들어줘도 된다.
django_project/
├── django_project/
├── app1/
├── app2/
├── templates/ #생성
├── static/ #생성
└── manage.py
이제 디렉토리를 생성했으면 html 파일이나 static 파일을 해당 디렉토리 안에 옮겨놓도록 하겠다.
참고로 static 파일은 하위에 css, js, image 파일등을 따로 디렉토리로 한번 더 구분해서 위치시키는 것을 권장한다.
django_project/
├── django_project/
├── app1/
├── app2/
├── templates/
│ └── index.html
├── static/
│ ├── css/
│ └── style.css
│ ├── js/
│ └── scripts.js
│ └── image/
└── manage.py
이제 필요한 파일들을 모두 준비했으니 settings.py로 이동해보도록 하겠다.
2. settings.py 설정
settings.py에서 할 일은 django에게 우리가 만든 html과, static 파일의 위치를 알려주는 것이다.
본인과 동일한 디렉토리 구조로 만들었다면 아래와 같이 작성하면 된다.
# settings.py
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [ BASE_DIR / 'templates' ], # 여기 수정
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
# 아래 코드 추가
STATICFILES_DIRS = [
BASE_DIR / 'static',
]
TEMPLATES 설정 중 DIRS에 본인의 html이 어디에 위치 하는지 명시 시켜주고,
STATICFILES_DIRS에 static 파일이 위치하는 곳을 명시 시켜준다.
이제 views.py를 통해 html을 렌더링 시켜보겠다.
# views.py
def index(request):
return render(request, 'index.html')
이제 해당 함수를 urls.py에 작성한 후 접속해보면
아마 렌더링은 잘 되지만 css가 적용되지 않아서 당황할 것이다.
django의 html에서는 static 파일을 불러오기 위해 조금 특별한 태그를 사용해야 한다.
다음은 static을 load하는 방법을 알아보겠다.
3. html 에서 static 파일 load 하기
django의 html에서는 static 파일을 불러오기 위해서는 태그를 사용해야 하는데
사실 특별한 태그라기 보다는 유저를 편의를 위해서 static 파일의 URL을 동적으로 생성 해주는 태그이다.
(해당 태그를 사용하지 않고 하드코딩을 해도 적용이 됩니다.)
그렇지만 하드코딩으로 경로를 사용하는건 당연히 있어서는 안될 일이다.
두 가지 태그만 기억하면 된다.
- {% load static %} : django 템플릿 엔진이 static 파일을 처리할 수 있도록 하는 태그 라이브러리를 로드하기 위한 선언
- {% static '경로' %} : 프로젝트의 STATIC_URL 설정을 기반으로 정적 파일의 URL을 생성
{% load static %} <!-- 가장 최상단에 입력 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- static 경로 집어넣는 방법 -->
<link href="{% static "/css/styles.css" %}" rel="stylesheet" />
</head>
<!-- 아래 생략 -->
{% load static %} 태그는 최상단에 위치하면 된다.
{% static '경로' %} 태그는 해당 파일을 불러오는 경로(href) 부분에 명시하면 되고, 태그안에 경로는 static 아래로 기입하면된다.
이렇게 한다면 정상적으로 static 파일이 적용되어 html이 렌더링 되는 모습을 확인할 수 있을 것이다.
'Framework > Django & DRF' 카테고리의 다른 글
| [Django] Model에서 반복되는 Field 중복 제거 (상속, 추상화) (0) | 2025.01.29 |
|---|---|
| [Django] 국세청 사업자등록정보 진위확인 및 상태조회 API 사용법 ( + Postman) (0) | 2025.01.15 |
| [Django] DRF 테스트 코드 작성하기 (TDD, tests.py) (1) | 2025.01.09 |
| [Django & React] CORS의 모든 것 (5분 안에 해결하기) (0) | 2025.01.02 |
| [Django] 초심자에게 발생하는 에러 : didn't return an HttpResponse object (0) | 2023.02.26 |
