4-1. Django 블로그 만들기 (static 정적파일)

<요약> 

1. 파일을 보여주는 portfolio app 만들기
2.  장고에서 다룰 수 있는 파일에 종류 설명
3.  만든 App에서 static 파일을 다뤄보기 

 

 

<배운것들> 

1. 정적파일과 동적파일  (static, dynamic)
2. 정적파일의 종류 (static, media)
3. 정적파일인 static 파일 다루기

 

---

 

 Static파일이란 웹 사이트 구성요소 중 Image, CSS, Script파일과 같이 그 내용이 고정되어 응답을 할 때 별도의 처리 없이 파일 내용을 그대로 보내주면 되는 파일을 의미합니다

 

일단 Static파일을 다루기 위해 portfolio라는 이름의 앱을 새로 만들고 설명하겠습니다.

 

 

 

 

1. App 새로 만들기 

 

1.준비된 이미지 파일을 올리는  App을 만들어보자 . App이름은 portfolio. 

python manage.py startapp portfolio

 

 

2. app 을 만들었으니  django프로젝트에서 App을 만들었다는 것을  알려줘야한다.  s

장고프로젝트에 settings.py에서 INSTALLED_APPS 부분을 추가한 모습

 

 

2. Templates 만들기 

 

 static 파일을 보여주기 위해 portfolio 앱에서 Templates 폴더를 만들어주자. 이후 portfolio.html 이라는 파일을 만들어준다.

새로 만든 portfolio 앱에 templates폴더만들고 html 만들고 ..

 

 

3. view 만들기

 

portfolio 앱안에 view.py를 엽니다.  portfolio.html 을 열어주는 함수를 만들어 줍니다. 

 

 

from django.shortcuts import render
from .models import Portfolio
# Create your views here.
def portfolio(request):
    portfolios = Portfolio.objects
    return render(request, 'portfolio.html', {'portfolios' : portfolios})

 

다른 App의 view.py와 혼동하지 말자.

 

 

4. url 수정하기 

 

url을 만들고 실행해봅니다.

 

path('portfolio/', portfolio.views.portfolio, name='portfolio'),

 

장고를 실행시키고, url에 접속해보면 , 

 

 

제대로 연결된것을 알 수 있다. 

 

 

---

 

 

 

2. django에서 다루는 파일의 종류

 

Django에서 다루는 파일의 종류는 두가지가 있다. 

 

1. Static File (정적 파일) : 미리 서버에 저장되어 있는 파일 

-서버에 저장한 파일을 그대로를 서비스하는  파일

 

2. Dynamic File (동적 파일) : 서버의 데이터가 가공되고 나서 보여주는 파일 

- 언제, 어디서, 누가, 어떻게 요청하나에 따라 보여지는게 다를 수 있는 파일

 

 

 

근데 정적파일은 두가지의 종류가 있다. 

 

1. 프로젝트 입장에서 뭔지 아는파일

- 개발할 때 미리 준비해둔 파일 " static"

2 웹서비스 이용자들이 업로드 하는 파일 "media"

 

우리는 정적파일 중에서 static 파일을 다뤄 보도록 하자 . 

 

---

 

 

 

3. 만든 App에서 static 파일을 다뤄보기 

 

 

< 알아두기 >
Django가 static 파일을 처리하는 과정은 다음과 같다.

 

1. Static 파일의 위치찾기 

2. Static 파일을 한곳에 모으기

 

우리는 static파일인 이미지파일을 portfolio.html에 첨부해 보자.

 

 

static 파일을 처리하는 방법은 다음과 같다. 

 

1. Static 파일들을 담을 폴더 만들기
   • (App폴더 내부에) Static 폴더 생성 및 파일 저장
2. Static 파일의 위치 알려주기
   • settings.py에서 알려주기
3. Static 파일을 모으기
   • $ python manage.py collectstatic (명령어)

 

1 . Static 파일들을 담을 폴더 만들기 

 

 

 

 

 

2. Static 파일의 위치 알려주기

• settings.py에서  맨밑에 다음과 같이 적는다. 

 

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'portfolio', 'static')
]

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

 

STATICFILES_DIRS은 static파일이 어디 있는지 알려주는 변수
STATIC_ROOT은 static파일들이 어디로 모일 것인지 알려주는 변수

 

 

 

3. Static 파일을 모으기

 

터미널에 다음 명령어를 입력하자. 

python manage.py collectstatic

 

 

 

portfolio App의  static 폴더에 첨부할 이미지 파일을  넣는다 .
그리고 portfolio.html에서 최상단에 다음 코드를 추가한다.

 

{% load staticfiles %}

 

 

static 폴더안에 이미지파일을 첨부하기 위해 다음과 같이 <img> 태그에 경로를 적는다. 

 

<a href="#"><img class="card-img-top" src="{% static 'first_logo.png' %}" alt=""></a>