지난 이야기🌿
5주 차에는 아이디에이션을 진행했다.
6주 차(2021.05.03-2021.05.06)
6주 차에는 장고(Django) 세션이 있었다. 장고에 대해 간단히 배우고 단어 수 세기 예제를 통해 직접 앱을 만들어보았다.
Django란 무엇인가?
파이썬으로 작성된 오픈 소스 웹 애플리케이션 프레임워크다. 여기서 프레임워크는 기능을 수행(예) 로그인, 회원가입 등) 하기 위해 잘 설계된 코드를 말한다. 이 코드를 활용하면 웹사이트 내에서 자주 쓰이는 기능을 빠르게 만들 수 있다.
월요일
월요일 세션에서는 VScode를 사용해 다음과 같은 단계로 실습을 진행했다.
* 본 포스팅은 윈도우를 기준으로 한다.
파이썬 버전 확인 - 가상환경 설정 - 장고 설치 - 프로젝트 만들기 - 앱 만들기 - 웹 서버 실행하기
1) 파이썬 버전 확인
새폴더에서 VScode를 실행시킨 후 터미널의 Git bash에서 파이썬 버전을 확인하자.
$ python --version* 검색해보니 새로운 파이썬 버전이 빠르고, 기능이 많고, 더 많은 지원을 하기 때문에 가장 최근 파이썬 3 버전을 추천한다고 한다.
2) 가상환경 설정
실습에서는 장고 설치 전 가상 환경(Virtual environment)을 만들었다. 가상 환경은 프로젝트 간의 충돌(버전 차이 등)을 방지하기 위해 사용한다.
$ python -m venv 가상환경이름
코드를 실행하면 왼편에 myvenv(가상 환경 이름)라는 폴더가 생성된 것을 확인할 수 있다. 가상 환경을 실행하는 코드는 다음과 같다.
$ . myvenv/Scripts/activate
명령 프롬프트 맨 앞에 (myvenv)라고 뜨면 가상 환경 실행 완료!
3) 장고 설치
장고를 설치하자. 코드는 다음과 같다.
$ pip install django* pip는 python install package이다. 즉 파이썬 패키지인 장고를 설치하겠다는 뜻이다.
4) 프로젝트 만들기
장고 프로젝트를 만들어보자. 실습에서는 firstproject라는 이름으로 만들었다.
$ django-admin startproject firstproject
5) 앱 만들기
firstproject 폴더로 이동해서 앱을 만들어보자. 실습에서는 firstapp이라는 이름으로 만들었다.
$ cd firstproject
$ python manage.py startapp firstapp* 앱은 프로젝트 폴더 안에서 만든다. ls 명령어를 써서 지금 어느 폴더에 있는지 수시로 확인하자.
6) 웹 서버 실행하기
$ python manage.py runserver
ctrl 누른 상태로 주소를 클릭했을 때 아래와 같이 로켓이 나타난다면 프로젝트 만들기 성공!
* 서버 종료 ctrl + c
| 목요일
목요일 세션에서는 앱 내에 html 파일을 만들어 띄우는 것을 배우고 단어 수 세기 기능을 추가했다.
실습에 앞서 장고 웹 애플리케이션의 실행 과정을 그림으로 나타내면 다음과 같다.
* 장고는 이러한 구조를 모델 뷰 템플릿(Model View Template, MVT) 아키텍처라고 한다.
실습 단계는 다음과 같다.
- 프로젝트 내 setting.py에서 앱 추가하기
- 앱 내 templates 폴더 및 html 파일 만들기
- 앱 내 views.py에서 함수 만들기
- 프로젝트 내 urls.py에서 경로 추가하기
위 단계를 따라 단어 수 세기 기능을 만들어보자.
1) 프로젝트 내 setting.py에서 앱 추가하기
setting.py의 INSTALLED_APPS 리스트에 실습에서 만든 앱(firstapp)을 추가했다.
2) 앱 내 templates폴더와 html 파일 만들기
직접 templates 폴더를 만들고 그 안에 index.html 파일을 만들었다.
텍스트를 입력을 위한 html 코드는 다음과 같다.
<body>
<h1>WORD COUNT</h1>
<form action = "">
<textarea cols="40" rows="10" name="fulltext"></textarea>
<br>
<input type="submit" value="count">
</form>
</body>
3) 앱 내 views.py에서 함수 만들기
앞서 만든 index.html 파일을 띄우기 위해 views.py 내 index 함수를 만들었다.
# views.py
from django.shortcuts import render
# Create your views here.
def index(request):
return render(request, 'index.html')
4) 프로젝트 내 urls.py에서 경로 추가하기
urls.py의 urlpatterns 리스트에 경로를 추가했다.
# urls.py
from django.contrib import admin
from django.urls import path
from firstapp import views
# firstapp 폴더에서 views를 가져온다
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.index, name="index"),
]
path의 첫번째 인자는 일치시킬 url 패턴(''로 지정하면 첫 화면에 띄워짐)을, 두 번째 인자는 패턴이 일치할 때 호출할 함수를, 세 번째 인자는 이름을 나타낸다.
* index 함수를 호출하기 위해서는 코드에서처럼 앱 폴더 내의 views를 가져와야 한다.
urls.py에서 일치시킨 url 데이터로 뷰 함수를 호출하는 건가 봐😮
이제 어떻게 html 파일을 띄우는지 배웠으니 단어 수 세기 기능을 만들어보자.
5) templates 폴더에 count.html 추가
<!-- count.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>입력한 텍스트: </h1>
<h1>단어 카운트: </h1>
</body>
</html>
6) views.py에 count 함수 추가
# views.py
from django.shortcuts import render
# Create your views here.
def index(request):
return render(request, 'index.html')
def count(request):
text = request.GET['fulltext']
word_list = text.split()
return render(request, 'count.html', {'text': text,'total': len(word_list)})- count url은 index.html의 form 태그에서 호출할 예정
- form 태그의 fulltext, 즉 textarea에서 작성한 글자를 text 변수에 저장하고 'text'(딕셔너리의 키 값)로 지정
- text를 공백을 기준으로 나눠 word_list 변수에 저장하고 그 길이를 'total'로 지정
7) urls.py에 count라는 이름으로 경로 추가
# urls.py
from django.contrib import admin
from django.urls import path
from firstapp import views
# firstapp 폴더에서 views를 가져온다
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.index, name="index"),
path('count', views.count, name="count")
]
8) index.html 파일 form 태그에 count url 추가
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>WORD COUNT</h1>
<form action = "{% url 'count' %}">
<textarea cols="40" rows="10" name="fulltext"></textarea>
<br>
<input type="submit" value="count">
</form>
</body>
</html>{% url 'name' %}과 같이 작성
* 여기서 name은 urls.py의 path에서 정해준 name
9) count.html에서 변수 값 받아오도록 수정
<!-- count.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>입력한 글자: </h1>
{{ text }}
<h1>단어 수 세기: </h1>
{{ total }}
</body>
</html>
views.py의 count 함수 반환 값을 {{text}}, {{total}}과 같이 작성
실행 결과는 다음과 같다
새로운 내용에 정신없었던 6주 차 세션도 끝끝
찾으면 찾을수록 공부할 게 엄청 많다. 다음 주도 파이팅하자🔥
참고자료
첫 번째 장고 앱 작성하기, part 1 | Django 문서 | Django
Django The web framework for perfectionists with deadlines. Overview Download Documentation News Community Code Issues About ♥ Donate
docs.djangoproject.com
Django shortcut functions | Django documentation | Django
Django The web framework for perfectionists with deadlines. Overview Download Documentation News Community Code Issues About ♥ Donate
docs.djangoproject.com
Django 소개 - Web 개발 학습하기 | MDN
Django의 첫번째 문서에서는 "Django가 뭐지?"라는 질문에 답해보고, Django 웹 프레임워크의 특별한 부분에 대해 전반적으로 살펴봅니다. 우리가 이 수업에서 자세히 다루지는 않을 고급 기능들까
developer.mozilla.org
form 태그를 from이라고 쳐놓고 에러 못 찾아서 현기증 난 사람 나야 나😥🤦♂️ 운영진님 아니었으면 오늘 집도 못 가고 카페에서 오열할 뻔했다. 코드 칠 때는 조심 또 조심,,,
'LIKELION 9th' 카테고리의 다른 글
| [멋쟁이 사자처럼] Django로 블로그 만들기2 (회원가입, 로그인, 로그아웃) (0) | 2021.05.24 |
|---|---|
| [멋쟁이 사자처럼] Django로 블로그 만들기(CRUD 기능 구현하기) (0) | 2021.05.16 |
| [멋쟁이 사자처럼] 멋사 9기 아이디에이션(feat. 예비 집사를 위한 웹사이트😺) (0) | 2021.04.30 |
| [멋쟁이 사자처럼] HTML과 CSS로 자기소개 웹페이지 만들기 (2) | 2021.04.10 |
| 멋쟁이 사자처럼 9기 합격후기 (서류/면접/포트폴리오) (7) | 2021.04.09 |
