[Django] 프로젝트 초기 세팅 (static에 js, css 넣어 관리하기)

본 실습에 있어 장고의 설치와 프로젝트, 앱만들기가 되어있어야 실습이 가능합니다.

앱과 프로젝트 이름은 사용자 임의대로 만드셔도 무관합니다.

1. 장고설치 바로가기

2. 장고의 앱만들기 바로가기

지금 본 실습은 오픈소스 디자인을 가져와서 장고에 적용하고, css와 JavaScript를 어떻게 관리하는지 알아보는 실습입니다.

아래의 이미지는 제가 가져다가 쓰려는 오픈소스 입니다.

주소를 보시면 제가 다운받아온 디자인 입니다.

이 이미지는 제가 장고에 옮겨서 성공적으로 적용한 이미지입니다.

주소를 보시면 localhost로 되어있죠.

1. 프로젝트 Settings.py에서 세팅하기

INSTALLED_APPS에 자신이 추가한 앱 이름을 추가합니다.

자신이 동적파일 안에 추가할 디렉토리 주소입니다.

이렇게 설정하면 앱안에 static 폴더를 만들고 그안에 js, css 등 폴더별로 정리하면 관리하시기 편합니다.

템플릿의 DIRS 디렉토리를 설정합니다. 고정입니다.

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
 
ALLOWED_HOSTS = []
 
 
# Application definition
 
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'account',
    'main',
]
 
# Absolute path to the directory static files should be collected to.
# Don't put anything in this directory yourself; store your static files
# in apps' "static/" subdirectories and in STATICFILES_DIRS.
# Example: "/home/media/media.lawrence.com/static/"
# 웹페이지에 사용할 정적파일의 최상위 URL경로
STATIC_URL = '/static/'
 
#정적파일이 위치한 경로들을 지정하는 설정 항목
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
 
# List of finder classes that know how to find static files in
# various locations.
'''
STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'django.contrib.staticfiles.finders.DefaultStorageFinder',
)
'''
 
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 = 'SO.urls'
 
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',
            ],
        },
    },
]
 
WSGI_APPLICATION = 'SO.wsgi.application'
 
 
# Database
# https://docs.djangoproject.com/en/1.11/ref/settings/#databases
 
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}
 
 
# Password validation
# https://docs.djangoproject.com/en/1.11/ref/settings/#auth-password-validators
 
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',
    },
]
 
 
# Internationalization
# https://docs.djangoproject.com/en/1.11/topics/i18n/
 
LANGUAGE_CODE = 'ko-kr'
 
TIME_ZONE = 'UTC'
 
USE_I18N = True
 
USE_L10N = True
 
USE_TZ = True

저의 settings.py는 이런식으로 초기 세팅을 하였습니다.

디버그부터 드래그했으니 참고해주세요

현재 저의 디렉토리입니다.

2. url 설정하기

2.1 프로젝트 urls.py 세팅하기

사용자가 어떤 url로 들어갔는지 알아야 합니다.

장고에선 하나의 프로젝트 안에 여러가지 앱별로 관리가 되는데요. 그래서 url이 두가지가 있습니다.

(1) 프로젝트가 관리하는 url

그안에

(2) 앱별로 나타내는 url

그래서 결구 url은 프로젝트/앱/..... 이런식으로 가게 됩니다.

그럼 먼저 프로젝트 url부터 살펴보겠습니다.

프로젝트 안의 urls.py입니다.

urlpatterns에 보시면 해당 정규표현식에 맞춰 url을 매핑해주게 되는데요.

main/과

주석처리인  (공백)의 차이점이 무엇이냐면

둘다 똑같이 main이라는 앱을 매핑해줘라 인데 url주소가 틀립니다.

첫번째는 앞에 url이 main으로 들어올경우 main앱으로 가라 이고

두번째는 앞에 아무것도 오지 않으면 바로 main으로 가라 가 되겠습니다.

우린 main을 사용해보겠습니다.

from django.conf.urls import url, include
from django.contrib import admin
from django.shortcuts import redirect
 
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^main/', include('main.urls', namespace='main')),
    #url(r'^', include('main.urls', namespace='main')),
]

2.2 앱안의 urls.py 세팅하기

앱안의 urls.py로 들어왔습니다.

main프로젝트의 url은 main/    main안에 index는 index 이며

결국 이렇게 설정하게되면 우린 사용자에게 main/index/로 url이 요청들어왔을때 index를 응답하게 되는것이죠

from django.conf import settings
from django.conf.urls import url, include
from django.conf.urls.static import static
from . import views
 
urlpatterns=[
    url(r'^index/$', views.index, name='index'),
]

index/로 요청이 들어온다면 views.py의 index함수로 찾아가라  라는 뜻입니다.

3. 컨트롤러 views.py 설정하기 

url에서 views.py로 가라고 길을 알려줬으니 우린 이제 views.py를 꾸며볼 차례입니다.

views.py의 모습입니다. 이렇게 함수를 정의해주시면 되며

from django.shortcuts import render
from django.conf import settings
# Create your views here.
 
def index(request):
    return render(request, 'main/index.html')

urls.py에서 index/로 요청이 들어오면,

views.py의 index함수로 가라고 설정했으니 함수이름은 당연히 index겠지요

그리고 별다른 설정없이 우린 페이지 return만 해주겠습니다

그래서 render(request, 템플릿주소)로 응답을 해주면 되겠습니다.

4. 템플릿 만들기

템플릿 네임은 고정입니다.

앱->templates->앱이름->html파일

고정으로 넣어줘야하며 네이밍에 오타가 있으면 템플릿을 찾지 못합니다.

이렇게 템플릿 디렉토리안에 html파일을 넣어주면 views.py에서 render해줬던 내용이 잘 찾아가게 됩니다.

5. static폴더 관리

static폴더는 앱안에 settings.py에서 설정했던대로 static폴더를 넣고 그안에 css, js폴더를 넣어 관리하시면 됩니다.

6. static 사용

사용하시기 전에 {% load staticfiles %}를 입력해주셔야 static에 있는 파일들을 load해옵니다!

index.html에서 사용은 이런식으로 경로를 넣어주시고 사용하시면 됩니다.

경로가 이렇게 잘 맞게 설정하시고 사용하셨더라면 문제없이 잘 출력이 되실겁니다.

잘나오네요!!!

제가 만드는것보다 훨씬 이쁘고 생산적이기 때문에 오픈소스를 사용하려고 합니다 ㅋㅋ