Skip to content

Latest commit

 

History

History
110 lines (92 loc) · 3.32 KB

1st_Week_4_5.md

File metadata and controls

110 lines (92 loc) · 3.32 KB
Raw

4주차 - 5. portfolio (static)

Django에서 다루는 파일의 종류

  1. Static File (정적 파일)

미리 서버에 저장되어 있는 파일
서버에 저장된 그대로를 서비스해주는 파일

  1. Dynamic File (동적 파일)

서버의 데이터들이 어느정도 가공된 다음 서비스되는 파일

Static File (정적 파일)

  1. 프로젝트 입장에서 이미 무엇인지 아는 파일
    • 개발할 때 미리 준비해둔 파일 = "static"
  2. 웹 서비스 이용자들이 업로드하는 파일
    • "media"

Static File의 처리 과정

  1. Static 파일의 위치 찾기
  2. Static 파일을 한 곳에 모으기

우리가 해야할 것

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

1. portfolio.html 생성 및 기본 연결

  1. portfolio앱 생성
$ python manage.py startapp portfolio
  1. settings.py에 App 추가
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'blogapp.apps.BlogappConfig',
    'portfolio.apps.PortfolioConfig',
]
  1. templates폴더 생성 및 portfolio.html생성
  2. views.py에 portfolio함수 정의
def portfolio(request):
    return render(request, "portfolio.html")
  1. portfolio의 views.py import 및 urls.py에 path추가
import portfolio.views
...
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', blogapp.views.home, name="home"),
    path('blog/<int:blog_id>', blogapp.views.detail, name="detail"),
    path('blog/new', blogapp.views.new, name="new"),
    path('blog/create', blogapp.views.create, name="create"),
    path('portfolio', portfolio.views.portfolio, name="portfolio"),
]
  1. Portfolio 관련된 a태그에 템플릿 태그로 url 생성
<a class="dropdown-item" href="{% url 'portfolio' %}">Portfolio</a>

2. portfolio앱에 static폴더 생성 및 파일 추가

3. settings.py에 static폴더 경로 추가

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

STATIC_URL = '/static/'

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

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

4. static 파일들을 모으는 명령어 사용

$ python manage.py collectstatic

최상위 폴더에 static폴더가 생성

5. portfolio.html에서 static파일 사용

portfolio.html 최상단에 아래 코드 추가

{% load staticfiles %}

img태그에 이미지 경로 추가

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

결과 화면