[Django] 스태틱(static) 폴더로 css, js적용하기 (정적인 파일 관리하기)

안녕하세요 성조입니다.

이번 포스팅에서는 스태틱(static) 폴더를 만들고 css, js, img 파일 등 정적인 파일들을 가져와서 html에 적용시켜 동작할 수 있도록 만들어보려 합니다.

정적인 파일들은 값이 한번 들어간 이후 크게 변화가 없는 것들을 의미합니다.

 

앞으로는 최상위 폴더에서 css, js 파일을 관리할 예정입니다.

일정이 바빠서 한참 개발하면서 포스팅을 진행하지 못했네요. 그래서 중간에 기존 포스팅과 다른 것들이 보일 수 있으나 문제되는 사항이 아니므로 참고해 주셨으면 좋겠습니다!

 

 

이전 포스팅

2022.10.07 - [Python 🐍/Django] - [Django] 페이지 이동을 위한 URL 분리하기

[Django] 페이지 이동을 위한 URL 분리하기

---

시작하기 전에..

기존 settings.py의 INSTALLED_APPS에 존재하는 django.contrib.staticfiles가 이번 정적인 파일들을 관리하는 응용 프로그램이므로 만약이라도 지웠다면 다시 추가할 수 있도록 하자.

static 폴더를 사용하는 것은 매우 간단할 수 있다. 차근차근 진행하자.

 

 

본인의 settings.py 코드

import os
from pathlib import Path
from . import local_settings


SECRET_KEY = local_settings.SECRET_KEY
DATABASES = local_settings.DATABASES


BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition
INSTALLED_APPS = [
    # main App
    'home',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'aptitude.urls'

TEMPLATES_DIR = os.path.join(BASE_DIR, 'templates')

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [TEMPLATES_DIR],
        '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',
            ],
        },
    },
]

WSGI_APPLICATION = 'aptitude.wsgi.application'

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]

LANGUAGE_CODE = 'ko-kr'

TIME_ZONE = 'Asia/Seoul'

USE_I18N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.1/howto/static-files/
STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'aptitude', 'static'),
]



# Default primary key field type
# https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

 

 

 

settings.py에 static 설정하기

본인은 다음과 같이 셋팅을 진행했다.

위 이미지에서는 98번 라인에 STATIC_URL = '/static/'은 STATIC_URL + 이동하려는 경로의 구조로 작업되기 때문에 폴더 이름에 맞춰서 경로를 지정하면 된다.

static이 아닌 address 폴더를 만들고 '/address/'를 작성해서 STATIC_URL(address) + 이동하려는 경로를 적용해도 동작한다.

102번 STATICFILES_DIRS는 최상위 app에서 os.path.join을 활용하여 어떤 폴더를 가져올 것인가를 의미한다.

100번 라인에 존재하는 STATIC_ROOT = os.path.join(DASE_DIR, 'static')에서 STATIC_ROOT는 폴더를 원하는 한곳으로 모으는 방법이다.

100번 라인 선언을 통해서 102번 라인에서 정적인 파일들을 모두 어디있는 모아준다고 생각하면 된다.

STATIC_URL = '/원하는 폴더 이름/'

STATIC_ROOT = os.path.join(BASE_DIR, '원하는 폴더 이름')

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, '최상위 현재 폴더 이름(본인은 aptitude)', '원하는 폴더 이름'),
]

 

 

 

static urls 설정하기

 

from django.contrib import admin
from django.urls import path, include
from django.conf.urls.static import static
from django.conf import settings

from home.views import home

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', home),
    path('/', include('home.urls')),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

 

from django.conf.urls.static import static
from django.conf import settings

conf에서 settings와 urls.static을 가져온다.

이후 위 코드와 같이 최상위 루트에서 urls.static를 활용하여 static 값을 뿌려준다.

 

 

 

templates에서 static 불러오기

{% load static %}

static폴더를 불러오려는 html의 최상단에 {% load static %}를 입력한다.

이후 css, js의 값을 지정해 준다. 

<!-- css -->
<link rel="stylesheet" type="text/css" href="{% static '경로위치/파일명.css' %}" />

<!-- Js -->
<script src="{% static '경로위치/js파일명.js' %}"></script>

 본인은 img 파일 불러오지 않았기 때문에 검증을 진행하지 않았다.

다음 포스팅에서 이미지를 추가로 작업할 때 간단하게 추가하는 방법에 대해서 추가로 포스팅을 진행할 예정이다. 

 

 

---

궁금하신 부분이 있다면 언제든 댓글 부탁드립니다!

다음 포스팅 때 뵙겠습니다! 감사합니다.

 

참조

https://docs.djangoproject.com/ko/4.1/intro/tutorial06/

첫 번째 장고 앱 작성하기, part 6 | Django 문서 | Django