🗻

008. static 파일

1. 정적(static) 파일이란?

정적(static) 파일은 프로젝트를 서비스하는 동안 절대로 내용물이 변하지 않는 이미지 파일, JavaScript 파일, css 스타일 시트 파일 등을 말합니다. 언제나 내용이 변하지 않기 때문에 정적(static)이라고 부릅니다.
 

2. 장고에서 정적파일 사용하기

2.1. STATIC_URL

장고에서는 정적 파일을 사용할 때 ../static/image/1.png 같은 파일 구조의 경로를 사용하지 않습니다. 왜냐하면 이러한 경로가 외부에 노출 될 시 프로젝트의 구조가 드러나기 때문에 보안상 취약하기 때문입니다. 그래서 이러한 프로젝트의 구조를 감추기 위해서 URL을 사용합니다.
settings.py의 가장 마지막 줄에 STATIC_URL이 정의되어 있습니다.
STATIC_URL = '/static/'
 
해당 프로젝트에서 정적 파일에 접근하려면 무조건 [프로젝트URL]/static/ URL을 사용해야 합니다.
해당 URL은 기본적으로 각 앱의 static에 접근합니다. 하지만 기본적으로 만들어지진 않기 때문에 개발자가 직접 static 폴더를 만들어주어야 합니다. main 앱 폴더 아래에 static 폴더를 만들고 그 안에 image 폴더를 만들고 다음의 이미지 파일들을 저장합니다.
notion imagenotion image
 
그리고 서버를 재실행한 뒤 [프로젝트 URL]/static/image/1.png로 접속해봅니다. 그러면 해당 이미지 파일을 볼 수 있습니다.
notion imagenotion image
 

2.2. 템플릿에서 static 파일 사용하기

템플릿에서 static URL을 사용하기 위해서는 static 태그를 사용해야 하는데, 이를 사용하기 위해서 먼저 템플릿 파일 초기에 {% load static %}을 해주어야 합니다. 해당 템플릿 파일에서 static 태그를 사용하겠다는 뜻입니다.
static 태그는 {% static '하위경로' %} 로 사용합니다. 그러면 settings.py에 설정된 STATIC_URL 값에 하위경로가 붙어서 출력됩니다. 예를 들어 {% static 'images/' %}이라고 하면 /static/images/로 출력됩니다.
result.html 템플릿을 다음과 같이 수정합니다.
{% load static %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>result</title> </head> <body> <h1>결과 페이지</h1> <p>{{ developer.name }}</p> <img src="{% static 'image/' %}{{ developer.pk }}.png" width="300"/> <a href='/'>메인화면</a> <a href="/form">다시하기</a> </body> </html>
 
이제 설문 결과 개발자 유형에 따라 사진이 같이 출력됩니다.
notion imagenotion image