220119 TIL

TIL DAY 160

오늘 배운 일

✔️ Django 웹 개발

1. Django 폼(Form)

이번에는 CRUD 중 Create 에 해당하는 블로그 글쓰기 페이지의 폼을 만들어보겠다.

우선 직접 코딩을 하기 전에 어떤 페이지를 작성할지 알아보자!

위의 이미지는 관리자 페이지의 포스트 작성 화면을 보여주고 있다.

이런 식으로 문자열 형식의 제목과 내용을 입력하는 곳이 있고 SAVE 즉 작성한 데이터를 서버로 전송하는 버튼도 존재한다.

이렇게 세 가지 기능을 폼으로 구현을해보겠다.

우리 costory VSCode 로 돌아가서...

폼을 만들건데 먼저 posts 디렉토리 안에 새로운 파일을 만들어서 이름을 forms.py 라고 지어준다.

forms.py 파일에서 우리가 사용할 폼을 구현하고 템플릿과 뷰에서는 이 폼을 가져다가 사용만 하면 된다.

django 의 폼은 Form 클래스를 작성하는 것부터 시작한다!

하나의 Form 클래스가 하나의 폼이 되는 것이다.

밑에 코드를 참고해서 작성해보자!

forms.py

모든 Form 클래스는 이런 식으로 django form 의 Form 클래스를 상속해서 구현한다.

그 다음에 클래스 안에 input 항목들을 하나씩 만들어주면 된다.
작성하는 방식이 모델을 작성할 때와 매우 흡사하다.

한 번 따라서 작성해보자!

각각 title 과 content 라는 변수에다가 CharField 를 사용해서 속성들을 지정해둔다.

전에 보았던 HTML 폼을 떠올리면, input 태그를 적을 때 타입 속성에 따라 위젯이 구분된다고 말했었다.

기본적으로 모든 폼 필드는 해당 필드에 맞는 디폴트 위젯 즉 기본 위젯을 가지고 있다.

예 )

• 날짜를 입력하는 DateField 라면 달력 모양으로 입력을 받는 위젯
• CharField 라면 한 줄 입력을 위한 위젯이 기본적으로 설정되어 있다.

그리고 필요하다면 폼 필드를 정의할 때 위젯을 따로 명시할 수 있다.

CharField 는 기본적으로 TextInput 위젯 즉 한 줄 입력을 위한 위젯을 가지고 있는데, 내용을 경우 문자열이기 하지만 여러 줄을 입력해야 한다.

여러 줄 입력을 위한 위젯을 Textarea 이란게 있다.
그리하여 위에처럼 위젯을 설정해둔 것 이다.

폼을 정의했으니까 이제 뷰에서 이 폼을 가져와서 템플릿으로 보내준다.

전에 먼저 urls.py 로 가서 해당 부분을 주석 해제시킨다.

urls.py

주석 해제시키기전...

해제 시킨후...

그리고 괄호 안에 name 은 'post-create' 이런 식으로 URL 네임을 작성해준다.

다음으로 views.py 로 가서 글 작성에 해당하는 뷰이니까 이름은 post_create 로 하고 파라미터로 request 를 넣어준다.

그리고 post_form 이라는 변수에 PostForm 사용해준다.

views.py

그리고 import 를 안해주었다면 위의 코드를 참고해서 PostForm 을 불러온다.

이 폼을 넘겨주면 되는데 따라서 작성해보자!

위의 코드들을 살펴보면, render 함수에 세 번째 파라미터로 context 를 입력했는데, post_create 에는 변수를 넣지 않고 사전형 형태인 코드를 넣어주었다.

뷰를 다 만들었으니까 템플릿을 만들어주겠다.

templates 안에 posts 디렉토리에 새로운 파일을 생성하고 post_form.html 이라고 지어준다.

일단 디자인 요소는 배제하고 간단하게 기능 구현에 집중해보겠다.

원래라면 앞에서처럼 form 태그를 쓰고 각각의 입력될 컴포넌트를 모두 적어주어야 하지만...

django 의 Form 클래스가 대부분 작성해주기 때문에 우리는 form 태그와 서버로 전송을 하기 위한 버튼만 만들어준다.

따라서 작성해보자!

post_form.html

폼에서 직접 적어야 하는 부분은 다 끝났다.
나머지는 뷰에서 넘겨준 Form 클래스를 사용하면 된다.

{{form}} 처럼 적으면 폼의 자세한 부분은 Form 클래스를 참고해서 django 가 자동적으로 생성해준다.

그럼 이제 한 번 확인해보자!

터미널을 켜서 서버를 실행시켜준다.

python3 manage.py runserver

글 작성을 위한 URL 은 posts/new 였었다.

http://127.0.0.1:8000/posts/new/

들어가면 이렇게 작성한 폼이 나타난다.

다음으로 f12 혹은 오른쪽 마우스를 클릭해서 검사로 들어가서 코드를 확인해보면...

우리가 작성한 django 의 폼이 label 과 input 쌍으로 변환이 되었다는 것을 확인할 수 있다.

하나만 더 알아보자면 템플릿으로 돌아가서...

지금은 단순히 폼이라고 작성해서 label 과 input 이 쌍으로 렌더했지만, django 는 이러한 폼을 다른 HTML 컴포넌트와 함께 구조적으로 렌더할 수 있는 옵션을 제공한다.

form 뒤에 점을 붙이고 as_ul 라고 작성해준다.

post_form.html

ul 같은 경우에는 unordered list 의 약자로 순서가 없는 리스트를 말한다.

이렇게 적으면 폼의 각 요소들을 리스트 형식으로 바꿔서 렌더링한다.

다시 페이지로 가서 새로고침을 해주면...

폼이 위에처럼 li 태그 안에 들어가 있는 것을 알 수 있다.

리스트 형식으로 렌더해주는 as_ul 말고도 테이블 형식으로 바꿔주는 as_table 이나 p 태그로 렌더해주는 as_p 도 존재한다.

위에 이미지처럼 아무 제목이랑 내용을 작성해서 전송시켜도 아무런 변화가 없다.

아직 우리는 폼만 작성했을 뿐 다른 로직을 구현하지 않아서 그러하다.

끝으로 :

• 오늘은 우리 costory 프로젝트에서 간단히 블로그 글쓰기 페이지를 만들어보았다.
• Django 의 폼 형식을 사용하면 일일이 태그들을 하나씩 작성하는 것 보다 훨씬 편리하다.