관리 메뉴

안까먹을라고 쓰는 블로그

[Python_Django_VSCode] Django Tutorials - 10 (정적 파일 제공) 본문

Language/Python(Django)

[Python_Django_VSCode] Django Tutorials - 10 (정적 파일 제공)

YawnsDuzin 2022. 1. 19. 14:36

 

반응형


https://code.visualstudio.com/docs/python/tutorial-django

 

Python and Django tutorial in Visual Studio Code

Python Django tutorial demonstrating IntelliSense, code navigation, and debugging for both code and templates in Visual Studio Code, the best Python IDE.

code.visualstudio.com


정적 파일 제공

정적 파일은 CSS 파일과 같은 특정 요청에 대해 웹 앱이 있는 그대로 반환하는 콘텐츠 조각입니다. 정적 파일을 제공하려면 기본적으로 포함되는 settings.py의 INSTALLED_APPS 목록에 django.contrib.staticfiles가 포함되어 있어야 합니다.

Django에서 정적 파일을 제공하는 것은 특히 프로덕션에 배포할 때 예술입니다. 여기에 표시된 것은 Django 개발 서버 및 Gunicorn과 같은 프로덕션 서버에서 작동하는 간단한 접근 방식입니다. 그러나 정적 파일에 대한 전체 처리는 이 자습서의 범위를 벗어나므로 자세한 내용은 Django 설명서에서 정적 파일 관리를 참조하세요.

프로덕션에서는 settings.py에서 DEBUG=False도 설정해야 하므로 컨테이너를 사용할 때 몇 가지 추가 작업이 필요합니다. 자세한 내용은 Issue 13 를 참조하십시오.

정적 파일용 앱 준비

1. 프로젝트의 web_project/urls.py 에서 다음 import 문을 추가합니다.

from django.contrib.staticfiles.urls import staticfiles_urlpatterns

 


2. web_project/urls.py 에서 프로젝트가 인식하는 목록에 대한 표준 정적 파일 URL을 포함하는 다음 줄을 끝에 추가합니다.

urlpatterns += staticfiles_urlpatterns()


템플릿의 정적 파일 참조

1. hello 폴더에 static 이라는 폴더를 생성합니다.


2. static 폴더 내에서 앱 이름과 일치하는 hello 라는 하위 폴더를 만듭니다.

이 추가 하위 폴더가 있는 이유는 Django 프로젝트를 프로덕션 서버에 배포할 때 모든 정적 파일을 전용 정적 파일 서버에서 제공하는 단일 폴더에 수집하기 때문입니다. static/hello 하위 폴더는 앱의 정적 파일이 수집될 때 앱별 하위 폴더에 있고 동일한 프로젝트에 있는 다른 앱의 파일과 충돌하지 않도록 합니다.

3. static/hello 폴더에 다음 내용으로 site.css 라는 파일을 생성합니다. 이 코드를 입력한 후 VS Code가 색상 미리보기를 포함하여 CSS 파일에 대해 제공하는 구문 강조 표시도 관찰하십시오.

.message {
    font-weight: 600;
    color: blue;
}


4. templates/hello/hello_there.html 에서 <title> 요소 뒤에 다음 줄을 추가합니다. 
  {% load static %} 태그는 사용자 정의 Django 템플릿 태그 세트로, {% static %} 을 사용하여 스타일시트와 같은
  파일을 참조할 수 있습니다.

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'hello/site.css' %}" />


5. 또한 templates/hello/hello_there.html에서 콘텐츠 <body> 요소를 <strong> 태그 대신 message 스타일을 사용하는 다음 마크업으로 교체합니다.

<span class="message">Hello, there {{ name }}!</span> It's {{ date | date:'l, d F, Y' }} at {{ date | time:'H:i:s' }}.


6. 앱을 실행하고 /hello/name URL로 이동한 다음 메시지가 파란색으로 렌더링되는지 확인합니다. 완료되면 앱 중지



끝~

반응형
Comments