어느덧 멋쟁이 사자처럼 9기의 세번째 장고 세션이다. 저번 시간까지 장고의 WORDCOUNT 페이지를 만들어 보았다.
이번 시간에는 장고를 이용하여 blog 형식의 웹 페이지를 만들어보자.
그 전에! MVT, ORM, CRUD 등의 개념을 짚고 넘어가자
- MVT ( Models, Views, Templates )
장고는 기본적으로 MVT 형식이다. 이게 무슨 말이냐? MVT는 Models, Views, Templates의 약자를 따온 말이다.
MVT란?
Models : 데이터베이스
Views : 기능 담당
Templates : 우리가 실제로 보는 화면 담당
views와 templates는 이전 시간에 많이 써봤기 때문에 어떤 개념인지 대충 파악이 될 것이다. 그럼 Model이 무슨 데이터베이스냐?
원래는 이 데이터들을 다룰 때 복잡한 SQL도 알아야 하고 각각의 테이블도 다룰 줄 알아야 한다. 하지만 장고에서는 그럴 필요 없다.
복잡한 구문들을 우리가 다룰 필요없이 장고가 알아서 데이터 정리를 해준다. 어떻게? ORM 방식으로!
- ORM (Object-Relational Mapping)
객체와 관계형 데이터베이스를 자동으로 연결시켜주는 방식
장고에서는 파이썬 클래스를 이용하여 자동으로 SQL 구문을 생성하여 데이터베이스들을 연결시켜준다. 그래서 우리는 간접적으로 데이터베이스를 다룰 수 있게 된다. 이를 하기 위해 우리는 models.py에 파이썬 클래스를 이용해서 데이터를 적어주면 장고가 알아서 데이터베이스의 테이블로 번역하여 연결시켜준다는 말씀.
- CRUD (Create, Read, Update, Delete)
CRUD
Create : 데이터 생성
Read : 데이터 불러오기 (불러와서 우리가 읽음)
Update : 데이터 수정/갱신
Delete : 데이터 삭제
이것이 백엔드의 기본 기능이자 꽃 이라고 한다.
본격적으로 blog를 만들어보자.
먼저 가상환경을 설치하고 구동하고 장고 설치하고 프로젝트 생성하고 앱 생성하고 서버 구동하고 웹페이지 하나 개설하기까지 해보자.
가장 먼저 CRUD 중 Create 먼저 해보자! (글 쓰는 기능 구현하기) create에서는 새로운 객체를 생성하여 데이터를 저장하는 역할을 만드는데, 그러기 위해서 데이터를 작성/입력 하는 '글 쓰기' 버튼을 만들어보자.
주목할 점 : 전체를 create_write 라는 클래스의 div로 묶어주고, 버튼을 create_btn 의 클래스로 묶어주었다.
처음에는 왜 저렇게 묶는지 이해가 안된다. 하면서 이해해보자. 그런 이유가 있겠지?
근데, index의 화면이 너무 허전하다. CSS를 수정해보자.
✔️ 장고에서 CSS 사용하는 법
장고에서는 CSS 파일을 따로 생성하고 이를 templates에다가 적용하는 방법이 따로 있다. 이를 알아보자.
① 생성한 app 안에 static 폴더 생성 후 static 폴더 안에 css 폴더 생성하고 index.css 파일 생성
② 생성한 static 폴더의 내용을 index.html에 연결하기
꼭 index.html 파일 맨 첫 줄에 {% load static %}라고 써야 한다 !!!
head 에다가 외부의 css 파일을 연결한다는 구문도 작성해준다.
③ settings.py 에 static 등록(?)해주기
목적 : 장고에서 static 파일을 효율적으로 관리해주기 위해 경로를 베이스디렉토리에 써져있는 형식으로 써준다. (?) - 이해 안됨. 질문 ㄱㄱ
↓
이게 무슨 말이냐면~
우리가 만든 static 폴더를 백엔드 서버를 통해 '장고야~ 우리 static 폴더 만들었으니 물밑작업 하면서 알아서 연결해줘~' 이런 느낌.
자, 이제 index.css 를 통해서 웹 페이지를 꾸며보자!
이제 create.html 에 글을 작성하는 폼을 넣어주자.
우선 글 작성 폼을 담아 줄 forms.py 라는 파일을 app 안에 생성하자.
이게 무슨 역할이냐면 ..
이거 왜 만듦?
그 다음 models.py로 간다. 가서 이렇게 class 들을 작성해준다.
위에서 models.py는 파이썬 클래스로 작성한다고 했기 때문에 Class로 작성한다.
class Write(models.Model):
title = models.CharField(max_length=50)
contents = models.TextField()
updated_at = models.DateTimeField(auto_now=True)
class Write(models.Model) : 클래스 지정할 때 클래스 명 첫 문자는 무조건 대문자
title = models.CharField(max_length=50) : title이라는 변수에 models에 있는 CharFiled를 담는다.
contents = models.TextField() : contents라는 변수에 models에 있는 TextField를 담는다.
updated_at = models.DateTimeField(auto_now=True) : updated_at 이라는 변수에 models에 있는 DateTimeField를 담는다.models.Model 은 정확히 무슨 의미?
↓
이게 무슨 말이냐면~
말하기 전에 알아야 할 배경 지식이 있다.
장고의 가장 큰 특성이 뭐라고 했는가. 미리 만들어 놓은 프레임워크를 이용하여 우리가 손 쉽게 기능을 구현하는 점이다.
장고 깃헙에 들어가면 장고 개발자가 미리 만들어 놓은 수많은 코드들이 있다.
class Write(models.Model) 이것의 의미는 장고 깃헙에 만들어놓은 models.Model의 파일을 들고와서
우리가 밑에 title, contents 등 우리가 수정하고 싶은 것들을 덮어쓰면서 수정한다는 뜻이다.
auto_now=True 구문의 메커니즘?
Field 특징
CharField : 짧은 텍스트 입력할 때 쓰는 필드. 짧기 때문에 글자 수 제한을 둔다.
TextField : 긴 텍스트 입력할 때 쓰는 필드.
DateTimeField : 날짜 시간을 입력하는 필드. auto_now=True 넣으면 현재 날짜 시간 자동으로 생성됨.
모델들 생성했으면 터미널 창으로 간다!
왜냐하면 맨 처음 얘기했던 장고가 데이터베이스를 알아서 처리해주는 것을 시키기 위해!
python3 manage.py makemigrations
python3 manage.py migrate
이 두 가지 구문을 통해 우리는 SQL을 배우지 않고도 장고에게 데이터베이스를 관리하도록 시킬 수 있다!
+ 우리가 models를 수정할 때마다 두 가지 구문을 계속 쳐줘야한다. (장고가 데이터베이스를 인식하게 하는 과정)
자, 이제 forms.py로 가자.
forms.py 로 가서 글 작성 form을 설정해준다.
forms.py 에서 글 작성 폼에 대한 데이터를 입력해준다.
이거를 create.html 화면에 띄우기 위해서 views.py 파일로 가서 함수를 설정해주는데,
WriteForm을 가져와서 write_form으로 다시 변수 이름을 선언해주고 , 이를 return 구문에서 다시 동일한 이름으로 write_form으로 지어준다.
이런 창이 완성된다.
*forms.py 와 models.py 의 차이점
models.py : 데이터베이스를 저장하는 파일
forms.py : <form> 태그처럼 우리가 입력할 폼에 관한 데이터를 저장하는 파일
자, 이제 블로그의 형식에 맞게 수정해보자.
블로그라면 ! 우리가 작성한 타이틀과 컨텐츠를 인덱스 화면에 띄워야하지 않겠는가? 이걸 해보자
form method="POST" 의 의미
이 form의 형식이 submit 을 통해 action되면 요청 방식인 POST가 실행된다(url에 표시가 안된다고 한다. 지금은 무슨 말인지 와닿진 않음)
'요청'한다고 생각하면 됨!
이렇게 입력한 데이터를 제출하는 것까지 구현했다. 이제 제출된 데이터를 어떻게 처리할지 views.py로 가서 뚜닥뚜닥해보자!
컨텐츠 작성을 하긴 했는데 ,, 이거를 index 화면에 띄워줘야하지 않을까? 이걸 어떻게 띄울까?
적은 내용들을 전부 all_write라는 변수의 이름을 씌우고, 이를 다시 index.html로 보내버린다 !
'Web > django & python' 카테고리의 다른 글
| CRUD - Read (0) | 2021.05.19 |
|---|---|
| Model 실습 (0) | 2021.05.18 |
| Django 2 (0) | 2021.05.11 |
| Django 1 - (2) (0) | 2021.05.06 |
| Django 1 - (1) (0) | 2021.05.03 |