파이썬+ 장고 웹 페이지 만들기 (wecode 수업 전 예습)

홍태경·2021년 2월 23일

Wecode_log

목록 보기

3/6

이글의 목적

일단 본인은 웹 개발에 대한 개념이 거의 부족한 상태입니다.
무슨 역할을 하는가 보다, 이걸 사용하므로서 이런 흐름으로 간다 라는 메카니즘의 틀을 이해하고 싶어서 작성하게 되었습니다.

파이썬으로 웹페이지를 어떻게 만드는가?
장고라는 것은 무엇이며 왜 사용하는가?

*시작 전 준비및 설명

이 글은 장고를 제외한 다른 어플의 설치는 생략되어 진행 하였습니다.

Cmder - 윈도우 사용자를 위한 터미널 프로그램 ( 윈도우 환경에서 Dos 명령어 뿐 아니라 리눅스 명령어도 그대로 사용싶은 이유
파이참 - 파이썬에 개발에 특화된 IDE 무료버전
git - 프로그래머의 버전 관리를 편하게 하기 위한 도구
github - 깃에서 사용하는 클라우드 서비스 파일 공유 및 공동 작업 유용
장고 프로젝트 생성하기.
데이터베이스 관리자 계정 생성하기
블로그 앱과 페이지 앱 만들기.

시작

- 프론트 엔드와 백엔드 가 필요한 이유

- 프론트엔드로 구성한 웹 사이트

html + CSS + 자바 스크립트 만으로 웹 사이트를 만들 수 있다. 그것은 클라이언트가 서버에게 HTML로 이루워진 단순한 구조이고 특별한 추가 요구 사항 없으면 서버에게 index.html을 찾아서 보내준다. index를 받은 클라이언트는 렌더링해서 화면에 보여짐.

- 백엔드 기술이 필요한 이유.

위에 웹 사이트는 단순하기 떄문에 개발하기 쉽다는 장점이 있다 . 그러나, 대부분 웹 사이트는 방문자의 행동 및 새로운 내용을 추가할 때마다 일일이 수정해야 하는데 그런 이유로 대부분 웹 사이트는 데이터베이스를 활용합니다.
디비 활용을 하면 사용자 계정, 게시글과 댓글,조회수,추천수같은 정보를 수시로 저장할 수 있다. 이런 기능까지 고려한 웹 사이트는 프런트엔드 쪽이 아닌 백엔드 기술까지 다룰 수 있어야 합니다.

- 프레임워크의 역할

그럼 데이터베이스까지 배워야 하는가? 라는 질문에는 No
그런 걱정을 줄여주기 위해 프레임워크가 나왔다. 대부분 웹사이트는 비슷한 포메이션으로 돌아간다.
생성하고Create, 조회하고Read, 수정하고Update, 삭제하고Delete, 이렇게 네 가지 기능이 필수로 들어간다 프레임 워크는 이렇게 개발에서 주로 사용하는 기능을 더 쉽게 개발할 수 있게 도와줍니다. 그래서 더 안정적이고, 시간을 단축하며 안정적인 웹 사이트를 구축할 수 있다.

- 장고의 동작 구조 이해하기.

MTV 패턴

Model로 자료의 형태를 정의
View로 어떤 자료를 어떤 동작으로 보여줄지 정의
Telmplate로 웹페이지를 출력할 모습을 정의

**이렇게 웹 사이트를 분리하는 이유는 프런트엔드, 백엔드가 자기의 작업에 집중할 수 있게 하기 위해서 이다

- 클라이언트 측

페이지 요청

- 서버층

urls.py ( 함수가 정의 되어진 곳) 에서 개발자가 써놓은 내용을 확인. ex) url로 접속했을 때, index 함수를 실행시켜라.
~.com/about_me/로 접속 했을땐 'about me라는 함수를 실행시켜라' 라는 내용이 기술되어 있음.
Views.py (urls.py에서 언급하는 함수 또는 클래스는 views.py에서 정의하며 ex) index 함수에는 '최근 게시글 5개를 index.html에 채워서 보여준다'나 'delete_post라는 함수가 있다면 '게시글을 삭제해라'
models.py (게시글 Post에 내용 정의) 게시글에 담아야 할 내용은 제목,글,내용,작성자,작성일이다 라는 식으로 정의 합니다. models.py에서 정의한 모델에 맞게 데이터베이스에서 필요한 자료를 가져옵니다. 예를들어 views.py의 index 함수가 데이터베이스에서 최근 게시글 5개를 가져오는 기능을 한다면, 데이터베이스에서 최근 5개를 불러옵니다.
Template ( 데이터베이스에서 가져온 자료를 템플릿의 빈칸을 채워 사용자의 웹 부라우저로 보냅니다.

실습.

- 목차

깃허브 내 로컬 컴퓨터로 클론하기.
파이참 실습 환경 설정
가상환경 만들기.
가상환경 실행하고 장고 설치하기.
장고 프로젝트 생성하기.

1. 깃허브 내 로컬 컴퓨터로 클론하기

깃 허브 로그인 후 왼쪽에 Repositories 목록 옆에 버튼 클릭.

내 컴퓨터로 깃 허브 저장소 클론하기.
생성하였으면 우측에 Code > 저장소 URL 복사

https://github.com/gusxoqkqh1/hong_tae.git

내 로컬에 gitbug라는 디렉토리 생성후 Cmder 실행시켜 깃허브 디렉토리로 이동
그다음, git clone명령어와 복사한 저장소 URL을 입력하세요.
사용자이름, 패스워드 입력하면 기섷브 폴더 안에 저장소 이름과 같은 폴더가 생성

λ cd /

C:\
λ cd github\

C:\github
λ ls

  
C:\github
λ git clone https://github.com/gusxoqkqh1/hong_tae.git
Cloning into 'hong_tae'...
  
  #github 로그인 패스워드 입력
  
Username for 'https://github.com': gusxoqkqh1  
                                             Password for 'https://gusxoqkqh1@github.com':
remote: Enumerating objects: 4, done.
remote: Counting objects: 100% (4/4), done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 4 (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (4/4), done.  
λ ls
hong_tae/
         
C:\github                                       
λ cd hong_tae\                                  
                                    
C:\github\hong_tae (main -> origin)             
λ ls -a                                         
./  ../  .git/  .gitignore  README.md

2. 파이참 실습 환경 설정

파이썬 프로젝트 폴더를 지정하기 위해 아까 클론해온 폴더를 파이참으로 열기합니다. 그럼 파이참이 폴더를 프로젝트 폴더로 인식합니다.

3. 파이참을 이용한 가상환경 만들기

[왜 굳이 가상환경을 사용할까?]

한 컴퓨터 안에 웹 사이트 개발 프로젝트 말고 다른 프로젝트 A도 별도로 진행하고 있다고 가정해보면 웹 사이트 개발 프로젝트를 위해 설치한 외부 모듈이 파이썬 개발환경 전체에 영향을 준다면 관계가 없는 프로젝트 A에 의도하지 않는 영향을 끼칠 수도 있습니다. 이런 불상사를 방지해 줍니다.

외부 라이브러리는 가상환경에 설치 예정

메뉴에서 File > Settings 클릭
왼쪽 메뉴에 Project:프로젝트 폴더명 > Python Interpreter 클릭 한 다음 설정 [Add] <주의> \venv라고 경로에 직접 적어줘야 한다.
[venv] 라는 디렉토리가 추가되었다.
pip 라는 Sepuptools가 생성되면 성공! [APply 버튼을 누르고 OK 버튼을 클릭 ]

3-1 .gitinore에 가상환경 폴더(venv) 추가하기

.gitinore 란 깃에서 버전관리를 하지 않겠다 라는 폴더이며 
.venv와 .idea\ 는 넣어주도록 한다

4.가상환경 실행하고 장고 설치하기.

(venv) 가상환경이 실행한 상태
가상환경 빠져나오기 - deactivate

서버 접근할 때 경로 C:\github\hong_tae

**Cmder**

    
    C:\github\hong_tae (main -> origin)
(venv) λ venv\Scripts\activate.bat
    
    (venv) λpip list
Package    Version
---------- -------
pip        21.0.1
setuptools 53.0.0

(venv) λ deactivate
C:\github\hong_tae (main -> origin)
λ

4-1 가상환경에 장고 설치.

    (venv) λ pip install django
Collecting django
  Using cached Django-3.1.7-py3-none-any.whl (7.8 MB)
Collecting pytz
  Using cached pytz-2021.1-py2.py3-none-any.whl (510 kB)
Collecting asgiref<4,>=3.2.10
  Using cached asgiref-3.3.1-py3-none-any.whl (19 kB)
Collecting sqlparse>=0.2.2
  Using cached sqlparse-0.4.1-py3-none-any.whl (42 kB)
Installing collected packages: sqlparse, pytz, asgiref, django
Successfully installed asgiref-3.3.1 django-3.1.7 pytz-2021.1 sqlparse-0.4.1

(venv) λ pip list
Package    Version
---------- -------
asgiref    3.3.1
Django     3.1.7     # 장고버전 3.0 이면 정상 설치 완료 
pip        21.0.1
pytz       2021.1
setuptools 53.0.0
sqlparse   0.4.1

5. 장고 프로젝트 생성하기.

본격적으로 장고로 웹사이트를 만들고 서버를 실행해 웹 브라우저에 나타내 보자

django-admin startproject (아무이름_prj .)

(venv) λ django-admin startproject django_prj .
    (venv) λ ls
django_prj/  manage.py*  README.md  venv/

새 장고 프로젝트가 잘 생성 되었는지 확인 아직 마이그레이션을 하지 않았다는 오류 메시지가 나타나지만 생성에 문제가 되지 않는다. 
python manage.py runserver

    (venv) λ python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
←[31m
You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.←[0m
←[31mRun 'python manage.py migrate' to apply them.←[0m
February 23, 2021 - 13:02:53
Django version 3.1.7, using settings 'django_prj.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

Starting development server at [http://127.0.0.1:8000/]

- urls와 Settings를 많이 다룰 것입니다. urls는 사용자가 어떤 URL 형식으로 접근했을 떄 어떻게 웹 사이트를 작동시킬지르 정리해 놓은 파일
-Setting 파일은 이 장고 프로젝트의 설정을 담고 있는 파일 입니다.

6. 데이터베이스 관리자 계정 생성하기

위에 서버를 실행했을 떄, 나온 오류 메시지는 아직 적용하지 않은 17개 마이그레이션이 있다. 이것을 적용하기 전까지 당신은 프로젝트를 제대로 작동하지 않을 수 있다
장고의 마이그레이션이란 데이터베이스가 기본적으로 필요한 테이블을 미리 마련해 두기 때문이다.

6-1 데이터 베이스 생성하기.

마이그레이션을 적용하기 위해 터미널에서 Ctrl + C 를 눌러 지금 돌아가고 있는 서버를 중단하고 python maage.py migrate 명령을 입력 그럼 db.sqlte3 라는 파일이 새로 생성되고, 그 안에 마이그레이션을 반영한 데이터베이스가 생성됩니다.

(venv) λ python manage.py migrate
←[36;1mOperations to perform:←[0m
←[1m  Apply all migrations: ←[0madmin, auth, contenttypes, sessions
←[36;1mRunning migrations:←[0m
  Applying contenttypes.0001_initial...←[32;1m OK←[0m
  Applying auth.0001_initial...←[32;1m OK←[0m
  Applying admin.0001_initial...←[32;1m OK←[0m
  Applying admin.0002_logentry_remove_auto_add...←[32;1m OK←[0m
  Applying admin.0003_logentry_add_action_flag_choices...←[32;1m OK←[0m
  Applying contenttypes.0002_remove_content_type_name...←[32;1m OK←[0m
  Applying auth.0002_alter_permission_name_max_length...←[32;1m OK←[0m
  Applying auth.0003_alter_user_email_max_length...←[32;1m OK←[0m
  Applying auth.0004_alter_user_username_opts...←[32;1m OK←[0m
  Applying auth.0005_alter_user_last_login_null...←[32;1m OK←[0m
  Applying auth.0006_require_contenttypes_0002...←[32;1m OK←[0m
  Applying auth.0007_alter_validators_add_error_messages...←[32;1m OK←[0m
  Applying auth.0008_alter_user_username_max_length...←[32;1m OK←[0m
  Applying auth.0009_alter_user_last_name_max_length...←[32;1m OK←[0m
  Applying auth.0010_alter_group_name_max_length...←[32;1m OK←[0m
  Applying auth.0011_update_proxy_permissions...←[32;1m OK←[0m
  Applying auth.0012_alter_user_first_name_max_length...←[32;1m OK←[0m
  Applying sessions.0001_initial...←[32;1m OK←[0m

C:\github\hong_tae (main -> origin)
(venv) λ ls
db.sqlite3  django_prj/  manage.py*  README.md  venv/ 
    
    (venv) λ python manage.py createsuperuser
Username (leave blank to use 'hong_tae'): hong_tae@gmail.com
Email address: zx5793680!
←[31;1mError: Enter a valid email address.
←[0mEmail address: hong_tae@gmail.com
Password:
Password (again):
Superuser created successfully.

C:\github\hong_tae (main -> origin)

6-2 관리자 계정 생성하기.

python manage.py createsuperuser

    (venv) λ python manage.py createsuperuser
Username (leave blank to use 'hong_tae'): hong_tae@gmail.com
Password:
Password (again):
Superuser created successfully.

C:\github\hong_tae (main -> origin)
(venv) λ python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
February 23, 2021 - 13:40:52
Django version 3.1.7, using settings 'django_prj.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

http://127.0.0.1:8000/admin 접속

7. 블로그 앱과 페이지 앱 만들기.

가상환경 실행 확인 후 blog 앱 만들어보자

앞에 (venv)가 실행중이면 
python manage.py startapp blog를 입력한다.

(venv) λ python manage.py startapp blog

C:\github\hong_tae (main -> origin)
(venv) λ ls
blog/  db.sqlite3  django_prj/  manage.py*  README.md  venv/
    
(venv) λ python manage.py startapp single_pages

C:\github\hong_tae (main -> origin)
(venv) λ ls
blog/  db.sqlite3  django_prj/  manage.py*  README.md  single_pages/  venv/

위에 폴더 ( blog, sing_pages)가 생성되어 있구, 각폴더에는 admin,apps,models,tests,views 파일이 생성된 것을 확인할 수있다.

블로그 앱과 single_pages 앱 깃에 커밋하고 push 명령어를 입력해서 깃 허브에 커밋 이력을 업로드.

    git add .
    git commit -m "blog앱과 single_pages 앱 생성하기"
    git push

모델 만들기

7-1 모델 만들기

장고의 장점 중 하나는 모델을 이용해 프레임워크 안에서 데이터베이스를 관리할 수 있다는 것 입니다. 모델은 데이터를 저장하기 위한 하나의 단위


Models.py 을 열어 Post 모델 생성.

제목, 내용, 작성일, 작성자 정보

from django.db import models


class Post(models.Model):
   title = models.CharField(max_length=30)         # 클래스 최대 길이 30
   content = models.TextField()



   created_at = models.DateTimeField()      # created_at 필드에는 날짜로

7-2 데이터베이스에 Post 모델 반영하기.

아직 Post 모델은 파이썬 클래스로만 존재합니다. 이를 데이터베이스에 반영해야 실제 테이블이 생성됩니다. 터미널에 python manage.py makemigrations을 입력하세요.

(venv) λ python manage.py makemigrations
No changes detected

'No changes detected'
분명 models.py를 수정했는데 왜 아무런 변화도 감지 하지 못했을까요? 프로젝트 폴더 안에 있는 settings.py파일에 현재우리의 'blog' 앱을 등록하지 않았기 때문입니다.

settings.py에 blog 앱 등록하기.

settings.py에는 INSTALLED_APPS라는 리스트가 있습니다. 여기에 'blog','single_pages' 앱을 추가.

데이터베이스에 Post 모델 반영

(venv) λ python manage.py migrate

(venv) λ python manage.py migrate
←[36;1mOperations to perform:←[0m
←[1m  Apply all migrations: ←[0madmin, auth, blog, contenttypes, sessions
←[36;1mRunning migrations:←[0m
  Applying blog.0001_initial...←[32;1m OK←[0m

아직 데이터베이스 적용이 되지 않은 상태
0001_intial.py

깃허브의 gitignore에 migrations/를 추가하여 괸라하지 않는 대상 목록에 추가해준다.

홍태경

나의 에고를 인정하고 사랑하자

이전 포스트

파이썬 코딩 무료강의-웹 크롤링 (feat. 나도코딩)

다음 포스트