본문 바로가기
Web/Django

[Django] 기초 무작정 시작하기 - Part 2

by char_lie 2023. 3. 21.
반응형
반응형

https://edder773.tistory.com/88

 

[Django] 기초 무작정 시작하기 - Part 1

Django 기초부터 무작정 시작하기 Django를 하면서 처음 사용하는 것부터 시작해서 하나씩 개념 정리하기 위해 작성하는 포스팅 1. Django를 활용하기 위한 가상환경 사용하기 가상 환경은 프로젝트

edder773.tistory.com

앞서 Part 1에서 준비된 베이스를 바탕으로 계속해서 진행해보자.

django는 파이썬을 활용한 강력한 웹 프레임워크 중에 하나로 사용할 수 있다. 이번엔 서버를 통해 기본 화면을 띄우는 것을 따라해보자.

가장 중요한 것은 파일 하나 수정할 때마다 반영이 되어야하니 꼭 Ctrl + S 를 통해 저장해주자!


기본적으로 django는 데이터의 흐름이 중요한데, URL → View → Templates의 데이터 흐름으로 진행이 된다는 것을 기본적으로 이해하고 있어야한다.

기본적인 틀을 구성해줄 base.html의 파일을 만들어야하고, 이를 Templates(이름 수정 x)라는 폴더안에 넣어서 만들어야한다. 그렇기에 폴더에 Templates라는 폴더를 생성해주자.

주의해야 할점은 Templates가 CRUD나 articles 폴더 안에 있는게 아닌, 밖에 같은 위치에 존재해야한다는 점이다

여기까지 만들었으면, base.html에 ! emmit을 이용해 기본 틀을 써주고, 다음과 같이 block content를 body안에 구성해주자.

base.html안에 있는 block 부분이 이후에 다른 템플릿들에서 가져와서 적용이 되는 부분이다.

템플릿 상속이라 불리고, 하위 템플릿에서 오버라이딩할 수 있는 블록을 정의하는 구간이다.

이해가 안된다면 일단은 따라서 쓰면 된다


여기서부터 이제 만든 app을 URL로 연결해주는 과정을 진행해야한다. urls.py에 가서 경로(path)를 하나 더 설정해서 아래와 같이 추가해주자. 콤마(,)를 넣는것에 유의하고, include를 사용하기 위해서 import include를 해줘야한다.

path('articles/', include('articles.urls'))

위 의미는 articles 폴더의 urls로 경로를 지정해줘야 한다는 뜻이다. 하지만 왼쪽에 보면 articles 파일 내부에는 urls.py가 존재하지 않는다. 그렇기에 우리는 여기서 urls.py 파일을 따로 만들어줘야한다!

여기까지 만들었으면, 이 urls 안에는 다음과 같이 코드를 작성해줄 것이다.

from django.urls import path
from . import views

urlpatterns = [
    path('',views.index, name = "index")
]

views를 불러와서, index라고 정의된 함수를 실행하도록 만들어야한다. 하지만 우리는 index를 정의한적 없다!. 앞에 말한것 처럼 views에 불러온다고 했으니, index를 views에 정의해줘야한다.

따라서 view 폴더에 다음과 같이 작성해주자.

from django.shortcuts import render

# Create your views here.
def index(request):
    return render(request,"articles/index.html")

함수 index를 정의해줬고, return 값을 보면 articles 폴더 안에 있는 index.html를 render 해주는 것을 볼 수 있다. 즉 우리는 index.html을 만들필요가 있고, 이를 위해 templates폴더를 만들어줘야한다.

앱 폴더 안에 templates폴더를 만들고 그 폴더안에 다시 앱 이름을 넣어 그 안에 index.html을 만들어주자

내 경우에는 templates/articles/index.html이 된다.

이제 이 index.html안에 내용을 작성할 것인데, 위에서 base.html에 만들었던 것처럼 오버라이딩을 이용할 것이므로 block을 이용해 정의해준다.

extends는 base.html에 상속을 해주기위해서 필요하니, 맨 위에 설정해주자.

여기서 추가적으로 Setting.py에서 TEMPLATES의 DIRS 부분에 BASE_DIR / "templates"를 추가해주자.

이는 지금 base.html이 앱 파일 내부가 아닌 밖에 있고, BASE_DIR을 통해 외부에 있는 templates 폴더 안을 찾아 base.html을 찾아주기 위해 적용을 해줘야한다.

여기까지 작성이 완료 됐으면, 실제 서버가 정상 작동하는지 확인하기 위해 터미널에 다음과 같은 명령어를 작성해주자.

python manage.py runserver

아래와 같이 문구가 뜨고, http에 해당하는 부분을 Ctrl 클릭해서 서버를 열 수 있다.

 

그러면 다음과같은 페이지가 뜨게되고 위에 URL부분 뒤에 우리가 만든 index가 잘 적용 됐는지 확인하기 위해 /articles로 들어가면 된다.

다음과 같이 정상 작동함을 확인할 수 있다.


번외

나는 이 폴더를 프로젝트로 해서 조금 이쁘게 보이도록 작성해줄 생각이므로, 부트스트랩의 navbar를 넣어줄 것이다.

https://getbootstrap.com/docs/5.3/components/navbar/

 

Navbar

Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

getbootstrap.com

사이트에 있는 navbar 코드를 그대로 가져와서 사용할 것이다.

navbar를 html로 따로 만들어주었고, base.html에 아래 그림과 같이 추가해줬다.

inlcude를 통해 _navbar.html을 불러오고, navbar에서 필요한 코드만 가져와서 수정을 조금 해주었다. 아래처럼 수정해주었다(필요한 부분 빼고 전부 그냥 지우기만함)

이렇게 부트스트랩을 사용해서 아래 처럼 웹페이지를 살짝 바꾸어 주었다.

여기까지가 django를 사용한 기본 페이지 작성이다.

이후부터는 django를 이용하여 게시판을 만드는 과정을 적어보려한다. 게시판이 전형적인 C(생성), R(읽기), U(수정), D(삭제)를 만들기에 가장 좋은 예제이기에 게시판을 만들어볼까 한다.

 

여기까지가 django 기초 틀 만들기 끝!

반응형

댓글