실습 목표
사용자로부터 이름을 입력받아서 인사하는 간단한 웹 애플리케이션을 만들어보자.
시작하기에 앞서 장고 프로젝트에서 앱을 만들어야 한다.
앱(App)이란?
- 하나의 장고 프로젝트를 기능별로 나눈 것
- 유지/보수가 용이해짐
앱 만들기
$ python manage.py startapp [앱 이름]
현재 프로젝트 구조
프로젝트 폴더(myproject)
- 프로젝트 설정 폴더(myproject)
- 앱(app1)
- manage.py
단순히 앱을 생성한 것으로는 앱이 프로젝트에 연결되지 않는다.
프로젝트 설정 폴더/settings.py에 들어가서 INSTALLED_APPS 리스트에 '앱이름'을 추가해준다.
코드 작성하기
기본적인 준비는 끝났다.
장고로 만든 웹서버가 사용자의 요청을 받아 처리하는 과정은 다음과 같다.
1. 사용자(클라이언트)가 url을 통해 서버에게 요청을 보낸다.
2. 서버의 view는 model에게 요청에 필요한 데이터를 받는다.
3. view는 받은 데이터를 적절하게 처리하여 template으로 넘긴다.
4. template은 받은 정보를 사용자에게 보여준다.
우리는 이 과정을 역순으로 코드를 작성할 것이다.
즉, template(HTML) - views - url순으로 코드를 작성한다.
1. Template
먼저 사용자에게 보여질 template을 만들어야 한다.
app1폴더 아래에 templates폴더를 만들고 그 아래에 index.html을 만든다.
폴더명은 반드시 template이 아니라 templates으로 짓는다.
myproject/app1/templates/index.html
!(느낌표)를 누르고 Tab키를 누르면 HTML 기본 골격이 자동완성된다.
만약 자동완성이 되지 않는다면 우측 하단의 언어 세팅이 Djnago HTML로 되어 있을 것이다.
클릭해서 HTML로 바꿔주면 자동완성이 된다.
다음과 같이 index.html을 작성한다.
myproject/app1/templates/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>
<form action="greet"> // 데이터를 greet라는 name으로 정의된 url로 보낸다(url은 후에 처리).
<input type="text" name="name" placeholder="이름을 입력하세요.">
<input type="submit" value="제출">
</form>
</body>
</html>2. View
다음으로는 views.py에 들어가 데이터를 처리하는 코드를 작성한다.
뷰함수는 기본적으로 요청이 들어오면 render함수의 2번째 인자에 해당하는 HTML 페이지를 렌더링해준다.
3번째 인자는 템플릿 변수를 딕셔너리 형태로 변환하여 전달한다.
greet 함수는 다음과 같이 작동한다.
1. 쿼리 매개변수로 전달된 name에 해당하는 값을 user_name 변수에 담는다.
2. name이라는 템플릿 변수에 user_name의 값을 담아 greet.html로 보낸다.
myproject/app1/views.py
from django.shortcuts import render
def index(request):
return render(request, "index.html") # index.html 렌더링
def greet(request):
user_name = request.GET['name']
return render(request, "greet.html", {'name': user_name}) # greet.html 렌더링위에서 작성하지 않았던 greet.html도 마저 작성한다.
템플릿 문법은 일반 HTML문법과 다르다. view에서 전달받은 템플릿 변수는 {{ 변수명 }}과 같은 형태로 사용할 수 있다.
myproject/app1/templates/greet.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>안녕하세요 {{name}}님</h1>
</body>
</html>3. URL
마지막으로 url을 정의해줄 차례다. urls.py에서 url을 정의한다.
이때, app1의 views.py를 사용하기 위해 import해줘야 한다.
path함수의 3번째 인자로 전해주는 name은 긴 url에 이름을 지정해서 간결하게 코드를 작성할 수 있도록 도와준다.
위의 templates/index.html에서 form태그의 action 속성에서 이를 확인할 수 있다.
myproject/myproject/urls.py
from django.contrib import admin
from django.urls import path
from app1 import views # from 앱이름 import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.index, name="index"),
path('greet/', views.greet, name="greet"),
]
4. Run
프로젝트 폴더로 디렉토리를 변경한 뒤 서버를 실행시키면 된다.
$ python manage.py runserver
만약 에러가 발생했다 하더라도 걱정하지 말자.
장고는 친절하게도 기본적으로 디버깅 모드를 지원하기 때문에 에러 로그를 보고 수정하면 된다.
괴랄한 글자수의 에러 로그는 우리의 친구임을 항상 명심하자.
만약 MultiValueDictKeyError가 발생했다면 templates/index.html의 input태그에서 오타가 났을 확률이 높다. MultiValueDictKeyError는 대체로 쿼리스트링에서 발생하는 문제이기 때문이다.
다음과 같이 올바르게 수정해주자.
<input type="text" name="name" placeholder="이름을 입력하세요.">
'웹 > Django' 카테고리의 다른 글
| [Django] 장고 실습 4: MTV 패턴 (0) | 2021.02.18 |
|---|---|
| [Django] 장고 실습 3: Django 시작하기 (2) | 2021.02.18 |
| [Django] 장고 실습 1-2: Windows 기본 환경설정 (0) | 2021.02.18 |
| [Django] 장고 실습 1-1: MacOS 기본 환경설정 (2) | 2021.02.18 |
