[freeCodeCamp] Django로 쇼핑몰 만들기 실습 - 2. 뷰(view) 만들기

강의 링크: Learn Django by Building an Online Marketplace – Python Tutorial for Beginners

# 뷰를 추가하는 방법

뷰(view)는 웹 애플리케이션에서 사용자의 요청을 처리하고, 그에 대한 응답을 반환하는 기능을 담당하는 부분이다.

다음 순서에 따라 앱에 뷰를 추가해보자. :

 

1. {project}/{app}/views.py 파일에 뷰 함수 추가하기

# views.py

from django.shortcuts import render

def index(request):
    return render(request, 'core/index.html')

 

2. {project}/{app} 하위에 templates라는 이름의 폴더 추가하기

- 그러면 장고가 알아서 templates 이름을 가진 폴더를 찾고 그 안에서 views.py 파일 내용과 매칭되는 템플릿들을 찾아준다.

 

3. {project}/{app}/templates 하위에 core 폴더 추가 및 core/index.html 파일 추가하기

- 본 실습에선 스타일링을 위해 tailwindcss를 쓸 거니까 아래에 표시한 것과 같이 스크립트 태그도 추가해준다.

 

4. {project}/{project}/urls.py 파일의 urlpatterns 목록에 방금 생성한 뷰를 추가해주기

- index 뷰를 메인 페이지로 쓸 것이기 때문에 빈 문자열을 전달했다.

 

# 공통 템플릿 추가하기

재사용 가능한 공통 템플릿 만들기

주요 키워드: block, endblock, extends

{project}/{app}/templates/core 하위에 base.html라는 이름으로 생성

 

# django-html formatter 설정 (*VS Code 사용하는 경우)

1. settings.json 파일에 아래 내용 추가하기

"emmet.includeLanguages": {
  "django-html": "html"
}

 

2. 프로젝트 venv에 아래 명령어로 djLint 설치하기

(venv)$ pip install -U djlint

 

3. djLint VS Code extension 설치하기

 

*djLint의 모든 규칙들은 기본적으로 활성화가 되어있다. 특정 규칙을 비활성화하고 싶다면 다음 문서 참고해서 설정 파일 추가하면 된다.

📑 djLint Docs - Configuration

 

예를 들어, 이미지 태그(<img>)를 사용할 때 width, height 속성을 추가하지 않으면 다음과 같이 빨간 지렁이가 떠댕긴다.

djLint의 규칙 중 H006을 위반해서 그런 건데, 보통 이미지 태그를 삽입할 때 이미지의 크기는 width, height attribute가 아닌 CSS를 사용해서 조정하기 때문에 H006 규칙은 꺼두는 게 좋아보인다. H006 규칙을 끄기 위해 프로젝트 루트 디렉토리에 djlint.toml 파일을 추가하고 무시할 규칙을 적어두었다. 파일을 저장하고 ctrl+shift+p, Developer: Reload Window 클릭해서 새로고침하면 지렁이가 사라진 것을 볼 수 있다~!

 

*특정 파일 또는 특정 코드에서만 djLint 자체를 비활성화하거나 특정 규칙을 비활성화하고 싶다면 다음 문서 참고!

📑 djLint Docs - Ignoring Code