영벨롭 개발 일지

[Django]장고 static 파일 다루기 본문

Back-end/Django

[Django]장고 static 파일 다루기

영벨롭 2022. 5. 12. 19:07

[ 웹 서비스의 데이터 ]

 

 웹 서비스에서 내부적으로 다루는 데이터는 크게 두 가지가 있습니다. 

 

1. Static 데이터

 

 static 데이터는 사용자들을 위해 미리 준비된 데이터들로 css, javascript 파일이나 이미지 폴더등이 있습니다. 

 

 

2. Media 데이터

 

 medai 데이터는 업로드 된 데이터, 즉 사용자가 업로드한 사용자에 의한 데이터입니다. 

 

 

 

 

 

[ settings.py에서 static 관리 ]

 

 settings.py 에서 다음 세 개 항목으로 static을 관리할 수 있습니다. 

 

 

1. STATIC_URL

 

STATIC_URL 은 static 파일을 제공할 URL입니다. 

 

예를 들어 우리 웹 사이트의 주소가 http://127.0.0.1:8000이고 STATIC_URL = 'static/' 일 때, static 파일들이 http://127.0.0.1:8000/static/ 에 있다는 의미입니다. 

 

 

2. STATICFILES_DIRS

 

STATICFILES_DIRS는 static 파일들이 내 개발 환경 내의 어디에 있는지에 대한 경로를 담고 있습니다. 

 

 

3. STATIC_ROOT

 

 STATIC_ROOT는 static 파일들을 복사하여 모아 놓을 경로로, 우리의 프로젝트를 배포할 때 STATIC_ROOT에 있는 경로를 확인합니다. 

 

 다음 명령어를 실행하여 STATIC_ROOT 경로에 프로젝트 내에서 사용되는 static 파일들을 모조리 모아놓을 수 있습니다만, 개발을 하는 과정에선 이 명령어를 실행할 필요는 없습니다. 

 

 이 명령어를 실행하고 나면 자동적으로 폴더가 생성됩니다. 

 

$ python manage.py collectstatic

 

# settings.py

...

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

STATIC_URL = 'static/'

STATICFILES_DIRS = [
    # BASE_DIR 아래 static 폴더 -> 프로젝트 전체 static
    BASE_DIR / 'static',
    # BASE_DIR 아래 staticapp 아래 static 폴더 
    # staticapp에서만 사용할 static 
    os.path.join(BASE_DIR, 'staticapp', 'static'),
]

STATIC_ROOT = os.path.join('staticfiles')

 

 

 

 

[ static 불러와서 css/js/image 연결하기 ]

 

 우선 우리의 project 내부에 static 폴더를 생성합니다. static 폴더는 프로젝트 바로 아래에 생성할 수도 있고 어플리케이션 아래에 생성할 수도 있습니다. 

 

 이제 static 파일들을 활용할 html 파일 내부로 가서 최상단 라인에 static을 불러오는 코드를 작성한 후 css, js, image 파일들을 연결해줄게요.

 

 {% load static %} 으로 static 파일들을 로드해올 수 있고 이 문법은 django의 template 언어입니다. 

 

{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- css & js -->
  <link rel="stylesheet" type="text/css" href="{% static 'static 폴더 내의 css 파일 경로' %}">
  <script src="{% static 'static 폴더 내의 js 파일 경로' %}"></script>
  
  <title>Static Practice</title>
</head>
<body>
  <div>Hello Static!</div>
  
  <!-- 이미지 불러오기 -->
  <img src="{% static 'static 폴더 내의 이미지 경로' %}" />
</body>
</html>

 

 

 

★ css, js, image 하나하나 연결할 수 있잖아?

 

 실무에서의 프로젝트는 굉장히 규모가 크기 때문에  static 파일 또한 한 두개가 아닙니다. 

 

 위 방식으로 static 파일을 관리하지 않고 하나하나 연결하게 되면 각 파일을 찾는데 굉장히 오래걸리고, 이는 성능 저하로 이어질 수 있습니다. 

 

 때문에 우리는 빠르고 효율적으로 static 파일을 찾기 위해 모아놓고 관리하는 것입니다. 

 

반응형
저작자표시 비영리 변경금지

'Back-end > Django' 카테고리의 다른 글

[Django]장고 Model 만들기 - ORM & Migration  (0) 2022.05.17
[Django]장고를 위한 최소한의 데이터베이스 DB  (0) 2022.05.17
[Django] 장고 URL 등록하기: path(), include()  (0) 2022.05.12
[Django] 장고 개발 환경 세팅하기 - 가상 환경, 설치, Django 내부 구조  (0) 2022.05.11
[Django]장고 Django 시작하기 - Django와 WEB  (0) 2022.05.11
'Back-end/Django' Related Articles more