Skip to content

Latest commit

 

History

History
132 lines (109 loc) · 4.69 KB

4장.md

File metadata and controls

132 lines (109 loc) · 4.69 KB
Raw

4장 프로젝트 첫 페이지 만들기

개요

  • 사용자가 사이트에 접속했을 때 처음으로 보여주는 페이지를 만듬
  • 룩앤필을 위해 CSS, Javascript를 추가할 수 있음

4.1 첫 페이지 설계하기

4.1.1 화면 UI 설계

  • 다음과 같이 4개의 영역으로 구분함
  1. 제목
  2. 메뉴
  3. 본문
  4. 바닥글

4.1.2 테이블 설계

  • 없음

4.1.3 URL 설계

URL 패턴 뷰 이름 뷰가 처리하는 내용
/ HomeView(TemplateView) home.html 템플릿을 보여줌
/bookmark/ 2장과 동일
/blog/ 3장과 동일
/admin 2장과 동일

4.1.4 작업/코딩 순서

작업 순서 관련 명령/파일 필요한 작업 내용
뼈대 만들기 startproject (2장에서 이미 완료했으므로 생략)
settings.py
migrate
createsuperuser
startapp (앱 생성 없으므로 생략)
settings.py
모델 코딩하기 models.py (테이블 생성은 없으므로 생략)
admin.py
makemigrations
migrate
URLconf 코딩하기 urls.py 루트(/) URL 정의
뷰 코딩하기 views.py HomeView 작성
템플릿 코딩하기 templates 디렉터리 home.html 작성, 상속 기능 적용
그외 코딩하기 static 디렉터리 화면 디자인을 위해 css 작성

4.2 개발 코딩하기

  • 테이블 변경 사항이 없으므로 URLconf 코딩부터 진행함

4.2.1 뼈대 만들기

  • 앱을 신규로 만드는게 아니므로 생략

4.2.2 모델 코딩하기

  • 생략

4.2.3 URLconf 코딩하기

path('', HomeView.as_view(), name='home'),
  • 다음과 같이 한줄을 추가함
  • 루트 url에 대해 HomeView 뷰에서 처리함

4.2.4 뷰 코딩하기

  • 이 뷰는 프로젝트와 관련된 뷰이므로 mysite/views.py에 작성함
from django.views.generic.base import TemplateView

# Create your views here.


# TemplateView
class HomeView(TemplateView):
    template_name = 'home.html'
  • 링크 처럼 template_name 속성을 통해 템플릿 파일 설정

4.2.5 템플릿 코딩하기

  • 템플릿도 마찬가지로 프로젝트와 관련된 것이므로 프로젝트 템플릿 디렉터리에 생성함
  • 프로젝트 템플릿 디렉터리는 settings.py에서 다음과 같이 정했음
TEMPLATES = [
        ...
    'DIRS': [os.path.join(BASE_DIR, 'templates')],      # 수정
        ...
]

4.2.6 스타일시트 코딩하기 - base.css

  • 프로젝트 템플릿 디렉터리처럼 정적(static)파일도 특정 디렉터리에 저장함
  • 이것 또한 settings.py에서 다음과 같이 정했음
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]       # 추가
  • 프로젝트 폴더 구조는 다음과 같음
└─ch2
    ├─blog
    │  ├─migrations
    │  │  └─__pycache__
    │  ├─templates
    │  │  └─blog
    │  └─__pycache__
    ├─bookmark
    │  ├─migrations
    │  │  └─__pycache__
    │  ├─templates
    │  │  └─bookmark
    │  └─__pycache__
    ├─mysite
    │  └─__pycache__
    ├─static
    │  └─css
    └─templates

4.2.7 템플릿 코딩하기 - home.html

  • 이미지 추가하기
  • settings.py에서 다음과 같이 추가했음
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]       # 추가
  • {% static %} 템플릿 태그 기능에 의해 STATICFILES_DIRS 디렉터리 하위에서 img/django-actor-big.jpg 파일을 찾음

4.2.8 스타일시트 코딩하기 - home.css

  • div#content_home, div#homeimg 추가

4.3 지금까지의 작업 확인하기

  • 부트스트랩을 이용하면 더 고급스러운 웹 페이지를 만들 수 있다.