🦁 멋사 6번째 활동

황다은·2023년 5월 11일

django html python

🦁 멋쟁이사자처럼

목록 보기

6/8

오늘도 고명이 사진으로 시작........... 쟤는 뭐했다고 저렇게 기절해있나... 부럽다,,

지난번 활동에 이어서 오늘은 PhotoWeb을 완성했다. 구현했던 기능을 참고해서 한번 정리를 해보도록 하겠다><

1. MTV 패턴을 이용한 기능 구현

먼저 Template이란 사용자에게 보이는 부분으로 웹 페이지의 골격이라고도 한다. 즉 HTML로 작성된 부분을 말하는데 Django에서의 템플릿은 일반적인 HTML작성과 거의 동일하다.

템플릿 태그(Template Tag)

HTML이 파이썬 코드로부터 데이터를 바로 넘겨받아 손쉽게 처리할 수 있는 도구를 말한다.
HTML은 Hyper Text Markup Language로 마크업언어에 속하는데 마크업 언어는 정적인 웹페이지다. 따라서 javascript를 이용해 동적인 처리를 해주어야하는데 django에서는 이를 템플릿 태그를 이용해 바로바로 손쉽게 처리할 수 있다.

{}로 감싸는 형태로 for문, if문같은 파이썬의 기본 구문에 사용이 가능하다.

뷰(View)

템플릿과 모델 사이를 이어주는 다리 역할을 한다. 모델을 통해서 데이터에 접근하고 템플릿으로부터 요청받은 데이터를 처리한 후 다시 템플릿에 전달을 하는 역할을 한다.
예시로 프론트엔드와 백엔드를 들수있다.
1. 프론트엔드가 백엔드에게 데이터를 요청한다.
2. 백엔드에서 프론트엔드가 요청한 데이터를 뽑아 처리한다.
3. 처리한 데이터를 다시 프론트엔드에게 제공한다.

이렇게 데이터를 보내고 다시 돌려주는 요청을 처리하는 역할을 한다.

뷰에는 함수형 뷰와 클래스형 뷰가있다.
간단하게 설명하자면 파이썬 기본구문인 함수와 클래스를 이용한 뷰다.
함수형 뷰는 def 함수명으로 시작하고, 클래스형 뷰는 class 클래스명으로 시작한다.
구체적인 차이는 나중에 다룰 예정이므로 이부분을 나갈때 자세히 살펴보도록 하겠다.

URL

라우팅 역할과 동시에 서버로 해당 주소에 할당된 리소스를 요청하는 역할을 한다.
즉, 프론트엔드가 백엔드에게 데이터를 요청할수있도록 도와주는 역할을 한다고 볼수있다.
리소스는 HTML페이지와 내부를 채우는 데이터도 포함된다.
url은 이론보다는 실습을 통해서 이해하는게 더 빠르고 쉽다고 생각해서 실습화면을 통해 기록해보겠다.

모델 - 템플릿 - 뷰 - URL 순서로 작업할 예정이다. (작업 순서는 상관없다!)

1. 사진 목록 화면

👉 나는 구글에서 코코몽 이미지 주소를 가져와 목록 화면에 나타날 수 있게 하였다.

1) photo 폴더 안에 templates 폴더를 따로 만든 후 구분을 위해 templates 폴더 안에 photo 폴더를 만들어준다.

2) templates/photo 폴더 안에 photo_list.html을 만든다.

photo_list.html은 사진 목록을 보여주는 템플릿이다.

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <title>Photo App</title>
</head>
<body>
    <h2>사진 목록 페이지</h2>
    <section>
        {% for photo in photos %}
        <div>
            <h2>
                <a href="">{{photo.title}}</a>
            </h2>
            <img src="{{photo.image}}" width="50%">
            <p>{{photo.author}}</p>
            <p>{{photo.description}}</p>
        </div>
        {% endfor %}
    </section>
</body>
</html>

💡 템플릿 태그를 이용해 데이터를 쉽게 받아올 수 있다!

3) 사진 목록을 나타내는 뷰를 작성한다.

from django.shortcuts import render
from .models import Photo

def photo_list(request):
	photos = Photo.objects.all()
    return render(request, 'photo/photo_list.html', {'photos':photos})

① photo_list 함수를 정의한다.
② Photo 모델 데이터를 모두 가져와 {}에 넣어 템플릿으로 전달한다.
③ photo/photo_list.html이 웹에 보여질 수 있도록 가공하여 전달한다.

4) 방금 만든 뷰를 URL에 연결한다.

from django.urls import path
from . import views

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

① 현재 폴더 안에있는 views.py를 호출한다.
② ''는 루트주소를 의미한다. (즉, 처음 들어갔을때 보이는 첫 화면, 메인 페이지)
③ views.py의 photo_list함수를 호출하여 photo_list.html을 보여준다.

5) 프로젝트 URL을 연결한다.

path옆에 , include #를 추가한다.
path('', include('photo.urls'), # urlpatterns 안에 이 경로 추가한다.

''는 루트주소를 의미하며 프로젝트 urls.py에 photo/urls.py 파일을 등록하는 작업이다.

2. 세부 정보 화면

1) photo/templates/photo 폴더 안에 photo_detail.html을 생성한다.

2) 세부 정보 뷰를 작성한다.

def photo_detail(request, pk):
	photo = get_object_or_404(Photo, pk=pk)
    return render(request, 'photo/photo_detail.html', {'photo':photo})

① photo_detail 함수를 정의한다. pk는 모델의 데이터인 사진을 구분하는 변수다.
② 찾는 데이터가 있으면 해당 데이터(사진을)를, 없으면 404에러를 반환하는 함수다.
③ photo/photo_detail.html이 웹에 보여질 수 있도록 가공하여 전달한다.

3) 방금 만든 세부 정보 뷰를 URL에 연결한다.

path('photo/<int:pk>/', views.photo_detail, name='photo_detail'),

pk는 데이터 구분을 정수형으로 하기위해 int로 주었다.

4) 템플릿에 url을 반영한다.

<a href="{% url 'photo_detail' pk=photo.pk %}">{{photo.title}}</a>

위에 작성했던 photo_list.html에 비어있던 a태그안에 세부 정보 url을 연결해준다.

3. 작성 화면

작성 기능을 넣으려면 먼저 폼(form)에 대해 알아야 한다.
폼은 사용자가 데이터를 입력해 서버로 보내도록 도와주는 양식이다.
사용자가 양식을 채우고 POST 방식으로 요청을 보내면, 서버는 해당 요청을 받아서 처리한다.

1) photo/templates/photo 폴더 안에 photo_post.html을 생성한다.

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <title>Photo App</title>
</head>
<body>
	<h1><a href="/">홈으로 돌아가기</a></h1> 
    <div>
    	<section>
            <h2>New Photo</h2>
                <form method="POST">
                	{% csrf_token %} {{form.as_p}}
                    <button type="submit">완료!</button>
                </form>
          </section>   
    </div>
</body>
</html>

① form에서 POST 방식으로 요청을 보낸다.
② csrf 공격을 방지하기위해 csrf_token을 추가해준다.
③ form.as_p를 이용해 데이터와 텍스트가 <p> 안에 작성되게 한다.

form 태그 데이터 전송 방법(method)

1. GET

입력한 데이터를 URL에 붙여 전송하는 방식으로 데이터가 다 보여 보안에 취약하다.

전송 속도는 POST 방식보다 빠르다.

페이지를 이동할 때 파라미터 전송을 하거나 검색결과처럼 간단하고 보안이 필요하지 않을 때 주로 사용한다.

2. POST

입력한 데이터를 본문안에 포함해서 전송하는 방식으로 데이터가 URL에 보이지 않아 GET방식보다 보안에 우수하다.

로그인, 회원가입처럼 보안이 필요하거나 복잡한 형태의 데이터를 전송할 때 주로 사용한다.

CSRF(Cross-Site Request Forgery, 크로스 사이트 요청 위조)

사용자가 서버에 요청을 보낼 때 의도하지않은 요청으로 만들어 서버로 보내는 공격

서버에서 랜덤 값을 생성해 response에 포함하여 전달되고, 사용자 세션 정보와 연관되어 서버에 전송하고 서버는 토큰과 세션의 유효성을 검사해 요청을 처리한다.

POST 방식 사용시 주의사항
1. form으로 데이터를 전송할때 csrf_token이 같이 전달될 수 있도록 숨김 데이터로 같이 전송해주어야한다.
2. Django에서는 모든 POST 요청에 대해 CSRF토큰을 검사한다.

3) photo/forms.py을 생성한다.

from django import forms
from .models import Photo

class PhotoForm(forms.ModelForm):
	class Meta:
    	model = Photo
        fields = ('title', 'author', 'image', 'description')

사진을 등록하는 폼을 PhotoForm을 만들어준다.

4) 작성 뷰를 작성한다.

from .forms import PhotoForm

def photo_post(request):
	if request.method == "POST":
    	form = PhotoForm(request.POST)
        if form.is_valid():
        	photo = form.save(commit=False)
            photo.save()
            return redirect('photo_detail, pk=photo.pk)
    else:
        form = PhotoForm()
    return render(request, 'photo/photo_post.html', {'form':form})

① 현재 폴더 안에 있는 forms.py의 PhotoForm 클래스를 참조한다.
② photo_post 함수를 정의한다.
③ 조건문으로 들어온 요청이 POST인지 판별한다.
④ 요청이 POST이면 템플리의 폼에 있는 버튼이 눌린 것이다.(사용자가 사진을 올린다는 뜻이다)
⑤ 요청으로 들어온 폼 데이터를 form 변수에 저장한다.
⑥ 폼에 맞춰 잘 작성된 데이터인지 검사하고 이 데이터를 photo에 저장해 DB에 저장한다.
⑦ 다시 다른 페이지로 이동시킨다.(photo_detail로)
⑧ POST요청이 아니면 새로 들어온 사용자이므로 폼을 제공한다.
⑨ 템플릿과 form을 넘겨주어 사용자가 입력할 수 있는 화면을 제공한다.(photo_post.html)

5) 방금 만든 작성 뷰를 URL에 연결한다.

path('photo/new/', views.photo_post, name='photo_post'),

작성하는 페이지의 주소창에 new/를 보이게 하고, photo_post 함수롤 호출한다.

6) 메인화면 템플릿에 url을 반영한다.

<h3><a href="{% url 'photo_post' %}">New Photo</a></h3>

photo_list.html에 New Photo를 누르면 뷰를 통해 photo_post를 호출한다. (템플릿도 리턴)

4. 수정 화면

수정화면은 작성화면과 다를게 별로 없다. 똑같이 폼을 받아야하고 POST방식으로 전송을 하지만 이미 데이터가 채워져있다는 것이 다르다. 이 부분을 참고해서 구현을 해보도록 하겠다.

먼저 작성 기능과 폼을 사용하는 것은 똑같기때문에 post.html을 그대로 이용하겠다. (이렇게 되면 수정 템플릿을 작성할 필요가 없다!)

1) 수정 뷰를 작성한다.

def photo_edit(request, pk):
	photo = get_object_or_404(Photo, pk=pk)
    if request.method == "POST":
    	form = PhotoForm(request.POST, instance=photo)
        if form.is_valid():
        	photo = form.save(commit=False)
            photo.save()
            return redirect('photo_detail', pk=photo.pk)
    else:
    	form = PhotoForm(instance=photo)
    return render(request, 'photo/photo_post.html', {'form':form})

① photo_edit 함수를 정의한다.
② 수정할 대상을 pk로 찾아오는데, 찾는 대상이 없으면 404 에러를 반환한다.
③ 들어온 요청이 POST인지 판별하고 수정을 의미하는 POST이면
④ instance 변수에 수정 대상이 될 데이터를 선정한다.
⑤ 폼에 맞게 잘 작성된 데이터인지 확인 후 DB에 저장한다.
⑥ photo_detail, 즉 세부 화면 페이지로 이동해서 수정된 화면을 보여준다.
⑦ GET 요청이 들어오면 photo 데이터를 instance변수에 담아 기존 데이터를 수정하도록 처리한다.
⑧ 조건문이 끝나면 photo_post화면을 보여준다.

2) 수정 뷰를 URL에 작성한다.

path('photo/<int:pk>/edit/', views.photo_edit, name='photo_edit),

pk로 데이터를 구분하고 이 데이터를 숫자로 구분하기 위해 정수형(int)으로 받아온다.

3) 세부화면 템플릿에 url을 반영한다.

<h3><a href="{% url 'photo_edit' pk=photo.pk %}">Edit Photo</a></h3>

이게 마지막~~~

이렇게 첫버째 장고 실습이 끝났다......
정말 간단한 페이지를 구현하는 실습이였는데, 생각보다 다양한 오류를 접했고 구현해야할 부분이 많았다..
그래도 에러 잡는거 너무 쾌감 있어>< 재밌어>< (는 해결해서 다행쓰^^)

두번째 실습은 Todo리스트로 진행할 예정인데 후다다닥 끝내기 도전!

황다은

BackEnd

이전 포스트

🦁 멋사 5번째 활동

다음 포스트