[카카오 클라우드 스쿨] djagno 실습 - 프론트엔드 가져와서 운영해 보기

djagno 실습 - 프론트엔드 가져와서 운영해 보기

목표: Bootstrap 웹사이트를 장고에서 돌려 보자

1 . 장고 프로젝트 새로 만들기

django-admin startproject config .

2 . 앱을 하나 만들기

python ./manage.py startapp frontapp

3 . 템플릿을 다운 받아서 asset, css, js 폴더를 static 내부에 올린다

필요에 따라 하위 디렉토리를 만든다

4 . html 파일은 templates 폴더를 만들어 집어 넣는다

필요에 따라 하위 디렉토리를 만든다

5 . settings.py에서 사용할 app, static 리소스 경로, templates 경로를 설정한다

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'frontapp',
]
...(중략)

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR/"templates"],
        'APP_DIRS': True,
        ...(중략)  }]

STATIC_URL = 'static/'
STATICFILES_DIRS = [
    BASE_DIR / 'static',
]

6 . 페이지만 띄울 정도의 views 함수 구성하기

def index(request):
    return render(request, "index.html")

7 . URI 연결시키기

import frontapp.views
# 최상단에서 바로 볼 수 있도록 URI 적용
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', frontapp.views.index),
]

8 . templates폴더 내 html 파일에서 css 경로 설정

다음과 같이 해도 되지만
<link href="../../static/frontapp/css/styles.css" rel="stylesheet" />
다음과 같이아까 배운대로 하는 것이 신상에 좋을 것임
<!DOCTYPE html>
{ % load static % }
..(중략)
<head>
    <link href="{ % static 'frontapp/css/styles.css' % }" rel="stylesheet" />
..(중략)

9 . 마찬가지로 이미지 (assets) 의 경로도 다 바꾸어 주어야 한다

<img class="masthead-avatar mb-5" src="../../static/frontapp/assets/img/avataaars.svg" alt="..." />
혹은
<img class="masthead-avatar mb-5" src="{ % static 'frontapp/assets/img/avataaars.svg' % }" alt="..." />
특수문자 실수 없도록 조심한다

10 . 그러면 성공적으로 CSS가 적용된 페이지를 확인할 수 있다

참고로 github.io의 jekyll theme의 경우, 템플릿 문법을 쓰면 충돌이 일어나므로
{ % static ‘frontapp/css/styles.css’ % } 형식으로 작성했는데
{ 와 % 사이에 공백이 있으면 안된다